From 2043026e63712f3d89c99981802884c3a083eb4d Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 09:20:05 +0100
Subject: [PATCH] ux: modernize admin approvals UI

---
 frontend/src/pages/admin/approvals.astro | 34 +++++++-----------------
 1 file changed, 9 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/admin/approvals.astro b/frontend/src/pages/admin/approvals.astro
index a09eddb..5fca9ff 100644
--- a/frontend/src/pages/admin/approvals.astro
+++ b/frontend/src/pages/admin/approvals.astro
@@ -9,10 +9,12 @@ import { API_BASE as apiBase } from '../../lib/api';
   <div class="admin-container">
     <AdminNav currentPage="/admin/approvals" />
 
-    <main class="admin-main">
-      <header class="admin-header">
-        <h1>Pending Approvals</h1>
-        <p>Review and manage pending registration and community requests</p>
+    <main class="admin-content">
+      <header class="ui-page-header">
+        <div class="ui-page-title">
+          <h1>Pending Approvals</h1>
+          <p class="ui-subtitle">Review and manage pending registration and community requests</p>
+        </div>
       </header>
 
       <div class="tabs">
@@ -82,7 +84,7 @@ import { API_BASE as apiBase } from '../../lib/api';
       }
 
       container.innerHTML = data.map(r => `
-        <div class="pending-item" data-id="${r.id}">
+        <div class="pending-item ui-card ui-card-soft ui-card-pad-md" data-id="${r.id}">
           <div class="item-info">
             <strong>${r.username}</strong>
             <span class="email">${r.email}</span>
@@ -132,7 +134,7 @@ import { API_BASE as apiBase } from '../../lib/api';
       }
 
       container.innerHTML = data.map(c => `
-        <div class="pending-item" data-id="${c.id}">
+        <div class="pending-item ui-card ui-card-soft ui-card-pad-md" data-id="${c.id}">
           <div class="item-info">
             <strong>${c.name}</strong>
             <span class="slug">/${c.slug}</span>
@@ -237,26 +239,12 @@ import { API_BASE as apiBase } from '../../lib/api';
     min-height: calc(100vh - 60px);
   }
 
-  .admin-main {
+  .admin-content {
     flex: 1;
     padding: 2rem;
     max-width: 1000px;
   }
 
-  .admin-header {
-    margin-bottom: 2rem;
-  }
-
-  .admin-header h1 {
-    margin: 0 0 0.5rem;
-    font-size: 1.75rem;
-  }
-
-  .admin-header p {
-    color: var(--color-text-muted);
-    margin: 0;
-  }
-
   .tabs {
     display: flex;
     gap: 0.5rem;
@@ -306,10 +294,6 @@ import { API_BASE as apiBase } from '../../lib/api';
     justify-content: space-between;
     align-items: flex-start;
     gap: 1.5rem;
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: 12px;
   }
 
   .item-info {