Merge pull request #17 from phillip-che/phillip-branch

client/app/page.module.css

@@ -1,3 +0,0 @@
-.username-container {
-  display: flex;
-}

client/components/ChatContainer.tsx

@@ -12,7 +12,7 @@ const ChatContainer = () => {
   const { setUsername, messages, setMessages } = useSocket();
 
   useEffect(() => {
-    setUsername(localStorage.getItem("username"));
+    setUsername(sessionStorage.getItem("username"));
     setMessages([...messages]);
   }, []);
 

client/components/ChatRoomInfo.tsx

@@ -1,5 +1,6 @@
 import "../styles/ChatRoomInfo.css"
 
+import LeaveChatButton from "./LeaveChatButton";
 import { useSocket } from "@/context/socket.context"
 
 const ChatRoomInfo = () => {
@@ -20,6 +21,7 @@ const ChatRoomInfo = () => {
             <div className="user-list">
                 {usersConnected?.map((user) => (<p className="user-connected">• {user}</p>))}
             </div>
+            <LeaveChatButton />
         </div>
     );
 }

client/components/HomeContainer.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import "../styles/HomeContainer.css"
 import LoginFields from '@/components/LoginFields';
 import ChatContainer from '@/components/ChatContainer';
 import { useSocket } from '@/context/socket.context';
@@ -8,7 +9,7 @@ const HomeContainer = () => {
   const { roomID } = useSocket();
 
   return (
-    <div>
+    <div className="home-container">
       {!roomID ? 
         <div className="login">
           <h2>Start Chatting...</h2>

client/components/LeaveChatButton.tsx

@@ -0,0 +1,22 @@
+import "../styles/LeaveChatButton.css"
+import Button from '@mui/material/Button';
+import EVENTS from '@/config/events';
+import { useSocket } from "@/context/socket.context"
+
+const LeaveChatButton = () => {
+    const { socket, roomID } = useSocket();
+
+    const handleLeaveChatClick = () => {
+        socket.emit(EVENTS.CLIENT.LEAVE_ROOM, {roomID});
+    }
+
+    return (
+        <div className="leave-room-button bob-on-hover">
+            <Button color='inherit' onClick={handleLeaveChatClick}>
+                Leave Room
+            </Button>
+        </div>
+    )
+}
+
+export default LeaveChatButton

client/components/LoginFields.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import "../styles/LoginFields.css"
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
@@ -23,24 +24,24 @@ const LoginFields = () => {
 
   const handleJoinRoomClick = () => {
     setUsername(usernameInput);
-    localStorage.setItem("username", usernameInput);
+    sessionStorage.setItem("username", usernameInput);
     socket.emit(EVENTS.CLIENT.JOIN_ROOM, {roomID: roomIDInput, username: usernameInput, socketID: socket.id});
   };
 
   const handleCreateRoomClick = () => {
     setUsername(usernameInput);
-    localStorage.setItem("username", usernameInput);
+    sessionStorage.setItem("username", usernameInput);
     socket.emit(EVENTS.CLIENT.CREATE_ROOM, {username: username});
   };
 
   useEffect(() => {
-    setUsername(localStorage.getItem("username") || "");
-    setUsernameInput(localStorage.getItem("username") || "");
+    setUsername(sessionStorage.getItem("username") || "");
+    setUsernameInput(sessionStorage.getItem("username") || "");
     setRoomIDInput(roomID || "");
   }, []);
 
   return (
-    <div>
+    <div className="login-fields">
       <Box
         component="form"
         sx={{
@@ -84,8 +85,7 @@ const LoginFields = () => {
       noValidate
       autoComplete="off"
       >
-      <div className="room-container">
-
+      <div className="room-input">
         <TextField
           sx={{ 
             input: { color: "#F7F7F8" }, 
@@ -112,7 +112,8 @@ const LoginFields = () => {
           value={roomIDInput}
           inputProps={{ maxLength: 10 }}
         />
-
+      </div>  
+      <div>
         <Button 
         sx={{
           "&.Mui-disabled": {
@@ -122,7 +123,7 @@ const LoginFields = () => {
         }}
         style={{
           backgroundColor: "#797272",
-          width: "200px"
+          width: "225px"
         }}
         variant="contained"
         disabled={(!usernameInput || !roomIDInput)}
@@ -131,7 +132,7 @@ const LoginFields = () => {
           Join Room
         </Button>
 
-        <p>OR</p>
+        <h3>OR</h3>
 
         <Button 
         sx={{
@@ -142,15 +143,15 @@ const LoginFields = () => {
         }}
         style={{
           backgroundColor: "#797272",
-          width: "200px"
+          width: "225px"
         }}
         variant="contained" 
         disabled={!usernameInput}
         onClick={handleCreateRoomClick}
         >
           Create Room
         </Button>
-      </div>  
+        </div>
     </Box>
   </div>
   );

client/components/NavBar.tsx

@@ -6,17 +6,10 @@ import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
-import EVENTS from '@/config/events';
-import { useSocket } from "@/context/socket.context"
-
+import Image from 'next/image';
+import Logo from '../assets/images/logo.jpg'
 
 const NavBar = () => {
-  const { socket, roomID } = useSocket();
-
-  const handleLeaveChatClick = () => {
-    socket.emit(EVENTS.CLIENT.LEAVE_ROOM, {roomID});
-  }
 
   return (
     <Box color={"black"} sx={{ flexGrow: 1 }}>
@@ -30,14 +23,10 @@ const NavBar = () => {
             sx={{ mr: 0 }}
           >
           </IconButton>
+          <Image src={Logo} alt="" width={64} height={40} />
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             CypherChat
           </Typography>
-          {roomID ?
-            <Button color='inherit' onClick={handleLeaveChatClick}>
-              Leave Chat
-            </Button>
-          : null}
         </Toolbar>
       </AppBar>
     </Box>

client/components/UploadButton.tsx

@@ -31,13 +31,15 @@ const UploadButton = () => {
         if(fileRef.current) {
             setMessages([...messages, {type: "file", username: username, body: fileRef.current, timestamp: timestamp}]);
             socket.emit(EVENTS.CLIENT.SEND_MESSAGE, {type: "file", roomID: roomID, username: username, body: fileRef.current, timestamp: timestamp});    
+            fileRef.current = null;
         }
     };
 
     return (
         <div className="file-upload">
         <label 
             onChange={handleFile} 
+            onClick={(e : any) => e.target.value = null}
             htmlFor="formId"
         >
             <input name="" type="file" id="formId" hidden />

client/styles/ChatRoomInfo.css

@@ -9,6 +9,7 @@
     gap: 10px;
     overflow: auto;
     overflow-x: hidden;
+    position: relative;
 }
 
 .chat-room-header {

client/styles/HomeContainer.css

@@ -0,0 +1,9 @@
+h2 {
+    text-align: center;
+}
+
+.home-container {
+    padding: 10rem;
+    box-shadow: 0 1px 1px 0 #3E3E3D, 0 6px 20px 0 #3E3E3D;
+    border-radius: 10px;
+}

client/styles/LeaveChatButton.css

@@ -0,0 +1,61 @@
+.leave-room-button {
+    display: flex;
+    position: absolute;
+    bottom: 0px;
+    margin-left: 30px;
+}
+
+.leave-room-button:hover {
+    border-radius: 5px;
+    box-shadow: 0 1px 1px 0 #3E3E3D, 0 6px 20px 0 #3E3E3D;
+}
+
+@-webkit-keyframes bob-on-hover {
+    0% {
+      -webkit-transform: translateY(-8px);
+      transform: translateY(-8px);
+    }
+    50% {
+      -webkit-transform: translateY(-4px);
+      transform: translateY(-4px);
+    }
+    100% {
+      -webkit-transform: translateY(-8px);
+      transform: translateY(-8px);
+    }
+  }
+  @-webkit-keyframes bob-on-hover-float {
+    100% {
+      -webkit-transform: translateY(-8px);
+      transform: translateY(-8px);
+    }
+  }
+  @keyframes bob-on-hover-float {
+    100% {
+      -webkit-transform: translateY(-8px);
+      transform: translateY(-8px);
+    }
+  }
+  .bob-on-hover {
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-transform: perspective(1px) translateZ(0);
+    transform: perspective(1px) translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  }
+  .bob-on-hover:hover, .bob-on-hover:focus, .bob-on-hover:active {
+    -webkit-animation-name: bob-on-hover-float, bob-on-hover;
+    animation-name: bob-on-hover-float, bob-on-hover;
+    -webkit-animation-duration: .3s, 1.5s;
+    animation-duration: .3s, 1.5s;
+    -webkit-animation-delay: 0s, .3s;
+    animation-delay: 0s, .3s;
+    -webkit-animation-timing-function: ease-out, ease-in-out;
+    animation-timing-function: ease-out, ease-in-out;
+    -webkit-animation-iteration-count: 1, infinite;
+    animation-iteration-count: 1, infinite;
+    -webkit-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-direction: normal, alternate;
+    animation-direction: normal, alternate;
+  }

client/styles/LoginFields.css

@@ -0,0 +1,8 @@
+.login-fields h3 {
+    text-align: center;
+    margin: 5px auto;
+}
+
+.room-buttons {
+    margin-top: 10px;
+}