Hitonabi/rippy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: complete dark mode implementation with all UI components

Browse Source
This commit is contained in:
Hitonabi
2026-07-22 17:00:49 +02:00
parent 95c1f9b105
commit d2fb281342
4 changed files with 175 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/ui/src/App.tsx
+6 -8
View File
@@ -18,10 +18,10 @@ function App() {
]
return (
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans transition-colors duration-300">
<div className="flex h-screen overflow-hidden">
{/* Sidebar */}
<aside className={`w-64 ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-900'} text-white flex flex-col`}>
<aside className={`w-64 flex flex-col ${theme === 'dark' ? 'bg-slate-900 text-slate-100' : 'bg-slate-900 text-slate-100'}`}>
<div className="p-6">
<div className="flex items-center gap-3">
<div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
@@ -50,9 +50,7 @@ function App() {
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
page === item.id
? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30'
: theme === 'dark'
? 'text-slate-400 hover:bg-slate-800 hover:text-white'
: 'text-slate-400 hover:bg-slate-700 hover:text-white'
: 'text-slate-400 hover:bg-slate-800 hover:text-white'
}`}
>
<item.icon size={20} />
@@ -61,8 +59,8 @@ function App() {
))}
</nav>
<div className={`p-4 border-t ${theme === 'dark' ? 'border-slate-800' : 'border-slate-700'}`}>
<button className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${theme === 'dark' ? 'text-slate-400 hover:text-white hover:bg-slate-800' : 'text-slate-400 hover:text-white hover:bg-slate-700'}`}>
<div className="p-4 border-t border-slate-800">
<button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-slate-400 hover:text-white hover:bg-slate-800">
<LogOut size={20} />
<span className="text-sm">Abmelden</span>
</button>
@@ -70,7 +68,7 @@ function App() {
</aside>
{/* Main Content */}
<main className="flex-1 overflow-auto bg-slate-50/50">
<main className="flex-1 overflow-auto bg-slate-50/50 dark:bg-slate-50/50">
<div className="max-w-7xl mx-auto p-6">
{page === 'dashboard' && <Dashboard />}
{page === 'metadata' && <MetadataPreview />}