kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-19 12:40:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Settings sidebar UI updates (#2416)

Browse Source 
settings sidebar ui updates
This commit is contained in:
Sean Hatfield 2024-10-03 11:50:20 -07:00 committed by GitHub
parent eee99d3617
commit 4df47420be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Preloader.jsx
View File

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

4
frontend/src/components/SettingsSidebar/MenuOption/index.jsx
View File

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

4
frontend/src/components/SettingsSidebar/index.jsx
View File

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

2
frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
View File

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

9
frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
View File

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

8
frontend/src/index.css
View File

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

5
frontend/tailwind.config.js
View File

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