From 0be503395a4d519407c5b37085c9a363a5055f84 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 26 Feb 2024 16:24:50 -0800
Subject: [PATCH 01/28] WIP main sidebar designs

---
 frontend/src/components/Footer/index.jsx      |  7 ++
 .../src/components/SettingsButton/index.jsx   | 17 +++++
 .../Sidebar/ActiveWorkspaces/index.jsx        | 73 ++++++++++---------
 frontend/src/components/Sidebar/index.jsx     | 58 +++++----------
 frontend/tailwind.config.js                   |  3 +-
 5 files changed, 83 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/components/SettingsButton/index.jsx

diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx
index 26b271a8ce8..4b175405be4 100644
--- a/frontend/src/components/Footer/index.jsx
+++ b/frontend/src/components/Footer/index.jsx
@@ -13,6 +13,7 @@ import {
   LinkSimple,
 } from "@phosphor-icons/react";
 import React, { useEffect, useState } from "react";
+import SettingsButton from "../SettingsButton";
 
 export const MAX_ICONS = 3;
 export const ICON_COMPONENTS = {
@@ -49,6 +50,7 @@ export default function Footer() {
           <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,6 +74,7 @@ export default function Footer() {
               className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
             />
           </a>
+          <SettingsButton />
         </div>
       </div>
     );
@@ -83,6 +88,7 @@ export default function Footer() {
             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>
         ))}
+        <SettingsButton />
       </div>
     </div>
   );
diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
new file mode 100644
index 00000000000..18c7b1a1670
--- /dev/null
+++ b/frontend/src/components/SettingsButton/index.jsx
@@ -0,0 +1,17 @@
+import useUser from "@/hooks/useUser";
+import paths from "@/utils/paths";
+import { Wrench } from "@phosphor-icons/react";
+
+export default 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-5 w-5" weight="fill" />
+    </a>
+  );
+}
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index 9ee6a6878dc..467c6eb2e09 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -90,55 +90,58 @@ 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-slate-200 justify-start items-center
+                hover:bg-workspace-item-selected-gradient
                 ${
                   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"
+                    : "border-[2px] border-outline"
                 }`}
               >
                 <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-white text-[14px] leading-loose font-bold whitespace-nowrap overflow-hidden ${
                         isActive ? "" : "text-opacity-80"
                       }`}
                     >
                       {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"
-                      >
-                        <UploadSimple
-                          weight={
-                            uploadHover[workspace.id] ? "fill" : "regular"
+                    <div className="flex items-center">
+                      <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            setSelectedWs(workspace);
+                            showModal();
+                          }}
+                          onMouseEnter={() =>
+                            handleUploadMouseEnter(workspace.id)
+                          }
+                          onMouseLeave={() =>
+                            handleUploadMouseLeave(workspace.id)
                           }
-                          className="h-[20px] w-[20px] transition-all duration-300"
-                        />
-                      </button>
+                          className="rounded-md flex items-center justify-center text-white ml-auto"
+                        >
+                          <UploadSimple
+                            weight={
+                              uploadHover[workspace.id] ? "fill" : "regular"
+                            }
+                            className="h-[20px] w-[20px] transition-all duration-300"
+                          />
+                        </button>
+                      </div>
 
                       <Link
                         type="button"
@@ -149,10 +152,14 @@ export default function ActiveWorkspaces() {
                         onMouseLeave={() => handleGearMouseLeave(workspace.id)}
                         className="rounded-md flex items-center justify-center 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
+                            // weight={gearHover[workspace.id] ? "fill" : "regular"}
+                            className={`h-[20px] w-[20px]  ${
+                              gearHover[workspace.id] ? "" : ""
+                            }`}
+                          />
+                        </div>
                       </Link>
                     </div>
                   ) : null}
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index d14099b2b59..0c38eb776ce 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -1,14 +1,14 @@
 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";
 
 export default function Sidebar() {
   const { user } = useUser();
@@ -21,40 +21,30 @@ export default function Sidebar() {
   } = useNewWorkspaceModal();
 
   return (
-    <>
+    <div>
+      <div 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" }}
+        />
+      </div>
       <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="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 min-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 +60,7 @@ export default function Sidebar() {
         </div>
       </div>
       {showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
-    </>
+    </div>
   );
 }
 
@@ -190,17 +180,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>
-  );
-}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index f3f8aaca2c4..8add5a6924c 100644
--- 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":

From d66d54198675d753f0cd24e44ae2ff7f2cc6dfeb Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 26 Feb 2024 18:07:03 -0800
Subject: [PATCH 02/28] hover states and active states for main sidebar

---
 .../Sidebar/ActiveWorkspaces/index.jsx        | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index 467c6eb2e09..2470bc28ba9 100644
--- 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,8 @@ export default function ActiveWorkspaces() {
   const [uploadHover, setUploadHover] = useState({});
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
   const { user } = useUser();
+  const match = useMatch("/workspace/:slug/settings/:tab");
+  const isInWorkspaceSettings = !!match;
 
   useEffect(() => {
     async function getWorkspaces() {
@@ -117,8 +119,12 @@ export default function ActiveWorkspaces() {
                   </div>
                   {(isActive || isHovered || gearHover[workspace.id]) &&
                   user?.role !== "default" ? (
-                    <div className="flex items-center">
-                      <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
+                    <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) => {
@@ -132,13 +138,11 @@ 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={
-                              uploadHover[workspace.id] ? "fill" : "regular"
-                            }
-                            className="h-[20px] w-[20px] transition-all duration-300"
+                            className="h-[20px] w-[20px]"
+                            weight="bold"
                           />
                         </button>
                       </div>
@@ -150,14 +154,19 @@ 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"}
-                            className={`h-[20px] w-[20px]  ${
-                              gearHover[workspace.id] ? "" : ""
-                            }`}
+                            color={
+                              isInWorkspaceSettings && workspace.slug === slug
+                                ? "#46C8FF"
+                                : gearHover[workspace.id]
+                                ? "#FFFFFF"
+                                : "#A7A8A9"
+                            }
+                            weight="bold"
+                            className="h-[20px] w-[20px]"
                           />
                         </div>
                       </Link>

From 613611cea3df3797cc17e2a547f983f22c2d7be7 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 26 Feb 2024 21:05:31 -0800
Subject: [PATCH 03/28] main and settings sidebar UI updates & improve
 performance using Link instead of <a>

---
 frontend/src/components/Footer/index.jsx      |  1 -
 .../src/components/SettingsButton/index.jsx   | 24 +++++--
 .../src/components/SettingsSidebar/index.jsx  | 65 ++++++++-----------
 .../Sidebar/ActiveWorkspaces/index.jsx        | 13 ++--
 frontend/src/components/Sidebar/index.jsx     |  9 ++-
 5 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx
index 4b175405be4..17048980ab1 100644
--- 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,
diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
index 18c7b1a1670..ae3aeb9f64e 100644
--- a/frontend/src/components/SettingsButton/index.jsx
+++ b/frontend/src/components/SettingsButton/index.jsx
@@ -1,17 +1,29 @@
 import useUser from "@/hooks/useUser";
 import paths from "@/utils/paths";
-import { Wrench } from "@phosphor-icons/react";
+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 (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 (
-    <a
-      href={
-        !!user?.role ? paths.settings.system() : paths.settings.appearance()
-      }
+    <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" />
-    </a>
+    </Link>
   );
 }
diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
index ea48871146e..96610d4d629 100644
--- 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();
@@ -124,50 +124,40 @@ 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>
-          <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-4 mb-0 ml-2">
-            Settings
+        <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>
-          {/* 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>
+            <div className="mb-2">
               <Footer />
             </div>
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
@@ -196,15 +186,16 @@ const Option = ({
   return (
     <>
       <div className="flex gap-x-2 items-center justify-between text-white">
-        <a
-          href={href}
+        <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] text-white justify-start items-center
+          hover:bg-workspace-item-selected-gradient hover:text-white hover:font-bold
           ${
             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-bold border-outline"
+              : "hover:bg-menu-item-selected-gradient text-white/30"
           }
         `}
         >
@@ -212,7 +203,7 @@ const Option = ({
           <p className="text-sm leading-loose text-opacity-60 whitespace-nowrap overflow-hidden ">
             {btnText}
           </p>
-        </a>
+        </Link>
       </div>
       {!!subOptions && (isActive || hasActiveChild) && (
         <div
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index 2470bc28ba9..bbd535e71ae 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -23,8 +23,7 @@ export default function ActiveWorkspaces() {
   const [uploadHover, setUploadHover] = useState({});
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
   const { user } = useUser();
-  const match = useMatch("/workspace/:slug/settings/:tab");
-  const isInWorkspaceSettings = !!match;
+  const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
 
   useEffect(() => {
     async function getWorkspaces() {
@@ -92,12 +91,12 @@ 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-[4px] 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 hover:font-bold border-2 border-outline
                 ${
                   isActive
-                    ? "bg-workspace-item-selected-gradient"
-                    : "border-[2px] border-outline"
+                    ? "bg-workspace-item-selected-gradient font-bold"
+                    : ""
                 }`}
               >
                 <div className="flex flex-row justify-between w-full">
@@ -108,7 +107,7 @@ export default function ActiveWorkspaces() {
                       size={24}
                     />
                     <p
-                      className={`text-white text-[14px] leading-loose font-bold whitespace-nowrap overflow-hidden ${
+                      className={`text-white text-[14px] leading-loose whitespace-nowrap overflow-hidden ${
                         isActive ? "" : "text-opacity-80"
                       }`}
                     >
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index 0c38eb776ce..13aaeee1074 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -9,6 +9,8 @@ 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();
@@ -22,14 +24,17 @@ export default function Sidebar() {
 
   return (
     <div>
-      <div className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]">
+      <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" }}
         />
-      </div>
+      </Link>
       <div
         ref={sidebarRef}
         style={{ height: "calc(100% - 76px)" }}

From ca9e58417435e21f8157f27c6a4c2e9c8355c616 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 26 Feb 2024 21:07:31 -0800
Subject: [PATCH 04/28] update borders to match rest of UI in all pages

---
 frontend/src/components/DefaultChat/index.jsx                 | 2 +-
 frontend/src/components/WorkspaceChat/ChatContainer/index.jsx | 2 +-
 frontend/src/pages/Admin/Invitations/index.jsx                | 2 +-
 frontend/src/pages/Admin/Logging/index.jsx                    | 2 +-
 frontend/src/pages/Admin/System/index.jsx                     | 2 +-
 frontend/src/pages/Admin/Users/index.jsx                      | 2 +-
 frontend/src/pages/Admin/Workspaces/index.jsx                 | 2 +-
 frontend/src/pages/GeneralSettings/ApiKeys/index.jsx          | 2 +-
 frontend/src/pages/GeneralSettings/Appearance/index.jsx       | 2 +-
 frontend/src/pages/GeneralSettings/Chats/index.jsx            | 2 +-
 frontend/src/pages/GeneralSettings/EmbedChats/index.jsx       | 2 +-
 frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx     | 2 +-
 frontend/src/pages/GeneralSettings/Security/index.jsx         | 2 +-
 frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx   | 4 ++--
 frontend/src/pages/WorkspaceSettings/index.jsx                | 2 +-
 15 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index 8bc6c7cb7e1..00dd9550a61 100644
--- 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-accent"
     >
       {isMobile && <SidebarMobileHeader />}
       {fetchedMessages.length === 0
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
index 8a99a62a2eb..09f58489803 100644
--- 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-accent"
     >
       {isMobile && <SidebarMobileHeader />}
       <div className="flex flex-col h-full w-full md:mt-0 mt-[40px]">
diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index a4a99e93be4..cdf0a649591 100644
--- 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-accent"
       >
         <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">
diff --git a/frontend/src/pages/Admin/Logging/index.jsx b/frontend/src/pages/Admin/Logging/index.jsx
index 246cf211016..697823c4a66 100644
--- 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-accent"
       >
         <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">
diff --git a/frontend/src/pages/Admin/System/index.jsx b/frontend/src/pages/Admin/System/index.jsx
index c561efd2e6f..040edc70c97 100644
--- 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-accent"
       >
         <form
           onSubmit={handleSubmit}
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index a5c6ba9c5cc..1947dbb4fd8 100644
--- 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-accent"
       >
         <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">
diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index 62a28094bb4..3ab4c8cda99 100644
--- 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-accent"
       >
         <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">
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index 9ba3335f56d..8814820cd76 100644
--- 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-accent"
       >
         <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">
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index 9aed853b27d..2ff3c292cce 100644
--- 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-accent"
       >
         <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">
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index aeb341c1b31..0ddb0ad7a43 100644
--- 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-accent"
       >
         <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">
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index 23c5bf189e5..c74d8c7e1bb 100644
--- 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-accent"
       >
         <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">
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
index 4257b029f8e..103ee728139 100644
--- 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-accent"
       >
         <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">
diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx
index e09315d16ee..55e2c797e94 100644
--- 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-accent"
       >
         <MultiUserMode />
         <PasswordProtection />
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index e5eacaea727..5a799ecad6d 100644
--- 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-accent 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-accent"
         >
           <form
             id="vectordb-form"
diff --git a/frontend/src/pages/WorkspaceSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/index.jsx
index 2050232bc0c..1c7acd48671 100644
--- a/frontend/src/pages/WorkspaceSettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/index.jsx
@@ -67,7 +67,7 @@ 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-accent"
       >
         <div className="flex gap-x-10 pt-6 pb-4 ml-16 mr-8 border-b-2 border-white border-opacity-10">
           <Link

From 0b8084b3c58578ecf8f0c560ec974ae79481cd3a Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 26 Feb 2024 21:13:54 -0800
Subject: [PATCH 05/28] update borders of all containers to match rest of UI

---
 frontend/src/components/DefaultChat/index.jsx                 | 2 +-
 frontend/src/components/WorkspaceChat/ChatContainer/index.jsx | 2 +-
 frontend/src/pages/Admin/Invitations/index.jsx                | 2 +-
 frontend/src/pages/Admin/Logging/index.jsx                    | 2 +-
 frontend/src/pages/Admin/System/index.jsx                     | 2 +-
 frontend/src/pages/Admin/Users/index.jsx                      | 2 +-
 frontend/src/pages/Admin/Workspaces/index.jsx                 | 2 +-
 frontend/src/pages/GeneralSettings/ApiKeys/index.jsx          | 2 +-
 frontend/src/pages/GeneralSettings/Appearance/index.jsx       | 2 +-
 frontend/src/pages/GeneralSettings/Chats/index.jsx            | 2 +-
 frontend/src/pages/GeneralSettings/EmbedChats/index.jsx       | 2 +-
 frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx     | 2 +-
 frontend/src/pages/GeneralSettings/Security/index.jsx         | 2 +-
 frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx   | 4 ++--
 frontend/src/pages/WorkspaceSettings/index.jsx                | 4 ++--
 15 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index 00dd9550a61..a20e323bd1b 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
index 09f58489803..293da491f32 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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]">
diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index cdf0a649591..31b2b7923e7 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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">
diff --git a/frontend/src/pages/Admin/Logging/index.jsx b/frontend/src/pages/Admin/Logging/index.jsx
index 697823c4a66..f405c9a6810 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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">
diff --git a/frontend/src/pages/Admin/System/index.jsx b/frontend/src/pages/Admin/System/index.jsx
index 040edc70c97..9fe4c71833d 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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}
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index 1947dbb4fd8..f9b067821f5 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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">
diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index 3ab4c8cda99..fa612af12cd 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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">
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index 8814820cd76..606dbf0f565 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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">
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index 2ff3c292cce..c2311a2c3e6 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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">
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index 0ddb0ad7a43..5afde115d4a 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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">
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index c74d8c7e1bb..d6079f39100 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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">
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
index 103ee728139..73a2ca6dbd3 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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">
diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx
index 55e2c797e94..7824825af7d 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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 />
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index 5a799ecad6d..36242d1463f 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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"
diff --git a/frontend/src/pages/WorkspaceSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/index.jsx
index 1c7acd48671..952860ade8c 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 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"

From 55206d3462f861324a53c704c98e9bf3e15b216b Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 26 Feb 2024 21:25:30 -0800
Subject: [PATCH 06/28] remove unneeded conditional

---
 frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index bbd535e71ae..7f05b4ed86b 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -93,11 +93,7 @@ export default function ActiveWorkspaces() {
               transition-all duration-[200ms]
                 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:font-bold border-2 border-outline
-                ${
-                  isActive
-                    ? "bg-workspace-item-selected-gradient font-bold"
-                    : ""
-                }`}
+                ${isActive && "bg-workspace-item-selected-gradient font-bold"}`}
               >
                 <div className="flex flex-row justify-between w-full">
                   <div className="flex items-center space-x-2">

From 2c3b01b5afde1e7d592ae47a6d785eb19ff2d66b Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 27 Feb 2024 16:43:09 -0800
Subject: [PATCH 07/28] custom messages component redesign and appearance
 settings layout changes

---
 .../components/EditingChatBubble/index.jsx    | 83 ++++++++++---------
 .../Appearance/CustomLogo/index.jsx           | 12 +--
 .../Appearance/CustomMessages/index.jsx       | 31 ++++---
 .../FooterCustomization/NewIconForm/index.jsx |  2 +-
 .../Appearance/FooterCustomization/index.jsx  | 10 +--
 .../Appearance/SupportEmail/index.jsx         | 10 ++-
 .../GeneralSettings/Appearance/index.jsx      | 12 +--
 7 files changed, 87 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/EditingChatBubble/index.jsx b/frontend/src/components/EditingChatBubble/index.jsx
index ba5cc480481..0aa2a078488 100644
--- a/frontend/src/components/EditingChatBubble/index.jsx
+++ b/frontend/src/components/EditingChatBubble/index.jsx
@@ -13,49 +13,52 @@ export default function EditingChatBubble({
   const isUser = type === "user";
 
   return (
-    <div
-      className={`relative flex w-full mt-2 items-start ${
-        isUser ? "justify-end" : "justify-start"
-      }`}
-    >
-      <button
-        className={`transition-all duration-300 absolute z-10 text-white bg-neutral-700 rounded-full hover:bg-selected-preference-gradient hover:border-white border-transparent border shadow-lg ${
-          isUser ? "right-0 mr-2" : "ml-2"
-        }`}
-        style={{ top: "-8px", [isUser ? "right" : "left"]: "255px" }}
-        onClick={() => removeMessage(index)}
-      >
-        <X className="m-0.5" size={20} />
-      </button>
+    <div>
+      <p className={`text-xs text-[#D3D4D4] ${isUser ? "text-right" : ""}`}>
+        {isUser ? "User" : "AnythingLLM Chat Assistant"}
+      </p>
       <div
-        className={`p-4 max-w-full md:w-[290px] ${
-          isUser ? "bg-sky-400 text-black" : "bg-white text-black"
-        } ${
-          isUser
-            ? "rounded-tr-[40px] rounded-tl-[40px] rounded-bl-[40px]"
-            : "rounded-br-[40px] rounded-tl-[40px] rounded-tr-[40px]"
-        }
+        className={`relative flex w-full mt-2 items-start ${
+          isUser ? "justify-end" : "justify-start"
         }`}
-        onDoubleClick={() => setIsEditing(true)}
       >
-        {isEditing ? (
-          <input
-            value={tempMessage}
-            onChange={(e) => setTempMessage(e.target.value)}
-            onBlur={() => {
-              handleMessageChange(index, type, tempMessage);
-              setIsEditing(false);
-            }}
-            autoFocus
-            className="w-full"
-          />
-        ) : (
-          tempMessage && (
-            <p className="text-black font-[500] md:font-semibold text-sm md:text-base break-words">
-              {tempMessage}
-            </p>
-          )
-        )}
+        <button
+          className={`transition-all duration-300 absolute z-10 text-white rounded-full hover:bg-neutral-700 hover:border-white border-transparent border shadow-lg ${
+            isUser ? "right-0 mr-2" : "ml-2"
+          }`}
+          style={{ top: "6px", [isUser ? "right" : "left"]: "290px" }}
+          onClick={() => removeMessage(index)}
+        >
+          <X className="m-0.5" size={20} />
+        </button>
+        <div
+          className={`p-2 max-w-full md:w-[290px] text-black rounded-[8px] ${
+            isUser ? "bg-[#41444C] text-white" : "bg-[#2E3036] text-white"
+          }
+        }`}
+          onDoubleClick={() => setIsEditing(true)}
+        >
+          {isEditing ? (
+            <input
+              value={tempMessage}
+              onChange={(e) => setTempMessage(e.target.value)}
+              onBlur={() => {
+                handleMessageChange(index, type, tempMessage);
+                setIsEditing(false);
+              }}
+              autoFocus
+              className={`w-full ${
+                isUser ? "bg-[#41444C] text-white" : "bg-[#2E3036] text-white"
+              }`}
+            />
+          ) : (
+            tempMessage && (
+              <p className=" font-[500] md:font-semibold text-sm md:text-base break-words">
+                {tempMessage}
+              </p>
+            )
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
index 1e81f563c3f..2301a3c79d1 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
@@ -63,10 +63,12 @@ export default function CustomLogo() {
   };
 
   return (
-    <div className="my-6">
-      <div className="flex flex-col gap-y-2">
-        <h2 className="leading-tight font-medium text-white">Custom Logo</h2>
-        <p className="text-sm font-base text-white/60">
+    <div className="mt-6 mb-8">
+      <div className="flex flex-col gap-y-1">
+        <h2 className="text-base leading-6 font-bold text-white">
+          Custom Logo
+        </h2>
+        <p className="text-xs leading-[18px] font-base text-white/60">
           Upload your custom logo to make your chatbot yours.
         </p>
       </div>
@@ -80,7 +82,7 @@ export default function CustomLogo() {
         />
         <div className="flex flex-row gap-x-8">
           <label
-            className="mt-5 transition-all duration-300 hover:opacity-60"
+            className="mt-3 transition-all duration-300 hover:opacity-60"
             hidden={!isDefaultLogo}
           >
             <input
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
index 42df5b9dceb..40043f15ab6 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
@@ -53,16 +53,16 @@ export default function CustomMessages() {
   };
 
   return (
-    <div className="mb-6">
-      <div className="flex flex-col gap-y-2">
-        <h2 className="leading-tight font-medium text-white">
+    <div className="mb-8">
+      <div className="flex flex-col gap-y-1">
+        <h2 className="text-base leading-6 font-bold text-white">
           Custom Messages
         </h2>
-        <p className="text-sm font-base text-white/60">
+        <p className="text-xs leading-[18px] font-base text-white/60">
           Customize the automatic messages displayed to your users.
         </p>
       </div>
-      <div className="mt-6 flex flex-col gap-y-6 bg-zinc-900 rounded-lg px-6 pt-4 max-w-[700px]">
+      <div className="mt-3 flex flex-col gap-y-6 bg-[#1C1E21] rounded-lg pr-[31px] pl-[12px] pt-4 max-w-[700px]">
         {messages.map((message, index) => (
           <div key={index} className="flex flex-col gap-y-2">
             {message.user && (
@@ -85,27 +85,34 @@ export default function CustomMessages() {
             )}
           </div>
         ))}
-        <div className="flex gap-4 mt-12 justify-between pb-7">
+        <div className="flex gap-4 mt-12 justify-between pb-[15px]">
           <button
             className="self-end text-white hover:text-white/60 transition"
             onClick={() => addMessage("response")}
           >
-            <div className="flex items-center justify-start">
-              <Plus className="w-5 h-5 m-2" weight="fill" /> New System Message
+            <div className="flex items-center justify-start text-sm font-normal -ml-2">
+              <Plus className="m-2" size={16} weight="bold" />
+              <span className="leading-5">
+                New <span className="font-bold italic mr-1">system</span>{" "}
+                message
+              </span>
             </div>
           </button>
           <button
-            className="self-end text-sky-400 hover:text-sky-400/60 transition"
+            className="self-end text-white hover:text-white/60 transition"
             onClick={() => addMessage("user")}
           >
-            <div className="flex items-center">
-              <Plus className="w-5 h-5 m-2" weight="fill" /> New User Message
+            <div className="flex items-center justify-start text-sm font-normal">
+              <Plus className="m-2" size={16} weight="bold" />
+              <span className="leading-5">
+                New <span className="font-bold italic mr-1">user</span> message
+              </span>
             </div>
           </button>
         </div>
       </div>
       {hasChanges && (
-        <div className="flex justify-center py-6">
+        <div className="flex justify-start pt-6">
           <button
             className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
             onClick={handleMessageSave}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
index 8828bbbaafb..54db8db2f7e 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
@@ -20,7 +20,7 @@ export default function NewIconForm({ handleSubmit, showing }) {
   if (!showing) return null;
   return (
     <form onSubmit={handleSubmit} className="flex justify-start">
-      <div className="mt-6 mb-6 flex flex-col bg-zinc-900 rounded-lg px-6 py-4">
+      <div className="mt-3 flex flex-col bg-zinc-900 rounded-lg px-6 py-4">
         <div className="flex gap-x-4 items-center">
           <div
             className="relative flex flex-col items-center gap-y-4"
diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
index ee94e7c34cf..1963f5bc9a0 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
@@ -67,12 +67,12 @@ export default function FooterCustomization() {
   };
 
   return (
-    <div className="mb-6">
-      <div className="flex flex-col gap-y-2">
-        <h2 className="leading-tight font-medium text-white">
+    <div className="mb-8">
+      <div className="flex flex-col gap-y-1">
+        <h2 className="text-base leading-6 font-bold text-white">
           Custom Footer Icons
         </h2>
-        <p className="text-sm font-base text-white/60">
+        <p className="text-xs leading-[18px] font-base text-white/60">
           Customize the footer icons displayed on the bottom of the sidebar.
         </p>
       </div>
@@ -99,7 +99,7 @@ export default function FooterCustomization() {
 function CurrentIcons({ footerIcons, remove }) {
   if (footerIcons.length === 0) return null;
   return (
-    <div className="flex flex-col w-fit gap-y-2 mt-4">
+    <div className="flex flex-col w-fit gap-y-2 mt-3">
       {footerIcons.map((icon, index) => (
         <div
           key={index}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
index 548001e22c7..8a50c73f90c 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
@@ -53,9 +53,11 @@ export default function SupportEmail() {
   if (loading || !user?.role) return null;
   return (
     <form className="mb-6" onSubmit={updateSupportEmail}>
-      <div className="flex flex-col gap-y-2">
-        <h2 className="leading-tight font-medium text-white">Support Email</h2>
-        <p className="text-sm font-base text-white/60">
+      <div className="flex flex-col gap-y-1">
+        <h2 className="text-base leading-6 font-bold text-white">
+          Support Email
+        </h2>
+        <p className="text-xs leading-[18px] font-base text-white/60">
           Set the support email address that shows up in the user menu while
           logged into this instance.
         </p>
@@ -64,7 +66,7 @@ export default function SupportEmail() {
         <input
           name="supportEmail"
           type="email"
-          className="bg-zinc-900 mt-4 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 max-w-[275px]"
+          className="bg-zinc-900 mt-3 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 max-w-[275px] placeholder:text-white/20"
           placeholder="support@mycompany.com"
           required={true}
           autoComplete="off"
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index c2311a2c3e6..e79f6f7fce0 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
@@ -11,16 +11,16 @@ 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        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"
       >
-        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-            <div className="items-center flex gap-x-4">
-              <p className="text-2xl font-semibold text-white">
-                Appearance Settings
+            <div className="items-center">
+              <p className="text-lg leading-6 font-bold text-white">
+                Appearance
               </p>
             </div>
-            <p className="text-sm font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
               Customize the appearance settings of your platform.
             </p>
           </div>

From f0287463940922a504912e87095dc2954936461f Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 27 Feb 2024 17:48:51 -0800
Subject: [PATCH 08/28] improve UX of custom logo file uploader component to
 match designs

---
 .../Appearance/CustomLogo/index.jsx           | 112 +++++++++++-------
 1 file changed, 69 insertions(+), 43 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
index 2301a3c79d1..676b8e06f5f 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
@@ -1,7 +1,7 @@
 import useLogo from "@/hooks/useLogo";
 import System from "@/models/system";
 import showToast from "@/utils/toast";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import AnythingLLM from "@/media/logo/anything-llm.png";
 import { Plus } from "@phosphor-icons/react";
 
@@ -9,6 +9,7 @@ export default function CustomLogo() {
   const { logo: _initLogo, setLogo: _setLogo } = useLogo();
   const [logo, setLogo] = useState("");
   const [isDefaultLogo, setIsDefaultLogo] = useState(true);
+  const fileInputRef = useRef(null);
 
   useEffect(() => {
     async function logoInit() {
@@ -62,6 +63,10 @@ export default function CustomLogo() {
     showToast("Image successfully removed.", "success");
   };
 
+  const triggerFileInputClick = () => {
+    fileInputRef.current?.click();
+  };
+
   return (
     <div className="mt-6 mb-8">
       <div className="flex flex-col gap-y-1">
@@ -72,53 +77,74 @@ export default function CustomLogo() {
           Upload your custom logo to make your chatbot yours.
         </p>
       </div>
-      <div className="flex md:flex-row flex-col items-center">
-        <img
-          src={logo}
-          alt="Uploaded Logo"
-          className="w-48 h-48 object-contain mr-6"
-          hidden={isDefaultLogo}
-          onError={(e) => (e.target.src = AnythingLLM)}
-        />
-        <div className="flex flex-row gap-x-8">
-          <label
-            className="mt-3 transition-all duration-300 hover:opacity-60"
-            hidden={!isDefaultLogo}
-          >
-            <input
-              id="logo-upload"
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={handleFileUpload}
-            />
-            <div
-              className="w-80 py-4 bg-zinc-900/50 rounded-2xl border-2 border-dashed border-white border-opacity-60 justify-center items-center inline-flex cursor-pointer"
-              htmlFor="logo-upload"
+      {isDefaultLogo ? (
+        <div className="flex md:flex-row flex-col items-center">
+          <div className="flex flex-row gap-x-8">
+            <label
+              className="mt-3 transition-all duration-300 hover:opacity-60"
+              hidden={!isDefaultLogo}
             >
-              <div className="flex flex-col items-center justify-center">
-                <div className="rounded-full bg-white/40">
-                  <Plus className="w-6 h-6 text-black/80 m-2" />
-                </div>
-                <div className="text-white text-opacity-80 text-sm font-semibold py-1">
-                  Add a custom logo
-                </div>
-                <div className="text-white text-opacity-60 text-xs font-medium py-1">
-                  Recommended size: 800 x 200
+              <input
+                id="logo-upload"
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handleFileUpload}
+              />
+              <div
+                className="w-80 py-4 bg-zinc-900/50 rounded-2xl border-2 border-dashed border-white border-opacity-60 justify-center items-center inline-flex cursor-pointer"
+                htmlFor="logo-upload"
+              >
+                <div className="flex flex-col items-center justify-center">
+                  <div className="rounded-full bg-white/40">
+                    <Plus className="w-6 h-6 text-black/80 m-2" />
+                  </div>
+                  <div className="text-white text-opacity-80 text-sm font-semibold py-1">
+                    Add a custom logo
+                  </div>
+                  <div className="text-white text-opacity-60 text-xs font-medium py-1">
+                    Recommended size: 800 x 200
+                  </div>
                 </div>
               </div>
+            </label>
+          </div>
+        </div>
+      ) : (
+        <div className="flex md:flex-row flex-col items-center relative">
+          <div className="group w-80 mt-3  overflow-hidden">
+            <img
+              src={logo}
+              alt="Uploaded Logo"
+              className="w-full border-2 border-white/20 border-dashed p-1 rounded-2xl"
+            />
+
+            <div className="absolute w-80 top-0 left-0 right-0 bottom-0 flex flex-col gap-y-3 justify-center items-center rounded-2xl mt-3 bg-black bg-opacity-80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out border-2 border-transparent hover:border-white">
+              <button
+                onClick={triggerFileInputClick}
+                className="text-white text-base font-medium hover:text-opacity-60 mx-2"
+              >
+                Replace
+              </button>
+
+              <input
+                id="logo-upload"
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handleFileUpload}
+                ref={fileInputRef}
+              />
+              <button
+                onClick={handleRemoveLogo}
+                className="text-white text-base font-medium hover:text-opacity-60 mx-2"
+              >
+                Remove
+              </button>
             </div>
-          </label>
-          {!isDefaultLogo && (
-            <button
-              onClick={handleRemoveLogo}
-              className="text-white text-base font-medium hover:text-opacity-60"
-            >
-              Delete
-            </button>
-          )}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }

From 31adf6ebb2c59e8d8eff1d065c339e5ce6e5ce1e Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Thu, 29 Feb 2024 11:53:42 -0800
Subject: [PATCH 09/28] fix sizing on custom logo upload field

---
 .../src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
index 676b8e06f5f..8b2b5cab608 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
@@ -112,11 +112,11 @@ export default function CustomLogo() {
         </div>
       ) : (
         <div className="flex md:flex-row flex-col items-center relative">
-          <div className="group w-80 mt-3  overflow-hidden">
+          <div className="group w-80 h-[130px] mt-3 overflow-hidden">
             <img
               src={logo}
               alt="Uploaded Logo"
-              className="w-full border-2 border-white/20 border-dashed p-1 rounded-2xl"
+              className="w-full h-full object-cover border-2 border-white/20 border-dashed p-1 rounded-2xl"
             />
 
             <div className="absolute w-80 top-0 left-0 right-0 bottom-0 flex flex-col gap-y-3 justify-center items-center rounded-2xl mt-3 bg-black bg-opacity-80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out border-2 border-transparent hover:border-white">

From 42a082563e935d315766cc84eb752de0262c42a9 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Thu, 29 Feb 2024 13:50:55 -0800
Subject: [PATCH 10/28] WIP footer customization new UI

---
 .../Appearance/FooterCustomization/index.jsx  | 176 ++++++++++++++----
 1 file changed, 137 insertions(+), 39 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
index 1963f5bc9a0..732a534a85e 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
@@ -11,6 +11,7 @@ export default function FooterCustomization() {
   const [loading, setLoading] = useState(true);
   const [footerIcons, setFooterIcons] = useState([]);
   const [showForm, setShowForm] = useState(false);
+  console.log(footerIcons);
 
   useEffect(() => {
     async function fetchFooterIcons() {
@@ -40,32 +41,6 @@ export default function FooterCustomization() {
     setFooterIcons(updatedIcons);
     showToast("Successfully removed footer icon.", "success", { clear: true });
   };
-
-  const onSubmit = async (e) => {
-    e.preventDefault();
-    const form = new FormData(e.target);
-    const icon = form.get("icon");
-    const url = form.get("url");
-
-    const newIcon = { icon, url };
-    setFooterIcons([...footerIcons, newIcon]);
-
-    const { success, error } = await Admin.updateSystemPreferences({
-      footer_data: JSON.stringify([...footerIcons, newIcon]),
-    });
-
-    if (!success) {
-      showToast(`Failed to add footer icon - ${error}`, "error", {
-        clear: true,
-      });
-      return;
-    }
-    window.localStorage.removeItem(System.cacheKeys.footerIcons);
-
-    setShowForm(false);
-    showToast("Successfully added footer icon.", "success", { clear: true });
-  };
-
   return (
     <div className="mb-8">
       <div className="flex flex-col gap-y-1">
@@ -76,25 +51,148 @@ export default function FooterCustomization() {
           Customize the footer icons displayed on the bottom of the sidebar.
         </p>
       </div>
-      <CurrentIcons footerIcons={footerIcons} remove={removeFooterIcon} />
-      <NewIconForm
-        handleSubmit={onSubmit}
-        showing={footerIcons.length < MAX_ICONS && showForm}
-      />
-      <div hidden={!(!showForm && footerIcons.length < MAX_ICONS) || loading}>
-        <div className="flex gap-2 mt-6">
-          <button
-            onClick={() => setShowForm(true)}
-            className="flex gap-x-2 items-center justify-center text-white text-sm hover:text-sky-400 transition-all duration-300"
-          >
-            Add new footer icon
-            <Plus className="" size={24} weight="fill" />
+      <div className="mt-3 flex gap-x-3 font-bold text-white text-sm">
+        <div>Icon</div>
+        <div>Link</div>
+      </div>
+      <div className="mt-2 flex flex-col gap-y-[10px]">
+        <div className="flex items-center gap-x-1.5">
+          <div className="h-[34px] w-[34px] bg-[#1C1E21] rounded-full flex items-center justify-center">
+            {" "}
+            {React.createElement(ICON_COMPONENTS["DiscordLogo"], {
+              className: "h-5 w-5 text-white",
+              weight: "fill",
+            })}
+          </div>
+          <input
+            type="url"
+            name="url"
+            required={true}
+            placeholder="https://example.com"
+            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px]"
+          />
+          <button onClick={() => setShowForm(true)}>
+            <X
+              className="transition-all duration-300 text-white bg-transparent rounded-full hover:bg-zinc-600 hover:border-zinc-600 hover:text-white border-transparent border shadow-lg"
+              size={20}
+              weight="bold"
+            />
           </button>
         </div>
+
+        <div className="flex items-center gap-x-1.5">
+          <div className="h-[34px] w-[34px] bg-[#1C1E21] rounded-full"></div>
+          <input
+            type="url"
+            name="url"
+            required={true}
+            placeholder="https://example.com"
+            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px]"
+          />
+        </div>
+
+        <div className="flex items-center gap-x-1.5">
+          <div className="h-[34px] w-[34px] bg-[#1C1E21] rounded-full"></div>
+          <input
+            type="url"
+            name="url"
+            required={true}
+            placeholder="https://example.com"
+            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px]"
+          />
+        </div>
       </div>
     </div>
   );
 }
+// export default function FooterCustomization() {
+//   const [loading, setLoading] = useState(true);
+//   const [footerIcons, setFooterIcons] = useState([]);
+//   const [showForm, setShowForm] = useState(false);
+
+//   useEffect(() => {
+//     async function fetchFooterIcons() {
+//       const settings = (await Admin.systemPreferences())?.settings;
+//       if (settings && settings.footer_data) {
+//         setFooterIcons(safeJsonParse(settings.footer_data, []));
+//       }
+//       setLoading(false);
+//     }
+//     fetchFooterIcons();
+//   }, []);
+
+//   const removeFooterIcon = async (index) => {
+//     const updatedIcons = footerIcons.filter((_, i) => i !== index);
+//     const { success, error } = await Admin.updateSystemPreferences({
+//       footer_data: JSON.stringify(updatedIcons),
+//     });
+
+//     if (!success) {
+//       showToast(`Failed to remove footer icon - ${error}`, "error", {
+//         clear: true,
+//       });
+//       return;
+//     }
+
+//     window.localStorage.removeItem(System.cacheKeys.footerIcons);
+//     setFooterIcons(updatedIcons);
+//     showToast("Successfully removed footer icon.", "success", { clear: true });
+//   };
+
+//   const onSubmit = async (e) => {
+//     e.preventDefault();
+//     const form = new FormData(e.target);
+//     const icon = form.get("icon");
+//     const url = form.get("url");
+
+//     const newIcon = { icon, url };
+//     setFooterIcons([...footerIcons, newIcon]);
+
+//     const { success, error } = await Admin.updateSystemPreferences({
+//       footer_data: JSON.stringify([...footerIcons, newIcon]),
+//     });
+
+//     if (!success) {
+//       showToast(`Failed to add footer icon - ${error}`, "error", {
+//         clear: true,
+//       });
+//       return;
+//     }
+//     window.localStorage.removeItem(System.cacheKeys.footerIcons);
+
+//     setShowForm(false);
+//     showToast("Successfully added footer icon.", "success", { clear: true });
+//   };
+
+//   return (
+//     <div className="mb-8">
+//       <div className="flex flex-col gap-y-1">
+//         <h2 className="text-base leading-6 font-bold text-white">
+//           Custom Footer Icons
+//         </h2>
+//         <p className="text-xs leading-[18px] font-base text-white/60">
+//           Customize the footer icons displayed on the bottom of the sidebar.
+//         </p>
+//       </div>
+//       <CurrentIcons footerIcons={footerIcons} remove={removeFooterIcon} />
+//       <NewIconForm
+//         handleSubmit={onSubmit}
+//         showing={footerIcons.length < MAX_ICONS && showForm}
+//       />
+//       <div hidden={!(!showForm && footerIcons.length < MAX_ICONS) || loading}>
+//         <div className="flex gap-2 mt-6">
+//           <button
+//             onClick={() => setShowForm(true)}
+//             className="flex gap-x-2 items-center justify-center text-white text-sm hover:text-sky-400 transition-all duration-300"
+//           >
+//             Add new footer icon
+//             <Plus className="" size={24} weight="fill" />
+//           </button>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }
 
 function CurrentIcons({ footerIcons, remove }) {
   if (footerIcons.length === 0) return null;

From 3b5601c9b8a0da347f2a337275be94f4a2ed1925 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 20:09:24 -0800
Subject: [PATCH 11/28] implement new UI for custom footer icon selection

---
 .../FooterCustomization/NewIconForm/index.jsx | 161 +++++++------
 .../Appearance/FooterCustomization/index.jsx  | 220 +++---------------
 2 files changed, 121 insertions(+), 260 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
index fd98bd4310a..51284bfa4dc 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
@@ -1,11 +1,20 @@
 import { ICON_COMPONENTS } from "@/components/Footer";
 import React, { useEffect, useRef, useState } from "react";
+import { Plus, X } from "@phosphor-icons/react";
 
-export default function NewIconForm({ handleSubmit, showing }) {
-  const [selectedIcon, setSelectedIcon] = useState("Info");
+export default function NewIconForm({ icon, url, onSave, onRemove }) {
+  const [selectedIcon, setSelectedIcon] = useState(icon || "Plus");
+  const [selectedUrl, setSelectedUrl] = useState(url || "");
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isEdited, setIsEdited] = useState(false);
   const dropdownRef = useRef(null);
 
+  useEffect(() => {
+    setSelectedIcon(icon || "Plus");
+    setSelectedUrl(url || "");
+    setIsEdited(false);
+  }, [icon, url]);
+
   useEffect(() => {
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -17,82 +26,90 @@ export default function NewIconForm({ handleSubmit, showing }) {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [dropdownRef]);
 
-  if (!showing) return null;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (selectedIcon !== "Plus" && selectedUrl) {
+      onSave(selectedIcon, selectedUrl);
+      setIsEdited(false);
+    }
+  };
+
+  const handleRemove = () => {
+    onRemove();
+    setSelectedIcon("Plus");
+    setSelectedUrl("");
+    setIsEdited(false);
+  };
+
+  const handleIconChange = (iconName) => {
+    setSelectedIcon(iconName);
+    setIsDropdownOpen(false);
+    setIsEdited(true);
+  };
+
+  const handleUrlChange = (e) => {
+    setSelectedUrl(e.target.value);
+    setIsEdited(true);
+  };
+
   return (
-    <form onSubmit={handleSubmit} className="flex justify-start">
-      <div className="mt-3 flex flex-col bg-zinc-900 rounded-lg px-6 py-4">
-        <div className="flex gap-x-4 items-center">
-          <div
-            className="relative flex flex-col items-center gap-y-4"
-            ref={dropdownRef}
-          >
-            <input type="hidden" name="icon" value={selectedIcon} />
-            <label className="text-sm font-medium text-white">Icon</label>
+    <form onSubmit={handleSubmit} className="flex items-center gap-x-1.5">
+      <div className="relative" ref={dropdownRef}>
+        <div
+          className="h-[34px] w-[34px] bg-[#1C1E21] rounded-full flex items-center justify-center cursor-pointer"
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        >
+          {React.createElement(ICON_COMPONENTS[selectedIcon] || Plus, {
+            className: "h-5 w-5 text-white",
+            weight: selectedIcon === "Plus" ? "bold" : "fill",
+          })}
+        </div>
+        {isDropdownOpen && (
+          <div className="absolute z-10 grid grid-cols-4 bg-[#41444C] mt-2 rounded-md w-[150px] h-[78px] overflow-y-auto border border-white/20 shadow-lg">
+            {Object.keys(ICON_COMPONENTS).map((iconName) => (
+              <button
+                key={iconName}
+                type="button"
+                className="flex justify-center items-center border border-transparent hover:bg-[#1C1E21] hover:border-slate-100 rounded-full p-2"
+                onClick={() => handleIconChange(iconName)}
+              >
+                {React.createElement(ICON_COMPONENTS[iconName], {
+                  className: "h-5 w-5 text-white",
+                  weight: "fill",
+                })}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      <input
+        type="url"
+        value={selectedUrl}
+        onChange={handleUrlChange}
+        placeholder="https://example.com"
+        className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px]"
+        required
+      />
+      {selectedIcon !== "Plus" && (
+        <>
+          {isEdited ? (
+            <button
+              type="submit"
+              className="text-sky-400 px-2 py-2 rounded-md text-sm font-bold hover:text-sky-500"
+            >
+              Save
+            </button>
+          ) : (
             <button
               type="button"
-              className={`${
-                isDropdownOpen
-                  ? "bg-menu-item-selected-gradient border-slate-100/50"
-                  : ""
-              }border-transparent 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`}
-              onClick={(e) => {
-                e.preventDefault();
-                setIsDropdownOpen(!isDropdownOpen);
-              }}
+              onClick={handleRemove}
+              className="hover:text-red-500 text-white/80 px-2 py-2 rounded-md text-sm font-bold"
             >
-              {React.createElement(ICON_COMPONENTS[selectedIcon], {
-                className: "h-5 w-5 text-white",
-                weight: "fill",
-              })}
+              <X size={20} />
             </button>
-            {isDropdownOpen && (
-              <div className="absolute z-10 grid grid-cols-4 gap-4 bg-zinc-800 -mt-20 ml-44 p-1 rounded-md w-56 h-28 overflow-y-auto border border-slate-100/10">
-                {Object.keys(ICON_COMPONENTS).map((iconName) => (
-                  <button
-                    key={iconName}
-                    type="button"
-                    className="flex justify-center items-center border border-transparent hover:bg-menu-item-selected-gradient hover:border-slate-100 rounded-full"
-                    onClick={() => {
-                      setSelectedIcon(iconName);
-                      setIsDropdownOpen(false);
-                    }}
-                  >
-                    {React.createElement(ICON_COMPONENTS[iconName], {
-                      className: "h-5 w-5 text-white m-2.5",
-                      weight: "fill",
-                    })}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-          <div className="flex flex-col gap-y-4">
-            <label className="text-sm font-medium text-white">Link</label>
-            <input
-              type="url"
-              name="url"
-              required={true}
-              placeholder="https://example.com"
-              className="bg-sidebar text-white placeholder:text-white/20 rounded-md p-2"
-            />
-          </div>
-          {selectedIcon !== "" && (
-            <div className="flex flex-col gap-y-4">
-              <label className="text-sm font-medium text-white invisible">
-                Submit
-              </label>
-              <div className="flex justify-center">
-                <button
-                  type="submit"
-                  className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  Save
-                </button>
-              </div>
-            </div>
           )}
-        </div>
-      </div>
+        </>
+      )}
     </form>
   );
 }
diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
index 732a534a85e..bd78861a78a 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
@@ -1,37 +1,37 @@
 import React, { useState, useEffect } from "react";
 import showToast from "@/utils/toast";
-import { Plus, X } from "@phosphor-icons/react";
-import { ICON_COMPONENTS, MAX_ICONS } from "@/components/Footer";
 import { safeJsonParse } from "@/utils/request";
 import NewIconForm from "./NewIconForm";
 import Admin from "@/models/admin";
 import System from "@/models/system";
 
 export default function FooterCustomization() {
-  const [loading, setLoading] = useState(true);
-  const [footerIcons, setFooterIcons] = useState([]);
-  const [showForm, setShowForm] = useState(false);
-  console.log(footerIcons);
+  const [footerIcons, setFooterIcons] = useState(Array(3).fill(null));
 
   useEffect(() => {
     async function fetchFooterIcons() {
       const settings = (await Admin.systemPreferences())?.settings;
       if (settings && settings.footer_data) {
-        setFooterIcons(safeJsonParse(settings.footer_data, []));
+        const parsedIcons = safeJsonParse(settings.footer_data, []);
+        setFooterIcons((prevIcons) => {
+          const updatedIcons = [...prevIcons];
+          parsedIcons.forEach((icon, index) => {
+            updatedIcons[index] = icon;
+          });
+          return updatedIcons;
+        });
       }
-      setLoading(false);
     }
     fetchFooterIcons();
   }, []);
 
-  const removeFooterIcon = async (index) => {
-    const updatedIcons = footerIcons.filter((_, i) => i !== index);
+  const updateFooterIcons = async (updatedIcons) => {
     const { success, error } = await Admin.updateSystemPreferences({
-      footer_data: JSON.stringify(updatedIcons),
+      footer_data: JSON.stringify(updatedIcons.filter((icon) => icon !== null)),
     });
 
     if (!success) {
-      showToast(`Failed to remove footer icon - ${error}`, "error", {
+      showToast(`Failed to update footer icons - ${error}`, "error", {
         clear: true,
       });
       return;
@@ -39,8 +39,15 @@ export default function FooterCustomization() {
 
     window.localStorage.removeItem(System.cacheKeys.footerIcons);
     setFooterIcons(updatedIcons);
-    showToast("Successfully removed footer icon.", "success", { clear: true });
+    showToast("Successfully updated footer icons.", "success", { clear: true });
   };
+
+  const handleRemoveIcon = (index) => {
+    const updatedIcons = [...footerIcons];
+    updatedIcons[index] = null;
+    updateFooterIcons(updatedIcons);
+  };
+
   return (
     <div className="mb-8">
       <div className="flex flex-col gap-y-1">
@@ -56,183 +63,20 @@ export default function FooterCustomization() {
         <div>Link</div>
       </div>
       <div className="mt-2 flex flex-col gap-y-[10px]">
-        <div className="flex items-center gap-x-1.5">
-          <div className="h-[34px] w-[34px] bg-[#1C1E21] rounded-full flex items-center justify-center">
-            {" "}
-            {React.createElement(ICON_COMPONENTS["DiscordLogo"], {
-              className: "h-5 w-5 text-white",
-              weight: "fill",
-            })}
-          </div>
-          <input
-            type="url"
-            name="url"
-            required={true}
-            placeholder="https://example.com"
-            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px]"
-          />
-          <button onClick={() => setShowForm(true)}>
-            <X
-              className="transition-all duration-300 text-white bg-transparent rounded-full hover:bg-zinc-600 hover:border-zinc-600 hover:text-white border-transparent border shadow-lg"
-              size={20}
-              weight="bold"
-            />
-          </button>
-        </div>
-
-        <div className="flex items-center gap-x-1.5">
-          <div className="h-[34px] w-[34px] bg-[#1C1E21] rounded-full"></div>
-          <input
-            type="url"
-            name="url"
-            required={true}
-            placeholder="https://example.com"
-            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px]"
-          />
-        </div>
-
-        <div className="flex items-center gap-x-1.5">
-          <div className="h-[34px] w-[34px] bg-[#1C1E21] rounded-full"></div>
-          <input
-            type="url"
-            name="url"
-            required={true}
-            placeholder="https://example.com"
-            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px]"
+        {footerIcons.map((icon, index) => (
+          <NewIconForm
+            key={index}
+            icon={icon?.icon}
+            url={icon?.url}
+            onSave={(newIcon, newUrl) => {
+              const updatedIcons = [...footerIcons];
+              updatedIcons[index] = { icon: newIcon, url: newUrl };
+              updateFooterIcons(updatedIcons);
+            }}
+            onRemove={() => handleRemoveIcon(index)}
           />
-        </div>
+        ))}
       </div>
     </div>
   );
 }
-// export default function FooterCustomization() {
-//   const [loading, setLoading] = useState(true);
-//   const [footerIcons, setFooterIcons] = useState([]);
-//   const [showForm, setShowForm] = useState(false);
-
-//   useEffect(() => {
-//     async function fetchFooterIcons() {
-//       const settings = (await Admin.systemPreferences())?.settings;
-//       if (settings && settings.footer_data) {
-//         setFooterIcons(safeJsonParse(settings.footer_data, []));
-//       }
-//       setLoading(false);
-//     }
-//     fetchFooterIcons();
-//   }, []);
-
-//   const removeFooterIcon = async (index) => {
-//     const updatedIcons = footerIcons.filter((_, i) => i !== index);
-//     const { success, error } = await Admin.updateSystemPreferences({
-//       footer_data: JSON.stringify(updatedIcons),
-//     });
-
-//     if (!success) {
-//       showToast(`Failed to remove footer icon - ${error}`, "error", {
-//         clear: true,
-//       });
-//       return;
-//     }
-
-//     window.localStorage.removeItem(System.cacheKeys.footerIcons);
-//     setFooterIcons(updatedIcons);
-//     showToast("Successfully removed footer icon.", "success", { clear: true });
-//   };
-
-//   const onSubmit = async (e) => {
-//     e.preventDefault();
-//     const form = new FormData(e.target);
-//     const icon = form.get("icon");
-//     const url = form.get("url");
-
-//     const newIcon = { icon, url };
-//     setFooterIcons([...footerIcons, newIcon]);
-
-//     const { success, error } = await Admin.updateSystemPreferences({
-//       footer_data: JSON.stringify([...footerIcons, newIcon]),
-//     });
-
-//     if (!success) {
-//       showToast(`Failed to add footer icon - ${error}`, "error", {
-//         clear: true,
-//       });
-//       return;
-//     }
-//     window.localStorage.removeItem(System.cacheKeys.footerIcons);
-
-//     setShowForm(false);
-//     showToast("Successfully added footer icon.", "success", { clear: true });
-//   };
-
-//   return (
-//     <div className="mb-8">
-//       <div className="flex flex-col gap-y-1">
-//         <h2 className="text-base leading-6 font-bold text-white">
-//           Custom Footer Icons
-//         </h2>
-//         <p className="text-xs leading-[18px] font-base text-white/60">
-//           Customize the footer icons displayed on the bottom of the sidebar.
-//         </p>
-//       </div>
-//       <CurrentIcons footerIcons={footerIcons} remove={removeFooterIcon} />
-//       <NewIconForm
-//         handleSubmit={onSubmit}
-//         showing={footerIcons.length < MAX_ICONS && showForm}
-//       />
-//       <div hidden={!(!showForm && footerIcons.length < MAX_ICONS) || loading}>
-//         <div className="flex gap-2 mt-6">
-//           <button
-//             onClick={() => setShowForm(true)}
-//             className="flex gap-x-2 items-center justify-center text-white text-sm hover:text-sky-400 transition-all duration-300"
-//           >
-//             Add new footer icon
-//             <Plus className="" size={24} weight="fill" />
-//           </button>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// }
-
-function CurrentIcons({ footerIcons, remove }) {
-  if (footerIcons.length === 0) return null;
-  return (
-    <div className="flex flex-col w-fit gap-y-2 mt-3">
-      {footerIcons.map((icon, index) => (
-        <div
-          key={index}
-          className="flex items-center justify-between bg-zinc-900 p-2 rounded-md gap-x-4"
-        >
-          <div className="flex items-center gap-x-2">
-            <IconPreview symbol={icon.icon} disabled={true} />
-            <span className="text-white/60">{icon.url}</span>
-          </div>
-
-          <button
-            type="button"
-            className="transition-all duration-300 text-neutral-700 bg-transparent rounded-full hover:bg-zinc-600 hover:border-zinc-600 hover:text-white border-transparent border shadow-lg mr-2"
-            onClick={() => remove(index)}
-          >
-            <X className="m-[1px]" size={20} />
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-const IconPreview = ({ symbol, disabled = false }) => {
-  const IconComponent = ICON_COMPONENTS.hasOwnProperty(symbol)
-    ? ICON_COMPONENTS[symbol]
-    : ICON_COMPONENTS.Info;
-
-  return (
-    <button
-      type="button"
-      disabled={disabled}
-      className="disabled:pointer-events-none border-transparent 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 mx-1"
-    >
-      <IconComponent className="h-5 w-5 text-white" weight="fill" />
-    </button>
-  );
-};

From ba98db2578eaff4637f5889578c374694e143042 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 20:50:49 -0800
Subject: [PATCH 12/28] update workspace chats to match new settings UI

---
 .../src/pages/GeneralSettings/Chats/index.jsx | 68 ++++++++-----------
 1 file changed, 29 insertions(+), 39 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index 5afde115d4a..0cc44350454 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -7,7 +7,7 @@ import useQuery from "@/hooks/useQuery";
 import ChatRow from "./ChatRow";
 import showToast from "@/utils/toast";
 import System from "@/models/system";
-import { CaretDown } from "@phosphor-icons/react";
+import { CaretDown, Download } from "@phosphor-icons/react";
 import { saveAs } from "file-saver";
 
 const exportOptions = {
@@ -47,11 +47,9 @@ const exportOptions = {
 
 export default function WorkspaceChats() {
   const [showMenu, setShowMenu] = useState(false);
-  const [exportType, setExportType] = useState("jsonl");
   const menuRef = useRef();
   const openMenuButton = useRef();
-
-  const handleDumpChats = async () => {
+  const handleDumpChats = async (exportType) => {
     const chats = await System.exportChats(exportType);
     if (!!chats) {
       const { name, mimeType, fileExtension, filenameFunc } =
@@ -90,56 +88,48 @@ 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        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"
       >
-        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-            <div className="items-center flex gap-x-4">
-              <p className="text-2xl font-semibold text-white">
+            <div className="flex justify-between items-center">
+              <p className="text-lg leading-6 font-bold text-white">
                 Workspace Chats
               </p>
-              <div className="flex gap-x-1 relative">
-                <button
-                  onClick={handleDumpChats}
-                  className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
-                >
-                  Export as {exportOptions[exportType].name}
-                </button>
+              <div className="relative">
                 <button
                   ref={openMenuButton}
                   onClick={toggleMenu}
-                  className={`transition-all duration-300 border border-slate-200 p-1 rounded-lg text-slate-200 text-sm items-center flex hover:bg-slate-200 hover:text-slate-800 ${
-                    showMenu ? "bg-slate-200 text-slate-800" : ""
-                  }`}
+                  className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md"
                 >
-                  <CaretDown weight="bold" className="h-4 w-4" />
+                  <Download size={18} weight="bold" />
+                  Export
+                  <CaretDown size={18} weight="bold" />
                 </button>
                 <div
                   ref={menuRef}
                   className={`${
                     showMenu ? "slide-down" : "slide-up hidden"
-                  } z-20 w-fit rounded-lg absolute top-full right-0 bg-sidebar p-4 flex items-center justify-center mt-2`}
+                  } z-20 w-fit rounded-lg absolute top-full right-0 bg-[#2C2F36] mt-2 shadow-md`}
                 >
-                  <div className="flex flex-col gap-y-2">
-                    {Object.entries(exportOptions)
-                      .filter(([type, _]) => type !== exportType)
-                      .map(([key, data]) => (
-                        <button
-                          key={key}
-                          onClick={() => {
-                            setExportType(key);
-                            setShowMenu(false);
-                          }}
-                          className="text-white hover:bg-slate-200/20 w-full text-left px-4 py-1.5 rounded-md"
-                        >
-                          {data.name}
-                        </button>
-                      ))}
+                  <div className="py-2">
+                    {Object.entries(exportOptions).map(([key, data]) => (
+                      <button
+                        key={key}
+                        onClick={() => {
+                          handleDumpChats(key);
+                          setShowMenu(false);
+                        }}
+                        className="w-full text-left px-4 py-2 text-white text-sm hover:bg-[#3D4147]"
+                      >
+                        {data.name}
+                      </button>
+                    ))}
                   </div>
                 </div>
               </div>
             </div>
-            <p className="text-sm font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
               These are all the recorded chats and messages that have been sent
               by users ordered by their creation date.
             </p>
@@ -195,8 +185,8 @@ function ChatsContainer() {
 
   return (
     <>
-      <table className="md:w-3/4 w-full text-sm text-left rounded-lg mt-5">
-        <thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
+      <table className="w-full text-sm text-left rounded-lg mt-6">
+        <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
           <tr>
             <th scope="col" className="px-6 py-3 rounded-tl-lg">
               Id
@@ -228,7 +218,7 @@ function ChatsContainer() {
             ))}
         </tbody>
       </table>
-      <div className="flex w-full justify-between items-center">
+      <div className="flex w-full justify-between items-center mt-6">
         <button
           onClick={handlePrevious}
           className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"

From 225968c3521baa77902523f25e143a8cc553f09b Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 21:13:28 -0800
Subject: [PATCH 13/28] update system preferences to match new settings UI

---
 frontend/src/pages/Admin/System/index.jsx | 128 +++++++++++-----------
 1 file changed, 66 insertions(+), 62 deletions(-)

diff --git a/frontend/src/pages/Admin/System/index.jsx b/frontend/src/pages/Admin/System/index.jsx
index 9fe4c71833d..9cb589d27a3 100644
--- a/frontend/src/pages/Admin/System/index.jsx
+++ b/frontend/src/pages/Admin/System/index.jsx
@@ -12,6 +12,7 @@ export default function AdminSystem() {
     enabled: false,
     limit: 10,
   });
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setSaving(true);
@@ -43,46 +44,35 @@ 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        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"
       >
         <form
           onSubmit={handleSubmit}
           onChange={() => setHasChanges(true)}
-          className="flex w-full"
+          className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16"
         >
-          <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">
-              <div className="items-center flex gap-x-4">
-                <p className="text-2xl font-semibold text-white">
-                  System Preferences
-                </p>
-                {hasChanges && (
-                  <button
-                    type="submit"
-                    disabled={saving}
-                    className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
-                  >
-                    {saving ? "Saving..." : "Save changes"}
-                  </button>
-                )}
-              </div>
-              <p className="text-sm font-base text-white text-opacity-60">
-                These are the overall settings and configurations of your
-                instance.
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+            <div className="items-center">
+              <p className="text-lg leading-6 font-bold text-white">
+                System Preferences
               </p>
             </div>
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+              These are the overall settings and configurations of your
+              instance.
+            </p>
+          </div>
 
-            <div className="my-5">
-              <div className="flex flex-col gap-y-2 mb-2.5">
-                <label className="leading-tight font-semibold text-white">
-                  Users can delete workspaces
-                </label>
-                <p className="leading-tight text-sm text-white text-opacity-60 w-96">
-                  Allow non-admin users to delete workspaces that they are a
-                  part of. This would delete the workspace for everyone.
-                </p>
-              </div>
-              <label className="relative inline-flex cursor-pointer items-center">
+          <div className="mt-6 mb-8">
+            <div className="flex flex-col gap-y-1">
+              <h2 className="text-base leading-6 font-bold text-white">
+                Users can delete workspaces
+              </h2>
+              <p className="text-xs leading-[18px] font-base text-white/60">
+                Allow non-admin users to delete workspaces that they are a part
+                of. This would delete the workspace for everyone.
+              </p>
+              <label className="relative inline-flex cursor-pointer items-center mt-2">
                 <input
                   type="checkbox"
                   name="users_can_delete_workspaces"
@@ -94,42 +84,44 @@ export default function AdminSystem() {
                 <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
               </label>
             </div>
+          </div>
 
-            <div className="my-4">
-              <div className="flex flex-col gap-y-2 mb-2.5">
-                <label className="leading-tight font-medium text-black dark:text-white">
-                  Limit messages per user per day
+          <div className="mb-8">
+            <div className="flex flex-col gap-y-1">
+              <h2 className="text-base leading-6 font-bold text-white">
+                Limit messages per user per day
+              </h2>
+              <p className="text-xs leading-[18px] font-base text-white/60">
+                Restrict non-admin users to a number of successful queries or
+                chats within a 24 hour window. Enable this to prevent users from
+                running up OpenAI costs.
+              </p>
+              <div className="mt-2">
+                <label className="relative inline-flex cursor-pointer items-center">
+                  <input
+                    type="checkbox"
+                    name="limit_user_messages"
+                    value="yes"
+                    checked={messageLimit.enabled}
+                    onChange={(e) => {
+                      setMessageLimit({
+                        ...messageLimit,
+                        enabled: e.target.checked,
+                      });
+                    }}
+                    className="peer sr-only"
+                  />
+                  <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
+                  <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
                 </label>
-                <p className="leading-tight text-sm text-white text-opacity-60 w-96">
-                  Restrict non-admin users to a number of successful queries or
-                  chats within a 24 hour window. Enable this to prevent users
-                  from running up OpenAI costs.
-                </p>
               </div>
-              <label className="relative inline-flex cursor-pointer items-center">
-                <input
-                  type="checkbox"
-                  name="limit_user_messages"
-                  value="yes"
-                  checked={messageLimit.enabled}
-                  onChange={(e) => {
-                    setMessageLimit({
-                      ...messageLimit,
-                      enabled: e.target.checked,
-                    });
-                  }}
-                  className="peer sr-only"
-                />
-                <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
-                <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
-              </label>
             </div>
             {messageLimit.enabled && (
-              <div className="mb-4">
-                <label className=" block flex items-center gap-x-1 font-medium text-black dark:text-white">
+              <div className="mt-4">
+                <label className="block text-sm font-medium text-white">
                   Message limit per day
                 </label>
-                <div className="relative">
+                <div className="relative mt-2">
                   <input
                     type="number"
                     name="message_limit"
@@ -143,12 +135,24 @@ export default function AdminSystem() {
                     value={messageLimit.limit}
                     min={1}
                     max={300}
-                    className="w-1/3 my-2 rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-gray-800 dark:text-slate-200 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
+                    className="w-1/3 rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-gray-800 dark:text-slate-200 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
                   />
                 </div>
               </div>
             )}
           </div>
+
+          {hasChanges && (
+            <div className="flex justify-start">
+              <button
+                type="submit"
+                disabled={saving}
+                className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
+              >
+                {saving ? "Saving..." : "Save changes"}
+              </button>
+            </div>
+          )}
         </form>
       </div>
     </div>

From ddb6e7e1f84902dd58acb0441c9afec84f0cecb3 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 21:15:00 -0800
Subject: [PATCH 14/28] update export workspace chats button border

---
 frontend/src/pages/GeneralSettings/Chats/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index 0cc44350454..57ca6733bee 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -100,7 +100,7 @@ export default function WorkspaceChats() {
                 <button
                   ref={openMenuButton}
                   onClick={toggleMenu}
-                  className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md"
+                  className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
                 >
                   <Download size={18} weight="bold" />
                   Export

From 88f0f4800019cedece0bc2c05ac4a4f3c21af834 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 21:23:12 -0800
Subject: [PATCH 15/28] update invitations settings page to match new settings
 UI

---
 .../src/pages/Admin/Invitations/index.jsx     | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index 31b2b7923e7..d31e6ebee15 100644
--- a/frontend/src/pages/Admin/Invitations/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/index.jsx
@@ -13,25 +13,29 @@ import ModalWrapper from "@/components/ModalWrapper";
 
 export default function AdminInvites() {
   const { isOpen, openModal, closeModal } = useModal();
+
   return (
     <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
       <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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        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"
       >
-        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
             <div className="items-center flex gap-x-4">
-              <p className="text-2xl font-semibold text-white">Invitations</p>
+              <p className="text-lg leading-6 font-bold text-white">
+                Invitations
+              </p>
               <button
                 onClick={openModal}
-                className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
+                className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
               >
-                <EnvelopeSimple className="h-4 w-4" /> Create Invite Link
+                <EnvelopeSimple className="h-4 w-4" />
+                Create Invite Link
               </button>
             </div>
-            <p className="text-sm font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
               Create invitation links for people in your organization to accept
               and sign up with. Invitations can only be used by a single user.
             </p>
@@ -50,6 +54,7 @@ function InvitationsContainer() {
   const darkMode = usePrefersDarkMode();
   const [loading, setLoading] = useState(true);
   const [invites, setInvites] = useState([]);
+
   useEffect(() => {
     async function fetchInvites() {
       const _invites = await Admin.invites();
@@ -74,13 +79,13 @@ function InvitationsContainer() {
   }
 
   return (
-    <table className="md:w-3/4 w-full text-sm text-left rounded-lg mt-5">
-      <thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg mt-6">
+      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
         <tr>
-          <th scope="col" className="px-6 py-3">
+          <th scope="col" className="px-6 py-3 rounded-tl-lg">
             Status
           </th>
-          <th scope="col" className="px-6 py-3 rounded-tl-lg">
+          <th scope="col" className="px-6 py-3">
             Accepted By
           </th>
           <th scope="col" className="px-6 py-3">

From b7c74bb0b271e25470f756147f972fa5d4586391 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 21:26:32 -0800
Subject: [PATCH 16/28] update instance workspaces settings page to match new
 settings UI

---
 frontend/src/pages/Admin/Users/index.jsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index f9b067821f5..7fc1e4524dd 100644
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/frontend/src/pages/Admin/Users/index.jsx
@@ -13,25 +13,26 @@ import ModalWrapper from "@/components/ModalWrapper";
 
 export default function AdminUsers() {
   const { isOpen, openModal, closeModal } = useModal();
+
   return (
     <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
       <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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        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"
       >
-        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
             <div className="items-center flex gap-x-4">
-              <p className="text-2xl font-semibold text-white">Users</p>
+              <p className="text-lg leading-6 font-bold text-white">Users</p>
               <button
                 onClick={openModal}
-                className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
+                className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
               >
                 <UserPlus className="h-4 w-4" /> Add user
               </button>
             </div>
-            <p className="text-sm font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
               These are all the accounts which have an account on this instance.
               Removing an account will instantly remove their access to this
               instance.
@@ -51,6 +52,7 @@ function UsersContainer() {
   const { user: currUser } = useUser();
   const [loading, setLoading] = useState(true);
   const [users, setUsers] = useState([]);
+
   useEffect(() => {
     async function fetchUsers() {
       const _users = await Admin.users();
@@ -75,8 +77,8 @@ function UsersContainer() {
   }
 
   return (
-    <table className="md:w-3/4 w-full text-sm text-left rounded-lg mt-5">
-      <thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg mt-6">
+      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             Username
@@ -120,7 +122,7 @@ const ROLE_HINT = {
 export function RoleHintDisplay({ role }) {
   return (
     <div className="flex flex-col gap-y-1 py-1 pb-4">
-      <p className="text-white/60 font-semibold text-sm">Permissions</p>
+      <p className="text-sm font-medium text-white">Permissions</p>
       <ul className="flex flex-col gap-y-1 list-disc px-4">
         {ROLE_HINT[role ?? "default"].map((hints, i) => {
           return (

From ec4652265b11ae70b9d28c7415017904f7ba0b75 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 21:30:47 -0800
Subject: [PATCH 17/28] update instance workspaces to match new settings UI

---
 frontend/src/pages/Admin/Workspaces/index.jsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index fa612af12cd..dc904fe1083 100644
--- a/frontend/src/pages/Admin/Workspaces/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/index.jsx
@@ -13,27 +13,28 @@ import ModalWrapper from "@/components/ModalWrapper";
 
 export default function AdminWorkspaces() {
   const { isOpen, openModal, closeModal } = useModal();
+
   return (
     <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
       <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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        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"
       >
-        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
             <div className="items-center flex gap-x-4">
-              <p className="text-2xl font-semibold text-white">
-                Instance workspaces
+              <p className="text-lg leading-6 font-bold text-white">
+                Instance Workspaces
               </p>
               <button
                 onClick={openModal}
-                className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
+                className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
               >
                 <BookOpen className="h-4 w-4" /> New Workspace
               </button>
             </div>
-            <p className="text-sm font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
               These are all the workspaces that exist on this instance. Removing
               a workspace will delete all of it's associated chats and settings.
             </p>
@@ -80,8 +81,8 @@ function WorkspacesContainer() {
   }
 
   return (
-    <table className="md:w-3/4 w-full text-sm text-left rounded-lg mt-5">
-      <thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg mt-6">
+      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             Name

From 8e8fffe36be35bafeae7103a7138c3bc96053eb4 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 21:35:24 -0800
Subject: [PATCH 18/28] update api keys settings to match new settings UI

---
 .../pages/GeneralSettings/ApiKeys/index.jsx   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index 606dbf0f565..a9dcbfbcbb6 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
@@ -15,25 +15,26 @@ import { useModal } from "@/hooks/useModal";
 
 export default function AdminApiKeys() {
   const { isOpen, openModal, closeModal } = useModal();
+
   return (
     <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
       <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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        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"
       >
-        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
             <div className="items-center flex gap-x-4">
-              <p className="text-2xl font-semibold text-white">API Keys</p>
+              <p className="text-lg leading-6 font-bold text-white">API Keys</p>
               <button
                 onClick={openModal}
-                className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
+                className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
               >
                 <PlusCircle className="h-4 w-4" /> Generate New API Key
               </button>
             </div>
-            <p className="text-sm font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
               API keys allow the holder to programmatically access and manage
               this AnythingLLM instance.
             </p>
@@ -41,7 +42,7 @@ export default function AdminApiKeys() {
               href={paths.apiDocs()}
               target="_blank"
               rel="noreferrer"
-              className="text-sm font-base text-blue-300 hover:underline"
+              className="text-xs leading-[18px] font-base text-blue-300 hover:underline"
             >
               Read the API documentation &rarr;
             </a>
@@ -59,11 +60,11 @@ export default function AdminApiKeys() {
 function ApiKeysContainer() {
   const [loading, setLoading] = useState(true);
   const [apiKeys, setApiKeys] = useState([]);
+
   useEffect(() => {
     async function fetchExistingKeys() {
       const user = userFromStorage();
       const Model = !!user ? Admin : System;
-
       const { apiKeys: foundKeys } = await Model.getApiKeys();
       setApiKeys(foundKeys);
       setLoading(false);
@@ -86,8 +87,8 @@ function ApiKeysContainer() {
   }
 
   return (
-    <table className="md:w-3/4 w-full text-sm text-left rounded-lg mt-5">
-      <thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg mt-6">
+      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             API Key

From 3e92f1b713ef705d6a313ab7656f66fa79835d36 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 21:40:33 -0800
Subject: [PATCH 19/28] update LLM preferences settings to match new settings
 UI

---
 .../GeneralSettings/LLMPreference/index.jsx      | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index c7b6fb7bd12..c4dcfa2dfd7 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -199,7 +199,7 @@ export default function GeneralLLMPreference() {
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient p-[18px] h-full overflow-y-scroll animate-pulse border-4 border-accent"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -208,33 +208,33 @@ export default function GeneralLLMPreference() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="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="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
         >
           <form onSubmit={handleSubmit} className="flex w-full">
-            <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+            <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
               <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-                <div className="items-center flex gap-x-4">
-                  <p className="text-2xl font-semibold text-white">
+                <div className="flex justify-between items-center">
+                  <p className="text-lg leading-6 font-bold text-white">
                     LLM Preference
                   </p>
                   {hasChanges && (
                     <button
                       type="submit"
                       disabled={saving}
-                      className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
+                      className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
                     >
                       {saving ? "Saving..." : "Save changes"}
                     </button>
                   )}
                 </div>
-                <p className="text-sm font-base text-white text-opacity-60">
+                <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
                   These are the credentials and settings for your preferred LLM
                   chat & embedding provider. Its important these keys are
                   current and correct or else AnythingLLM will not function
                   properly.
                 </p>
               </div>
-              <div className="text-white text-sm font-medium py-4">
+              <div className="text-sm font-medium text-white mt-6 mb-4">
                 LLM Providers
               </div>
               <div className="w-full">

From 689cc0701b71ff1a3a0de90dc0bdd1edbeedc1da Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 21:46:00 -0800
Subject: [PATCH 20/28] update embedding preferences settings to match new
 settings UI

---
 .../EmbeddingPreference/index.jsx             | 123 +++++++++---------
 1 file changed, 60 insertions(+), 63 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index 2e400ad6326..15db04d180b 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -128,18 +128,11 @@ export default function GeneralEmbeddingPreference() {
 
   return (
     <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
-      <ModalWrapper isOpen={isOpen}>
-        <ChangeWarningModal
-          warningText="Switching the vector database will ignore previously embedded documents and future similarity search results. They will need to be re-added to each workspace."
-          onClose={closeModal}
-          onConfirm={handleSaveSettings}
-        />
-      </ModalWrapper>
       <Sidebar />
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient p-[18px] h-full overflow-y-scroll animate-pulse border-4 border-accent"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -148,30 +141,30 @@ export default function GeneralEmbeddingPreference() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="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="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
         >
           <form
             id="embedding-form"
             onSubmit={handleSubmit}
             className="flex w-full"
           >
-            <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+            <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
               <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-                <div className="items-center flex gap-x-4">
-                  <p className="text-2xl font-semibold text-white">
+                <div className="flex justify-between items-center">
+                  <p className="text-lg leading-6 font-bold text-white">
                     Embedding Preference
                   </p>
                   {hasChanges && (
                     <button
                       type="submit"
                       disabled={saving}
-                      className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
+                      className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
                     >
                       {saving ? "Saving..." : "Save changes"}
                     </button>
                   )}
                 </div>
-                <p className="text-sm font-base text-white text-opacity-60">
+                <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
                   When using an LLM that does not natively support an embedding
                   engine - you may need to additionally specify credentials to
                   for embedding text.
@@ -181,63 +174,67 @@ export default function GeneralEmbeddingPreference() {
                   format which AnythingLLM can use to process.
                 </p>
               </div>
-
-              <>
-                <div className="text-white text-sm font-medium py-4">
-                  Embedding Providers
-                </div>
-                <div className="w-full">
-                  <div className="w-full relative border-slate-300/20 shadow border-4 rounded-xl text-white">
-                    <div className="w-full p-4 absolute top-0 rounded-t-lg backdrop-blur-sm">
-                      <div className="w-full flex items-center sticky top-0 z-20">
-                        <MagnifyingGlass
-                          size={16}
-                          weight="bold"
-                          className="absolute left-4 z-30 text-white"
-                        />
-                        <input
-                          type="text"
-                          placeholder="Search Embedding providers"
-                          className="bg-zinc-600 z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:border-white text-white"
-                          onChange={(e) => setSearchQuery(e.target.value)}
-                          autoComplete="off"
-                          onKeyDown={(e) => {
-                            if (e.key === "Enter") e.preventDefault();
-                          }}
-                        />
-                      </div>
-                    </div>
-                    <div className="px-4 pt-[70px] flex flex-col gap-y-1 max-h-[390px] overflow-y-auto no-scroll pb-4">
-                      {filteredEmbedders.map((embedder) => {
-                        return (
-                          <EmbedderItem
-                            key={embedder.name}
-                            name={embedder.name}
-                            value={embedder.value}
-                            image={embedder.logo}
-                            description={embedder.description}
-                            checked={selectedEmbedder === embedder.value}
-                            onClick={() => updateChoice(embedder.value)}
-                          />
-                        );
-                      })}
+              <div className="text-sm font-medium text-white mt-6 mb-4">
+                Embedding Providers
+              </div>
+              <div className="w-full">
+                <div className="w-full relative border-slate-300/20 shadow border-4 rounded-xl text-white">
+                  <div className="w-full p-4 absolute top-0 rounded-t-lg backdrop-blur-sm">
+                    <div className="w-full flex items-center sticky top-0">
+                      <MagnifyingGlass
+                        size={16}
+                        weight="bold"
+                        className="absolute left-4 z-30 text-white"
+                      />
+                      <input
+                        type="text"
+                        placeholder="Search Embedding providers"
+                        className="bg-zinc-600 z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:border-white text-white"
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        autoComplete="off"
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") e.preventDefault();
+                        }}
+                      />
                     </div>
                   </div>
-                  <div
-                    onChange={() => setHasChanges(true)}
-                    className="mt-4 flex flex-col gap-y-1"
-                  >
-                    {selectedEmbedder &&
-                      EMBEDDERS.find(
-                        (embedder) => embedder.value === selectedEmbedder
-                      )?.options}
+                  <div className="px-4 pt-[70px] flex flex-col gap-y-1 max-h-[390px] overflow-y-auto no-scroll pb-4">
+                    {filteredEmbedders.map((embedder) => {
+                      return (
+                        <EmbedderItem
+                          key={embedder.name}
+                          name={embedder.name}
+                          value={embedder.value}
+                          image={embedder.logo}
+                          description={embedder.description}
+                          checked={selectedEmbedder === embedder.value}
+                          onClick={() => updateChoice(embedder.value)}
+                        />
+                      );
+                    })}
                   </div>
                 </div>
-              </>
+                <div
+                  onChange={() => setHasChanges(true)}
+                  className="mt-4 flex flex-col gap-y-1"
+                >
+                  {selectedEmbedder &&
+                    EMBEDDERS.find(
+                      (embedder) => embedder.value === selectedEmbedder
+                    )?.options}
+                </div>
+              </div>
             </div>
           </form>
         </div>
       )}
+      <ModalWrapper isOpen={isOpen}>
+        <ChangeWarningModal
+          warningText="Switching the vector database will ignore previously embedded documents and future similarity search results. They will need to be re-added to each workspace."
+          onClose={closeModal}
+          onConfirm={handleSaveSettings}
+        />
+      </ModalWrapper>
     </div>
   );
 }

From 37fd6d50361634e1aa4bb3f9f7dd4d54cecaf85a Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 22:45:43 -0800
Subject: [PATCH 21/28] update vector db preferences settings to match new
 settings UI

---
 .../GeneralSettings/VectorDatabase/index.jsx  | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index 36242d1463f..4a4cfdb9388 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -154,18 +154,11 @@ export default function GeneralVectorDatabase() {
 
   return (
     <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
-      <ModalWrapper isOpen={isOpen}>
-        <ChangeWarningModal
-          warningText="Switching the vector database will ignore previously embedded documents and future similarity search results. They will need to be re-added to each workspace."
-          onClose={closeModal}
-          onConfirm={handleSaveSettings}
-        />
-      </ModalWrapper>
       <Sidebar />
       {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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline animate-pulse"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -174,42 +167,42 @@ 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
         >
           <form
             id="vectordb-form"
             onSubmit={handleSubmit}
             className="flex w-full"
           >
-            <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+            <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
               <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-                <div className="items-center flex gap-x-4">
-                  <p className="text-2xl font-semibold text-white">
+                <div className="flex items-center gap-x-4">
+                  <p className="text-lg leading-6 font-bold text-white">
                     Vector Database
                   </p>
                   {hasChanges && (
                     <button
                       type="submit"
                       disabled={saving}
-                      className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
+                      className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
                     >
                       {saving ? "Saving..." : "Save changes"}
                     </button>
                   )}
                 </div>
-                <p className="text-sm font-base text-white text-opacity-60">
+                <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
                   These are the credentials and settings for how your
                   AnythingLLM instance will function. It's important these keys
                   are current and correct.
                 </p>
               </div>
-              <div className="text-white text-sm font-medium py-4">
+              <div className="text-sm font-medium text-white mt-6 mb-4">
                 Select your preferred vector database provider
               </div>
               <div className="w-full">
                 <div className="w-full relative border-slate-300/20 shadow border-4 rounded-xl text-white">
                   <div className="w-full p-4 absolute top-0 rounded-t-lg backdrop-blur-sm">
-                    <div className="w-full flex items-center sticky top-0 z-20">
+                    <div className="w-full flex items-center sticky top-0">
                       <MagnifyingGlass
                         size={16}
                         weight="bold"
@@ -257,6 +250,13 @@ export default function GeneralVectorDatabase() {
           </form>
         </div>
       )}
+      <ModalWrapper isOpen={isOpen}>
+        <ChangeWarningModal
+          warningText="Switching the vector database will ignore previously embedded documents and future similarity search results. They will need to be re-added to each workspace."
+          onClose={closeModal}
+          onConfirm={handleSaveSettings}
+        />
+      </ModalWrapper>
     </div>
   );
 }

From 1dbf002386921ba116f020165e39d4141ad0225d Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 22:48:27 -0800
Subject: [PATCH 22/28] align all buttons in settings pages

---
 frontend/src/pages/GeneralSettings/Chats/index.jsx              | 2 +-
 .../src/pages/GeneralSettings/EmbeddingPreference/index.jsx     | 2 +-
 frontend/src/pages/GeneralSettings/LLMPreference/index.jsx      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index 57ca6733bee..85c8c028656 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -92,7 +92,7 @@ export default function WorkspaceChats() {
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-            <div className="flex justify-between items-center">
+            <div className="flex gap-x-4 items-center">
               <p className="text-lg leading-6 font-bold text-white">
                 Workspace Chats
               </p>
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index 15db04d180b..77204c3cb73 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -150,7 +150,7 @@ export default function GeneralEmbeddingPreference() {
           >
             <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
               <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-                <div className="flex justify-between items-center">
+                <div className="flex gap-x-4 items-center">
                   <p className="text-lg leading-6 font-bold text-white">
                     Embedding Preference
                   </p>
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index c4dcfa2dfd7..c0a2a600bb1 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -213,7 +213,7 @@ export default function GeneralLLMPreference() {
           <form onSubmit={handleSubmit} className="flex w-full">
             <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
               <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-                <div className="flex justify-between items-center">
+                <div className="flex gap-x-4 items-center">
                   <p className="text-lg leading-6 font-bold text-white">
                     LLM Preference
                   </p>

From 924eee45c88a92c4e9a8b7a895ce9351c784b7c3 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Thu, 7 Mar 2024 00:30:46 -0800
Subject: [PATCH 23/28] update ui for data connectors to match rest of settings
 ui

---
 .../Connectors/Github/index.jsx               | 14 ++++++-------
 .../Connectors/Youtube/index.jsx              | 12 +++++------
 .../GeneralSettings/DataConnectors/index.jsx  | 21 ++++++++++++-------
 .../GeneralSettings/VectorDatabase/index.jsx  |  2 +-
 4 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx
index 8a1c25a6831..1366ec1c992 100644
--- a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx
+++ b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx
@@ -67,19 +67,19 @@ export default function GithubConnectorSetup() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="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="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex w-full">
-          <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
-            <div className="flex w-full gap-x-4 items-center  pb-6 border-white border-b-2 border-opacity-10">
+          <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
+            <div className="flex w-full gap-x-4 items-center pb-6 border-white border-b-2 border-opacity-10">
               <img src={image} alt="Github" className="rounded-lg h-16 w-16" />
               <div className="w-full flex flex-col gap-y-1">
-                <div className="items-center flex gap-x-4">
-                  <p className="text-2xl font-semibold text-white">
+                <div className="items-center">
+                  <p className="text-lg leading-6 font-bold text-white">
                     Import GitHub Repository
                   </p>
                 </div>
-                <p className="text-sm font-base text-white text-opacity-60">
+                <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
                   Import all files from a public or private Github repository
                   and have its files be available in your workspace.
                 </p>
@@ -88,7 +88,7 @@ export default function GithubConnectorSetup() {
 
             <form className="w-full" onSubmit={handleSubmit}>
               {!accessToken && (
-                <div className="flex flex-col gap-y-1 py-4 ">
+                <div className="flex flex-col gap-y-1 py-4">
                   <div className="flex flex-col w-fit gap-y-2 bg-blue-600/20 rounded-lg px-4 py-2">
                     <div className="flex items-center gap-x-2">
                       <Info size={20} className="shrink-0 text-blue-400" />
diff --git a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx
index 9c8588d3d22..053c5630fc1 100644
--- a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx
+++ b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx
@@ -48,19 +48,19 @@ export default function YouTubeTranscriptConnectorSetup() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="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="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex w-full">
-          <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
-            <div className="flex w-full gap-x-4 items-center  pb-6 border-white border-b-2 border-opacity-10">
+          <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
+            <div className="flex w-full gap-x-4 items-center pb-6 border-white border-b-2 border-opacity-10">
               <img src={image} alt="YouTube" className="rounded-lg h-16 w-16" />
               <div className="w-full flex flex-col gap-y-1">
-                <div className="items-center flex gap-x-4">
-                  <p className="text-2xl font-semibold text-white">
+                <div className="items-center">
+                  <p className="text-lg leading-6 font-bold text-white">
                     Import YouTube transcription
                   </p>
                 </div>
-                <p className="text-sm font-base text-white text-opacity-60">
+                <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
                   From a youtube link, import the entire transcript of that
                   video for embedding.
                 </p>
diff --git a/frontend/src/pages/GeneralSettings/DataConnectors/index.jsx b/frontend/src/pages/GeneralSettings/DataConnectors/index.jsx
index e3bfa642a59..65da9b33c3e 100644
--- a/frontend/src/pages/GeneralSettings/DataConnectors/index.jsx
+++ b/frontend/src/pages/GeneralSettings/DataConnectors/index.jsx
@@ -9,26 +9,31 @@ export default function DataConnectors() {
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="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="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex w-full">
-          <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+          <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
             <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-              <div className="items-center flex gap-x-4">
-                <p className="text-2xl font-semibold text-white">
+              <div className="items-center">
+                <p className="text-lg leading-6 font-bold text-white">
                   Data Connectors
                 </p>
               </div>
-              <p className="text-sm font-base text-white text-opacity-60">
+              <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
                 Verified data connectors allow you to add more content to your
                 AnythingLLM workspaces with no custom code or complexity.
                 <br />
                 Guaranteed to work with your AnythingLLM instance.
               </p>
             </div>
-            <div className="py-4 w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-full">
-              <DataConnectorOption slug="github" />
-              <DataConnectorOption slug="youtube-transcript" />
+            <div className="text-sm font-medium text-white mt-6 mb-4">
+              Available Data Connectors
+            </div>
+            <div className="w-full">
+              <div className="py-4 w-full flex md:flex-wrap overflow-x-scroll gap-4 max-w-full">
+                <DataConnectorOption slug="github" />
+                <DataConnectorOption slug="youtube-transcript" />
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index 4a4cfdb9388..0b2225cb325 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -197,7 +197,7 @@ export default function GeneralVectorDatabase() {
                 </p>
               </div>
               <div className="text-sm font-medium text-white mt-6 mb-4">
-                Select your preferred vector database provider
+                Vector Database Providers
               </div>
               <div className="w-full">
                 <div className="w-full relative border-slate-300/20 shadow border-4 rounded-xl text-white">

From 38de7da9ec174f4dae6e4a35238db108e65e339d Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Thu, 7 Mar 2024 00:42:15 -0800
Subject: [PATCH 24/28] update UI for embed chat

---
 .../pages/GeneralSettings/EmbedChats/index.jsx   | 12 +++++++-----
 .../pages/GeneralSettings/EmbedConfigs/index.jsx | 16 +++++++++-------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index d6079f39100..28dd3aedb85 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
@@ -14,14 +14,16 @@ 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        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"
       >
-        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-            <div className="items-center flex gap-x-4">
-              <p className="text-2xl font-semibold text-white">Embed Chats</p>
+            <div className="flex gap-x-4 items-center">
+              <p className="text-lg leading-6 font-bold text-white">
+                Embed Chats
+              </p>
             </div>
-            <p className="text-sm font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
               These are all the recorded chats and messages from any embed that
               you have published.
             </p>
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
index 73a2ca6dbd3..a46a9d5e09c 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
@@ -12,27 +12,28 @@ import Embed from "@/models/embed";
 
 export default function EmbedConfigs() {
   const { isOpen, openModal, closeModal } = useModal();
+
   return (
     <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
       <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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
-        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
             <div className="items-center flex gap-x-4">
-              <p className="text-2xl font-semibold text-white">
+              <p className="text-lg leading-6 font-bold text-white">
                 Embeddable Chat Widgets
               </p>
               <button
                 onClick={openModal}
-                className="border border-slate-200 px-4 py-1 rounded-lg text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
+                className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
               >
                 <CodeBlock className="h-4 w-4" /> Create embed
               </button>
             </div>
-            <p className="text-sm font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
               Embeddable chat widgets are public facing chat interfaces that are
               tied to a single workspace. These allow you to build workspaces
               that then you can publish to the world.
@@ -51,6 +52,7 @@ export default function EmbedConfigs() {
 function EmbedContainer() {
   const [loading, setLoading] = useState(true);
   const [embeds, setEmbeds] = useState([]);
+
   useEffect(() => {
     async function fetchUsers() {
       const _embeds = await Embed.embeds();
@@ -75,8 +77,8 @@ function EmbedContainer() {
   }
 
   return (
-    <table className="md:w-3/4 w-full text-sm text-left rounded-lg mt-5">
-      <thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg mt-6">
+      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             Workspace

From 6eab1998117e2fdbc8a95c31fe5b0657d23e25bc Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Thu, 7 Mar 2024 00:50:18 -0800
Subject: [PATCH 25/28] updated ui for logging page

---
 frontend/src/pages/Admin/Logging/index.jsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/Admin/Logging/index.jsx b/frontend/src/pages/Admin/Logging/index.jsx
index f405c9a6810..5d8a90acba5 100644
--- a/frontend/src/pages/Admin/Logging/index.jsx
+++ b/frontend/src/pages/Admin/Logging/index.jsx
@@ -30,20 +30,22 @@ 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
-        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-            <div className="items-center flex gap-x-4">
-              <p className="text-2xl font-semibold text-white">Event Logs</p>
+            <div className="flex gap-x-4 items-center">
+              <p className="text-lg leading-6 font-bold text-white">
+                Event Logs
+              </p>
               <button
                 onClick={handleResetLogs}
-                className="px-4 py-1 rounded-lg text-slate-200/50 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800"
+                className="flex items-center gap-x-2 px-4 py-2 rounded-lg bg-[#2C2F36] text-white text-sm hover:bg-[#3D4147] shadow-md border border-[#3D4147]"
               >
                 Clear event logs
               </button>
             </div>
-            <p className="text-sm font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
               View all actions and events happening on this instance for
               monitoring.
             </p>
@@ -95,10 +97,10 @@ function LogsContainer() {
 
   return (
     <>
-      <table className="md:w-5/6 w-full text-sm text-left rounded-lg mt-5">
-        <thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
+      <table className="w-full text-sm text-left rounded-lg mt-6">
+        <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
           <tr>
-            <th scope="col" className="px-6 py-3">
+            <th scope="col" className="px-6 py-3 rounded-tl-lg">
               Event Type
             </th>
             <th scope="col" className="px-6 py-3">
@@ -116,7 +118,7 @@ function LogsContainer() {
           {!!logs && logs.map((log) => <LogRow key={log.id} log={log} />)}
         </tbody>
       </table>
-      <div className="flex w-full justify-between items-center">
+      <div className="flex w-full justify-between items-center mt-6">
         <button
           onClick={handlePrevious}
           className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"

From 200cb11641791b3caed9470707417040956663ee Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 11 Mar 2024 17:56:15 -0700
Subject: [PATCH 26/28] fix duplicate attributes left from merge conflicts

---
 frontend/src/components/Footer/index.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx
index 7dea97ca301..fc51dde7136 100644
--- a/frontend/src/components/Footer/index.jsx
+++ b/frontend/src/components/Footer/index.jsx
@@ -51,7 +51,6 @@ export default function Footer() {
             href={paths.github()}
             target="_blank"
             rel="noreferrer"
-            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 " />
@@ -60,7 +59,6 @@ export default function Footer() {
             href={paths.docs()}
             target="_blank"
             rel="noreferrer"
-            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 " />
@@ -69,7 +67,6 @@ export default function Footer() {
             href={paths.discord()}
             target="_blank"
             rel="noreferrer"
-            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

From 1231ef93ee801c6b721617446079fcaadb851350 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 11 Mar 2024 17:58:59 -0700
Subject: [PATCH 27/28] fix dynamic class to use ternary

---
 frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index 819a9031544..7ee1c38d5d3 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -93,7 +93,11 @@ export default function ActiveWorkspaces() {
               transition-all duration-[200ms]
                 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:font-bold border-2 border-outline
-                ${isActive && "bg-workspace-item-selected-gradient font-bold"}`}
+                ${
+                  isActive
+                    ? "bg-workspace-item-selected-gradient font-bold"
+                    : ""
+                }`}
               >
                 <div className="flex flex-row justify-between w-full">
                   <div className="flex items-center space-x-2">

From c87070aa75b2e78afd083d7a0d990961eed18438 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 11 Mar 2024 18:15:11 -0700
Subject: [PATCH 28/28] remove transition classes where it is not needed

---
 frontend/src/components/Sidebar/index.jsx               | 2 +-
 frontend/src/pages/Admin/Invitations/index.jsx          | 2 +-
 frontend/src/pages/Admin/System/index.jsx               | 2 +-
 frontend/src/pages/Admin/Users/index.jsx                | 2 +-
 frontend/src/pages/Admin/Workspaces/index.jsx           | 2 +-
 frontend/src/pages/GeneralSettings/ApiKeys/index.jsx    | 2 +-
 frontend/src/pages/GeneralSettings/Appearance/index.jsx | 2 +-
 frontend/src/pages/GeneralSettings/Chats/index.jsx      | 2 +-
 frontend/src/pages/GeneralSettings/EmbedChats/index.jsx | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index 13aaeee1074..561f46b3e1b 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -38,7 +38,7 @@ export default function Sidebar() {
       <div
         ref={sidebarRef}
         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]"
+        className="relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
       >
         <div className="flex flex-col h-full overflow-x-hidden">
           <div className="flex-grow flex flex-col min-w-[235px]">
diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index d31e6ebee15..f81ccae52d5 100644
--- a/frontend/src/pages/Admin/Invitations/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/index.jsx
@@ -19,7 +19,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-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/Admin/System/index.jsx b/frontend/src/pages/Admin/System/index.jsx
index 9cb589d27a3..867276b0efb 100644
--- a/frontend/src/pages/Admin/System/index.jsx
+++ b/frontend/src/pages/Admin/System/index.jsx
@@ -44,7 +44,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-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <form
           onSubmit={handleSubmit}
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index 7fc1e4524dd..78d85c81244 100644
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/frontend/src/pages/Admin/Users/index.jsx
@@ -19,7 +19,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-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index dc904fe1083..0085c32b2c6 100644
--- a/frontend/src/pages/Admin/Workspaces/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/index.jsx
@@ -19,7 +19,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-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index a9dcbfbcbb6..6df1d09dd33 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
@@ -21,7 +21,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-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index e79f6f7fce0..bb2c79896c4 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index 85c8c028656..e5da1a8884e 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -88,7 +88,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-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index 28dd3aedb85..a2605154fb8 100644
--- 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-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">