Update styling in chat layout and components

H1B0B0 · Feb 14, 2024 · 8451c62 · 8451c62
1 parent c9ac512
commit 8451c62
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 54 deletions.
diff --git a/frontend/src/app/chat/[roomId]/ChatBody.tsx b/frontend/src/app/chat/[roomId]/ChatBody.tsx
@@ -22,7 +22,7 @@ function Page() {
   }, []);
 
   return (
-    <div className="flex relative flex-col w-full h-screen">
+    <div className="flex relative flex-col w-full h-screen space-x-2 space-y-2">
       <ChatHeader roomId={roomId} />
       <ChatBody roomId={roomId} />
       <ChatFooter roomId={roomId} />

diff --git a/frontend/src/app/chat/layout.tsx b/frontend/src/app/chat/layout.tsx
@@ -10,7 +10,7 @@ export default function RoomLayout({
   return (
     <RoomProvider>
       <SocketProvider>
-        <div className="flex h-screen">
+        <div className="flex h-screen space-x-2 space-y-2">
           <RoomSideBar />
           {children}
         </div>

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -26,12 +26,12 @@
   }
 
   .custom-scrollbar::-webkit-scrollbar {
-  width: 6px; /* Ajustez la largeur de la scrollbar */
-  border-radius: 10px; /* Ajustez le rayon de bordure de la scrollbar */
-}
+    width: 6px; /* Ajustez la largeur de la scrollbar */
+    border-radius: 10px; /* Ajustez le rayon de bordure de la scrollbar */
+  }
 
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3); /* Couleur de la scrollbar */
-  border-radius: 10px; /* Rayon de bordure de la scrollbar */
-}
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3); /* Couleur de la scrollbar */
+    border-radius: 10px; /* Rayon de bordure de la scrollbar */
+  }
 }
diff --git a/frontend/src/components/Chat/ChatBody.tsx b/frontend/src/components/Chat/ChatBody.tsx
@@ -80,7 +80,7 @@ function ChatBody({ roomId }: { roomId: string }) {
   }, [socket, roomId]);
 
   return (
-    <div className="basis-[85%] overflow-y-scroll p-5 w-full flex flex-col gap-2 custom-scrollbar">
+    <div className="basis-[85%] overflow-y-scroll p-5 w-full flex flex-col gap-2 custom-scrollbar rounded-lg">
       {messages[roomId]?.map((message: any, index: number) =>
         message.systemMessage ? (
           <div className="flex self-center" key={index}>

diff --git a/frontend/src/components/Chat/ChatFooter.tsx b/frontend/src/components/Chat/ChatFooter.tsx
@@ -6,13 +6,12 @@ import { BsImage, BsEmojiSmileFill } from "react-icons/bs";
 import { IoMdSend, IoMdCloseCircle } from "react-icons/io";
 import Picker from "emoji-picker-react";
 import Toast from "../shared/Toast";
-import 'react-toastify/dist/ReactToastify.css';
-import { toast, ToastContainer } from 'react-toastify';
-import { v4 as uuidv4 } from 'uuid';
+import "react-toastify/dist/ReactToastify.css";
+import { toast, ToastContainer } from "react-toastify";
+import { v4 as uuidv4 } from "uuid";
 import { useRoom } from "@/contexts/RoomContext";
 import { useRouter } from "next/navigation";
 
-
 function ChatFooter({ roomId }: { roomId: string }) {
   const [showListPopup, setShowListPopup] = useState(false);
   const [roomList, setRoomList] = useState([]);
@@ -41,7 +40,7 @@ function ChatFooter({ roomId }: { roomId: string }) {
         toast.info(`Rooms: ${message}`);
       });
 
-      socket.on('room_created', (room) => {
+      socket.on("room_created", (room) => {
         toast.success(`Room created: ${room.name}`);
       });
 
@@ -69,26 +68,27 @@ function ChatFooter({ roomId }: { roomId: string }) {
     if (socket) {
       socket.on("room_joined", (id, username) => {
         toast.success(`Joined room: ${id.roomName}`);
-        setMyRooms((prevRooms) => [...prevRooms, { id: id.roomId, title: id.roomName }]);
+        setMyRooms((prevRooms) => [
+          ...prevRooms,
+          { id: id.roomId, title: id.roomName },
+        ]);
       });
-  
+
       socket.on("join_error", (errorMessage) => {
         toast.error(errorMessage);
       });
-  
+
       return () => {
         socket.off("room_joined");
         socket.off("join_error");
       };
     }
   }, [socket]);
 
-
   function handleCommand(commandString: string, socket: any) {
     const parts = commandString.substr(1).split(" ");
     const command = parts[0].toLowerCase();
     const args = parts.slice(1);
-
 
     switch (command) {
       case "nick":
@@ -119,39 +119,39 @@ function ChatFooter({ roomId }: { roomId: string }) {
           toast.info(`Creating room: ${roomName}`);
           socket?.emit("join_room", newRoomId, roomName);
         }
-      break;
-    case "delete":
+        break;
+      case "delete":
         socket?.emit("delete_room", roomId);
         toast.info("Deleting room...");
-      break;
+        break;
       case "join":
-      if (args.length === 0) {
-        toast.error("Please specify a room ID to join.");
-      } else {
-        const roomIdToJoin = args[0];
+        if (args.length === 0) {
+          toast.error("Please specify a room ID to join.");
+        } else {
+          const roomIdToJoin = args[0];
+          const username = localStorage.getItem("name");
+          socket.emit("join", roomIdToJoin, username);
+        }
+        break;
+      case "quit":
         const username = localStorage.getItem("name");
-        socket.emit("join", roomIdToJoin, username);
-      }
-      break;
-    case "quit":
-      const username = localStorage.getItem("name");
-      socket?.emit("leave_room", username, roomId);
-      setMyRooms(myRooms.filter((room) => room.id !== roomId));
-      router.push("/chat/1");
-      break;
-    case "users":
-      socket?.emit("users");
-      break;
-    case "msg":
-      const msgParam = args.join(" ");
-      socket?.emit("msg", msgParam);
-      break;
-    case 'clear':
-      socket.emit('clear' , roomId);
-      break;
-    default:
-      console.error("Unknown command.");
-      break;
+        socket?.emit("leave_room", username, roomId);
+        setMyRooms(myRooms.filter((room) => room.id !== roomId));
+        router.push("/chat/1");
+        break;
+      case "users":
+        socket?.emit("users");
+        break;
+      case "msg":
+        const msgParam = args.join(" ");
+        socket?.emit("msg", msgParam);
+        break;
+      case "clear":
+        socket.emit("clear", roomId);
+        break;
+      default:
+        console.error("Unknown command.");
+        break;
     }
   }
 
@@ -225,7 +225,7 @@ function ChatFooter({ roomId }: { roomId: string }) {
           <img src={image} className="w-full h-full object-contain" />
         </div>
       )}
-      <div className="basis-[8%] p-2 flex items-center bg-neutral-800 gap-4">
+      <div className="basis-[8%] p-2 flex items-center bg-neutral-800 gap-4 rounded-lg">
         {message.length === 0 && (
           <>
             <AiFillPlusCircle
@@ -294,4 +294,4 @@ function ChatFooter({ roomId }: { roomId: string }) {
   );
 }
 
-export default ChatFooter;
+export default ChatFooter;
diff --git a/frontend/src/components/Chat/ChatHeader.tsx b/frontend/src/components/Chat/ChatHeader.tsx
@@ -26,7 +26,7 @@ function ChatHeader({ roomId }: { roomId: string }) {
   }, [roomId]);
 
   return (
-    <div className="basis-[7%]  flex justify-between items-center p-3 font-medium bg-neutral-800 ">
+    <div className="basis-[7%]  flex justify-between items-center p-3 font-medium bg-neutral-800 rounded-lg">
       <p className="text-xl dark:text-white">{room?.title}</p>
       <button type="submit" className="btn bg-red-600 hover:bg-red-800">
         Copy Room ID

diff --git a/frontend/src/components/Room/RoomCard.tsx b/frontend/src/components/Room/RoomCard.tsx
@@ -34,7 +34,7 @@ function RoomCard({ room, users }: { room: IRoom; users: string[] }) {
       href={`chat/${room.id}`}
       className={`flex group relative gap-3 items-center p-2 flex-col sm:flex-row ${
         room.id === roomId ? "bg-gray- dark:bg-gray-700" : ""
-      }`}
+      } rounded-lg`}
     >
       <div>
         {room.id === "1" ? (

diff --git a/frontend/src/components/Room/RoomSideBar.tsx b/frontend/src/components/Room/RoomSideBar.tsx
@@ -34,7 +34,7 @@ function RoomSideBar() {
   };
 
   return (
-    <div className="overflow-y-scroll custom-scrollbar w-20 h-screen bg-neutral-800 sm:w-1/4">
+    <div className="overflow-y-scroll custom-scrollbar w-20 h-screen bg-neutral-800 sm:w-1/4 rounded-lg">
       <div className="flex justify-center">
         <button
           type="submit"