arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Improve colors

Browse source
This commit is contained in:
Arthur Belleville 2025-04-06 22:29:34 +02:00
parent 9235117aee
commit 50221af006
No known key found for this signature in database
4 changed files with 80 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
ui/src/components/NavigationBar.tsx
View file

@ -10,14 +10,7 @@ import {
MinusIcon,
} from "lucide-react";
import { Link as RouterLink } from "react-router-dom";
import {
MenuItem,
MenuTrigger,
Separator,
Switch,
Menu,
} from "react-aria-components";
import { MenuButton, MenuItemLabel, MenuPopover } from "../ui-library/menu";
import { Separator, Switch } from "react-aria-components";
import { Link } from "../ui-library/link";
import { Icon } from "../ui-library/icon";
import { Avatar, AvatarBadge } from "../ui-library/avatar";
@ -30,12 +23,7 @@ import {
} from "../ui-library/disclosure";
import { LinkProps } from "react-aria-components";
import { Popover } from "../ui-library/popover";
import {
AvailableIcon,
AwayIcon,
BusyIcon,
DoNotDisturbIcon,
} from "../ui-library/icons";
import { AvailableIcon } from "../ui-library/icons";
import { useState, useRef } from "react";
import logo from "../assets/icon.jpg";
import { ThemeSwitcher } from "./ThemeSwitcher";
@ -51,7 +39,7 @@ function NavLink(props: NavLinkProps) {
if ("items" in props) {
return (
<Disclosure defaultExpanded>
<DisclosureControl className="group/control [&:not(:hover)]:text-foreground/50 mt-3 w-full ps-2.5 text-xs/6 font-semibold">
<DisclosureControl className="group/control [&:not(:hover)]:text-white/50 mt-3 w-full ps-2.5 text-xs /6 font-semibold">
{props.title}{" "}
<ChevronRightIcon className="ms-auto hidden size-4 transition-all group-hover/control:flex group-aria-expanded:rotate-90" />
</DisclosureControl>
@ -73,22 +61,21 @@ function NavLink(props: NavLinkProps) {
<Link
{...rest}
className={twMerge(
"group w-full gap-x-3 overflow-hidden rounded-md px-2.5 py-1 text-nowrap hover:bg-zinc-100/50 hover:no-underline focus-visible:outline-offset-0 dark:hover:bg-zinc-800 [&>[data-ui=icon]:not([class*=size-])]:size-4.5",
"[&>[data-ui=notification-badge]]:text-foreground/70",
"group w-full gap-x-3 overflow-hidden rounded-md px-2.5 py-1 text-nowrap hover:bg-navbar-darker hover:no-underline focus-visible:outline-offset-0 [&>[data-ui=icon]:not([class*=size-])]:size-4.5",
"[&>[data-ui=notification-badge]]:bg-navbar-darker",
"[&>[data-ui=notification-badge]]:rounded-md",
"[&>[data-ui=notification-badge]]:top-1/2",
"[&>[data-ui=notification-badge]]:right-1",
"[&>[data-ui=notification-badge]]:-translate-y-1/2",
"[&>[data-ui=notification-badge]]:bg-zinc-200/40",
"dark:[&>[data-ui=notification-badge]]:bg-zinc-900",
"[&>[data-ui=notification-badge]]:bg-navbar-darker",
"[&>[data-ui=notification-badge]]:p-3",
"[&>[data-ui=notification-badge]]:text-xs/6",
"[&>[data-ui=notification-badge]]:font-semibold",
isActive
? "bg-zinc-100/50 font-semibold dark:bg-zinc-900 [&>[data-ui=notification-badge]]:bg-transparent"
? "bg-navbar-darker font-semibold text-white [&>[data-ui=notification-badge]]:bg-transparent"
: [
"font-medium",
"text-foreground/70 [&:not(:hover)>[data-ui=icon]]:text-foreground/35",
"text-gray-300/90 [&:not(:hover)>[data-ui=icon]]:bg-navbar-darker",
]
)}
>
@ -110,7 +97,9 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
onPress={() => setIsPopoverOpen(!isPopoverOpen)}
ref={ref}
isIconOnly={isCollapsed}
className={twMerge("flex items-center w-90 justify-start")}
className={twMerge(
"flex items-center w-90 justify-start hover:bg-navbar-darker"
)}
>
<Avatar
className="rounded-full"
@ -119,7 +108,7 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
/>
<span
className={twMerge(
"transition-all duration-300",
"text-gray-300/90 transition-all duration-300",
isCollapsed ? "opacity-0 w-0" : "opacity-100"
)}
>
@ -127,7 +116,7 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
</span>
</Button>
<Popover
className="min-w-56 rounded-xl"
className="min-w-56 rounded-xl bg-navbar-darker"
isOpen={isPopoverOpen}
onOpenChange={setIsPopoverOpen}
triggerRef={ref}
@ -149,35 +138,7 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
<Separator />
<MenuTrigger>
<MenuButton
variant="plain"
className="justify-start gap-3 font-medium"
>
<AvailableIcon className="size-3" />
Available
</MenuButton>
<MenuPopover placement="end top">
<Menu>
<MenuItem>
<AvailableIcon className="size-3" />
<MenuItemLabel>Available</MenuItemLabel>
</MenuItem>
<MenuItem>
<BusyIcon className="size-3" />
<MenuItemLabel>Busy</MenuItemLabel>
</MenuItem>
<MenuItem>
<AwayIcon className="size-3" />
<MenuItemLabel>Away</MenuItemLabel>
</MenuItem>
<MenuItem>
<DoNotDisturbIcon className="size-3" />
<MenuItemLabel>Do not disturb</MenuItemLabel>
</MenuItem>
</Menu>
</MenuPopover>
</MenuTrigger>
<ThemeSwitcher />
<div
className={twMerge(
@ -216,7 +177,7 @@ export const SideNavigation = ({
return (
<div
className={twMerge(
"group isolate flex flex-col overflow-y-auto bg-gray-200 dark:bg-gray-900 transition-all duration-300",
"group isolate flex flex-col overflow-y-auto bg-navbar-background transition-all duration-300",
"fixed md:relative h-screen z-50",
isCollapsed ? "w-20" : "w-52",
"md:flex",
@ -241,7 +202,7 @@ export const SideNavigation = ({
/>
<h1
className={twMerge(
"text-lg font-bold transition-all duration-300 text-slate-900 dark:text-white whitespace-nowrap",
"text-lg font-bold transition-all duration-300 text-white whitespace-nowrap",
isCollapsed ? "w-0 h-0 opacity-0" : "w-auto opacity-100"
)}
>
@ -256,9 +217,9 @@ export const SideNavigation = ({
className={twMerge(
isCollapsed ? "relative" : "absolute top-2 right-2",
"size-5 p-1",
"text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
"text-gray-300 hover:text-white",
"transition-all duration-300",
"bg-gray-200 dark:bg-gray-900",
"bg-navbar-background",
"rounded-full shadow-md",
"opacity-0 group-hover:opacity-100",
"hover:scale-110"
@ -269,8 +230,7 @@ export const SideNavigation = ({
)}
</div>
<MainNavigation isCollapsed={isCollapsed} />
{!isCollapsed ? <ThemeSwitcher /> : null}
<div className="bg-gray-200 dark:bg-gray-900 sticky bottom-0 left-0 flex mx-3 py-2">
<div className="bg-navbar-background sticky bottom-0 left-0 flex mx-3 py-2">
<UserMenuPopover isCollapsed={isCollapsed} />
</div>
</div>

100
ui/src/components/ThemeSwitcher.tsx
View file

@ -1,40 +1,35 @@
import { Switch } from "../ui-library/switch";
import { ToggleButtonGroup, ToggleButton } from "../ui-library/button";
import { twMerge } from "tailwind-merge";
import { useTheme } from "../contexts/ThemeContext";
import { Text } from "../ui-library/text";
const translation = {
light: "Clair",
dark: "Sombre",
system: "Système",
};
export function ThemeSwitcher() {
const { theme, setTheme } = useTheme();
return (
<Switch
isSelected={theme === "dark"}
onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
className={twMerge(
"py-2 px-2 mx-4 rounded-full",
"bg-slate-100 dark:bg-slate-800",
"border border-slate-200 dark:border-slate-700",
"hover:bg-slate-200 dark:hover:bg-slate-700",
"transition-colors"
)}
>
<div className="flex items-center gap-2">
{theme === "dark" ? (
<div className="flex items-center gap-2">
<Text>Thème: {translation[theme]}</Text>
<ToggleButtonGroup
selectionMode="single"
selectedKeys={new Set([theme])}
onSelectionChange={(keys) => {
if (keys.size === 0) {
return;
}
const newTheme = Array.from(keys)[0] as "light" | "dark" | "system";
setTheme(newTheme);
}}
className={twMerge("p-2 rounded-full", "transition-colors")}
>
<ToggleButton id="light" isIconOnly size="sm" className="p-1">
<svg
className="w-4 h-4 text-slate-600 dark:text-slate-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
) : (
<svg
className="w-4 h-4 text-slate-600 dark:text-slate-400"
className="w-4 h-4 text-slate-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -46,19 +41,38 @@ export function ThemeSwitcher() {
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
)}
<span
className={twMerge(
"hidden sm:inline text-sm text-slate-600 dark:text-slate-400"
)}
>
{theme === "dark"
? "Mode sombre"
: theme === "light"
? "Mode clair"
: "Mode système"}
</span>
</div>
</Switch>
</ToggleButton>
<ToggleButton id="system" isIconOnly size="sm" className="p-1">
<svg
className="w-4 h-4 text-slate-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
</ToggleButton>
<ToggleButton id="dark" isIconOnly size="sm" className="p-1">
<svg
className="w-4 h-4 text-slate-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
</ToggleButton>
</ToggleButtonGroup>
</div>
);
}

2
ui/src/components/header.tsx
View file

@ -2,7 +2,6 @@ import { Button } from "../ui-library/button";
import { twMerge } from "tailwind-merge";
import logo from "../assets/icon.jpg";
import { Link } from "react-router-dom";
import { ThemeSwitcher } from "./ThemeSwitcher";
export function Header() {
return (
@ -69,7 +68,6 @@ export function Header() {
S&apos;inscrire
</Button>
</Link>
<ThemeSwitcher />
</div>
</div>
</nav>

6
ui/src/ui-library/theme/index.css
View file

@ -1,4 +1,4 @@
@import 'tailwindcss';
@import "tailwindcss";
@plugin 'tailwindcss-animate';
@plugin '@tailwindcss/container-queries';
@ -16,6 +16,8 @@
--color-input: var(--input);
--color-border: var(--border);
--color-ring: var(--ring);
--color-navbar-background: #292e39;
--color-navbar-darker: #171920;
}
/*
@ -112,7 +114,7 @@
@apply bg-background text-foreground h-full font-sans antialiased;
}
[data-ui='icon'] {
[data-ui="icon"] {
flex-shrink: 0;
}