michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update light mode UI sidebar (#4996)

Browse Source 
* implement light mode sidebar redesign

* Abstract hardcoded hex values into reusable css variables

* reorder ternary and apply bold font on hovered workspaces

* Remove double icon hack and use a state tracking whether workspace item is being hovered over for fill styles

* lint

* convert css variables and custom classes to default tailwind classes

* remove grab icon filling on hover logic

* revert css vars to original values

* remove light mode css vars | change bg of sidebar in light mode to right color | make icons correct color in light mode

* revert dark mode change

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
This commit is contained in:
Marcello Fitton 2026-02-18 15:55:56 -08:00 committed by GitHub
parent e4022d331b
commit eaa35eba61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/Footer/index.jsx
View File

@ -61,8 +61,7 @@ export default function Footer() {
> >
<GithubLogo <GithubLogo
weight="fill" weight="fill"
className="h-5 w-5" className="h-5 w-5 text-white light:text-slate-800"
color="var(--theme-sidebar-footer-icon-fill)"
/> />
</Link> </Link>
</div> </div>
@ -78,8 +77,7 @@ export default function Footer() {
> >
<BookOpen <BookOpen
weight="fill" weight="fill"
className="h-5 w-5" className="h-5 w-5 text-white light:text-slate-800"
color="var(--theme-sidebar-footer-icon-fill)"
/> />
</Link> </Link>
</div> </div>
@ -95,8 +93,7 @@ export default function Footer() {
> >
<DiscordLogo <DiscordLogo
weight="fill" weight="fill"
className="h-5 w-5" className="h-5 w-5 text-white light:text-slate-800"
color="var(--theme-sidebar-footer-icon-fill)"
/> />
</Link> </Link>
</div> </div>

6
frontend/src/components/SettingsButton/index.jsx
View File

@ -21,9 +21,8 @@ export default function SettingsButton() {
data-tooltip-content="Back to workspaces" data-tooltip-content="Back to workspaces"
> >
<ArrowUUpLeft <ArrowUUpLeft
className="h-5 w-5" className="h-5 w-5 text-white light:text-slate-800"
weight="fill" weight="fill"
color="var(--theme-sidebar-footer-icon-fill)"
/> />
</Link> </Link>
</div> </div>
@ -39,9 +38,8 @@ export default function SettingsButton() {
data-tooltip-content="Open settings" data-tooltip-content="Open settings"
> >
<Wrench <Wrench
className="h-5 w-5" className="h-5 w-5 text-white light:text-slate-800"
weight="fill" weight="fill"
color="var(--theme-sidebar-footer-icon-fill)"
/> />
</Link> </Link>
</div> </div>

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

@ -46,8 +46,8 @@ export default function ThreadItem({
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
className={`${ className={`${
isActive isActive
? "border-l-2 border-b-2 border-white light:border-theme-sidebar-border z-[2]" ? "border-l-2 border-b-2 border-white light:border-blue-800 z-[2]"
: "border-l border-b border-[#6F6F71] light:border-theme-sidebar-border z-[1]" : "border-l border-b border-zinc-500 light:border-slate-400 z-[1]"
} h-[50%] absolute top-0 left-3 rounded-bl-lg`} } h-[50%] absolute top-0 left-3 rounded-bl-lg`}
></div> ></div>
{/* Downstroke border for next item */} {/* Downstroke border for next item */}
@ -56,8 +56,8 @@ export default function ThreadItem({
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
className={`${ className={`${
idx <= activeIdx && !isActive idx <= activeIdx && !isActive
? "border-l-2 border-white light:border-theme-sidebar-border z-[2]" ? "border-l-2 border-white light:border-blue-800 z-[2]"
: "border-l border-[#6F6F71] light:border-theme-sidebar-border z-[1]" : "border-l border-zinc-500 light:border-slate-400 z-[1]"
} h-[100%] absolute top-0 left-3`} } h-[100%] absolute top-0 left-3`}
></div> ></div>
)} )}
@ -68,7 +68,7 @@ export default function ThreadItem({
className="h-full" className="h-full"
/> />
<div <div
className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? "bg-[var(--theme-sidebar-thread-selected)] border border-solid border-transparent light:border-blue-400" : "hover:bg-theme-sidebar-subitem-hover"} rounded-[4px]`} className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? "bg-[var(--theme-sidebar-thread-selected)] light:bg-blue-200" : "hover:bg-theme-sidebar-subitem-hover light:hover:bg-slate-300"} rounded-[4px]`}
> >
{thread.deleted ? ( {thread.deleted ? (
<div className="w-full flex justify-between"> <div className="w-full flex justify-between">
@ -105,7 +105,9 @@ export default function ThreadItem({
> >
<p <p
className={`text-left text-sm truncate max-w-[150px] ${ className={`text-left text-sm truncate max-w-[150px] ${
isActive ? "font-medium text-white" : "text-theme-text-primary" isActive
? "font-semibold text-theme-text-primary light:text-blue-900"
: "text-theme-text-primary font-medium light:text-slate-800"
}`} }`}
> >
{thread.name} {thread.name}

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

@ -174,10 +174,10 @@ function NewThreadButton({ workspace }) {
return ( return (
<button <button
onClick={onClick} onClick={onClick}
className="w-full relative flex h-[40px] items-center border-none hover:bg-[var(--theme-sidebar-thread-selected)] hover:light:bg-theme-sidebar-subitem-hover rounded-lg" className="w-full relative flex h-[40px] items-center border-none hover:bg-[var(--theme-sidebar-thread-selected)] light:hover:bg-slate-300 hover:light:bg-theme-sidebar-subitem-hover rounded-lg"
> >
<div className="flex w-full gap-x-2 items-center pl-4"> <div className="flex w-full gap-x-2 items-center pl-4">
<div className="bg-white/20 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center"> <div className="bg-zinc-800 light:bg-slate-50 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
{loading ? ( {loading ? (
<CircleNotch <CircleNotch
weight="bold" weight="bold"
@ -198,7 +198,7 @@ function NewThreadButton({ workspace }) {
Starting Thread... Starting Thread...
</p> </p>
) : ( ) : (
<p className="text-left text-white light:text-theme-text-primary text-sm"> <p className="text-left text-white light:text-theme-text-primary text-sm font-semibold">
New Thread New Thread
</p> </p>
)} )}

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

@ -113,8 +113,7 @@ export default function ActiveWorkspaces() {
transition-all duration-[200ms] transition-all duration-[200ms]
flex flex-grow w-[75%] gap-x-2 py-[6px] pl-[4px] pr-[6px] rounded-[4px] text-white justify-start items-center flex flex-grow w-[75%] gap-x-2 py-[6px] pl-[4px] pr-[6px] rounded-[4px] text-white justify-start items-center
bg-theme-sidebar-item-default bg-theme-sidebar-item-default
hover:bg-theme-sidebar-subitem-hover hover:font-bold ${isActive ? "light:bg-blue-200 font-bold" : "hover:bg-theme-sidebar-subitem-hover light:hover:bg-slate-300"}
${isActive ? "bg-theme-sidebar-item-selected font-bold light:outline-2 light:outline light:outline-blue-400 light:outline-offset-[-2px]" : ""}
`} `}
> >
<div className="flex flex-row justify-between w-full items-center"> <div className="flex flex-row justify-between w-full items-center">
@ -124,7 +123,7 @@ export default function ActiveWorkspaces() {
> >
<DotsSixVertical <DotsSixVertical
size={20} size={20}
color="var(--theme-sidebar-item-workspace-active)" className={`${isActive ? "text-white light:text-blue-800" : ""}`}
weight="bold" weight="bold"
/> />
</div> </div>
@ -132,9 +131,9 @@ export default function ActiveWorkspaces() {
<div className="w-[130px] overflow-hidden"> <div className="w-[130px] overflow-hidden">
<p <p
className={` className={`
text-[14px] leading-loose whitespace-nowrap overflow-hidden text-white text-[14px] leading-loose whitespace-nowrap overflow-hidden
${isActive ? "font-bold" : "font-medium"} truncate ${isActive ? "font-bold text-white light:text-blue-900" : "font-medium "} truncate
w-full group-hover:w-[130px] group-hover:font-bold group-hover:duration-200 w-full group-hover:w-[130px] group-hover:duration-200
`} `}
> >
{workspace.name} {workspace.name}
@ -152,9 +151,11 @@ export default function ActiveWorkspaces() {
setSelectedWs(workspace); setSelectedWs(workspace);
showModal(); showModal();
}} }}
className="border-none rounded-md flex items-center justify-center ml-auto p-[2px] hover:bg-[#646768] text-[#A7A8A9] hover:text-white" className={`group/upload border-none rounded-md flex items-center justify-center ml-auto p-[2px] ${isActive ? "hover:bg-zinc-500 light:hover:bg-sky-800/30" : "hover:bg-zinc-500 light:hover:bg-slate-400"}`}
> >
<UploadSimple className="h-[20px] w-[20px]" /> <UploadSimple
className={`h-[20px] w-[20px] ${isActive ? "text-zinc-400 hover:text-white light:text-blue-700 light:group-hover/upload:text-blue-900" : "text-zinc-400 hover:text-white light:text-slate-600 light:group-hover/upload:text-slate-950"}`}
/>
</button> </button>
<button <button
onClick={(e) => { onClick={(e) => {
@ -168,7 +169,7 @@ export default function ActiveWorkspaces() {
) )
); );
}} }}
className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto p-[2px] hover:bg-[#646768]" className={`group/gear rounded-md flex items-center justify-center ml-auto p-[2px] ${isActive ? "hover:bg-zinc-500 light:hover:bg-sky-800/30" : "hover:bg-zinc-500 light:hover:bg-slate-400"}`}
aria-label="General appearance settings" aria-label="General appearance settings"
> >
<GearSix <GearSix
@ -178,7 +179,7 @@ export default function ActiveWorkspaces() {
? "#46C8FF" ? "#46C8FF"
: undefined : undefined
} }
className="h-[20px] w-[20px]" className={`h-[20px] w-[20px] ${isActive ? "text-zinc-400 hover:text-white light:text-blue-700 light:group-hover/gear:text-blue-900" : "text-zinc-400 hover:text-white light:text-slate-600 light:group-hover/gear:text-slate-950"}`}
/> />
</button> </button>
</div> </div>

10
frontend/src/components/Sidebar/SearchBox/index.jsx
View File

@ -61,7 +61,7 @@ export default function SearchBox({ user, showNewWsModal }) {
onChange={handleSearch} onChange={handleSearch}
onReset={handleReset} onReset={handleReset}
onFocus={(e) => e.target.select()} onFocus={(e) => e.target.select()}
className="border-none w-full h-full rounded-lg bg-theme-sidebar-item-default pl-9 focus:pl-4 pr-1 placeholder:text-theme-settings-input-placeholder outline-none text-white search-input peer text-sm" className="border-none w-full h-full rounded-lg bg-theme-sidebar-item-default pl-9 focus:pl-4 pr-1 placeholder:text-white/50 light:placeholder:text-slate-500 placeholder:font-semibold outline-none text-theme-text-primary search-input peer text-sm"
/> />
<MagnifyingGlass <MagnifyingGlass
size={14} size={14}
@ -198,9 +198,13 @@ function ShortWidthNewWorkspaceButton({ user, showNewWsModal }) {
data-tooltip-id="new-workspace-tooltip" data-tooltip-id="new-workspace-tooltip"
data-tooltip-content={t("new-workspace.title")} data-tooltip-content={t("new-workspace.title")}
onClick={showNewWsModal} onClick={showNewWsModal}
className="border-none flex items-center justify-center bg-white rounded-lg p-[8px] hover:bg-white/80 transition-all duration-300" className="border-none flex items-center justify-center bg-white rounded-lg p-[8px] hover:bg-white/80 light:hover:bg-slate-300 transition-all duration-300"
> >
<Plus size={16} weight="bold" className="text-black" /> <Plus
size={16}
weight="bold"
className="text-black light:text-slate-500"
/>
</button> </button>
<Tooltip <Tooltip
id="new-workspace-tooltip" id="new-workspace-tooltip"

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

@ -56,7 +56,7 @@ export default function Sidebar() {
</div> </div>
<div <div
ref={sidebarRef} ref={sidebarRef}
className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]" className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar light:bg-slate-200 border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]"
> >
<div className="flex flex-col h-full overflow-hidden"> <div className="flex flex-col h-full overflow-hidden">
<div className="flex-grow flex flex-col min-w-[235px] min-h-0"> <div className="flex-grow flex flex-col min-w-[235px] min-h-0">
@ -66,7 +66,7 @@ export default function Sidebar() {
<ActiveWorkspaces /> <ActiveWorkspaces />
</div> </div>
</div> </div>
<div className="absolute bottom-0 left-0 right-0 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10"> <div className="absolute bottom-0 left-0 right-0 pb-3 rounded-b-[16px] bg-theme-bg-sidebar light:bg-slate-200 bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
<Footer /> <Footer />
</div> </div>
</div> </div>