[STYLE] Implement new side bar menus (#815)

* WIP main sidebar designs

* hover states and active states for main sidebar

* main and settings sidebar UI updates & improve performance using Link instead of <a>

* update borders to match rest of UI in all pages

* update borders of all containers to match rest of UI

* remove unneeded conditional

* small changes to UI to conform to designs
Fix conditional hook render

* add check for roles to SettingsButton component and hide button from footer when in mobile

* typo

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/src/components/DefaultChat/index.jsx

@@ -335,7 +335,7 @@ export default function DefaultChatContainer() {
   return (
     <div
       style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
     >
       {isMobile && <SidebarMobileHeader />}
       {fetchedMessages.length === 0

frontend/src/components/Footer/index.jsx

@@ -1,6 +1,5 @@
 import System from "@/models/system";
 import paths from "@/utils/paths";
-import { safeJsonParse } from "@/utils/request";
 import {
   BookOpen,
   DiscordLogo,
@@ -13,6 +12,8 @@ import {
   LinkSimple,
 } from "@phosphor-icons/react";
 import React, { useEffect, useState } from "react";
+import SettingsButton from "../SettingsButton";
+import { isMobile } from "react-device-detect";
 
 export const MAX_ICONS = 3;
 export const ICON_COMPONENTS = {
@@ -44,11 +45,12 @@ export default function Footer() {
 
   if (!Array.isArray(footerData) || footerData.length === 0) {
     return (
-      <div className="flex justify-center mt-2">
+      <div className="flex justify-center mb-2">
         <div className="flex space-x-4">
           <a
             href={paths.github()}
             target="_blank"
+            rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
           >
             <GithubLogo weight="fill" className="h-5 w-5 " />
@@ -56,6 +58,7 @@ export default function Footer() {
           <a
             href={paths.docs()}
             target="_blank"
+            rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
           >
             <BookOpen weight="fill" className="h-5 w-5 " />
@@ -63,6 +66,7 @@ export default function Footer() {
           <a
             href={paths.discord()}
             target="_blank"
+            rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
           >
             <DiscordLogo
@@ -70,19 +74,21 @@ export default function Footer() {
               className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
             />
           </a>
+          {!isMobile && <SettingsButton />}
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex justify-center mt-2">
+    <div className="flex justify-center mb-2">
       <div className="flex space-x-4">
         {footerData.map((item, index) => (
           <a
             key={index}
             href={item.url}
             target="_blank"
+            rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
           >
             {React.createElement(ICON_COMPONENTS[item.icon], {
@@ -91,6 +97,7 @@ export default function Footer() {
             })}
           </a>
         ))}
+        {!isMobile && <SettingsButton />}
       </div>
     </div>
   );

frontend/src/components/SettingsButton/index.jsx

@@ -0,0 +1,31 @@
+import useUser from "@/hooks/useUser";
+import paths from "@/utils/paths";
+import { ArrowUUpLeft, Wrench } from "@phosphor-icons/react";
+import { Link } from "react-router-dom";
+import { useMatch } from "react-router-dom";
+
+export default function SettingsButton() {
+  const isInSettings = !!useMatch("/settings/*");
+  const { user } = useUser();
+
+  if (user && user?.role === "default") return null;
+
+  if (isInSettings)
+    return (
+      <Link
+        to={paths.home()}
+        className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+      >
+        <ArrowUUpLeft className="h-5 w-5" weight="fill" />
+      </Link>
+    );
+
+  return (
+    <Link
+      to={!!user?.role ? paths.settings.system() : paths.settings.appearance()}
+      className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+    >
+      <Wrench className="h-5 w-5" weight="fill" />
+    </Link>
+  );
+}

frontend/src/components/SettingsSidebar/index.jsx

@@ -13,7 +13,6 @@ import {
   Database,
   Lock,
   House,
-  X,
   List,
   FileCode,
   Plugs,
@@ -25,6 +24,7 @@ import useUser from "@/hooks/useUser";
 import { USER_BACKGROUND_COLOR } from "@/utils/constants";
 import { isMobile } from "react-device-detect";
 import Footer from "../Footer";
+import { Link } from "react-router-dom";
 
 export default function SettingsSidebar() {
   const { logo } = useLogo();
@@ -112,62 +112,48 @@ export default function SettingsSidebar() {
                     <SidebarOptions user={user} />
                   </div>
                 </div>
-                <div>
                 <Footer />
               </div>
             </div>
           </div>
         </div>
-        </div>
       </>
     );
   }
 
   return (
-    <>
+    <div>
-      <div
+      <Link
-        ref={sidebarRef}
+        to={paths.home()}
-        style={{ height: "calc(100% - 32px)" }}
+        className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
-        className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
       >
-        <div className="w-full h-full flex flex-col overflow-x-hidden items-between">
-          {/* Header Information */}
-          <div className="flex w-full items-center justify-between">
-            <div className="flex shrink-0 max-w-[65%] items-center justify-start ml-2">
         <img
           src={logo}
           alt="Logo"
-                className="rounded max-h-[40px]"
+          className="rounded max-h-[24px]"
           style={{ objectFit: "contain" }}
         />
-            </div>
+      </Link>
-            <div className="flex gap-x-2 items-center text-slate-500">
+      <div
-              <a
+        ref={sidebarRef}
-                href={paths.home()}
+        style={{ height: "calc(100% - 76px)" }}
-                className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+        className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
       >
-                <X className="h-4 w-4" />
+        <div className="w-full h-full flex flex-col overflow-x-hidden items-between min-w-[235px]">
-              </a>
+          <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-[4px] mb-0 ml-2">
+            Instance Settings
           </div>
-          </div>
+          <div className="relative h-full flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
-          <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-4 mb-0 ml-2">
-            Settings
-          </div>
-          {/* Primary Body */}
-          <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-scroll no-scroll">
             <div className="h-auto sidebar-items">
-              {/* Options */}
               <div className="flex flex-col gap-y-2 h-full pb-8 overflow-y-scroll no-scroll">
                 <SidebarOptions user={user} />
               </div>
             </div>
-            <div>
             <Footer />
           </div>
         </div>
       </div>
     </div>
-    </>
   );
 }
 
@@ -195,24 +181,25 @@ const Option = ({
 
   return (
     <>
-      <div className="flex gap-x-2 items-center justify-between text-white">
+      <div className="flex gap-x-2 items-center justify-between">
-        <a
+        <Link
-          href={href}
+          to={href}
           className={`
           transition-all duration-[200ms]
-          flex flex-grow w-[75%] h-[36px] gap-x-2 py-[5px] px-4 rounded justify-start items-center border
+          flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] justify-start items-center
+          hover:bg-workspace-item-selected-gradient hover:text-white hover:font-medium
           ${
             isActive
-              ? "bg-menu-item-selected-gradient border-slate-100 border-opacity-50 font-medium"
+              ? "bg-menu-item-selected-gradient font-medium border-outline text-white"
-              : "hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent"
+              : "hover:bg-menu-item-selected-gradient text-zinc-200"
           }
         `}
         >
           {React.cloneElement(icon, { weight: isActive ? "fill" : "regular" })}
-          <p className="text-sm leading-loose text-opacity-60 whitespace-nowrap overflow-hidden ">
+          <p className="text-sm leading-loose whitespace-nowrap overflow-hidden ">
             {btnText}
           </p>
-        </a>
+        </Link>
       </div>
       {!!subOptions && (isActive || hasActiveChild) && (
         <div

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

@@ -11,7 +11,7 @@ import { GearSix, SquaresFour, UploadSimple } from "@phosphor-icons/react";
 import truncate from "truncate";
 import useUser from "@/hooks/useUser";
 import ThreadContainer from "./ThreadContainer";
-import { Link } from "react-router-dom";
+import { Link, useMatch } from "react-router-dom";
 
 export default function ActiveWorkspaces() {
   const { slug } = useParams();
@@ -23,6 +23,7 @@ export default function ActiveWorkspaces() {
   const [uploadHover, setUploadHover] = useState({});
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
   const { user } = useUser();
+  const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
 
   useEffect(() => {
     async function getWorkspaces() {
@@ -90,33 +91,39 @@ export default function ActiveWorkspaces() {
                 href={isActive ? null : paths.workspace.chat(workspace.slug)}
                 className={`
               transition-all duration-[200ms]
-                flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-lg text-slate-200 justify-start items-center 
+                flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
-                hover:bg-workspace-item-selected-gradient 
+                hover:bg-workspace-item-selected-gradient  border-outline
                 ${
                   isActive
-                    ? "border-2 bg-workspace-item-selected-gradient border-white"
+                    ? "bg-workspace-item-selected-gradient font-medium border-none"
-                    : "border bg-workspace-item-gradient bg-opacity-60 border-transparent hover:border-slate-100 hover:border-opacity-50"
+                    : "border-[1px]"
                 }`}
               >
                 <div className="flex flex-row justify-between w-full">
                   <div className="flex items-center space-x-2">
                     <SquaresFour
                       weight={isActive ? "fill" : "regular"}
-                      className="h-5 w-5 flex-shrink-0"
+                      className="flex-shrink-0"
+                      size={24}
                     />
                     <p
-                      className={`text-white text-sm leading-loose font-medium whitespace-nowrap overflow-hidden ${
+                      className={`text-[14px] leading-loose whitespace-nowrap overflow-hidden ${
-                        isActive ? "" : "text-opacity-80"
+                        isActive ? "text-white " : "text-zinc-200"
                       }`}
                     >
                       {isActive || isHovered
-                        ? truncate(workspace.name, 17)
+                        ? truncate(workspace.name, 15)
                         : truncate(workspace.name, 20)}
                     </p>
                   </div>
                   {(isActive || isHovered || gearHover[workspace.id]) &&
                   user?.role !== "default" ? (
-                    <div className="flex items-center gap-x-2">
+                    <div className="flex items-center gap-x-[2px]">
+                      <div
+                        className={`flex hover:bg-[#646768] p-[2px] rounded-[4px] text-[#A7A8A9] hover:text-white ${
+                          uploadHover[workspace.id] ? "bg-[#646768]" : ""
+                        }`}
+                      >
                         <button
                           type="button"
                           onClick={(e) => {
@@ -130,15 +137,14 @@ export default function ActiveWorkspaces() {
                           onMouseLeave={() =>
                             handleUploadMouseLeave(workspace.id)
                           }
-                        className="rounded-md flex items-center justify-center text-white ml-auto"
+                          className="rounded-md flex items-center justify-center ml-auto"
                         >
                           <UploadSimple
-                          weight={
+                            className="h-[20px] w-[20px]"
-                            uploadHover[workspace.id] ? "fill" : "regular"
+                            weight="bold"
-                          }
-                          className="h-[20px] w-[20px] transition-all duration-300"
                           />
                         </button>
+                      </div>
 
                       <Link
                         type="button"
@@ -147,12 +153,21 @@ export default function ActiveWorkspaces() {
                         )}
                         onMouseEnter={() => handleGearMouseEnter(workspace.id)}
                         onMouseLeave={() => handleGearMouseLeave(workspace.id)}
-                        className="rounded-md flex items-center justify-center text-white ml-auto"
+                        className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto"
                       >
+                        <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
                           <GearSix
-                          weight={gearHover[workspace.id] ? "fill" : "regular"}
+                            color={
-                          className="h-[20px] w-[20px] transition-all duration-300"
+                              isInWorkspaceSettings && workspace.slug === slug
+                                ? "#46C8FF"
+                                : gearHover[workspace.id]
+                                ? "#FFFFFF"
+                                : "#A7A8A9"
+                            }
+                            weight="bold"
+                            className="h-[20px] w-[20px]"
                           />
+                        </div>
                       </Link>
                     </div>
                   ) : null}

frontend/src/components/Sidebar/index.jsx

@@ -1,14 +1,16 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Wrench, Plus, List } from "@phosphor-icons/react";
+import { Plus, List } from "@phosphor-icons/react";
 import NewWorkspaceModal, {
   useNewWorkspaceModal,
 } from "../Modals/NewWorkspace";
 import ActiveWorkspaces from "./ActiveWorkspaces";
-import paths from "@/utils/paths";
 import { USER_BACKGROUND_COLOR } from "@/utils/constants";
 import useLogo from "@/hooks/useLogo";
 import useUser from "@/hooks/useUser";
 import Footer from "../Footer";
+import SettingsButton from "../SettingsButton";
+import { Link } from "react-router-dom";
+import paths from "@/utils/paths";
 
 export default function Sidebar() {
   const { user } = useUser();
@@ -21,40 +23,33 @@ export default function Sidebar() {
   } = useNewWorkspaceModal();
 
   return (
-    <>
+    <div>
-      <div
+      <Link
-        ref={sidebarRef}
+        to={paths.home()}
-        style={{ height: "calc(100% - 32px)" }}
+        className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
-        className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
       >
-        <div className="flex flex-col h-full overflow-x-hidden">
-          {/* Header Information */}
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex shrink-0 max-w-[65%] items-center justify-start">
         <img
           src={logo}
           alt="Logo"
-                className="rounded max-h-[40px]"
+          className="rounded max-h-[24px]"
           style={{ objectFit: "contain" }}
         />
-            </div>
+      </Link>
-            {(!user || user?.role !== "default") && (
+      <div
-              <div className="flex gap-x-2 items-center text-slate-200">
+        ref={sidebarRef}
-                <SettingsButton />
+        style={{ height: "calc(100% - 76px)" }}
-              </div>
+        className="transition-all pt-[11px] px-[10px] duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px]"
-            )}
+      >
-          </div>
+        <div className="flex flex-col h-full overflow-x-hidden">
-
+          <div className="flex-grow flex flex-col w-[235px]">
-          {/* Primary Body */}
-          <div className="flex-grow flex flex-col">
             <div className="flex flex-col gap-y-2 pb-8 overflow-y-scroll no-scroll">
               <div className="flex gap-x-2 items-center justify-between">
                 {(!user || user?.role !== "default") && (
                   <button
                     onClick={showNewWsModal}
-                    className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-4 mb-2 bg-white rounded-lg text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
+                    className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
                   >
-                    <Plus className="h-5 w-5" />
+                    <Plus size={18} weight="bold" />
                     <p className="text-sidebar text-sm font-semibold">
                       New Workspace
                     </p>
@@ -70,7 +65,7 @@ export default function Sidebar() {
         </div>
       </div>
       {showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
-    </>
+    </div>
   );
 }
 
@@ -149,11 +144,9 @@ export function SidebarMobileHeader() {
                   style={{ objectFit: "contain" }}
                 />
               </div>
-              {(!user || user?.role !== "default") && (
+              <div className="flex gap-x-2 items-center text-slate-500 shrink-0">
-                <div className="flex gap-x-2 items-center text-slate-500 shink-0">
                 <SettingsButton />
               </div>
-              )}
             </div>
 
             {/* Primary Body */}
@@ -190,17 +183,3 @@ export function SidebarMobileHeader() {
     </>
   );
 }
-
-function SettingsButton() {
-  const { user } = useUser();
-  return (
-    <a
-      href={
-        !!user?.role ? paths.settings.system() : paths.settings.appearance()
-      }
-      className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-    >
-      <Wrench className="h-4 w-4" weight="fill" />
-    </a>
-  );
-}

frontend/src/components/UserMenu/UserButton/index.jsx

@@ -61,7 +61,7 @@ export default function UserButton() {
         type="button"
         className="uppercase transition-all duration-300 w-[35px] h-[35px] text-base font-semibold rounded-full flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient justify-center text-white p-2 hover:border-slate-100 hover:border-opacity-50 border-transparent border"
       >
-        {mode === "multi" ? userDisplay() : <Person size={14} />}
+        {mode === "multi" ? <UserDisplay /> : <Person size={14} />}
       </button>
 
       {showMenu && (
@@ -109,7 +109,7 @@ export default function UserButton() {
   );
 }
 
-function userDisplay() {
+function UserDisplay() {
   const { pfp } = usePfp();
   const user = userFromStorage();
 

frontend/src/components/WorkspaceChat/ChatContainer/index.jsx

@@ -108,7 +108,7 @@ export default function ChatContainer({ workspace, knownHistory = [] }) {
   return (
     <div
       style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
     >
       {isMobile && <SidebarMobileHeader />}
       <div className="flex flex-col h-full w-full md:mt-0 mt-[40px]">

frontend/src/pages/Admin/Invitations/index.jsx

@@ -18,7 +18,7 @@ export default function AdminInvites() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

frontend/src/pages/Admin/Logging/index.jsx

@@ -30,7 +30,7 @@ export default function AdminLogs() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

frontend/src/pages/Admin/System/index.jsx

@@ -43,7 +43,7 @@ export default function AdminSystem() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <form
           onSubmit={handleSubmit}

frontend/src/pages/Admin/Users/index.jsx

@@ -18,7 +18,7 @@ export default function AdminUsers() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

frontend/src/pages/Admin/Workspaces/index.jsx

@@ -18,7 +18,7 @@ export default function AdminWorkspaces() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

frontend/src/pages/GeneralSettings/ApiKeys/index.jsx

@@ -20,7 +20,7 @@ export default function AdminApiKeys() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

frontend/src/pages/GeneralSettings/Appearance/index.jsx

@@ -11,7 +11,7 @@ export default function Appearance() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

frontend/src/pages/GeneralSettings/Chats/index.jsx

@@ -90,7 +90,7 @@ export default function WorkspaceChats() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

frontend/src/pages/GeneralSettings/EmbedChats/index.jsx

@@ -14,7 +14,7 @@ export default function EmbedChats() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx

@@ -17,7 +17,7 @@ export default function EmbedConfigs() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">

frontend/src/pages/GeneralSettings/Security/index.jsx

@@ -13,7 +13,7 @@ export default function GeneralSecurity() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <MultiUserMode />
         <PasswordProtection />

frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx

@@ -165,7 +165,7 @@ export default function GeneralVectorDatabase() {
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent animate-pulse"
+          className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline animate-pulse"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -174,7 +174,7 @@ export default function GeneralVectorDatabase() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+          className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
         >
           <form
             id="vectordb-form"

frontend/src/pages/WorkspaceSettings/index.jsx

@@ -67,14 +67,14 @@ function ShowWorkspaceChat() {
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
       >
         <div className="flex gap-x-10 pt-6 pb-4 ml-16 mr-8 border-b-2 border-white border-opacity-10">
           <Link
             to={paths.workspace.chat(slug)}
             className="absolute top-2 left-2 md:top-4 md:left-4 transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border z-10"
           >
-            <ArrowUUpLeft className="h-4 w-4" />
+            <ArrowUUpLeft className="h-5 w-5" weight="fill" />
           </Link>
           <TabItem
             title="General Settings"

frontend/tailwind.config.js

@@ -24,7 +24,8 @@ export default {
         "sidebar-button": "#31353A",
         sidebar: "#25272C",
         "historical-msg-system": "rgba(255, 255, 255, 0.05);",
-        "historical-msg-user": "#2C2F35"
+        "historical-msg-user": "#2C2F35",
+        outline: "#4E5153"
       },
       backgroundImage: {
         "preference-gradient":