mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-05-13 01:24:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode colors

Browse Source
This commit is contained in:
MartinBraquet
2026-04-30 16:04:25 +02:00
parent bbeccca977
commit 48b41aae5f
20 changed files with 140 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/nav/profile-summary.tsx
View File

@@ -15,7 +15,7 @@ export function ProfileSummary(props: {user: User; className?: string}) {
href={profile === null ? '/signup' : `/${user.username}`}
onClick={trackCallback('sidebar: profile')}
className={clsx(
'hover:bg-ink-100 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-md py-3',
'hover:bg-canvas-900 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-xl py-3',
className,
)}
>

6
web/components/nav/sidebar-item.tsx
View File

@@ -28,8 +28,8 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
}
const sidebarClass = clsx(
isCurrentPage ? 'bg-ink-100 text-primary-700' : 'text-ink-100 hover:text-primary-700',
'group flex items-center rounded-md px-3 py-2 text-sm font-medium',
isCurrentPage ? 'bg-canvas-900 text-primary-600' : 'text-[#776f65] hover:text-primary-700',
'group flex items-center rounded-xl px-3 py-2 text-sm font-medium',
'focus-visible:bg-ink-100 outline-none transition-all',
)
@@ -40,7 +40,7 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
className={clsx(
isCurrentPage
? 'text-primary-700'
: 'text-ink-100 group-hover:text-primary-700 group-hover:translate-x-[2px]',
: 'text-[#574f45] group-hover:text-primary-700 group-hover:translate-x-[2px]',
'-ml-1 mr-3 h-6 w-6 flex-shrink-0 transition-all',
)}
aria-hidden="true"

32
web/components/nav/sidebar.tsx
View File

@@ -49,26 +49,23 @@ export default function Sidebar(props: {
)}
style={style}
>
<SiteLogo className={'invert'} />
<SiteLogo className={'text-white'} />
{user === undefined && <div className="h-[24px]" />}
{user && !isMobile && <ProfileSummary user={user} className="mb-3 text-white" />}
{user && !isMobile && (
<>
<div className="h-px bg-canvas-900 mb-4" />
<ProfileSummary user={user} className="mb-3 text-white" />
</>
)}
<div className="h-px bg-canvas-900 mb-4" />
<div className="mb-4 flex flex-col gap-1 !overflow-y-auto">
{navOptions.map((item) => (
<SidebarItem key={item.key} item={item} currentPage={currentPage} />
))}
{!isAndroid && (
<Image
src="https://firebasestorage.googleapis.com/v0/b/compass-130ba.firebasestorage.app/o/misc%2FGoogle_Play_Store_badge_EN.svg.png?alt=media&token=3e0e8605-800a-422b-84d1-8ecec8af3e80"
alt="divider"
width={160}
height={80}
className="mx-auto pt-4 hover:opacity-70 cursor-pointer"
onClick={() => router.push(ANDROID_APP_URL)}
/>
)}
{user === null && <SignUpButton className="mt-4" text={t('nav.sign_up', 'Sign up')} />}
@@ -79,6 +76,17 @@ export default function Sidebar(props: {
)}
</div>
<div className="mb-[12px] mt-auto flex flex-col gap-1">
<div className="h-px bg-canvas-900" />
{!isAndroid && (
<Image
src="https://firebasestorage.googleapis.com/v0/b/compass-130ba.firebasestorage.app/o/misc%2FGoogle_Play_Store_badge_EN.svg.png?alt=media&token=3e0e8605-800a-422b-84d1-8ecec8af3e80"
alt="divider"
width={160}
height={80}
className="mx-auto pt-4 hover:opacity-70 cursor-pointer"
onClick={() => router.push(ANDROID_APP_URL)}
/>
)}
{user === null && <LanguagePicker className={'w-fit mx-3 pr-12 mb-2'} />}
{bottomNavOptions.map((item) => (
<SidebarItem key={item.key} item={item} currentPage={currentPage} />