feat: update light mode UI sidebar (#4996)
* 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
GitHub
parent
e4022d331b
commit
eaa35eba61
@ -61,8 +61,7 @@ export default function Footer() {
|
||||
>
|
||||
<GithubLogo
|
||||
weight="fill"
|
||||
className="h-5 w-5"
|
||||
color="var(--theme-sidebar-footer-icon-fill)"
|
||||
className="h-5 w-5 text-white light:text-slate-800"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
@ -78,8 +77,7 @@ export default function Footer() {
|
||||
>
|
||||
<BookOpen
|
||||
weight="fill"
|
||||
className="h-5 w-5"
|
||||
color="var(--theme-sidebar-footer-icon-fill)"
|
||||
className="h-5 w-5 text-white light:text-slate-800"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
@ -95,8 +93,7 @@ export default function Footer() {
|
||||
>
|
||||
<DiscordLogo
|
||||
weight="fill"
|
||||
className="h-5 w-5"
|
||||
color="var(--theme-sidebar-footer-icon-fill)"
|
||||
className="h-5 w-5 text-white light:text-slate-800"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -21,9 +21,8 @@ export default function SettingsButton() {
|
||||
data-tooltip-content="Back to workspaces"
|
||||
>
|
||||
<ArrowUUpLeft
|
||||
className="h-5 w-5"
|
||||
className="h-5 w-5 text-white light:text-slate-800"
|
||||
weight="fill"
|
||||
color="var(--theme-sidebar-footer-icon-fill)"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
@ -39,9 +38,8 @@ export default function SettingsButton() {
|
||||
data-tooltip-content="Open settings"
|
||||
>
|
||||
<Wrench
|
||||
className="h-5 w-5"
|
||||
className="h-5 w-5 text-white light:text-slate-800"
|
||||
weight="fill"
|
||||
color="var(--theme-sidebar-footer-icon-fill)"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -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 */}
|
||||
@ -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>
|
||||
)}
|
||||
@ -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)] light:bg-blue-200" : "hover:bg-theme-sidebar-subitem-hover light:hover:bg-slate-300"} rounded-[4px]`}
|
||||
>
|
||||
{thread.deleted ? (
|
||||
<div className="w-full flex justify-between">
|
||||
@ -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-theme-text-primary light:text-blue-900"
|
||||
: "text-theme-text-primary font-medium light:text-slate-800"
|
||||
}`}
|
||||
>
|
||||
{thread.name}
|
||||
|
||||
@ -174,10 +174,10 @@ function NewThreadButton({ workspace }) {
|
||||
return (
|
||||
<button
|
||||
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="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"
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -113,8 +113,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 ? "light:bg-blue-200 font-bold" : "hover:bg-theme-sidebar-subitem-hover light:hover:bg-slate-300"}
|
||||
`}
|
||||
>
|
||||
<div className="flex flex-row justify-between w-full items-center">
|
||||
@ -124,7 +123,7 @@ export default function ActiveWorkspaces() {
|
||||
>
|
||||
<DotsSixVertical
|
||||
size={20}
|
||||
color="var(--theme-sidebar-item-workspace-active)"
|
||||
className={`${isActive ? "text-white light:text-blue-800" : ""}`}
|
||||
weight="bold"
|
||||
/>
|
||||
</div>
|
||||
@ -132,9 +131,9 @@ export default function ActiveWorkspaces() {
|
||||
<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-900" : "font-medium "} truncate
|
||||
w-full group-hover:w-[130px] group-hover:duration-200
|
||||
`}
|
||||
>
|
||||
{workspace.name}
|
||||
@ -152,9 +151,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={`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
|
||||
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"
|
||||
>
|
||||
<GearSix
|
||||
@ -178,7 +179,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-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>
|
||||
</div>
|
||||
|
||||
@ -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 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}
|
||||
@ -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 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>
|
||||
<Tooltip
|
||||
id="new-workspace-tooltip"
|
||||
|
||||
@ -56,7 +56,7 @@ export default function Sidebar() {
|
||||
</div>
|
||||
<div
|
||||
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-grow flex flex-col min-w-[235px] min-h-0">
|
||||
@ -66,7 +66,7 @@ export default function Sidebar() {
|
||||
<ActiveWorkspaces />
|
||||
</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 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user