dsfdsf

modules/pi_control/pages/hosts.php

@@ -333,29 +333,34 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
     return $exitCode === 0;
 }
 ?>
-<div class="card">
-  <div class="pill">Pi Control</div>
-  <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:.75rem;">
-    <h1 style="margin:0;">Hosts</h1>
-    <div style="display:flex; gap:10px; flex-wrap:wrap;">
-      <button class="nav-link" type="button" data-host-check-all>Alle Hosts prüfen</button>
-      <button class="cta-button" type="button" data-host-new>+ Neuer Host</button>
+<?= module_shell_header('pi_control', [
+    'title' => 'Hosts',
+]) ?>
+<div class="module-flow">
+  <section class="module-box">
+    <div class="module-box-head">
+      <div>
+        <h2 class="module-box-title">Hosts</h2>
+        <p>Verwalte die Raspberry Pis, die du steuern möchtest.</p>
+      </div>
+      <div style="display:flex; gap:10px; flex-wrap:wrap;">
+        <button class="module-button module-button--secondary module-button--small" type="button" data-host-check-all>Alle Hosts prüfen</button>
+        <button class="module-button module-button--primary" type="button" data-host-new>+ Neuer Host</button>
+      </div>
     </div>
-  </div>
-  <p class="muted">Verwalte die Raspberry Pis, die du steuern möchtest.</p>
 
-  <?php if ($error): ?>
-    <div class="card notice-card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;">
-      <?= e($error) ?>
-    </div>
-  <?php elseif ($notice): ?>
-    <div class="card notice-card" style="margin-top:1rem; border-color:var(--accent-2);">
-      <?= e($notice) ?>
-    </div>
-  <?php endif; ?>
+    <?php if ($error): ?>
+      <div class="setup-db-message setup-db-message--error" style="margin-top:16px;">
+        <?= e($error) ?>
+      </div>
+    <?php elseif ($notice): ?>
+      <div class="setup-db-message setup-db-message--success" style="margin-top:16px;">
+        <?= e($notice) ?>
+      </div>
+    <?php endif; ?>
 
-  <div class="grid" style="margin-top:1rem;">
-    <div class="card form-card" style="background:var(--panel-2);">
+    <div class="module-box-grid module-box-grid--panels" style="margin-top:16px;">
+    <div class="module-box form-card">
       <strong>Registrierte Hosts</strong>
       <?php if (!$hosts): ?>
         <div class="muted" style="margin-top:.75rem;">Keine Hosts vorhanden.</div>
@@ -416,7 +421,9 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
         </div>
       <?php endif; ?>
     </div>
-  </div>
+    </div>
+    </div>
+  </section>
 </div>
 
 <div class="modal" data-host-modal aria-hidden="true">
@@ -469,3 +476,4 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
     </form>
   </div>
 </div>
+<?= module_shell_footer() ?>