Update CSS for scrollbar, chat body, chat footer, and chat header.

H1B0B0 · Feb 13, 2024 · 7232556 · 7232556
1 parent 6910e04
commit 7232556
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -24,4 +24,14 @@
   body.dark {
     background-color: #222222; /* same as bg-gray-800 */
   }
+
+  .custom-scrollbar::-webkit-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 */
+}
 }
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">
+    <div className="basis-[85%] overflow-y-scroll p-5 w-full flex flex-col gap-2 custom-scrollbar">
       {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
@@ -186,11 +186,11 @@ function ChatFooter({ roomId }: { roomId: string }) {
           <>
             <AiFillPlusCircle
               size={20}
-              className="cursor-pointer text-primary"
+              className="cursor-pointer text-red-600"
             />
             <BsImage
               size={20}
-              className="cursor-pointer text-primary"
+              className="cursor-pointer text-red-600"
               onClick={() => fileRef.current.click()}
             />
             <input
@@ -214,7 +214,7 @@ function ChatFooter({ roomId }: { roomId: string }) {
           </div>
           <BsEmojiSmileFill
             size={20}
-            className="cursor-pointer absolute top-[6px] right-2 text-primary"
+            className="cursor-pointer absolute top-[6px] right-2 text-red-600"
             onClick={() => setShowEmojiPicker(!showEmojiPicker)}
           />
 
@@ -235,8 +235,8 @@ function ChatFooter({ roomId }: { roomId: string }) {
         {message.length === 0 && !image ? (
           <AiFillLike
             size={28}
-            className="cursor-pointer text-primary"
-            onClick={(e) => handleSendMessage(e, "👍")}
+            className="cursor-pointer text-red-600"
+            onClick={(e) => handleSendMessage(e, "👍 <Bon toutou>")}
           />
         ) : (
           <IoMdSend

diff --git a/frontend/src/components/Chat/ChatHeader.tsx b/frontend/src/components/Chat/ChatHeader.tsx
@@ -26,9 +26,9 @@ function ChatHeader({ roomId }: { roomId: string }) {
   }, [roomId]);
 
   return (
-    <div className="basis-[7%] border-b-2 flex items-center justify-between p-3 font-medium">
+    <div className="basis-[7%]  flex  justify-center items-center p-3 font-medium bg-zinc-700">
       <p className="text-xl dark:text-white">{room?.title}</p>
-      <button type="submit" className="btn">
+      <button type="submit" className="btn bg-red-600 hover:bg-red-800">
         Copy Room ID
       </button>
       <Popup