feat: gemeinsames App-Design mit Seitenleiste, globalem Theme und neuem Login

app/settings/test-buttons.tsx

@@ -29,19 +29,43 @@ export function TestButtons() {
   }
 
   return (
-    <section className="space-y-3 rounded border p-4">
-      <h2 className="font-medium">Versand testen</h2>
-      <div>
-        <label htmlFor="mail" className="block text-sm font-medium">E-Mail-Empfänger</label>
-        <input id="mail" value={mail} onChange={(e) => setMail(e.target.value)} className="mt-1 w-full rounded border px-3 py-2" />
+    <section className="rounded-card border border-line bg-white p-5">
+      <h2 className="text-[15px] font-semibold tracking-tight">Versand testen</h2>
+      <div className="mt-3 grid gap-4 sm:grid-cols-2">
+        <div>
+          <label htmlFor="mail" className="block text-[13px] font-semibold">E-Mail-Empfänger</label>
+          <input
+            id="mail"
+            value={mail}
+            onChange={(e) => setMail(e.target.value)}
+            className="mt-1.5 h-11 w-full rounded-field border border-line bg-white px-3.5 text-sm text-ink"
+          />
+          <button
+            type="button"
+            onClick={testMail}
+            className="mt-2 h-10 w-full rounded-field bg-brand-600 text-sm font-semibold text-white transition-colors hover:bg-brand-700 active:scale-[0.99]"
+          >
+            Test-Mail senden
+          </button>
+        </div>
+        <div>
+          <label htmlFor="chatId" className="block text-[13px] font-semibold">Telegram-Chat-ID</label>
+          <input
+            id="chatId"
+            value={chatId}
+            onChange={(e) => setChatId(e.target.value)}
+            className="mt-1.5 h-11 w-full rounded-field border border-line bg-white px-3.5 text-sm text-ink"
+          />
+          <button
+            type="button"
+            onClick={testTelegram}
+            className="mt-2 h-10 w-full rounded-field bg-brand-600 text-sm font-semibold text-white transition-colors hover:bg-brand-700 active:scale-[0.99]"
+          >
+            Test-Telegram senden
+          </button>
+        </div>
       </div>
-      <button type="button" onClick={testMail} className="rounded bg-black px-4 py-2 text-white">Test-Mail senden</button>
-      <div>
-        <label htmlFor="chatId" className="block text-sm font-medium">Telegram-Chat-ID</label>
-        <input id="chatId" value={chatId} onChange={(e) => setChatId(e.target.value)} className="mt-1 w-full rounded border px-3 py-2" />
-      </div>
-      <button type="button" onClick={testTelegram} className="rounded bg-black px-4 py-2 text-white">Test-Telegram senden</button>
-      {result && <p role="status" className="text-sm">{result}</p>}
+      {result && <p role="status" className="mt-3 text-sm text-muted">{result}</p>}
     </section>
   );
 }