Settings sidebar UI updates (#2416)

settings sidebar ui updates

frontend/src/components/Preloader.jsx

@@ -10,7 +10,7 @@ export function FullScreenLoader() {
   return (
     <div
       id="preloader"
-      className="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-sidebar"
+      className="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-theme-bg-primary"
     >
       <div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
     </div>

frontend/src/components/SettingsSidebar/MenuOption/index.jsx

@@ -66,8 +66,8 @@ export default function MenuOption({
           rounded-[6px]
           ${
             isActive
-              ? "bg-white/5 font-medium border-outline"
+              ? "bg-theme-sidebar-subitem-selected font-medium border-outline"
-              : "hover:bg-white/5"
+              : "hover:bg-theme-sidebar-subitem-hover"
           }
         `}
       >

frontend/src/components/SettingsSidebar/index.jsx

@@ -147,7 +147,7 @@ export default function SettingsSidebar() {
         </Link>
         <div
           ref={sidebarRef}
-          className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px] h-[calc(100%-76px)]"
+          className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border min-w-[250px] p-[10px] h-[calc(100%-76px)]"
         >
           <div className="w-full h-full flex flex-col overflow-x-hidden items-between min-w-[235px]">
             <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-[4px] mb-0 ml-2">
@@ -171,7 +171,7 @@ export default function SettingsSidebar() {
                 </div>
               </div>
             </div>
-            <div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
+            <div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
               <Footer />
             </div>
           </div>

frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx

@@ -62,7 +62,7 @@ export default function ThreadItem({
         style={{ width: THREAD_CALLOUT_DETAIL_WIDTH + 8 }}
         className="h-full"
       />
-      <div className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? 'bg-white/5' : 'hover:bg-white/5'} rounded-[4px]`}>
+      <div className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? 'bg-theme-sidebar-subitem-selected' : 'hover:bg-theme-sidebar-subitem-hover'} rounded-[4px]`}>
         {thread.deleted ? (
           <div className="w-full flex justify-between">
             <div className="w-full pl-2 py-1">

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

@@ -33,12 +33,13 @@ export default function ActiveWorkspaces() {
   if (loading) {
     return (
       <Skeleton.default
-        height={36}
+        height={40}
         width="100%"
-        count={3}
+        count={5}
-        baseColor="#292524"
+        baseColor="var(--theme-sidebar-item-default)"
-        highlightColor="#4c4948"
+        highlightColor="var(--theme-sidebar-item-hover)"
         enableAnimation={true}
+        className="my-1"
       />
     );
   }

frontend/src/index.css

@@ -5,7 +5,7 @@
 :root {
   /* Default theme */
   --theme-bg-primary: #0e0f0f;
-  --theme-bg-secondary: #1a1b1e;
+  --theme-bg-secondary: rgba(255, 255, 255, 0.05);
   --theme-bg-sidebar: #0e0f0f;
   --theme-bg-container: #0e0f0f;
   --theme-text-primary: #ffffff;
@@ -13,6 +13,9 @@
   --theme-sidebar-item-default: rgba(255, 255, 255, 0.1);
   --theme-sidebar-item-selected: rgba(255, 255, 255, 0.3);
   --theme-sidebar-item-hover: #3f3f42;
+  --theme-sidebar-subitem-default: rgba(255, 255, 255, 0.05);
+  --theme-sidebar-subitem-selected: rgba(255, 255, 255, 0.05);
+  --theme-sidebar-subitem-hover: rgba(255, 255, 255, 0.05);
   --theme-sidebar-footer-icon: rgba(255, 255, 255, 0.1);
   --theme-sidebar-footer-icon-hover: rgba(255, 255, 255, 0.2);
   --theme-sidebar-border: rgba(255, 255, 255, 0.1);
@@ -28,6 +31,9 @@
   --theme-sidebar-item-default: rgba(0, 0, 0, 0.1);
   --theme-sidebar-item-selected: rgba(0, 0, 0, 0.2);
   --theme-sidebar-item-hover: #e2e8f0;
+  --theme-sidebar-subitem-default: rgba(0, 0, 0, 0.1);
+  --theme-sidebar-subitem-selected: rgba(0, 0, 0, 0.05);
+  --theme-sidebar-subitem-hover: rgba(0, 0, 0, 0.05);
   --theme-sidebar-footer-icon: rgba(0, 0, 0, 0.3);
   --theme-sidebar-footer-icon-hover: rgba(0, 0, 0, 0.5);
   --theme-sidebar-border: rgba(0, 0, 0, 0.1);

frontend/tailwind.config.js

@@ -63,6 +63,11 @@ export default {
               selected: 'var(--theme-sidebar-item-selected)',
               hover: 'var(--theme-sidebar-item-hover)',
             },
+            subitem: {
+              default: 'var(--theme-sidebar-subitem-default)',
+              selected: 'var(--theme-sidebar-subitem-selected)',
+              hover: 'var(--theme-sidebar-subitem-hover)',
+            },
             footer: {
               icon: 'var(--theme-sidebar-footer-icon)',
               'icon-hover': 'var(--theme-sidebar-footer-icon-hover)',