From 3cb8a80e8d7fcf6bd8da42fd4f70ec4d0ee88be6 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Wed, 6 Mar 2024 17:22:36 -0800
Subject: [PATCH] [STYLE] Implement new side bar menus (#815)
* WIP main sidebar designs
* hover states and active states for main sidebar
* main and settings sidebar UI updates & improve performance using Link instead of <a>
* update borders to match rest of UI in all pages
* update borders of all containers to match rest of UI
* remove unneeded conditional
* small changes to UI to conform to designs
Fix conditional hook render
* add check for roles to SettingsButton component and hide button from footer when in mobile
* typo
---------
Co-authored-by: timothycarambat <rambat1010@gmail.com>
---
frontend/src/components/DefaultChat/index.jsx | 2 +-
frontend/src/components/Footer/index.jsx | 13 ++-
.../src/components/SettingsButton/index.jsx | 31 +++++++
.../src/components/SettingsSidebar/index.jsx | 75 +++++++---------
.../Sidebar/ActiveWorkspaces/index.jsx | 85 +++++++++++--------
frontend/src/components/Sidebar/index.jsx | 71 ++++++----------
.../components/UserMenu/UserButton/index.jsx | 4 +-
.../WorkspaceChat/ChatContainer/index.jsx | 2 +-
.../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 +-
.../pages/GeneralSettings/ApiKeys/index.jsx | 2 +-
.../GeneralSettings/Appearance/index.jsx | 2 +-
.../src/pages/GeneralSettings/Chats/index.jsx | 2 +-
.../GeneralSettings/EmbedChats/index.jsx | 2 +-
.../GeneralSettings/EmbedConfigs/index.jsx | 2 +-
.../pages/GeneralSettings/Security/index.jsx | 2 +-
.../GeneralSettings/VectorDatabase/index.jsx | 4 +-
.../src/pages/WorkspaceSettings/index.jsx | 4 +-
frontend/tailwind.config.js | 3 +-
22 files changed, 168 insertions(+), 148 deletions(-)
create mode 100644 frontend/src/components/SettingsButton/index.jsx
diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index 8bc6c7cb7..a20e323bd 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-outline"
>
{isMobile && <SidebarMobileHeader />}
{fetchedMessages.length === 0
diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx
index 26b271a8c..fc51dde71 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,
@@ -13,6 +12,8 @@ import {
LinkSimple,
} from "@phosphor-icons/react";
import React, { useEffect, useState } from "react";
+import SettingsButton from "../SettingsButton";
+import { isMobile } from "react-device-detect";
export const MAX_ICONS = 3;
export const ICON_COMPONENTS = {
@@ -44,11 +45,12 @@ export default function Footer() {
if (!Array.isArray(footerData) || footerData.length === 0) {
return (
- <div className="flex justify-center mt-2">
+ <div className="flex justify-center mb-2">
<div className="flex space-x-4">
<a
href={paths.github()}
target="_blank"
+ rel="noreferrer"
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<GithubLogo weight="fill" className="h-5 w-5 " />
@@ -56,6 +58,7 @@ export default function Footer() {
<a
href={paths.docs()}
target="_blank"
+ rel="noreferrer"
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<BookOpen weight="fill" className="h-5 w-5 " />
@@ -63,6 +66,7 @@ export default function Footer() {
<a
href={paths.discord()}
target="_blank"
+ rel="noreferrer"
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<DiscordLogo
@@ -70,19 +74,21 @@ export default function Footer() {
className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
/>
</a>
+ {!isMobile && <SettingsButton />}
</div>
</div>
);
}
return (
- <div className="flex justify-center mt-2">
+ <div className="flex justify-center mb-2">
<div className="flex space-x-4">
{footerData.map((item, index) => (
<a
key={index}
href={item.url}
target="_blank"
+ rel="noreferrer"
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
{React.createElement(ICON_COMPONENTS[item.icon], {
@@ -91,6 +97,7 @@ export default function Footer() {
})}
</a>
))}
+ {!isMobile && <SettingsButton />}
</div>
</div>
);
diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
new file mode 100644
index 000000000..0903862db
--- /dev/null
+++ b/frontend/src/components/SettingsButton/index.jsx
@@ -0,0 +1,31 @@
+import useUser from "@/hooks/useUser";
+import paths from "@/utils/paths";
+import { ArrowUUpLeft, Wrench } from "@phosphor-icons/react";
+import { Link } from "react-router-dom";
+import { useMatch } from "react-router-dom";
+
+export default function SettingsButton() {
+ const isInSettings = !!useMatch("/settings/*");
+ const { user } = useUser();
+
+ if (user && user?.role === "default") return null;
+
+ if (isInSettings)
+ return (
+ <Link
+ to={paths.home()}
+ className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+ >
+ <ArrowUUpLeft className="h-5 w-5" weight="fill" />
+ </Link>
+ );
+
+ return (
+ <Link
+ to={!!user?.role ? paths.settings.system() : paths.settings.appearance()}
+ className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+ >
+ <Wrench className="h-5 w-5" weight="fill" />
+ </Link>
+ );
+}
diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
index ea4887114..112b641bf 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();
@@ -112,9 +112,7 @@ export default function SettingsSidebar() {
<SidebarOptions user={user} />
</div>
</div>
- <div>
- <Footer />
- </div>
+ <Footer />
</div>
</div>
</div>
@@ -124,50 +122,38 @@ export default function SettingsSidebar() {
}
return (
- <>
+ <div>
+ <Link
+ to={paths.home()}
+ className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
+ >
+ <img
+ src={logo}
+ alt="Logo"
+ className="rounded max-h-[24px]"
+ style={{ objectFit: "contain" }}
+ />
+ </Link>
<div
ref={sidebarRef}
- style={{ height: "calc(100% - 32px)" }}
- className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
+ style={{ height: "calc(100% - 76px)" }}
+ className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
>
- <div className="w-full h-full flex flex-col overflow-x-hidden items-between">
- {/* Header Information */}
- <div className="flex w-full items-center justify-between">
- <div className="flex shrink-0 max-w-[65%] items-center justify-start ml-2">
- <img
- src={logo}
- alt="Logo"
- className="rounded max-h-[40px]"
- style={{ objectFit: "contain" }}
- />
- </div>
- <div className="flex gap-x-2 items-center text-slate-500">
- <a
- href={paths.home()}
- className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
- >
- <X className="h-4 w-4" />
- </a>
- </div>
- </div>
- <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>
- <Footer />
- </div>
+ <Footer />
</div>
</div>
</div>
- </>
+ </div>
);
}
@@ -195,24 +181,25 @@ const Option = ({
return (
<>
- <div className="flex gap-x-2 items-center justify-between text-white">
- <a
- href={href}
+ <div className="flex gap-x-2 items-center justify-between">
+ <Link
+ to={href}
className={`
transition-all duration-[200ms]
- flex flex-grow w-[75%] h-[36px] gap-x-2 py-[5px] px-4 rounded justify-start items-center border
+ flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] justify-start items-center
+ hover:bg-workspace-item-selected-gradient hover:text-white hover:font-medium
${
isActive
- ? "bg-menu-item-selected-gradient border-slate-100 border-opacity-50 font-medium"
- : "hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent"
+ ? "bg-menu-item-selected-gradient font-medium border-outline text-white"
+ : "hover:bg-menu-item-selected-gradient text-zinc-200"
}
`}
>
{React.cloneElement(icon, { weight: isActive ? "fill" : "regular" })}
- <p className="text-sm leading-loose text-opacity-60 whitespace-nowrap overflow-hidden ">
+ <p className="text-sm leading-loose whitespace-nowrap overflow-hidden ">
{btnText}
</p>
- </a>
+ </Link>
</div>
{!!subOptions && (isActive || hasActiveChild) && (
<div
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index 9ee6a6878..78c53c26e 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,7 @@ export default function ActiveWorkspaces() {
const [uploadHover, setUploadHover] = useState({});
const { showing, showModal, hideModal } = useManageWorkspaceModal();
const { user } = useUser();
+ const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
useEffect(() => {
async function getWorkspaces() {
@@ -90,55 +91,60 @@ export default function ActiveWorkspaces() {
href={isActive ? null : paths.workspace.chat(workspace.slug)}
className={`
transition-all duration-[200ms]
- flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-lg text-slate-200 justify-start items-center
- hover:bg-workspace-item-selected-gradient
+ flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
+ hover:bg-workspace-item-selected-gradient border-outline
${
isActive
- ? "border-2 bg-workspace-item-selected-gradient border-white"
- : "border bg-workspace-item-gradient bg-opacity-60 border-transparent hover:border-slate-100 hover:border-opacity-50"
+ ? "bg-workspace-item-selected-gradient font-medium border-none"
+ : "border-[1px]"
}`}
>
<div className="flex flex-row justify-between w-full">
<div className="flex items-center space-x-2">
<SquaresFour
weight={isActive ? "fill" : "regular"}
- className="h-5 w-5 flex-shrink-0"
+ className="flex-shrink-0"
+ size={24}
/>
<p
- className={`text-white text-sm leading-loose font-medium whitespace-nowrap overflow-hidden ${
- isActive ? "" : "text-opacity-80"
+ className={`text-[14px] leading-loose whitespace-nowrap overflow-hidden ${
+ isActive ? "text-white " : "text-zinc-200"
}`}
>
{isActive || isHovered
- ? truncate(workspace.name, 17)
+ ? truncate(workspace.name, 15)
: truncate(workspace.name, 20)}
</p>
</div>
{(isActive || isHovered || gearHover[workspace.id]) &&
user?.role !== "default" ? (
- <div className="flex items-center gap-x-2">
- <button
- type="button"
- onClick={(e) => {
- e.preventDefault();
- setSelectedWs(workspace);
- showModal();
- }}
- onMouseEnter={() =>
- handleUploadMouseEnter(workspace.id)
- }
- onMouseLeave={() =>
- handleUploadMouseLeave(workspace.id)
- }
- className="rounded-md flex items-center justify-center text-white ml-auto"
+ <div className="flex items-center gap-x-[2px]">
+ <div
+ className={`flex hover:bg-[#646768] p-[2px] rounded-[4px] text-[#A7A8A9] hover:text-white ${
+ uploadHover[workspace.id] ? "bg-[#646768]" : ""
+ }`}
>
- <UploadSimple
- weight={
- uploadHover[workspace.id] ? "fill" : "regular"
+ <button
+ type="button"
+ onClick={(e) => {
+ e.preventDefault();
+ setSelectedWs(workspace);
+ showModal();
+ }}
+ onMouseEnter={() =>
+ handleUploadMouseEnter(workspace.id)
+ }
+ onMouseLeave={() =>
+ handleUploadMouseLeave(workspace.id)
}
- className="h-[20px] w-[20px] transition-all duration-300"
- />
- </button>
+ className="rounded-md flex items-center justify-center ml-auto"
+ >
+ <UploadSimple
+ className="h-[20px] w-[20px]"
+ weight="bold"
+ />
+ </button>
+ </div>
<Link
type="button"
@@ -147,12 +153,21 @@ export default function ActiveWorkspaces() {
)}
onMouseEnter={() => handleGearMouseEnter(workspace.id)}
onMouseLeave={() => handleGearMouseLeave(workspace.id)}
- className="rounded-md flex items-center justify-center text-white ml-auto"
+ className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto"
>
- <GearSix
- weight={gearHover[workspace.id] ? "fill" : "regular"}
- className="h-[20px] w-[20px] transition-all duration-300"
- />
+ <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
+ <GearSix
+ color={
+ isInWorkspaceSettings && workspace.slug === slug
+ ? "#46C8FF"
+ : gearHover[workspace.id]
+ ? "#FFFFFF"
+ : "#A7A8A9"
+ }
+ weight="bold"
+ className="h-[20px] w-[20px]"
+ />
+ </div>
</Link>
</div>
) : null}
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index d14099b2b..75c854d90 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -1,14 +1,16 @@
import React, { useEffect, useRef, useState } from "react";
-import { Wrench, Plus, List } from "@phosphor-icons/react";
+import { Plus, List } from "@phosphor-icons/react";
import NewWorkspaceModal, {
useNewWorkspaceModal,
} from "../Modals/NewWorkspace";
import ActiveWorkspaces from "./ActiveWorkspaces";
-import paths from "@/utils/paths";
import { USER_BACKGROUND_COLOR } from "@/utils/constants";
import useLogo from "@/hooks/useLogo";
import useUser from "@/hooks/useUser";
import Footer from "../Footer";
+import SettingsButton from "../SettingsButton";
+import { Link } from "react-router-dom";
+import paths from "@/utils/paths";
export default function Sidebar() {
const { user } = useUser();
@@ -21,40 +23,33 @@ export default function Sidebar() {
} = useNewWorkspaceModal();
return (
- <>
+ <div>
+ <Link
+ to={paths.home()}
+ className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
+ >
+ <img
+ src={logo}
+ alt="Logo"
+ className="rounded max-h-[24px]"
+ style={{ objectFit: "contain" }}
+ />
+ </Link>
<div
ref={sidebarRef}
- style={{ height: "calc(100% - 32px)" }}
- className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
+ style={{ height: "calc(100% - 76px)" }}
+ className="transition-all pt-[11px] px-[10px] duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px]"
>
<div className="flex flex-col h-full overflow-x-hidden">
- {/* Header Information */}
- <div className="flex items-center justify-between mb-4">
- <div className="flex shrink-0 max-w-[65%] items-center justify-start">
- <img
- src={logo}
- alt="Logo"
- className="rounded max-h-[40px]"
- style={{ objectFit: "contain" }}
- />
- </div>
- {(!user || user?.role !== "default") && (
- <div className="flex gap-x-2 items-center text-slate-200">
- <SettingsButton />
- </div>
- )}
- </div>
-
- {/* Primary Body */}
- <div className="flex-grow flex flex-col">
+ <div className="flex-grow flex flex-col w-[235px]">
<div className="flex flex-col gap-y-2 pb-8 overflow-y-scroll no-scroll">
<div className="flex gap-x-2 items-center justify-between">
{(!user || user?.role !== "default") && (
<button
onClick={showNewWsModal}
- className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-4 mb-2 bg-white rounded-lg text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
+ className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
>
- <Plus className="h-5 w-5" />
+ <Plus size={18} weight="bold" />
<p className="text-sidebar text-sm font-semibold">
New Workspace
</p>
@@ -70,7 +65,7 @@ export default function Sidebar() {
</div>
</div>
{showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
- </>
+ </div>
);
}
@@ -149,11 +144,9 @@ export function SidebarMobileHeader() {
style={{ objectFit: "contain" }}
/>
</div>
- {(!user || user?.role !== "default") && (
- <div className="flex gap-x-2 items-center text-slate-500 shink-0">
- <SettingsButton />
- </div>
- )}
+ <div className="flex gap-x-2 items-center text-slate-500 shrink-0">
+ <SettingsButton />
+ </div>
</div>
{/* Primary Body */}
@@ -190,17 +183,3 @@ export function SidebarMobileHeader() {
</>
);
}
-
-function SettingsButton() {
- const { user } = useUser();
- return (
- <a
- href={
- !!user?.role ? paths.settings.system() : paths.settings.appearance()
- }
- className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
- >
- <Wrench className="h-4 w-4" weight="fill" />
- </a>
- );
-}
diff --git a/frontend/src/components/UserMenu/UserButton/index.jsx b/frontend/src/components/UserMenu/UserButton/index.jsx
index 99db94411..28730bfb0 100644
--- a/frontend/src/components/UserMenu/UserButton/index.jsx
+++ b/frontend/src/components/UserMenu/UserButton/index.jsx
@@ -61,7 +61,7 @@ export default function UserButton() {
type="button"
className="uppercase transition-all duration-300 w-[35px] h-[35px] text-base font-semibold rounded-full flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient justify-center text-white p-2 hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
- {mode === "multi" ? userDisplay() : <Person size={14} />}
+ {mode === "multi" ? <UserDisplay /> : <Person size={14} />}
</button>
{showMenu && (
@@ -109,7 +109,7 @@ export default function UserButton() {
);
}
-function userDisplay() {
+function UserDisplay() {
const { pfp } = usePfp();
const user = userFromStorage();
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
index 8a99a62a2..293da491f 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-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 a4a99e93b..31b2b7923 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-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 246cf2110..f405c9a68 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-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 c561efd2e..9fe4c7183 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-outline"
>
<form
onSubmit={handleSubmit}
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index a5c6ba9c5..f9b067821 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-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 62a28094b..fa612af12 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-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 9ba3335f5..606dbf0f5 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-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 9aed853b2..c2311a2c3 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-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 aeb341c1b..5afde115d 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-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 23c5bf189..d6079f391 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-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 4257b029f..73a2ca6db 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-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 26d408684..298a81ad7 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-outline"
>
<MultiUserMode />
<PasswordProtection />
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index e5eacaea7..36242d146 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-outline animate-pulse"
>
<div className="w-full h-full flex justify-center items-center">
<PreLoader />
@@ -174,7 +174,7 @@ export default function GeneralVectorDatabase() {
) : (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
>
<form
id="vectordb-form"
diff --git a/frontend/src/pages/WorkspaceSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/index.jsx
index 2050232bc..952860ade 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-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+ className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
>
<div className="flex gap-x-10 pt-6 pb-4 ml-16 mr-8 border-b-2 border-white border-opacity-10">
<Link
to={paths.workspace.chat(slug)}
className="absolute top-2 left-2 md:top-4 md:left-4 transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border z-10"
>
- <ArrowUUpLeft className="h-4 w-4" />
+ <ArrowUUpLeft className="h-5 w-5" weight="fill" />
</Link>
<TabItem
title="General Settings"
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index f3f8aaca2..8add5a692 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":
--
GitLab