refactor(ui): Modals & Unterseiten auf Primitives & dark: umgestellt

docker/ui/src/pages/Anleitung.tsx

@@ -1,37 +1,33 @@
 import { ReactNode } from 'react'
-import { BookOpen, Disc, Tv, HardDrive, Bell, Wrench, Cpu, Download, HelpCircle } from 'lucide-react'
-import { useDarkMode } from '../context/ThemeContext'
-
-// Anleitungs-Tab (Commander-Wunsch 24.07.): Rippy erklärt sich selbst —
-// keine externen Wikis, keine README-Suche. Reiner Text, keine API-Aufrufe.
+import { Disc, Tv, HardDrive, Bell, Wrench, Cpu, Download, HelpCircle } from 'lucide-react'
+import { PageHeader } from '../components/ui/PageHeader'
+import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/Card'
 
 function Abschnitt({ icon: Icon, titel, children }: { icon: any, titel: string, children: ReactNode }) {
-  const { theme } = useDarkMode()
   return (
-    <section className={`rounded-xl border p-6 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
-      <h2 className={`text-lg font-semibold mb-3 flex items-center gap-2 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
-        <Icon size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
-        {titel}
-      </h2>
-      <div className={`space-y-2 text-sm leading-relaxed ${theme === 'dark' ? 'text-slate-300' : 'text-slate-600'}`}>
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2.5">
+          <Icon size={20} className="text-amber-500" />
+          <span>{titel}</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
         {children}
-      </div>
-    </section>
+      </CardContent>
+    </Card>
   )
 }
 
 export default function AnleitungPage() {
-  const { theme } = useDarkMode()
-  const fett = theme === 'dark' ? 'text-slate-100 font-medium' : 'text-slate-900 font-medium'
+  const fett = "font-semibold text-slate-900 dark:text-slate-100"
 
   return (
-    <div className="space-y-6 max-w-4xl transition-colors duration-300">
-      <div className="flex flex-col gap-2">
-        <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Anleitung</h1>
-        <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
-          So funktioniert Rippy — vom Einlegen bis zum fertigen Film in deinem Media-Server.
-        </p>
-      </div>
+    <div className="space-y-6 max-w-4xl">
+      <PageHeader
+        title="Anleitung & Hilfe"
+        subtitle="So funktioniert Rippy — vom Einlegen der Disc bis zum fertigen Film in deinem Media-Server"
+      />
 
       <Abschnitt icon={Disc} titel="Der normale Weg: Disc rein, fertig">
         <p>