@7365admin1/layer-common 3.2.2-staging.129 → 3.2.2-staging.131

package/assets/css/primitives.css

@@ -77,7 +77,7 @@
     [class*="text-overline"],
     .v-badge__badge,
     .v-kbd
-  ),
+  ):not(.material-symbols-outlined),
 .v-overlay-container
   :is(
     [class*="text-h"],
@@ -88,7 +88,7 @@
     [class*="text-overline"],
     .v-badge__badge,
     .v-kbd
-  ) {
+  ):not(.material-symbols-outlined) {
   font-family: var(--font-sans, Roboto, sans-serif);
 }
 
@@ -124,6 +124,23 @@
   -webkit-font-smoothing: antialiased;
 }
 
+/**
+ * The icon face, re-asserted at (0,3,0).
+ *
+ * A `<v-icon class="text-h6">` carries BOTH the icon class and a typography
+ * utility, so the re-point above (a descendant of `.v-application`, (0,2,0))
+ * would otherwise beat the single-class rule (0,1,0) and the ligature would
+ * fall back to Manrope - drawing the literal word "local_shipping" instead of
+ * a truck. The `:not()` guard above stops that here; this block stops it
+ * anywhere an app ships its own copy of the re-point, whatever the stylesheet
+ * order. Repeating the class is how the weight is raised - no `!important`,
+ * same precedent as the re-point itself, so a screen can still override.
+ */
+.v-application .material-symbols-outlined.material-symbols-outlined,
+.v-overlay-container .material-symbols-outlined.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+}
+
 /* mdi's spin modifier, kept working now the glyph is not a `:before`.
    `@keyframes mdi-spin` still comes from `@mdi/font`, which stays loaded so
    that any icon name without a mapping keeps drawing its old glyph. */

package/components/AreaChecklistHistoryMain.vue

@@ -32,11 +32,12 @@
 
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
-            <v-card
-              class="w-100 filter-bar d-flex align-center ga-5"
-              flat
-              :height="60"
-            >
+            <!--
+              A bare `v-card` here paints Vuetify's own `surface`, a shade off
+              the table card it sits inside. A plain row on the card's own
+              background, with both filters on the design's field.
+            -->
+            <div class="w-100 filter-bar d-flex align-center ga-5">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -45,6 +46,7 @@
                 max-width="300"
                 append-inner-icon="mdi-magnify"
                 hide-details
+                class="filter-field"
               />
               <v-select
                 v-model="status"
@@ -55,8 +57,9 @@
                 clearable
                 hide-details
                 max-width="200"
+                class="filter-field"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
 

package/components/AreaMain.vue

@@ -19,23 +19,24 @@
       >
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
-            <v-card
-              class="w-100 px-3 d-flex align-center ga-5 py-2"
-              flat
-              :height="60"
-            >
+            <!--
+              A bare `v-card` here paints Vuetify's own `surface`, a slab a
+              shade off the table card it sits inside. A plain row on the
+              card's own background, with the filter on the design's field.
+            -->
+            <div class="w-100 px-3 d-flex align-center ga-5 py-2">
               <v-select
                 v-model="areaTypeFilter"
                 :items="typeOptions"
                 density="compact"
                 hide-details
-                class="mx-2"
+                class="mx-2 filter-field"
                 style="max-width: 160px"
                 item-title="title"
                 item-value="value"
                 label="Type"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
 
@@ -213,64 +214,50 @@
     </HygieneUpdateMoreAction>
   </v-dialog>
 
-  <v-dialog v-model="dialogDeleteItem" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            Delete {{ selectedItem?.name || entityTypeLabel }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text>
-        <span class="text-subtitle-2"
-          >Are you sure you want to delete this {{ entityTypeLabel }}?</span
-        >
+  <!--
+    Both dialogs were `v-toolbar` title bars over toolbar footers of two block
+    buttons, the confirm one on `color="black"` - not a token, so it painted a
+    light-theme fill on the dark theme, and the toolbar surface sat visibly
+    lighter than the card. The shared `.screen-modal` shape now, same copy,
+    same labels, same handlers, same busy states.
+  -->
+  <v-dialog v-model="dialogDeleteItem" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        Delete {{ selectedItem?.name || entityTypeLabel }}
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
+        Are you sure you want to delete this {{ entityTypeLabel }}?
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="dialogDeleteItem = false"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
-              :loading="submitting"
-              @click="_deleteItem"
-            >
-              Delete
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogDeleteItem = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="_deleteItem"
+        >
+          Delete
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
-  <v-dialog v-if="isToiletLocation" v-model="dialogShowQR" max-width="500">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            QR Code for {{ selectedItem?.name || "Toilet Location" }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text class="d-flex justify-center pa-6">
+  <v-dialog v-if="isToiletLocation" v-model="dialogShowQR" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        QR Code for {{ selectedItem?.name || "Toilet Location" }}
+      </v-card-title>
+      <v-card-text class="screen-modal__body d-flex justify-center">
         <v-row no-gutters class="d-flex justify-center">
           <v-col cols="12" class="text-center">
             <div v-if="qrLoading" class="d-flex flex-column align-center">
@@ -301,36 +288,23 @@
         </v-row>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="dialogShowQR = false"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
-              :loading="qrLoading"
-              @click="onDownloadQrCode"
-            >
-              Download
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="dialogShowQR = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="qrLoading"
+          @click="onDownloadQrCode"
+        >
+          Download
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 

package/components/CleaningScheduleMain.vue

@@ -98,11 +98,15 @@
         </template>
       </TableMain>
       <div v-else class="pa-4">
-        <v-card variant="outlined" class="pa-4">
-          <div class="text-subtitle-1">
+        <!--
+          Was an outlined `v-card` painted from Vuetify's own `surface`. The
+          design's card, and the notice at the design's cell size.
+        -->
+        <AppCard class="pa-4">
+          <div class="cs-no-permission">
             You do not have permission to view cleaning schedules.
           </div>
-        </v-card>
+        </AppCard>
       </div>
     </v-col>
   </v-row>
@@ -327,3 +331,11 @@ function showMessage(msg: string, color: string = "error") {
   }
 }
 </script>
+
+<style scoped>
+.cs-no-permission {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>

package/components/EquipmentItemMain.vue

@@ -198,22 +198,28 @@
   </v-dialog>
 
   <!-- Main Equipment Item Dialog -->
+  <!--
+    All three dialogs were hand-drawn: a 20px/700 title bar, a divider, and a
+    `v-card-actions` footer of two 56px block buttons with square corners, the
+    confirm one on `color="black"` - not a token, so it painted a light-theme
+    fill on the dark theme. The shared `.screen-modal` shape now. Same fields,
+    same labels, same handlers, same busy states.
+  -->
   <v-dialog v-model="dialogEquipmentItem" max-width="540" persistent>
-    <v-card>
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">Equipment Item</span>
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Equipment Item
         <v-spacer />
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="dialogEquipmentItem = false"
         />
       </v-card-title>
 
-      <v-divider />
-
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body">
         <v-form ref="equipmentItemFormRef">
           <!-- Add Equipment Section -->
           <v-row no-gutters class="mb-4">
@@ -374,49 +380,40 @@
         </v-form>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-0">
-        <v-row no-gutters>
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="text"
-              size="large"
-              height="56"
-              class="text-none font-weight-medium rounded-0"
-              @click="dialogEquipmentItem = false"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              size="large"
-              height="56"
-              class="text-none font-weight-bold rounded-0"
-              :loading="submitting"
-              @click="_equipmentItem()"
-            >
-              Checkout Item
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogEquipmentItem = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="_equipmentItem()"
+        >
+          Checkout Item
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
   <v-dialog v-model="dialogPhotoForItem" max-width="720" persistent>
-    <v-card rounded="lg">
-      <v-card-title class="d-flex align-center pa-4">
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
         <div>
-          <div class="text-h6 font-weight-bold">Item Photos</div>
-          <div class="text-caption text-medium-emphasis">
+          Item Photos
+          <!--
+            The handoff draws no sub-line under a modal title. `--muted` at
+            12px, the figure batch I's `AttachmentsViewer` settled on, rather
+            than a third number.
+          -->
+          <div class="eqi-modal-sub">
             {{ equipmentItems[activePhotoIndex ?? 0]?.supplyName || "Item" }}
           </div>
         </div>
@@ -426,15 +423,14 @@
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="dialogPhotoForItem = false"
         />
       </v-card-title>
 
-      <v-divider />
-
       <!-- Body -->
-      <v-card-text class="pa-6" v-if="activePhotoIndex !== null">
+      <v-card-text class="screen-modal__body" v-if="activePhotoIndex !== null">
         <PhotoUpload
           title="Add / Take Photos"
           v-model="currentPhotos"
@@ -443,63 +439,42 @@
         />
       </v-card-text>
 
-      <v-divider />
-
       <!-- Footer -->
-      <v-card-actions class="pa-0">
-        <v-row no-gutters class="w-100">
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="text"
-              size="large"
-              height="56"
-              class="text-none font-weight-medium rounded-0"
-              @click="dialogPhotoForItem = false"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              size="large"
-              height="56"
-              class="text-none font-weight-bold rounded-0"
-              @click="dialogPhotoForItem = false"
-            >
-              Done
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="dialogPhotoForItem = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          @click="dialogPhotoForItem = false"
+        >
+          Done
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
   <v-dialog v-model="showAttachmentDialog" max-width="720" persistent>
-    <v-card rounded="lg">
-      <v-card-title class="d-flex align-center pa-4">
-        <div>
-          <div class="text-h6 font-weight-bold">Attachment</div>
-        </div>
-
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Attachment
         <v-spacer />
-
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="(showAttachmentDialog = false), (attachmentUrl = '')"
         />
       </v-card-title>
 
-      <v-divider />
-
       <!-- Body -->
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body">
         <v-img :src="attachmentUrl" contain />
       </v-card-text>
     </v-card>
@@ -817,4 +792,18 @@ const currentPhotoIds = computed({
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+/*
+  The sub-line under the "Item Photos" title. The handoff draws no such line,
+  so it takes the figure already settled on for one: `--muted` at 12px.
+  Scoped to `.v-card-title` because Vuetify's own title rule would otherwise
+  hand it the 20px it gives everything inside.
+*/
+.screen-modal .v-card-title .eqi-modal-sub {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--muted);
+}
+</style>

package/components/EquipmentManagementMain.vue

@@ -45,11 +45,15 @@
         </template>
 
         <template #item.attachment="{ value }">
+          <!--
+            `variant="tonal"` drew Vuetify's own grey slab in the cell, the one
+            off-design control left on the row. The design's ghost button.
+          -->
           <v-btn
             v-if="value"
             size="small"
-            variant="tonal"
-            class="text-none"
+            variant="outlined"
+            class="screen-btn-ghost"
             @click.stop="viewAttachment(value)"
           >
             View Image
@@ -143,67 +147,54 @@
     </HygieneUpdateMoreAction>
   </v-dialog>
 
-  <v-dialog v-model="dialogDeleteEquipment" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            Delete {{ selectedEquipment?.name || "Unit" }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text>
-        <span class="text-subtitle-2"
-          >Are you sure you want to delete this equipment?</span
-        >
-      </v-card-text>
+  <!--
+    All three dialogs were `v-toolbar` title bars over toolbar footers carrying
+    two block buttons, the confirm one on `color="black"` - not a token, so it
+    painted a light-theme fill on the dark theme, and the toolbar surface sat
+    visibly lighter than the card it was on. They are the shared `.screen-modal`
+    shape now. Same fields, same labels, same handlers, same busy states.
+  -->
+  <v-dialog v-model="dialogDeleteEquipment" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        Delete {{ selectedEquipment?.name || "Unit" }}
+      </v-card-title>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="dialogDeleteEquipment = false"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
+      <v-card-text class="screen-modal__body">
+        Are you sure you want to delete this equipment?
+      </v-card-text>
 
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold"
-              height="48"
-              :loading="submitting"
-              @click="_deleteEquipment"
-            >
-              Delete
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogDeleteEquipment = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="_deleteEquipment"
+        >
+          Delete
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
-  <v-dialog v-model="dialogStockAction" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text class="pa-4">
+  <v-dialog v-model="dialogStockAction" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <v-form ref="stockActionFormRef" v-model="stockActionValid">
           <v-row no-gutters>
-            <v-col cols="12" class="mb-4">
+            <v-col cols="12">
               <InputLabel
                 for="stockActionQty"
                 title="Quantity"
@@ -214,68 +205,53 @@
                 v-model.number="stockActionQuantity"
                 :rules="[requiredRule]"
                 density="comfortable"
-                variant="outlined"
                 type="number"
                 min="1"
                 placeholder="Enter quantity"
                 hide-details="auto"
+                class="filter-field"
               />
             </v-col>
           </v-row>
         </v-form>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="dialogStockAction = false"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
-              :loading="submitting"
-              @click="stockActionMode === 'add' ? _addStock() : _requestItem()"
-            >
-              {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogStockAction = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="stockActionMode === 'add' ? _addStock() : _requestItem()"
+        >
+          {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
   <v-dialog v-model="showAttachmentDialog" max-width="720" persistent>
-    <v-card rounded="lg">
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">Attachment</span>
-
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Attachment
         <v-spacer />
-
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="(showAttachmentDialog = false), (attachmentUrl = '')"
         />
       </v-card-title>
 
-      <v-divider />
-
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body">
         <v-img :src="attachmentUrl" contain />
       </v-card-text>
     </v-card>

package/components/MemberMain.vue

@@ -184,13 +184,20 @@
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
-    <v-dialog v-model="assignRoleDialog" max-width="400px">
-      <v-card>
-        <v-card-title class="text-h5">Assign Role</v-card-title>
-        <v-card-text>
-          <v-form v-model="memberRoleForm" @submit.prevent="updateMemberRole()">
+    <!--
+      Was a `text-h5` title, an untokenised select, and two block buttons - the
+      submit one on `color="black"`, not a token, so it drew a light-theme fill
+      on the dark theme. The shared `.screen-modal` shape now. The footer stays
+      INSIDE the `v-form` because Submit is a `type="submit"` and moving it out
+      would break the form's own submit.
+    -->
+    <v-dialog v-model="assignRoleDialog" max-width="520">
+      <v-card class="screen-modal">
+        <v-card-title>Assign Role</v-card-title>
+        <v-form v-model="memberRoleForm" @submit.prevent="updateMemberRole()">
+          <v-card-text class="screen-modal__body">
             <v-row no-gutters>
-              <v-col cols="12" class="mb-2">
+              <v-col cols="12">
                 <v-row no-gutters>
                   <InputLabel class="text-capitalize" title="Name" required />
                   <v-col cols="12">
@@ -207,6 +214,7 @@
                           : ''
                       "
                       persistent-hint
+                      class="filter-field"
                     ></v-select>
                   </v-col>
 
@@ -215,34 +223,27 @@
                   </v-col>
                 </v-row>
               </v-col>
-
-              <v-col cols="12">
-                <v-row>
-                  <v-col cols="6">
-                    <v-btn
-                      block
-                      variant="text"
-                      @click="setMember({ mode: 'assign-role' })"
-                    >
-                      Cancel
-                    </v-btn>
-                  </v-col>
-                  <v-col cols="6">
-                    <v-btn
-                      block
-                      variant="flat"
-                      color="black"
-                      :disabled="!memberRoleForm"
-                      type="submit"
-                    >
-                      Submit
-                    </v-btn>
-                  </v-col>
-                </v-row>
-              </v-col>
             </v-row>
-          </v-form>
-        </v-card-text>
+          </v-card-text>
+
+          <div class="screen-modal__footer">
+            <v-btn
+              class="screen-btn-ghost"
+              variant="outlined"
+              @click="setMember({ mode: 'assign-role' })"
+            >
+              Cancel
+            </v-btn>
+            <v-btn
+              class="screen-btn-primary"
+              variant="flat"
+              :disabled="!memberRoleForm"
+              type="submit"
+            >
+              Submit
+            </v-btn>
+          </div>
+        </v-form>
       </v-card>
     </v-dialog>
   </div>

package/components/RolePermissionMain.vue

@@ -105,23 +105,23 @@
       />
     </v-dialog>
 
-    <v-dialog v-model="confirmDialog" max-width="450">
-      <v-card>
-        <v-toolbar>
-          <v-row no-gutters class="fill-height px-6" align="center">
-            <span class="font-weight-bold text-h6 text-capitalize">
-              Delete Role
-            </span>
-          </v-row>
-        </v-toolbar>
+    <!--
+      Was a `v-toolbar` title bar over a toolbar footer of two block buttons,
+      the confirm one on `color="black"` - not a token, so it drew a
+      light-theme fill on the dark theme. The shared confirmation shape now.
+      Same question, same reassignment rows, same disabled rule.
+    -->
+    <v-dialog v-model="confirmDialog" max-width="520">
+      <v-card class="screen-modal">
+        <v-card-title>Delete Role</v-card-title>
 
-        <v-card-text>
-          <span v-if="!hasAssignedMembers" class="text-subtitle-2">
+        <v-card-text class="screen-modal__body">
+          <span v-if="!hasAssignedMembers">
             Are you sure you want to delete this role? This action cannot be
             undone.
           </span>
           <template v-else>
-            <p class="text-subtitle-2 mb-4">
+            <p class="mb-4">
             There are currently
             <span class="text-error font-weight-bold">
               {{ deletionPreview.members.length }}
@@ -138,7 +138,7 @@
               class="mb-3 pa-3 border rounded-lg"
               align="center"
             >
-              <v-col cols="12" sm="5" class="text-body-2 mb-2 mb-sm-0">
+              <v-col cols="12" sm="5" class="mb-2 mb-sm-0">
                 {{ member.name || member.user }}
               </v-col>
               <v-col cols="12" sm="7">
@@ -150,43 +150,32 @@
                   label="Reassign role"
                   density="comfortable"
                   hide-details
+                  class="filter-field"
                 />
               </v-col>
             </v-row>
           </template>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
-          <v-row no-gutters>
-            <v-col cols="6" class="pa-0">
-              <v-btn
-                block
-                variant="text"
-                class="text-none"
-                size="large"
-                height="48"
-                @click="closeDeleteDialog"
-                :disabled="deleteLoading"
-              >
-                Cancel
-              </v-btn>
-            </v-col>
-            <v-col cols="6" class="pa-0">
-              <v-btn
-                block
-                variant="flat"
-                color="black"
-                class="text-none font-weight-bold rounded-0"
-                height="48"
-                @click="handleDeleteRole"
-                :loading="deleteLoading"
-                :disabled="hasAssignedMembers && !canConfirmDeletion"
-              >
-                {{ hasAssignedMembers ? "Confirm" : "Delete" }}
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-toolbar>
+        <div class="screen-modal__footer">
+          <v-btn
+            class="screen-btn-ghost"
+            variant="outlined"
+            :disabled="deleteLoading"
+            @click="closeDeleteDialog"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            class="screen-btn-primary"
+            variant="flat"
+            :loading="deleteLoading"
+            :disabled="hasAssignedMembers && !canConfirmDeletion"
+            @click="handleDeleteRole"
+          >
+            {{ hasAssignedMembers ? "Confirm" : "Delete" }}
+          </v-btn>
+        </div>
       </v-card>
     </v-dialog>
 

package/components/ScheduleAreaMain.vue

@@ -20,17 +20,18 @@
 
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
-            <v-card
-              class="w-100 filter-bar d-flex align-center ga-5"
-              flat
-              :height="60"
-            >
+            <!--
+              A bare `v-card` here paints Vuetify's own `surface`, a shade off
+              the table card it sits inside. A plain row on the card's own
+              background, with both filters on the design's field.
+            -->
+            <div class="w-100 filter-bar d-flex align-center ga-5">
               <v-select
                 v-model="statusFilter"
                 :items="statusOptions"
                 density="compact"
                 hide-details
-                class="mx-2"
+                class="mx-2 filter-field"
                 style="max-width: 160px"
                 item-title="title"
                 item-value="value"
@@ -42,13 +43,13 @@
                 :items="typeOptions"
                 density="compact"
                 hide-details
-                class="mx-2"
+                class="mx-2 filter-field"
                 style="max-width: 160px"
                 item-title="title"
                 item-value="value"
                 label="Type"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
         <template #actions>
@@ -106,9 +107,17 @@
               (item.status && String(item.status).toLowerCase() === 'accepted')
             "
           >
-            <span class="text-capitalize" color="success" variant="tonal">
-              {{ item.acceptedByName || item.acceptedBy || "Accepted" }}
-            </span>
+            <!--
+              `color`/`variant` on a plain `<span>` do nothing - Vuetify only
+              reads them on its own components, so this drew as bare cell text
+              while reading as a tonal green chip. It is the accepted chip the
+              sibling branches already use.
+            -->
+            <StatusChip
+              status="Accepted"
+              class="text-capitalize"
+              :label="item.acceptedByName || item.acceptedBy || 'Accepted'"
+            />
           </div>
           <div v-else-if="isScheduleClosed">
             <StatusChip status="Closed" class="text-capitalize" />

package/components/ScheduleTaskMain.vue

@@ -297,51 +297,41 @@
         </HygieneUpdateMoreAction>
       </v-dialog>
 
-      <v-dialog v-model="dialogDeleteTask" max-width="450">
-        <v-card>
-          <v-toolbar>
-            <v-row no-gutters class="fill-height px-6" align="center">
-              <span class="font-weight-bold text-h6 text-capitalize">
-                Delete {{ selectedTask?.title || "Schedule Task" }}
-              </span>
-            </v-row>
-          </v-toolbar>
-          <v-card-text>
-            <span class="text-subtitle-2"
-              >Are you sure you want to delete this schedule task?</span
-            >
+      <!--
+        Was a `v-toolbar` title bar (Vuetify paints that from its own `surface`,
+        a grey slab visibly lighter than the card on dark) over a second toolbar
+        carrying two block buttons, the confirm one on `color="black"` - not a
+        token, so it drew a light-theme fill on the dark theme. It is the shared
+        confirmation shape now, the same one every converted screen uses.
+      -->
+      <v-dialog v-model="dialogDeleteTask" max-width="520">
+        <v-card class="screen-modal">
+          <v-card-title class="text-capitalize">
+            Delete {{ selectedTask?.title || "Schedule Task" }}
+          </v-card-title>
+
+          <v-card-text class="screen-modal__body">
+            Are you sure you want to delete this schedule task?
           </v-card-text>
 
-          <v-toolbar class="pa-0" density="compact">
-            <v-row no-gutters>
-              <v-col cols="6" class="pa-0">
-                <v-btn
-                  block
-                  variant="text"
-                  class="text-none"
-                  size="large"
-                  @click="dialogDeleteTask = false"
-                  height="48"
-                >
-                  Cancel
-                </v-btn>
-              </v-col>
-
-              <v-col cols="6" class="pa-0">
-                <v-btn
-                  block
-                  variant="flat"
-                  color="black"
-                  class="text-none font-weight-bold"
-                  height="48"
-                  :loading="submitting"
-                  @click="_deleteScheduleTask"
-                >
-                  Delete
-                </v-btn>
-              </v-col>
-            </v-row>
-          </v-toolbar>
+          <div class="screen-modal__footer">
+            <v-btn
+              class="screen-btn-ghost"
+              variant="outlined"
+              :disabled="submitting"
+              @click="dialogDeleteTask = false"
+            >
+              Cancel
+            </v-btn>
+            <v-btn
+              class="screen-btn-primary"
+              variant="flat"
+              :loading="submitting"
+              @click="_deleteScheduleTask"
+            >
+              Delete
+            </v-btn>
+          </div>
         </v-card>
       </v-dialog>
 

package/components/UnitMain.vue

@@ -141,51 +141,39 @@
     </HygieneUpdateMoreAction>
   </v-dialog>
 
-  <v-dialog v-model="dialogDeleteUnit" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            Delete {{ selectedUnit?.name || "Unit" }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text>
-        <span class="text-subtitle-2"
-          >Are you sure you want to delete this unit?</span
-        >
+  <!--
+    Was a `v-toolbar` title bar over a toolbar footer of two block buttons, the
+    confirm one on `color="black"` - not a token, so it drew a light-theme fill
+    on the dark theme. The shared confirmation shape now.
+  -->
+  <v-dialog v-model="dialogDeleteUnit" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        Delete {{ selectedUnit?.name || "Unit" }}
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
+        Are you sure you want to delete this unit?
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="dialogDeleteUnit = false"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold"
-              height="48"
-              :loading="submitting"
-              @click="_deleteUnit"
-            >
-              Delete
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogDeleteUnit = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="_deleteUnit"
+        >
+          Delete
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.129",
+  "version": "3.2.2-staging.131",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",