From bf69b4b3b323b5281809ba93506b8bbbe7ca4a94 Mon Sep 17 00:00:00 2001
From: etienne <etienne.mentrel@scafe.io>
Date: Fri, 16 Feb 2024 11:15:51 +0100
Subject: [PATCH 1/2] Update styling in page.tsx, LoginForm.tsx, and Navbar.tsx

---
 frontend/src/app/page.tsx                  |  2 +-
 frontend/src/components/Home/LoginForm.tsx |  6 +++---
 frontend/src/components/Home/Navbar.tsx    | 12 ++++++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index aa8ba10..b597b59 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -13,7 +13,7 @@ export default function Home() {
         <div className="flex px-5 pt-16 pb-12 mb-12 lg:px-36 min-h-[calc(100vh-180px)]">
           <div className="flex flex-col gap-8 w-full xl:pr-32 lg:w-1/2">
             <div className="flex flex-col gap-0">
-              <p className=" text-[72px] lg:mt-40  leading-[70px] lg:text-[90px] bg-gradient-to-r from-red-600 via-red-200 to-emerald- 4 inline-block text-transparent bg-clip-text">
+              <p className=" text-[72px] lg:mt-40  leading-[70px] lg:text-[90px] bg-gradient-to-r dark:from-red-600 dark:via-red-200 to-emerald- 4 inline-block text-transparent bg-clip-text from-red-800 via-red-700">
                 Kurama-chat
                 <br /> anytime, anywhere
               </p>
diff --git a/frontend/src/components/Home/LoginForm.tsx b/frontend/src/components/Home/LoginForm.tsx
index 608c31b..7c1877f 100644
--- a/frontend/src/components/Home/LoginForm.tsx
+++ b/frontend/src/components/Home/LoginForm.tsx
@@ -55,7 +55,7 @@ function LoginForm() {
         <div className="flex  gap-5 items-center">
           <button
             type="submit"
-            className="flex hover:bg-red-800 justify-center items-center w-40 btn bg-red-500 "
+            className="flex hover:bg-red-800 justify-center items-center py-2 w-full sm:w-40 h-auto btn bg-red-500 "
           >
             {isLoading ? (
               <ClipLoader color="white" size={20} />
@@ -64,12 +64,12 @@ function LoginForm() {
             )}
           </button>
           <Link legacyBehavior href="signin">
-            <a className="flex  hover:bg-red-800 justify-center items-center w-40 btn bg-red-500 ">
+            <a className="flex hover:bg-red-800 justify-center items-center py-2 w-full sm:w-40 h-auto btn bg-red-500 ">
               Sign In
             </a>
           </Link>
           <Link legacyBehavior href="signup">
-            <a className="flex hover:bg-red-800 justify-center items-center w-40 btn bg-red-500 ">
+            <a className="flex hover:bg-red-800 justify-center items-center py-2 w-full sm:w-40 h-auto btn bg-red-500 ">
               Sign Up
             </a>
           </Link>
diff --git a/frontend/src/components/Home/Navbar.tsx b/frontend/src/components/Home/Navbar.tsx
index 00f04e5..72c3605 100644
--- a/frontend/src/components/Home/Navbar.tsx
+++ b/frontend/src/components/Home/Navbar.tsx
@@ -30,12 +30,14 @@ function Navbar() {
                 <>
                   <Link
                     id={`${label}${index}`}
-                    className="flex flex-col items-center"
+                    className="flex flex-col items-center dark:text-white"
                     href={link}
                     key={index}
                     target={externalPage ? "_blank" : "_self"}
                   >
-                    {React.createElement(icon, { className: "w-10 h-10" })}
+                    {React.createElement(icon, {
+                      className: "w-10 h-10 dark:text-white",
+                    })}{" "}
                     {label}
                   </Link>
                   {title && (
@@ -81,12 +83,14 @@ function Navbar() {
                   {icon ? (
                     <Link
                       id={`${label}${index}`}
-                      className="flex gap-5 items-center justify-center"
+                      className="flex gap-5 items-center justify-center dark:text-white"
                       href={link}
                       key={index}
                       target={externalPage ? "_blank" : "_self"}
                     >
-                      {React.createElement(icon, { className: "w-6 h-6" })}
+                      {React.createElement(icon, {
+                        className: "w-6 h-6 dark:text-white",
+                      })}{" "}
                       <span className="pt-1">{label}</span>
                     </Link>
                   ) : (

From 6eda91bfddfaec8b249972f3ad0e96f6b087fe50 Mon Sep 17 00:00:00 2001
From: etienne <etienne.mentrel@scafe.io>
Date: Fri, 16 Feb 2024 11:51:15 +0100
Subject: [PATCH 2/2] Update styles and button text size in ChatHeader and
 RoomSideBar components

---
 frontend/src/components/Chat/ChatHeader.tsx  | 5 ++++-
 frontend/src/components/Room/RoomSideBar.tsx | 8 ++++----
 frontend/tailwind.config.js                  | 3 +++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Chat/ChatHeader.tsx b/frontend/src/components/Chat/ChatHeader.tsx
index 1217e7f..399a1a2 100644
--- a/frontend/src/components/Chat/ChatHeader.tsx
+++ b/frontend/src/components/Chat/ChatHeader.tsx
@@ -28,7 +28,10 @@ function ChatHeader({ roomId }: { roomId: string }) {
   return (
     <div className="basis-[7%]  flex justify-between items-center p-3 font-medium dark:bg-neutral-800 bg-slate-200 rounded-lg">
       <p className="text-xl dark:text-white">{room?.title}</p>
-      <button type="submit" className="btn bg-red-600 hover:bg-red-800">
+      <button
+        type="submit"
+        className="btn bg-red-600 hover:bg-red-800 text-sm sm:text-base"
+      >
         Copy Room ID
       </button>
       <Popup
diff --git a/frontend/src/components/Room/RoomSideBar.tsx b/frontend/src/components/Room/RoomSideBar.tsx
index d7bd648..6ffc42a 100644
--- a/frontend/src/components/Room/RoomSideBar.tsx
+++ b/frontend/src/components/Room/RoomSideBar.tsx
@@ -37,18 +37,18 @@ function RoomSideBar() {
   };
 
   return (
-    <div className="overflow-y-scroll custom-scrollbar w-20 h-screen dark:bg-neutral-800 bg-slate-200  sm:w-1/4 rounded-lg">
+    <div className="overflow-y-scroll custom-scrollbar w-full sm:w-20 h-screen dark:bg-neutral-800 bg-slate-200 md:w-1/4 rounded-lg">
       <div className="flex justify-center">
         <button
           type="submit"
-          className="px-4 pt-1 h-10 text-lg font-semibold text-white rounded-full mt-5 bg-red-600 hover:bg-red-500 transition duration-300  "
+          className="px-4 pt-1 h-10 text-sm sm:text-lg font-semibold text-white rounded-full mt-5 bg-red-600 hover:bg-red-500 transition duration-300"
           onClick={logout}
         >
           Leave
         </button>
       </div>
       <ThemeSwitcher />
-      <p className="flex flex-col px-2 py-5 sm:px-5 h-[56px] text-xl sm:text-2xl font-semibold dark:text-white">
+      <p className="flex flex-row items-center px-2 py-5 sm:px-15 h-[56px] text-sm sm:text-lg md:text-xl lg:text-2xl font-semibold dark:text-white">
         Rooms 🌐
       </p>
       {rooms.map((room: IRoom, index) => {
@@ -58,7 +58,7 @@ function RoomSideBar() {
           </div>
         );
       })}
-      <p className="flex flex-col px-2 pt-3 text-lg font-semibold sm:text-xl sm:px-5 dark:text-white">
+      <p className="flex flex-row items-center px-2 py-5 sm:px-15 h-[56px] text-sm sm:text-lg md:text-xl lg:text-2xl font-semibold dark:text-white">
         Rooms 🔒
       </p>
       <div className="py-1">
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index c65e013..86a2dbc 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -13,6 +13,9 @@ module.exports = {
         secondary: "rgb(139 132 245)",
         "custom-gray": "#222222",
       },
+      maxWidth: {
+        "1/5": "20%",
+      },
       backgroundImage: {
         gradient:
           "linear-gradient(90deg, #6C63FF 0%, #C100D4 50%, #82ECEE 100%)",