Update styles and button text size in ChatHeader and RoomSideBar comp…

…onents
H1B0B0 · Feb 16, 2024 · 6eda91b · 6eda91b
1 parent bf69b4b
commit 6eda91b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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%)",