@7365admin1/layer-common 3.2.1-staging.75 → 3.2.2-staging.100

package/components/DashboardMain.vue

@@ -203,44 +203,36 @@
 
   <section v-else class="unified-dashboard pb-8">
     <!-- ── Header ──────────────────────────────────────────────────────────── -->
-    <div
-      class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6"
+    <PageHeader
+      :title="dashboardTitle"
+      :subtitle="currentSiteName || 'Selected site'"
+      subtitle-icon="mdi-map-marker"
     >
-      <div>
-        <h1 class="text-h5 font-weight-black text-high-emphasis mb-0">
-          {{ dashboardTitle }}
-        </h1>
-        <div class="d-flex align-center text-medium-emphasis ga-1 mt-2 text-caption">
-          <v-icon icon="mdi-map-marker" size="16" />
-          <span>{{ currentSiteName || "Selected site" }}</span>
-        </div>
-      </div>
-
-      <div
-        v-if="showHeaderActions"
-        class="d-flex flex-wrap align-center justify-md-end ga-3"
-      >
-        <v-btn
-          variant="outlined"
-          class="text-none font-weight-bold"
-          prepend-icon="mdi-tune-variant"
+      <!--
+        The design's three actions: two 38px ghost buttons and the accent
+        segmented control. Same dialog, same export menu, same range model -
+        `Customize Dashboard` and `Export` shorten to the labels the prototype
+        prints, and the export menu keeps both of its formats.
+      -->
+      <template v-if="showHeaderActions" #actions>
+        <AppButton
+          variant="ghost"
+          icon="mdi-tune-variant"
           @click="openCustomizeDialog"
         >
-          Customize Dashboard
-        </v-btn>
+          Customize
+        </AppButton>
 
         <v-menu>
           <template #activator="{ props: menuProps }">
-            <v-btn
+            <AppButton
               v-bind="menuProps"
-              variant="outlined"
-              class="text-none font-weight-bold"
-              append-icon="mdi-chevron-down"
-              :loading="isExporting"
+              variant="ghost"
+              icon="mdi-download-outline"
               :disabled="isExporting"
             >
               Export
-            </v-btn>
+            </AppButton>
           </template>
 
           <v-list density="compact" border rounded="lg" elevation="3">
@@ -249,36 +241,9 @@
           </v-list>
         </v-menu>
 
-        <v-btn-toggle
-          v-model="selectedRange"
-          mandatory
-          density="comfortable"
-          divided
-          variant="outlined"
-          class="bg-surface"
-          style="border-radius: 8px"
-        >
-          <v-btn
-            v-for="range in rangeOptions"
-            :key="range.value"
-            :value="range.value"
-            class="text-none"
-            size="small"
-            :style="
-              selectedRange === range.value
-                ? {
-                    backgroundColor: 'rgba(var(--v-theme-on-surface), 0.12)',
-                    color: 'rgb(var(--v-theme-on-surface))',
-                    fontWeight: '600',
-                  }
-                : { backgroundColor: 'transparent', color: 'rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))' }
-            "
-          >
-            {{ range.label }}
-          </v-btn>
-        </v-btn-toggle>
-      </div>
-    </div>
+        <AppSegmented v-model="selectedRange" :options="rangeOptions" />
+      </template>
+    </PageHeader>
 
     <v-progress-linear
       v-if="finalLoading"
@@ -298,22 +263,24 @@
         lg="3"
         class="d-flex"
       >
-        <v-card
-          flat
-          border
-          rounded="lg"
-          class="pa-4 flex-grow-1"
-          style="min-height: 158px"
+        <!--
+          The same figures the tile has always shown, in the arrangement the
+          handoff draws them: icon and label on one row, the number with its
+          percentage pill beside it, the sub-line under both. The filter menu
+          and the facility "View All" keep their place at the end of the first
+          row and do exactly what they did.
+        -->
+        <AppKpiTile
+          :icon="card.icon"
+          :tint="card.tint"
+          :color="card.color"
+          :label="card.title"
+          :value="card.value"
+          :chip="kpiChipText(card)"
+          :down="Number(card.percentage) < 0"
+          :sub="card.meta"
         >
-          <div class="d-flex align-start justify-space-between">
-            <div
-              class="d-inline-flex align-center justify-center rounded-lg"
-              style="height: 28px; width: 28px; flex-shrink: 0"
-              :style="{ backgroundColor: card.tint }"
-            >
-              <v-icon :icon="card.icon" :color="card.color" size="15" />
-            </div>
-
+          <template v-if="card.filter || card.key === 'facilityBookings'" #action>
             <v-menu v-if="card.filter" v-model="filterMenus[card.key]">
               <template #activator="{ props: menuProps }">
                 <v-btn
@@ -357,61 +324,24 @@
             >
               View All
             </button>
-          </div>
+          </template>
 
-          <div class="mt-6 w-100">
-            <p
-              class="text-caption font-weight-black text-uppercase text-medium-emphasis mb-3"
-            >
-              {{ card.title }}
-            </p>
-            <template
-              v-if="
-                card.key === 'supplyAlert' && Array.isArray(card.raw?.items)
-              "
-            >
-              <div class="d-flex flex-column ga-2 mt-2">
-                <div
-                  v-for="item in card.raw.items"
-                  :key="item._id || item.name"
-                  class="d-flex justify-space-between text-body-2 text-high-emphasis font-weight-medium"
-                >
-                  <span>{{ item.name }}</span>
-                  <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
-                </div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="d-flex align-center mb-3" style="min-height: 31px">
-                <span class="text-h5 font-weight-black text-high-emphasis">
-                  {{ card.value }}
-                </span>
-              </div>
-              <div class="d-flex align-center flex-wrap ga-2">
-                <span v-if="card.meta" class="text-caption text-medium-emphasis">{{
-                  card.meta
-                }}</span>
-                <v-chip
-                  :color="card.percentage >= 0 ? 'success' : 'error'"
-                  size="x-small"
-                  variant="flat"
-                  class="font-weight-bold"
-                >
-                  <v-icon
-                    :icon="
-                      card.percentage >= 0
-                        ? 'mdi-arrow-up-right'
-                        : 'mdi-arrow-down-right'
-                    "
-                    size="13"
-                    start
-                  />
-                  {{ Math.abs(card.percentage) }}%
-                </v-chip>
+          <!-- The supply tile lists items instead of counting one figure. -->
+          <template
+            v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
+          >
+            <div class="d-flex flex-column ga-2">
+              <div
+                v-for="item in card.raw.items"
+                :key="item._id || item.name"
+                class="d-flex justify-space-between text-body-2 text-high-emphasis font-weight-medium"
+              >
+                <span>{{ item.name }}</span>
+                <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
-            </template>
-          </div>
-        </v-card>
+            </div>
+          </template>
+        </AppKpiTile>
       </v-col>
     </v-row>
 
@@ -419,12 +349,10 @@
     <v-card
       v-if="isWidgetVisible('activity')"
       flat
-      border
-      rounded="lg"
-      class="px-5 pt-4 pb-3 mt-3"
+      class="dashboard-card px-5 pt-4 pb-3 mt-3"
     >
       <div class="d-flex align-center justify-space-between">
-        <h2 class="text-body-1 font-weight-black text-high-emphasis mb-0">
+        <h2 class="dashboard-card-title mb-0">
           {{ activityTitle }}
         </h2>
       </div>
@@ -556,9 +484,7 @@
               v-for="item in taskScheduleItems"
               :key="item.id"
               flat
-              border
-              rounded="lg"
-              class="pa-3"
+              class="dashboard-row-card pa-3"
             >
               <div class="d-flex align-center flex-wrap ga-3">
                 <div class="flex-grow-1" style="min-width: 0">
@@ -622,9 +548,7 @@
               v-for="item in staffStatusItems"
               :key="item.id"
               flat
-              border
-              rounded="lg"
-              class="pa-3"
+              class="dashboard-row-card pa-3"
             >
               <div class="d-flex align-start ga-3">
                 <AvatarMain :name="item.name" :size="32" />
@@ -663,7 +587,7 @@
             <div
               v-for="item in feedbackItems"
               :key="item.id"
-              class="d-flex align-center justify-space-between"
+              class="d-flex align-center justify-space-between dashboard-feedback-row"
               style="
                 padding: 16px 20px;
                 border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
@@ -964,7 +888,7 @@
       <v-col v-if="isWidgetVisible('activePatrol')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>ACTIVE PATROL</h2>
+            <h2>Active Patrol</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -1044,7 +968,7 @@
       <v-col v-if="isWidgetVisible('staffStatus')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>STAFF STATUS</h2>
+            <h2>Staff Status</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -1128,7 +1052,7 @@
             <div
               v-for="item in feedbackItems"
               :key="item.id"
-              class="d-flex align-center justify-space-between"
+              class="d-flex align-center justify-space-between dashboard-feedback-row"
               style="
                 padding: 16px 20px;
                 border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
@@ -2501,6 +2425,17 @@ const visibleKpiCards = computed(() =>
   kpiCards.value.filter((card) => isWidgetVisible(card.key))
 );
 
+/**
+ * The percentage pill's label. Same number the chip has always shown, written
+ * the way the handoff prints it - `+0%` / `-6.4%`, the sign carrying what the
+ * arrow icon used to. A card without a percentage gets no pill.
+ */
+function kpiChipText(card: Record<string, any>): string {
+  const value = Number(card?.percentage);
+  if (!Number.isFinite(value)) return "";
+  return `${value < 0 ? "-" : "+"}${Math.abs(value)}%`;
+}
+
 // ─── Dashboard Title ──────────────────────────────────────────────────────────
 
 const dashboardTitle = computed(() => {
@@ -3250,31 +3185,37 @@ function getInitials(name?: string) {
 function getStatusPillStyle(status: any) {
   const tone = getStatusTone(status);
   const map: Record<string, { backgroundColor: string; color: string }> = {
-    success: { backgroundColor: "#72e3a1", color: "#0f5132" },
-    warning: { backgroundColor: "#fde68a", color: "#92400e" },
-    error: { backgroundColor: "#fecaca", color: "#b91c1c" },
-    neutral: { backgroundColor: "#e2e8f0", color: "#64748b" },
+    success: { backgroundColor: "var(--ok-bg)", color: "var(--ok)" },
+    warning: { backgroundColor: "var(--warn-bg)", color: "var(--warn)" },
+    error: { backgroundColor: "var(--err-bg)", color: "var(--err)" },
+    neutral: { backgroundColor: "var(--hover)", color: "var(--text2)" },
   };
   return map[tone] || map.neutral;
 }
 
+/**
+ * The pills are drawn by inline style, so the literal colours lived here rather
+ * than in the stylesheet - which is why they survived the dark-mode repair and
+ * still measured 3.86:1. Same three cases, same words, the design's tones.
+ */
 function getPatrolStatusStyle(status: any) {
   const s = String(status || "").toLowerCase();
   if (s === "completed" || s === "complete")
-    return { backgroundColor: "#72e3a1", color: "#0f5132" };
+    return { backgroundColor: "var(--ok-bg)", color: "var(--ok)" };
   if (s === "on paused" || s === "paused")
-    return { backgroundColor: "#dcdcdc", color: "#64748b" };
-  return { backgroundColor: "#e2e8f0", color: "#64748b" };
+    return { backgroundColor: "var(--hover)", color: "var(--text2)" };
+  return { backgroundColor: "var(--hover)", color: "var(--text2)" };
 }
 
 function getStaffStatusPillStyle(status: any) {
   const s = String(status || "").toLowerCase();
   if (s === "on duty" || s === "on-duty")
-    return { backgroundColor: "#72e3a1", color: "#0f5132" };
+    return { backgroundColor: "var(--ok-bg)", color: "var(--ok)" };
   if (s === "on break" || s === "on-break")
-    return { backgroundColor: "#fde68a", color: "#92400e" };
-  if (s === "absent") return { backgroundColor: "#fecaca", color: "#b91c1c" };
-  return { backgroundColor: "#e2e8f0", color: "#64748b" };
+    return { backgroundColor: "var(--warn-bg)", color: "var(--warn)" };
+  if (s === "absent")
+    return { backgroundColor: "var(--err-bg)", color: "var(--err)" };
+  return { backgroundColor: "var(--hover)", color: "var(--text2)" };
 }
 
 function getStatusProgressStyle(item: { percent: number; color: string }) {
@@ -4154,37 +4095,98 @@ function formatDashboardTime(value?: string) {
   text-transform: capitalize;
 }
 
+/* Was five pairs of literal pastels - the same pale green on the dark page,
+   and none of them the tones the rest of the product uses. */
 .badge-success {
-  background-color: #d1fae5;
-  color: #065f46;
+  background-color: var(--ok-bg);
+  color: var(--ok);
 }
 
 .badge-info {
-  background-color: #e0f2fe;
-  color: #075985;
+  background-color: var(--info-bg);
+  color: var(--info);
 }
 
 .badge-danger,
 .badge-error {
-  background-color: #fee2e2;
-  color: #991b1b;
+  background-color: var(--err-bg);
+  color: var(--err);
 }
 
 .badge-warning {
-  background-color: #fef3c7;
-  color: #92400e;
+  background-color: var(--warn-bg);
+  color: var(--warn);
 }
 
 .badge-neutral {
-  background-color: #f1f5f9;
-  color: #475569;
+  background-color: var(--hover);
+  color: var(--text2);
 }
 
+/* ------------------------------------------------------------------ */
+/* PHASE 5 - the design's card, type and semantic tones.               */
+/*                                                                     */
+/* The dark-mode repair earlier today moved these surfaces off literal */
+/* white onto the Vuetify theme; this keeps that and takes the last    */
+/* step, onto the design tokens themselves - so the dashboard's cards, */
+/* headings and pills are the same 14px card, the same Manrope and the */
+/* same four status tones as every other screen.                       */
+/* ------------------------------------------------------------------ */
+
 .dashboard-card {
-  background: rgb(var(--v-theme-surface));
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 8px;
-  box-shadow: 0 1px 2px rgba(15, 35, 54, 0.04);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  font-family: var(--font-sans);
+}
+
+/* The KPI tile and the rows inside a panel are the same card, one step in. */
+.dashboard-kpi-card,
+.dashboard-row-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  font-family: var(--font-sans);
+}
+
+.dashboard-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-h1);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  color: var(--text);
+}
+
+.dashboard-card-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  letter-spacing: 0;
+  color: var(--text);
+}
+
+/* 11px/800 uppercase over a 30px/800 number, tabular so the columns of
+   figures line up - the design's KPI, and the same header type the table
+   card already uses. */
+.dashboard-kpi-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.dashboard-kpi-value {
+  font-family: var(--font-sans);
+  font-size: var(--fs-kpi);
+  font-weight: var(--fw-kpi);
+  letter-spacing: var(--ls-kpi);
+  line-height: 1.1;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
 }
 
 .dashboard-section-grid {
@@ -4219,14 +4221,17 @@ function formatDashboardTime(value?: string) {
   min-height: 18px;
 }
 
+/* The panel heading is the design's card title: 15.5px/800, sentence case. It
+   was a 12px/900 uppercase label from the earlier Figma. */
 .figma-panel-header h2 {
-  color: rgb(var(--v-theme-on-surface));
-  font-size: 12px;
-  font-weight: 900;
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
   letter-spacing: 0;
   line-height: 1.2;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .figma-panel-action,
@@ -4373,30 +4378,30 @@ function formatDashboardTime(value?: string) {
 
 .figma-event-dot-info,
 .figma-event-dot-neutral {
-  background: #c9e6ff;
-  border: 2px solid #77bef9;
+  background: var(--info-bg);
+  border: 2px solid var(--info);
 }
 
 .figma-event-dot-success {
-  background: #2fb84d;
-  border: 2px solid #c9efd4;
+  background: var(--ok-bg);
+  border: 2px solid var(--ok);
 }
 
 .figma-event-dot-danger {
-  background: #ffd9d6;
-  border: 2px solid #f9a6a0;
+  background: var(--err-bg);
+  border: 2px solid var(--err);
 }
 
 .figma-event-dot-warning {
-  background: #ffe9c7;
-  border: 2px solid #f9c97c;
+  background: var(--warn-bg);
+  border: 2px solid var(--warn);
 }
 
 .active-patrol-row {
   align-items: center;
-  background-color: rgb(var(--v-theme-surface-bright));
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 8px;
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
   display: grid;
   gap: 10px;
@@ -4449,6 +4454,21 @@ function formatDashboardTime(value?: string) {
   padding: 2px 8px 2px 3px;
 }
 
+/**
+ * Carried from Phase 1: `AvatarMain` colours each person from their NAME, and
+ * writes WHITE initials on whatever tint it picks - 2.34:1 on this dashboard.
+ * That is right in a members list, where the colour tells two people apart,
+ * and wrong on a dashboard, where the same face appears in four panels.
+ *
+ * The component is left alone - Phase 2 took exactly this route for the top
+ * bar's own avatar - and the dashboard paints every avatar it draws with the
+ * design's accent pair instead. One rule, all seven call sites.
+ */
+.unified-dashboard :deep(.v-avatar) {
+  background: var(--accent-soft) !important;
+  color: var(--accent-text) !important;
+}
+
 .active-patrol-assignee span {
   color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 11px;
@@ -4503,11 +4523,11 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-tooltip::after {
-  background: #0f2638;
-  border-radius: 6px;
+  background: var(--text);
+  border-radius: var(--r-inner-sm);
   bottom: calc(100% + 8px);
-  box-shadow: 0 8px 24px rgba(15, 38, 56, 0.18);
-  color: #ffffff;
+  box-shadow: var(--shadow-menu);
+  color: var(--card);
   content: attr(data-tooltip);
   font-size: 11px;
   font-weight: 600;
@@ -4537,6 +4557,28 @@ function formatDashboardTime(value?: string) {
   }
 }
 
+/**
+ * Carried from Phase 1: the dashboard scrolled sideways at 360. This row is a
+ * four-column grid whose last two columns are `max-content`, so on a phone the
+ * assignee pill, the status pill and the action button cannot fit beside a
+ * 120px title and the row pushes ~39px past the viewport.
+ *
+ * Below 600 the four columns become one. Nothing is hidden, dropped or
+ * reordered - the same four blocks, stacked in the same order.
+ */
+@media (max-width: 599.98px) {
+  .active-patrol-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .active-patrol-action,
+  .active-patrol-statuses,
+  .active-patrol-assignees {
+    justify-self: start;
+    text-align: left;
+  }
+}
+
 .figma-icon-badge {
   align-items: center;
   border-radius: 50%;
@@ -4548,28 +4590,28 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-icon-badge-danger {
-  background: #ffe0de;
-  color: #d72f2f;
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .figma-icon-badge-info {
-  background: #e8e2ff;
-  color: #6d4bd8;
+  background: var(--info-bg);
+  color: var(--info);
 }
 
 .figma-icon-badge-success {
-  background: #ddf7e6;
-  color: #229852;
+  background: var(--ok-bg);
+  color: var(--ok);
 }
 
 .figma-icon-badge-warning {
-  background: #ffeed4;
-  color: #c57916;
+  background: var(--warn-bg);
+  color: var(--warn);
 }
 
 .figma-icon-badge-neutral {
-  background: #edf2f6;
-  color: #607386;
+  background: var(--hover);
+  color: var(--text2);
 }
 
 .figma-status-stack {
@@ -4620,9 +4662,9 @@ function formatDashboardTime(value?: string) {
 
 .feedback-row {
   align-items: center;
-  background: rgb(var(--v-theme-surface-bright));
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 8px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
   display: grid;
   gap: 16px;
   grid-template-columns: minmax(180px, 225px) minmax(130px, 175px) 100px auto;
@@ -4631,6 +4673,39 @@ function formatDashboardTime(value?: string) {
   transition: border-color 0.16s ease, box-shadow 0.16s ease;
 }
 
+/**
+ * The property-mode feedback row is four flex children that each ask for at
+ * least 140px, so on a 360px phone the status pill and the View button were
+ * clipped by the card edge - visible, but cut in half. It wraps now, and below
+ * 600 each block takes the full width: same four blocks, same order.
+ */
+.dashboard-feedback-row {
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+@media (max-width: 599.98px) {
+  .dashboard-feedback-row > div {
+    flex: 1 1 100% !important;
+    justify-content: flex-start !important;
+    text-align: left !important;
+  }
+}
+
+/* Same story as the patrol row: four fixed-ish columns need ~600px, so on a
+   phone the status pill and the View button were clipped by the card edge.
+   One column below 600, same blocks, same order. */
+@media (max-width: 599.98px) {
+  .feedback-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .feedback-status-pill,
+  .feedback-action {
+    justify-self: start;
+  }
+}
+
 .feedback-row:hover {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 6px 14px rgba(15, 44, 69, 0.04);
@@ -4675,11 +4750,13 @@ function formatDashboardTime(value?: string) {
   white-space: nowrap;
 }
 
+/* Carried from Phase 1: the initials measured 1.26:1 in dark mode, because the
+   tint was a literal light blue whatever the theme. */
 .feedback-avatar {
   align-items: center;
-  background: #d1e8ff;
+  background: var(--accent-soft);
   border-radius: 50%;
-  color: #1d5f99;
+  color: var(--accent-text);
   display: inline-flex;
   flex-shrink: 0;
   font-size: 11px;
@@ -4698,24 +4775,25 @@ function formatDashboardTime(value?: string) {
   white-space: nowrap;
 }
 
+/* The other two carried Phase 1 items: hard-coded chips. */
 .feedback-status-pill-completed {
-  background: #72e3a1;
-  color: #0f5132;
+  background: var(--ok-bg);
+  color: var(--ok);
 }
 
 .feedback-status-pill-progress {
-  background: #fde68a;
-  color: #92400e;
+  background: var(--warn-bg);
+  color: var(--warn);
 }
 
 .feedback-status-pill-danger {
-  background: #fecaca;
-  color: #b91c1c;
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .feedback-status-pill-todo {
-  background: #e2e8f0;
-  color: #64748b;
+  background: var(--hover);
+  color: var(--text2);
 }
 
 .feedback-view-button {