[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>
2024-11-16 11:20:10 +01:00 · 2024-03-06 17:22:36 -08:00 · 2024-03-06 17:22:36 -08:00 · 3cb8a80e8d
commit 3cb8a80e8d
parent 31d9268ed4
22 changed files with 168 additions and 148 deletions
--- a/frontend/src/components/DefaultChat/index.jsx
+++ b/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
--- a/frontend/src/components/Footer/index.jsx
+++ b/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>
  );
--- a/frontend/src/components/SettingsButton/index.jsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/SettingsSidebar/index.jsx
+++ b/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,9 +112,7 @@ export default function SettingsSidebar() {
                    <SidebarOptions user={user} />
                  </div>
                </div>
-                <div>
-                  <Footer />
-                </div>
+                <Footer />
              </div>
            </div>
          </div>
@ -124,50 +122,38 @@ export default function SettingsSidebar() {
  }

  return (
-    <>
+    <div>
+      <Link
+        to={paths.home()}
+        className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
+      >
+        <img
+          src={logo}
+          alt="Logo"
+          className="rounded max-h-[24px]"
+          style={{ objectFit: "contain" }}
+        />
+      </Link>
      <div
        ref={sidebarRef}
-        style={{ height: "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
+        style={{ height: "calc(100% - 76px)" }}
+        className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
      >
-        <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]"
-                style={{ objectFit: "contain" }}
-              />
-            </div>
-            <div className="flex gap-x-2 items-center text-slate-500">
-              <a
-                href={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"
-              >
-                <X className="h-4 w-4" />
-              </a>
-            </div>
+        <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">
+            Instance Settings
          </div>
-          <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="relative h-full flex flex-col w-full justify-between pt-[10px] 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>
+            <Footer />
          </div>
        </div>
      </div>
-    </>
+    </div>
  );
 }

@ -195,24 +181,25 @@ const Option = ({

  return (
    <>
-      <div className="flex gap-x-2 items-center justify-between text-white">
-        <a
-          href={href}
+      <div className="flex gap-x-2 items-center justify-between">
+        <Link
+          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"
-              : "hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent"
+              ? "bg-menu-item-selected-gradient font-medium border-outline text-white"
+              : "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
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/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,55 +91,60 @@ 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 
-                hover:bg-workspace-item-selected-gradient 
+                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  border-outline
                ${
                  isActive
-                    ? "border-2 bg-workspace-item-selected-gradient border-white"
-                    : "border bg-workspace-item-gradient bg-opacity-60 border-transparent hover:border-slate-100 hover:border-opacity-50"
+                    ? "bg-workspace-item-selected-gradient font-medium border-none"
+                    : "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 ${
-                        isActive ? "" : "text-opacity-80"
+                      className={`text-[14px] leading-loose whitespace-nowrap overflow-hidden ${
+                        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">
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          setSelectedWs(workspace);
-                          showModal();
-                        }}
-                        onMouseEnter={() =>
-                          handleUploadMouseEnter(workspace.id)
-                        }
-                        onMouseLeave={() =>
-                          handleUploadMouseLeave(workspace.id)
-                        }
-                        className="rounded-md flex items-center justify-center text-white ml-auto"
+                    <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]" : ""
+                        }`}
                      >
-                        <UploadSimple
-                          weight={
-                            uploadHover[workspace.id] ? "fill" : "regular"
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            setSelectedWs(workspace);
+                            showModal();
+                          }}
+                          onMouseEnter={() =>
+                            handleUploadMouseEnter(workspace.id)
                          }
-                          className="h-[20px] w-[20px] transition-all duration-300"
-                        />
-                      </button>
+                          onMouseLeave={() =>
+                            handleUploadMouseLeave(workspace.id)
+                          }
+                          className="rounded-md flex items-center justify-center ml-auto"
+                        >
+                          <UploadSimple
+                            className="h-[20px] w-[20px]"
+                            weight="bold"
+                          />
+                        </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"
                      >
-                        <GearSix
-                          weight={gearHover[workspace.id] ? "fill" : "regular"}
-                          className="h-[20px] w-[20px] transition-all duration-300"
-                        />
+                        <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
+                          <GearSix
+                            color={
+                              isInWorkspaceSettings && workspace.slug === slug
+                                ? "#46C8FF"
+                                : gearHover[workspace.id]
+                                ? "#FFFFFF"
+                                : "#A7A8A9"
+                            }
+                            weight="bold"
+                            className="h-[20px] w-[20px]"
+                          />
+                        </div>
                      </Link>
                    </div>
                  ) : null}
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/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>
+      <Link
+        to={paths.home()}
+        className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
+      >
+        <img
+          src={logo}
+          alt="Logo"
+          className="rounded max-h-[24px]"
+          style={{ objectFit: "contain" }}
+        />
+      </Link>
      <div
        ref={sidebarRef}
-        style={{ height: "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
+        style={{ height: "calc(100% - 76px)" }}
+        className="transition-all pt-[11px] px-[10px] duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px]"
      >
        <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]"
-                style={{ objectFit: "contain" }}
-              />
-            </div>
-            {(!user || user?.role !== "default") && (
-              <div className="flex gap-x-2 items-center text-slate-200">
-                <SettingsButton />
-              </div>
-            )}
-          </div>
-
-          {/* Primary Body */}
-          <div className="flex-grow flex flex-col">
+          <div className="flex-grow flex flex-col w-[235px]">
            <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 shink-0">
-                  <SettingsButton />
-                </div>
-              )}
+              <div className="flex gap-x-2 items-center text-slate-500 shrink-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>
-  );
-}
--- a/frontend/src/components/UserMenu/UserButton/index.jsx
+++ b/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();

--- a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
+++ b/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]">
--- a/frontend/src/pages/Admin/Invitations/index.jsx
+++ b/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">
--- a/frontend/src/pages/Admin/Logging/index.jsx
+++ b/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">
--- a/frontend/src/pages/Admin/System/index.jsx
+++ b/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}
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/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">
--- a/frontend/src/pages/Admin/Workspaces/index.jsx
+++ b/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">
--- a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
+++ b/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">
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/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">
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/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">
--- a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
+++ b/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">
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
+++ b/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">
--- a/frontend/src/pages/GeneralSettings/Security/index.jsx
+++ b/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 />
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/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"
--- a/frontend/src/pages/WorkspaceSettings/index.jsx
+++ b/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"
--- a/frontend/tailwind.config.js
+++ b/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":