Merge pull request #14 from Callhub-Connect/end-session-lucie

Welcome, GenerateSession components

src/App.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import EnterCode from './components/EnterCode';
 import EndSession from './components/EndSession';
+import GenerateSession from './components/GenerateSession';
+import Welcome from './components/Welcome';
 import Chat from './components/Chat';
 import PdfFileManager from './components/PdfManager';
 import { createGlobalStyle } from 'styled-components';
@@ -25,6 +27,16 @@ function App() {
                 <Route
                     exact
                     path="/"
+                    element={<Welcome />}
+                />
+                <Route
+                    exact
+                    path="/generate"
+                    element={<GenerateSession />}
+                />
+                <Route
+                    exact
+                    path="/enter"
                     element={<EnterCode />}
                 />
                 <Route

src/components/Chat.jsx

@@ -126,8 +126,8 @@ const Message = styled.div`
 const MessageBubble = styled.div`
     align-self: flex-end;
     background-color: #ffffff;
-    padding: 8px;
-    border-radius: 10px;
+    padding: 10px 14px;
+    border-radius: 30px 30px 0px 30px;
     margin-top: 10px;
     margin-right: 10px;
     max-width: 50%;

src/components/EndSession.jsx

@@ -39,32 +39,83 @@ const Text = styled.h3`
     position: relative;
 `;
 
+// const Button = styled.button`
+//     height: 55px;
+//     width: 60%;
+//     background-color: #0b9f43;
+//     border-radius: 30px 30px 30px 30px;
+//     position: relative;
+//     color: white;
+//     font-family: 'League Spartan', sans-serif;
+//     font-size: x-large;
+//     border: 0px solid;
+//     cursor: pointer;
+//     &:hover {
+//         background-color: #076a2d;
+//     }
+// `
+
+const InputSection = styled.div`
+    height: 70px;
+    width: 724px;
+    display: flex;
+    flex-direction: row;
+
+    @media (max-width: 768px) {
+        /* Add styles for smaller screens here */
+        /* For example, reduce the width or change the flex-direction */
+        width: 90%;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+    }
+`;
+
+const Input = styled.input`
+    border-radius: 30px 0px 0px 30px;
+    border: 0px solid;
+    width: 80%;
+    height: 38px;
+    padding: 8px 24px;
+    line-height: 20px;
+    font-size: x-large;
+    font-family: 'League Spartan', sans-serif;
+    ::placeholder {
+        color: #5e5e5ec4;
+        font-size: 18px;
+    }
+`;
+
 const Button = styled.button`
     height: 55px;
-    width: 60%;
+    width: 50%;
+    font-family: 'League Spartan', sans-serif;
     background-color: #0b9f43;
-    border-radius: 30px 30px 30px 30px;
+    border-radius: 0px 30px 30px 0px;
     position: relative;
     color: white;
-    font-family: 'League Spartan', sans-serif;
     font-size: x-large;
     border: 0px solid;
     cursor: pointer;
     &:hover {
         background-color: #076a2d;
     }
-`
+`;
 
 function EndSession() {
     return(
         <Container>
             <Logo src="./img/callhubLogo-cropped.svg" alt="Callhub Logo" />
             <CodeContainer>
                 <Text>Your session has now ended.</Text>
-                <Button>Get Email Transcript</Button>
+                <InputSection>
+                    <Input placeholder="Email Address" />
+                    <Button>Get Email Transcript</Button>
+                </InputSection>
+                {/* <Button>Get Email Transcript</Button> */}
             </CodeContainer>
         </Container>
     );
 }
 
-export default EndSession
+export default EndSession;

src/components/EnterCode.jsx

@@ -141,13 +141,20 @@ function EnterCode() {
         navigate(path);
     }
 
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter") {
+          routeChange();
+        }
+      };
+
     return (
         <Container>
             <Logo src="./img/callhubLogo-cropped.svg" alt="Callhub Logo" />
             <CodeContainer>
                 <Text>Enter your session code</Text>
                 <InputSection>
-                    <Input placeholder="ex. abcd123" />
+                    <Input placeholder="ex. abcd123" 
+                        onKeyPress={handleKeyPress}/>
                     <Button onClick={routeChange}>Connect</Button>
                 </InputSection>
             </CodeContainer>

src/components/GenerateSession.jsx

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import { useNavigate } from "react-router-dom";
+
+const Container = styled.div`
+    background-image: linear-gradient(to bottom right, #0a8e3d, #9fdb3f);
+    background-size: contain;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+`;
+
+const Logo = styled.img`
+    height: 270px;
+    width: 550px;
+`;
+
+const CodeContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    padding: 30px 0px 30px 30px;
+    height: 200px;
+    width: 850px;
+    background-color: #f8f8f8b2;
+    border-radius: 50px;
+    box-shadow: 0px 4px 10px #00000040;
+`;
+
+const Text = styled.h3`
+    height: 25px;
+    width: 724px;
+    color: #000000;
+    font-size: 40px;
+    font-weight: 400;
+    line-height: normal;
+    text-align: center;
+    position: relative;
+`;
+
+const Button = styled.button`
+    height: 55px;
+    width: 60%;
+    background-color: #0b9f43;
+    border-radius: 30px 30px 30px 30px;
+    position: relative;
+    color: white;
+    font-family: 'League Spartan', sans-serif;
+    font-size: x-large;
+    border: 0px solid;
+    cursor: pointer;
+    &:hover {
+        background-color: #076a2d;
+    }
+`
+
+function GenerateSession() {
+    let navigate = useNavigate(); 
+
+    // this is just for demo purposes, we're going to need to integrate this with specific session
+    const routeChange = () =>{ 
+        let path = `/session`; 
+        navigate(path);
+    }
+
+    return(
+        <Container>
+            <Logo src="./img/callhubLogo-cropped.svg" alt="Callhub Logo" />
+            <CodeContainer>
+                <Text>Employee Side</Text>
+                <Button onClick={routeChange}>Generate Session</Button>
+            </CodeContainer>
+        </Container>
+    );
+}
+
+export default GenerateSession;

src/components/Welcome.jsx

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import { useNavigate } from "react-router-dom";
+
+const Container = styled.div`
+    background-image: linear-gradient(to bottom right, #0a8e3d, #9fdb3f);
+    background-size: contain;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+`;
+
+const ButtonContainer = styled.div`
+    display: flex;
+    justify-content: center;  
+    align-items: center;
+    width: 100%;
+`;
+
+const Logo = styled.img`
+    height: 270px;
+    width: 550px;
+`;
+
+const Button = styled.button`
+    height: 55px;
+    width: 20%;
+    background-color: #f8f8f8b2;
+    border-radius: 30px 30px 30px 30px;
+    position: relative;
+    color: black;
+    font-family: 'League Spartan', sans-serif;
+    font-size: x-large;
+    border: 0px solid;
+    cursor: pointer;
+    &:hover {
+        background-color: white;
+    }
+    &:first-child {
+        margin-right: 10px; // Add right margin to the first button
+    }
+    &:last-child {
+        margin-left: 10px; // Add left margin to the last button
+    }
+`
+
+function Welcome() {
+    let navigate = useNavigate(); 
+
+    const routeChangeCustomer = () =>{ 
+        let path = `/enter`; 
+        navigate(path);
+    }
+
+    const routeChangeEmployee = () =>{ 
+        let path = `/generate`; 
+        navigate(path);
+    }
+
+    return(
+        <Container>
+            <Logo src="./img/callhubLogo-cropped.svg" alt="Callhub Logo" />
+            <ButtonContainer>
+                <Button onClick={routeChangeCustomer}>Customer</Button>
+                <Button onClick={routeChangeEmployee}>Employee</Button>
+            </ButtonContainer >
+        </Container>
+    );
+}
+
+export default Welcome;