Pepe44DEV/Papo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine dashboard theme and orange accent styling
All checks were successful
Deploy Discord Bot / deploy (push) Successful in -1m10s
Details
SonarQube / sonar (push) Successful in -15s
Details

Browse Source
This commit is contained in:
Pepe44DEV
2026-07-01 22:50:46 +02:00
parent 046d8cad7b
commit 6599158737
9 changed files with 166 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/layout/Header.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Chip, Tooltip, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Avatar } from '@heroui/react';
import { Moon, Sun, Bell, ChevronDown, LogOut, Settings } from 'lucide-react';
import { Moon, Sun, ChevronDown, LogOut, Settings } from 'lucide-react';
import { useTheme } from '../../hooks/useTheme';
import { useApp } from '../../context/AppContext';
@@ -30,14 +30,14 @@ export function Header() {
return (
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-3 min-w-0">
<div className="flex items-center gap-1.5 text-sm text-default-400 min-w-0">
<button className="hover:text-foreground transition-colors" onClick={() => setSection('overview')}>
<div className="flex items-center gap-1.5 text-sm section-subtle min-w-0">
<button className="hover:text-white transition-colors" onClick={() => setSection('overview')}>
Dashboard
</button>
{section !== 'overview' && (
<>
<span>/</span>
<span className="text-foreground font-medium truncate">{navLabels[section] || section}</span>
<span className="accent-text font-semibold truncate">{navLabels[section] || section}</span>
</>
)}
</div>
@@ -45,20 +45,20 @@ export function Header() {
<div className="flex items-center gap-2 shrink-0">
{statusMessage && (
<Chip color="warning" size="sm" variant="solid" className="max-w-[220px]">
<Chip size="sm" variant="flat" className="accent-chip max-w-[220px]">
<span className="truncate">{statusMessage}</span>
</Chip>
)}
<Tooltip content={dark ? 'Helles Design' : 'Dunkles Design'} placement="bottom">
<Button isIconOnly radius="lg" size="sm" variant="bordered" onPress={toggle}>
<Button isIconOnly radius="lg" size="sm" variant="light" className="ghost-button" onPress={toggle}>
{dark ? <Sun size={16} /> : <Moon size={16} />}
</Button>
</Tooltip>
<Dropdown placement="bottom-end">
<DropdownTrigger>
<Button className="gap-2" radius="lg" size="sm" variant="bordered">
<Button className="ghost-button gap-2" radius="lg" size="sm" variant="light">
<Avatar name={user?.username} size="sm" className="size-6" />
<span className="hidden sm:inline text-sm">{user?.username}</span>
<ChevronDown size={14} />