Skip to content
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

Introduce dark theme #20

Merged
merged 9 commits into from
Jan 28, 2025
Merged

Introduce dark theme #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
887aa7e
Fix colors in settings
Jontes-Tech Jan 21, 2025
fb4101e
Update styles
Jontes-Tech Jan 23, 2025
39c996c
Bump
Jontes-Tech Jan 23, 2025
4dbba71
Bump
Jontes-Tech Jan 26, 2025
4c333d9
Active sessions table and navbar
Jontes-Tech Jan 27, 2025
baf647e
Update HoverCardArrow fill
lucemans Jan 27, 2025
9a739e0
Update Text
lucemans Jan 27, 2025
4ab0cd5
Lint
Jontes-Tech Jan 27, 2025
7905a41
Introduce theme switcher & persistence
lucemans Jan 27, 2025
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
36 changes: 31 additions & 5 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<!--
v3xlabs/v3x-property

Expand All @@ -10,12 +10,38 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v3x-property</title>
<script>
const theme = localStorage.getItem("theme");
if (theme) {
document.documentElement.classList.add(theme);
}
</script>
<link rel="stylesheet" href="./src/index.css" />
<script type="module" src="./src/index.tsx"></script>
<link rel="icon" type="image/png" sizes="64x64" href="./public/default_cube_64.png">
<link rel="icon" type="image/png" sizes="48x48" href="./public/default_cube_48.png">
<link rel="icon" type="image/png" sizes="32x32" href="./public/default_cube_32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./public/default_cube_16.png">
<link
rel="icon"
type="image/png"
sizes="64x64"
href="./public/default_cube_64.png"
/>
<link
rel="icon"
type="image/png"
sizes="48x48"
href="./public/default_cube_48.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./public/default_cube_32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./public/default_cube_16.png"
/>
</head>
<body>
<div id="root"></div>
Expand Down
24 changes: 12 additions & 12 deletions web/src/components/item/ItemPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const AvatarHolder: FC<{
)}
<Avatar.Fallback
className={clsx(
'bg-backgroundSecondary flex h-full w-full items-center justify-center text-base font-medium leading-none text-pink-500',
'flex h-full w-full items-center justify-center bg-backgroundSecondary text-base font-medium leading-none text-pink-500',
size === 'compact' && '!text-[0.6em]'
)}
delayMs={0}
Expand Down Expand Up @@ -115,22 +115,22 @@ export const ItemPreviewHoverCard: FC<{
/>
<div className="flex flex-col gap-3">
<div>
<div className="Text bold">{item?.name}</div>
<div className="Text faded">#{formattedItemId}</div>
<div className="bold text-foreground">{item?.name}</div>
<div className="faded text-foreground">#{formattedItemId}</div>
</div>
{/* <div className="Text">
{/* <div className="text-foreground">
Components, icons, colors, and templates
for building high-quality, accessible
UI. Free and open-source.
</div> */}
<div className="flex gap-3">
{/* <div className="flex gap-1">
<div className="Text bold">0</div>{' '}
<div className="Text faded">Following</div>
<div className="text-foreground bold">0</div>{' '}
<div className="text-foreground faded">Following</div>
</div>
<div className="flex gap-1">
<div className="Text bold">2,900</div>{' '}
<div className="Text faded">Followers</div>
<div className="text-foreground bold">2,900</div>{' '}
<div className="text-foreground faded">Followers</div>
</div> */}
</div>
</div>
Expand Down Expand Up @@ -194,7 +194,7 @@ const ItemPreviewLarge: FC<{
data-testid="item-preview-large"
>
{formattedItemId && (
<div className="bg-background absolute left-0 top-0 z-10 rounded-br-md rounded-tl-md border-b border-r px-1 py-0.5 text-sm">#{formattedItemId}</div>
<div className="absolute left-0 top-0 z-10 rounded-br-md rounded-tl-md border-b border-r bg-background px-1 py-0.5 text-sm">#{formattedItemId}</div>
)}
<div className="mx-auto md:mx-0">
<AvatarHolder
Expand Down Expand Up @@ -375,7 +375,7 @@ export const ItemPreview: FC<Properties> = ({ item_id, variant }) => {
randomHue={randomHue}
/>
<span className="flex items-baseline justify-start gap-0.5 overflow-hidden">
<span className="Text text-ellipsis whitespace-nowrap">
<span className="text-ellipsis whitespace-nowrap text-foreground">
{item?.name || UNKNOWN_ITEM}
</span>
{/* TODO: Figure out why -z-10 is needed to prevent overlap with user preview in logs page */}
Expand Down Expand Up @@ -419,11 +419,11 @@ export const ItemPreview: FC<Properties> = ({ item_id, variant }) => {
randomHue={randomHue}
/>
<div className="flex flex-col justify-center -space-y-1.5 overflow-hidden">
<div className="Text overflow-hidden text-ellipsis whitespace-nowrap">
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-foreground">
{item?.name || UNKNOWN_ITEM}
</div>
{formattedItemId && (
<div className="Text faded">
<div className="faded text-foreground">
#{formattedItemId}
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/media/MediaPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export const MediaPreview: FC<{
return (
<div
className={clsx(
'relative aspect-video h-fit w-full max-w-md rounded-md bg-neutral-100',
'relative aspect-video h-fit w-full max-w-md rounded-md bg-background',
status == 'new-media' &&
isPending &&
'border-2 border-blue-400',
Expand Down
18 changes: 10 additions & 8 deletions web/src/components/navigation/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@ import {
FiUsers,
} from 'react-icons/fi';

import { BASE_URL , useAuth , useHasPolicy,useMe } from '@/api';
import { Button,Dropdown } from '@/gui';
import { BASE_URL, useAuth, useHasPolicy, useMe } from '@/api';
import { Button, Dropdown } from '@/gui';

import { AvatarHolder, getInitials } from '../user/UserProfile';
import { ThemeSwitcher } from './ThemeSwitcher';

const LOGIN_URL = BASE_URL + 'login';

Expand Down Expand Up @@ -109,7 +110,7 @@ export const Navbar = () => {
<nav
role="navigation"
aria-label="Main"
className="bg-background fixed bottom-0 z-20 flex h-16 w-full items-center justify-between border-t md:sticky md:top-0 md:h-9 md:border-b"
className="fixed bottom-0 z-20 flex h-16 w-full items-center justify-between border-t bg-background md:sticky md:top-0 md:h-9 md:border-b"
>
<Link
to="/"
Expand Down Expand Up @@ -157,7 +158,7 @@ export const Navbar = () => {
<Link
to={path}
data-testid={slug}
className="flex cursor-pointer items-center justify-start rounded-md py-2.5 hover:bg-black/5"
className="flex cursor-pointer items-center justify-start rounded-md py-2.5 text-foreground hover:bg-black/5"
>
{icon}
<span className="text-sm">{name}</span>
Expand All @@ -181,7 +182,7 @@ export const Navbar = () => {
<Dropdown.Item asChild>
<Link
to={login_here_url}
className="flex items-center justify-center py-2 hover:bg-black/5"
className="flex items-center justify-center py-2 text-foreground hover:bg-black/5"
>
<FiLogIn />
<span className="text-sm">
Expand All @@ -197,12 +198,13 @@ export const Navbar = () => {
</div>
<div className="h-full">
<div className="hidden h-full items-center gap-2 md:flex">
<ThemeSwitcher />
{token && meData && (
<div className="h-full md:border-l">
<Dropdown.Root>
<Dropdown.Trigger asChild>
<button
className="flex h-full items-center gap-2 p-1 px-2 hover:bg-black/5"
className="flex h-full items-center gap-2 p-1 px-2 text-foreground hover:bg-black/5"
data-testid="user-dropdown-trigger"
>
<AvatarHolder
Expand All @@ -216,7 +218,7 @@ export const Navbar = () => {
</button>
</Dropdown.Trigger>

<Dropdown.Content align="end">
<Dropdown.Content align="end" className='text-foreground'>
<Dropdown.Item asChild>
<Link to="/sessions">Sessions</Link>
</Dropdown.Item>
Expand All @@ -239,7 +241,7 @@ export const Navbar = () => {
{(!token || (token && !meData)) && (
<a
href={login_here_url}
className="flex h-full items-center border-t px-2 py-0.5 hover:bg-black/10 md:border-l"
className="flex h-full items-center border-t px-2 py-0.5 text-foreground hover:bg-black/10 md:border-l"
data-testid="login-button"
>
Login
Expand Down
25 changes: 25 additions & 0 deletions web/src/components/navigation/ThemeSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { useState } from 'react';
import { FiMonitor, FiMoon, FiSun } from 'react-icons/fi';

import { cn } from '@/util/style';

export const ThemeSwitcher = () => {
const theme = localStorage.getItem('theme') || 'system';
const [currentTheme, setCurrentTheme] = useState(theme);
const setTheme = (theme: string) => {
localStorage.setItem('theme', theme);
setCurrentTheme(theme);
document.documentElement.classList.remove('light', 'dark');
document.documentElement.classList.add(theme);
};

return <div className="flex h-full items-center">
{
([['light', <FiSun />], ['dark', <FiMoon />], ['system', <FiMonitor />]] as const).map(([theme, icon]) => (
<button key={theme} onClick={() => setTheme(theme)} className={cn(currentTheme === theme && 'bg-backgroundSecondary', 'h-full flex items-center px-1')}>
{icon}
</button>
))
}
</div>;
};
3 changes: 2 additions & 1 deletion web/src/components/settings/InstanceSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const InstanceSettings = () => {
</Button>
</Dropdown.Trigger>
<Dropdown.Content className="w-56">
<Dropdown.Label>
<Dropdown.Label className='text-foreground'>
ID Casing Preference
</Dropdown.Label>
<Dropdown.Separator />
Expand All @@ -85,6 +85,7 @@ export const InstanceSettings = () => {
value={
value
}
className='text-foreground'
>
{value}
</Dropdown.RadioItem>
Expand Down
10 changes: 5 additions & 5 deletions web/src/components/settings/nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const ExpandableItem = ({ path, label, icon }: { path: [string, string][], label
<div className="flex w-full flex-col">
<Accordion.Trigger>
<div className={clsx(
'relative flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1 text-neutral-700 hover:bg-neutral-100',
'relative flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1 text-foreground hover:bg-accent',
)}>
<div className='flex items-center gap-2'>
{icon}
Expand All @@ -63,8 +63,8 @@ const ExpandableItem = ({ path, label, icon }: { path: [string, string][], label
to={path as string}
activeOptions={{ exact: true }}
className={clsx(
'relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 pl-8 text-sm text-neutral-700 hover:bg-neutral-100',
'[&.active]:bg-neutral-500/10 [&.active]:text-primary',
'relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 pl-8 text-sm text-foreground hover:bg-accent',
'[&.active]:bg-neutral-500/10 [&.active]:text-foreground',
// eslint-disable-next-line quotes
"[&.active]:before:content-['']",
'[&.active]:before:absolute [&.active]:before:-left-3 [&.active]:before:bottom-[12%] [&.active]:before:top-[12%] [&.active]:before:w-1 [&.active]:before:rounded-md [&.active]:before:bg-blue-500'
Expand Down Expand Up @@ -170,8 +170,8 @@ export const SettingsNav = () => {
to={path as string}
activeOptions={{ exact: true }}
className={clsx(
'relative flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-neutral-700 hover:bg-neutral-100',
'[&.active]:bg-neutral-500/10 [&.active]:text-primary',
'relative flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-foreground hover:bg-accent',
'[&.active]:bg-neutral-500/10 [&.active]:text-foreground',
// eslint-disable-next-line quotes
"[&.active]:before:content-['']",
'[&.active]:before:absolute [&.active]:before:-left-3 [&.active]:before:bottom-[12%] [&.active]:before:top-[12%] [&.active]:before:w-1 [&.active]:before:rounded-md [&.active]:before:bg-blue-500'
Expand Down
20 changes: 10 additions & 10 deletions web/src/components/user/UserProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,22 +63,22 @@ export const UserProfileHoverCard: FC<{
/>
<div className="flex flex-col gap-3">
<div>
<div className="Text bold">{user?.name}</div>
<div className="Text faded">#{user?.user_id}</div>
<div className="bold text-foreground">{user?.name}</div>
<div className="faded text-foreground">#{user?.user_id}</div>
</div>
{/* <div className="Text">
{/* <div className="text-foreground">
Components, icons, colors, and templates
for building high-quality, accessible
UI. Free and open-source.
</div> */}
<div className="flex gap-3">
<div className="flex gap-1">
<div className="Text bold">0</div>{' '}
<div className="Text faded">Following</div>
<div className="bold text-foreground">0</div>{' '}
<div className="faded text-foreground">Following</div>
</div>
<div className="flex gap-1">
<div className="Text bold">2,900</div>{' '}
<div className="Text faded">Followers</div>
<div className="bold text-foreground">2,900</div>{' '}
<div className="faded text-foreground">Followers</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -142,7 +142,7 @@ export const UserProfile: FC<Properties> = ({ user_id, variant }) => {
initials={getInitials(user?.name)}
size="compact"
/>
<span className="Text !leading-[0.75em]">
<span className="!leading-[0.75em] text-foreground">
{user?.first_name ||
user?.name ||
UNKNOWN_USER}
Expand All @@ -165,10 +165,10 @@ export const UserProfile: FC<Properties> = ({ user_id, variant }) => {
initials={getInitials(user?.name)}
/>
<div className="flex flex-col justify-center gap-1">
<div className="Text !leading-[0.75em]">
<div className="!leading-[0.75em] text-foreground">
{user?.name || UNKNOWN_USER}
</div>
<div className="Text faded !leading-[0.75em]">
<div className="faded !leading-[0.75em] text-foreground">
{me?.user_id === user?.user_id
? 'You'
: `#${user?.user_id}`}
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/user/sessions/ActiveSessionsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const ActiveSession: FC<{ session: SessionResponse }> = ({ session }) => {
return (
<div
key={session.session_id}
className="flex h-fit items-center justify-between gap-2 bg-blue-50 p-2"
className="flex h-fit items-center justify-between gap-2 bg-backgroundSecondary p-2"
>
{geoip?.latitude && (
<div className="h-full">
Expand Down
Loading
Loading