@saasicat/ui-vue 0.22.2 → 0.24.0

package/src/pages-standard/DiscoveryPage.vue

@@ -465,12 +465,18 @@ onMounted(() => {
     flex-direction: column;
     gap: 14px;
 }
+.sa-discovery__panel {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sa-color-bg-surface);
+    padding: 16px 0 0;
+}
 .sa-discovery__banner {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: var(--sa-heading);
-    color: var(--sa-border);
+    background: var(--sa-color-inverse-bg);
+    color: var(--sa-color-inverse-fg-muted);
     border-radius: 12px;
     padding: 14px 18px;
 }
@@ -481,30 +487,30 @@ onMounted(() => {
 }
 .sa-discovery__banner-name {
     font-weight: 700;
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
 }
 .sa-discovery__banner-meta {
-    font-size: 11px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
 }
 .sa-discovery__banner-time {
     text-align: right;
 }
 .sa-discovery__banner-time-lbl {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
 }
 .sa-discovery__banner-time-val {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
 }
 .sa-discovery__error {
-    border-left: 4px solid #dc2626;
+    border-left: 4px solid var(--sa-color-negative);
 }
 .sa-discovery__tabs {
-    border-bottom: 1px solid var(--sa-border);
+    border-bottom: 1px solid var(--sa-color-border);
 }
 .sa-discovery__search {
     flex: 1;
@@ -521,100 +527,100 @@ onMounted(() => {
     margin-bottom: 16px;
 }
 .sa-discovery__group--orphan .sa-section__title {
-    color: #b45309;
+    color: var(--sa-color-warning-fg);
 }
 .sa-discovery__group-count {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
-    background: var(--sa-border);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border);
+    color: var(--sa-color-fg-secondary);
     padding: 1px 7px;
     border-radius: 8px;
 }
 .sa-discovery__orphan-hint {
     margin: 0 0 8px;
-    font-size: 11px;
-    color: #b45309;
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-warning-fg);
 }
 .sa-discovery__orphan-hint code {
-    font-size: 10px;
-    background: var(--sa-warning-bg);
+    font-size: var(--sa-text-2xs);
+    background: var(--sa-color-warning-surface);
     padding: 1px 4px;
     border-radius: 4px;
 }
 .sa-discovery__empty-row {
     padding: 36px;
     text-align: center;
-    color: var(--sa-muted-light);
-    font-size: 13px;
-    border: 1px dashed #cbd5e1;
+    color: var(--sa-color-fg-subtle);
+    font-size: var(--sa-text-md);
+    border: 1px dashed var(--sa-color-border-strong);
     border-radius: 12px;
 }
 .sa-muted {
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     margin-right: 3px;
 }
 /* Status badge (review lifecycle) — shared by feature and quota card. */
 .sa-review {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     text-transform: uppercase;
     padding: 3px 8px;
     border-radius: 6px;
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-secondary);
     flex-shrink: 0;
 }
 .sa-review--pending {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .sa-review--approved {
-    background: #dcfce7;
-    color: #166534;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
 }
 .sa-review--outdated {
-    background: #fee2e2;
-    color: #b91c1c;
+    background: var(--sa-color-negative-surface-strong);
+    color: var(--sa-color-negative-fg);
 }
 .sa-review--obsolete {
-    background: var(--sa-border);
-    color: var(--sa-muted);
+    background: var(--sa-color-border);
+    color: var(--sa-color-fg-muted);
 }
 .sa-chip {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 600;
     padding: 2px 7px;
     border-radius: 6px;
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-secondary);
 }
 /* i18n coverage pill — shared by feature and quota card. */
 .sa-cov-pill {
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     padding: 2px 7px;
     border-radius: 8px;
-    border: 1px solid var(--sa-border);
-    background: var(--sa-bg-surface-2);
-    color: var(--sa-muted-dark);
+    border: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-sunken);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-cov-pill.complete {
-    border-color: #a7f3d0;
-    background: var(--sa-positive-bg);
-    color: #047857;
+    border-color: var(--sa-color-positive-border);
+    background: var(--sa-color-positive-surface);
+    color: var(--sa-color-positive-fg);
 }
 .sa-cov-pill.warn {
-    border-color: #fde68a;
-    background: var(--sa-warning-bg);
-    color: #b45309;
+    border-color: var(--sa-color-warning-border);
+    background: var(--sa-color-warning-surface);
+    color: var(--sa-color-warning-fg);
 }
 .sa-cov-pill.low {
-    border-color: #fecaca;
-    background: #fef2f2;
-    color: #b91c1c;
+    border-color: var(--sa-color-negative-border);
+    background: var(--sa-color-negative-surface);
+    color: var(--sa-color-negative-fg);
 }
 </style>

package/src/pages-standard/EmailHistoryPage.vue

@@ -7,8 +7,8 @@
         </AdminHero>
 
         <AdminBody>
-            <AdminSection class="sa-emh__body">
-                <div class="sa-emh__filter">
+            <AdminSection>
+                <AdminFilters class="q-mb-lg">
                     <q-input
                         v-model="filter.search"
                         outlined
@@ -50,53 +50,51 @@
                         :label="common.to"
                         @update:model-value="applyFilter"
                     />
-                </div>
-
-                <div class="sa-emh__card">
-                    <AdminTable
-                        server-side
-                        :rows="rows"
-                        :columns="columns"
-                        :loading="loading"
-                        :page="pagination.page"
-                        :rows-per-page="pagination.rowsPerPage"
-                        :total="pagination.rowsNumber"
-                        storage-key="email-history"
-                        @row-click="(_evt: Event, row: EmailHistoryRow) => openDetail(row)"
-                        @update:page="onPageChange"
-                        @update:rows-per-page="onRowsPerPageChange"
-                    >
-                        <template #body-cell-status="{ row }">
-                            <q-td>
-                                <q-badge
-                                    :color="statusColor(row.status)"
-                                    :label="statusLabel(row.status)"
-                                />
-                            </q-td>
-                        </template>
-                        <template #row-actions="{ row }">
-                            <q-btn
-                                flat
-                                dense
-                                icon="send"
-                                color="primary"
-                                :title="msg.history.resend"
-                                @click.stop="onResend(row.id)"
-                            />
-                            <q-btn
-                                flat
-                                dense
-                                icon="delete"
-                                color="negative"
-                                :title="msg.history.removeFromHistory"
-                                @click.stop="askDelete(row.id)"
+                </AdminFilters>
+
+                <AdminTable
+                    server-side
+                    :rows="rows"
+                    :columns="columns"
+                    :loading="loading"
+                    :page="pagination.page"
+                    :rows-per-page="pagination.rowsPerPage"
+                    :total="pagination.rowsNumber"
+                    storage-key="email-history"
+                    @row-click="(_evt: Event, row: EmailHistoryRow) => openDetail(row)"
+                    @update:page="onPageChange"
+                    @update:rows-per-page="onRowsPerPageChange"
+                >
+                    <template #body-cell-status="{ row }">
+                        <q-td>
+                            <q-badge
+                                :color="statusColor(row.status)"
+                                :label="statusLabel(row.status)"
                             />
-                        </template>
-                        <template #no-data>
-                            <div class="sa-emh__empty">{{ msg.history.empty }}</div>
-                        </template>
-                    </AdminTable>
-                </div>
+                        </q-td>
+                    </template>
+                    <template #row-actions="{ row }">
+                        <button
+                            type="button"
+                            class="sa-icon-btn"
+                            :title="msg.history.resend"
+                            @click.stop="onResend(row.id)"
+                        >
+                            <q-icon name="send" size="18px" />
+                        </button>
+                        <button
+                            type="button"
+                            class="sa-icon-btn sa-icon-btn--negative"
+                            :title="msg.history.removeFromHistory"
+                            @click.stop="askDelete(row.id)"
+                        >
+                            <q-icon name="delete" size="18px" />
+                        </button>
+                    </template>
+                    <template #no-data>
+                        <div class="sa-emh__empty">{{ msg.history.empty }}</div>
+                    </template>
+                </AdminTable>
             </AdminSection>
         </AdminBody>
 
@@ -222,6 +220,7 @@ import { computed, reactive, ref } from 'vue';
 import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
 import AdminRefreshBtn from '../components/admin-page/AdminRefreshBtn.vue';
 import AdminBody from '../components/admin-page/AdminBody.vue';
+import AdminFilters from '../components/admin-page/AdminFilters.vue';
 import AdminHero from '../components/admin-page/AdminHero.vue';
 import AdminSection from '../components/admin-page/AdminSection.vue';
 import AdminPage from '../components/admin-page/AdminPage.vue';
@@ -506,27 +505,10 @@ function formatTs(iso: string | null | undefined): string {
 </script>
 
 <style scoped>
-.sa-emh__filter {
-    display: flex;
-    gap: 10px;
-    margin-bottom: 12px;
-    flex-wrap: wrap;
-}
-.sa-emh__filter > * {
-    flex: 1;
-    min-width: 180px;
-}
-.sa-emh__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, var(--sa-border));
-    border-radius: 12px;
-    overflow: hidden;
-    padding: 8px 0;
-}
 .sa-emh__empty {
     width: 100%;
     text-align: center;
-    color: var(--sa-muted-dark, var(--sa-muted));
+    color: var(--sa-color-fg-secondary, var(--sa-color-fg-muted));
     padding: 24px 0;
 }
 .sa-emh__detail {
@@ -544,17 +526,17 @@ function formatTs(iso: string | null | undefined): string {
     width: 100%;
     min-height: 320px;
     max-height: 60vh;
-    border: 1px solid var(--sa-border, var(--sa-border));
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
 }
 .sa-emh__text,
 .sa-emh__smtp {
-    background: var(--sa-bg-surface-2);
-    border: 1px solid var(--sa-border, var(--sa-border));
+    background: var(--sa-color-bg-sunken);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     padding: 12px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     margin: 4px 0 0;
     overflow-x: auto;
     max-height: 50vh;