Skip to content

feat: update light mode UI sidebar #4996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
angelplusultra wants to merge 9 commits into
base: master
Choose a base branch
from
Open

feat: update light mode UI sidebar #4996

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
605e384
implement light mode sidebar redesign
angelplusultra Feb 12, 2026
dd726f5
Abstract hardcoded hex values into reusable css variables
angelplusultra Feb 12, 2026
5de4119
reorder ternary and apply bold font on hovered workspaces
angelplusultra Feb 12, 2026
cdcafbd
Remove double icon hack and use a state tracking whether workspace it…
angelplusultra Feb 12, 2026
5f9625d
lint
angelplusultra Feb 12, 2026
a03dd2c
convert css variables and custom classes to default tailwind classes
angelplusultra Feb 13, 2026
b673278
remove grab icon filling on hover logic
angelplusultra Feb 13, 2026
7d7c8d1
revert css vars to original values
angelplusultra Feb 13, 2026
568a15e
remove light mode css vars | change bg of sidebar in light mode to ri…
angelplusultra Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export default function ThreadItem({
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
className={`${
isActive
? "border-l-2 border-b-2 border-white light:border-theme-sidebar-border z-[2]"
: "border-l border-b border-[#6F6F71] light:border-theme-sidebar-border z-[1]"
? "border-l-2 border-b-2 border-white light:border-blue-800 z-[2]"
: "border-l border-b border-zinc-500 light:border-slate-400 z-[1]"
} h-[50%] absolute top-0 left-3 rounded-bl-lg`}
></div>
{/* Downstroke border for next item */}
Expand All @@ -56,8 +56,8 @@ export default function ThreadItem({
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
className={`${
idx <= activeIdx && !isActive
? "border-l-2 border-white light:border-theme-sidebar-border z-[2]"
: "border-l border-[#6F6F71] light:border-theme-sidebar-border z-[1]"
? "border-l-2 border-white light:border-blue-800 z-[2]"
: "border-l border-zinc-500 light:border-slate-400 z-[1]"
} h-[100%] absolute top-0 left-3`}
></div>
)}
Expand All @@ -68,7 +68,7 @@ export default function ThreadItem({
className="h-full"
/>
<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)]" : "hover:bg-theme-sidebar-subitem-hover"} rounded-[4px]`}
>
{thread.deleted ? (
<div className="w-full flex justify-between">
Expand Down Expand Up @@ -105,7 +105,9 @@ export default function ThreadItem({
>
<p
className={`text-left text-sm truncate max-w-[150px] ${
isActive ? "font-medium text-white" : "text-theme-text-primary"
isActive
? "font-semibold text-white light:text-blue-800"
: "text-zinc-600 light:text-slate-400 font-medium"
}`}
>
{thread.name}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ function NewThreadButton({ workspace }) {
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"
>
<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 ? (
<CircleNotch
weight="bold"
Expand All @@ -198,7 +198,7 @@ function NewThreadButton({ workspace }) {
Starting Thread...
</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
</p>
)}
Expand Down
34 changes: 22 additions & 12 deletions frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function ActiveWorkspaces() {
const [loading, setLoading] = useState(true);
const [workspaces, setWorkspaces] = useState([]);
const [selectedWs, setSelectedWs] = useState(null);
const [hoveredWsId, setHoveredWsId] = useState(null);
const { showing, showModal, hideModal } = useManageWorkspaceModal();
const { user } = useUser();
const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
Expand Down Expand Up @@ -98,6 +99,8 @@ export default function ActiveWorkspaces() {
snapshot.isDragging ? "opacity-50" : ""
}`}
role="listitem"
onMouseEnter={() => setHoveredWsId(workspace.id)}
onMouseLeave={() => setHoveredWsId(null)}
>
<div className="flex gap-x-2 items-center justify-between">
<a
Expand All @@ -113,8 +116,7 @@ export default function ActiveWorkspaces() {
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
bg-theme-sidebar-item-default
hover:bg-theme-sidebar-subitem-hover hover:font-bold
${isActive ? "bg-theme-sidebar-item-selected font-bold light:outline-2 light:outline light:outline-blue-400 light:outline-offset-[-2px]" : ""}
${isActive ? "bg-theme-sidebar-item-selected font-bold" : "hover:bg-theme-sidebar-subitem-hover"}
`}
>
<div className="flex flex-row justify-between w-full items-center">
Expand All @@ -123,18 +125,24 @@ export default function ActiveWorkspaces() {
className="cursor-grab mr-[3px]"
>
<DotsSixVertical
size={20}
color="var(--theme-sidebar-item-workspace-active)"
weight="bold"
size={18}
className={`${isActive ? "text-white light:text-blue-800" : ""}`}
weight={
isActive ||
hoveredWsId === workspace.id ||
snapshot.isDragging
? "fill"
: "regular"
}
/>
</div>
<div className="flex items-center space-x-2 overflow-hidden flex-grow">
<div className="w-[130px] overflow-hidden">
<p
className={`
text-[14px] leading-loose whitespace-nowrap overflow-hidden text-white
${isActive ? "font-bold" : "font-medium"} truncate
w-full group-hover:w-[130px] group-hover:font-bold group-hover:duration-200
text-[14px] leading-loose whitespace-nowrap overflow-hidden
${isActive ? "font-bold text-white light:text-blue-800" : "font-medium group-hover:font-bold"} truncate
w-full group-hover:w-[130px] group-hover:duration-200
`}
>
{workspace.name}
Expand All @@ -152,9 +160,11 @@ export default function ActiveWorkspaces() {
setSelectedWs(workspace);
showModal();
}}
className="border-none rounded-md flex items-center justify-center ml-auto p-[2px] hover:bg-[#646768] text-[#A7A8A9] hover:text-white"
className={`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-sky-700 light:hover:text-sky-900" : "text-zinc-400 hover:text-white light:text-slate-600 light:hover:text-slate-950"}`}
/>
</button>
<button
onClick={(e) => {
Expand All @@ -168,7 +178,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={`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"
>
<GearSix
Expand All @@ -178,7 +188,7 @@ export default function ActiveWorkspaces() {
? "#46C8FF"
: undefined
}
className="h-[20px] w-[20px]"
className={`h-[20px] w-[20px] ${isActive ? "text-zinc-400 hover:text-white light:text-sky-700 light:hover:text-sky-900" : "text-zinc-400 hover:text-white light:text-slate-600 light:hover:text-slate-950"}`}
/>
</button>
</div>
Expand Down
10 changes: 7 additions & 3 deletions frontend/src/components/Sidebar/SearchBox/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function SearchBox({ user, showNewWsModal }) {
onChange={handleSearch}
onReset={handleReset}
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 light:bg-transparent 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
size={14}
Expand Down Expand Up @@ -198,9 +198,13 @@ function ShortWidthNewWorkspaceButton({ user, showNewWsModal }) {
data-tooltip-id="new-workspace-tooltip"
data-tooltip-content={t("new-workspace.title")}
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 light:bg-transparent rounded-lg p-[8px] hover:bg-white/80 light:hover:bg-transparent 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>
<Tooltip
id="new-workspace-tooltip"
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
--theme-loader: #000000;
--theme-bg-primary: #ffffff;
--theme-bg-secondary: #ffffff;
--theme-bg-sidebar: #edf2fa;
--theme-bg-sidebar: #e2e8f0;
--theme-bg-container: #f9fbfd;
--theme-popup-menu-bg: #c2e7fe;

Expand All @@ -119,7 +119,7 @@
--theme-text-secondary: #7a7d7e;
--theme-placeholder: #9ca3af;
--theme-sidebar-item-default: #ffffff;
--theme-sidebar-item-selected: #ffffff;
--theme-sidebar-item-selected: #b2ddff;
--theme-sidebar-item-hover: #c8efff;

--theme-sidebar-item-text-inactive: #7a7d7e;
Expand All @@ -130,8 +130,8 @@

--theme-sidebar-subitem-default: transparent;
--theme-sidebar-subitem-selected: #e2e7ee;
--theme-sidebar-thread-selected: #ffffff;
--theme-sidebar-subitem-hover: #e2e7ee;
--theme-sidebar-thread-selected: #b2ddff;
--theme-sidebar-subitem-hover: #cbd5e1;
--theme-sidebar-border: #d3d4d4;

--theme-sidebar-footer-icon: #ffffff;
Expand Down