@7365admin1/layer-common 3.2.2-staging.128 → 3.2.2-staging.130

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/components/WorkOrder/Create.vue

@@ -1,7 +1,7 @@
 <template>
   <FormDialog v-model="dialog" @close="closeDialog">
     <template #title>
-      <span class="text-h6 font-weight-medium pt-1 text-capitalize">
+      <span class="screen-card-title pt-1 text-capitalize">
         {{ isEditMode ? "Edit Work Order" : "Create Work Order" }}
       </span>
     </template>
@@ -24,8 +24,7 @@
       item-props
       label="Subject"
       variant="outlined"
-      density="compact"
-      class="mb-2"
+      class="filter-field mb-2"
       :clearable="
         props.createdFrom === 'feedback' && workOrder.subject !== ''
           ? false
@@ -39,7 +38,7 @@
       :custom-filter="customFilter"
       :rules="[requiredRule]"
     >
-      <template #label> Subject <span class="text-red">*</span> </template>
+      <template #label> Subject <span class="form-required">*</span> </template>
     </v-autocomplete>
 
     <v-autocomplete
@@ -50,8 +49,7 @@
       item-props
       label="Category"
       variant="outlined"
-      density="compact"
-      class="mb-2"
+      class="filter-field mb-2"
       :clearable="
         props.createdFrom === 'feedback' && workOrder.category !== ''
           ? false
@@ -64,12 +62,12 @@
       "
       :rules="[requiredRule]"
     >
-      <template #label> Category <span class="text-red">*</span> </template>
+      <template #label> Category <span class="form-required">*</span> </template>
     </v-autocomplete>
 
     <v-checkbox v-model="workOrder.highPriority" density="compact" class="ma-0">
       <template #label>
-        <span class="text-caption">
+        <span class="form-check-label">
           Set work order as High Priority (Optional)
         </span>
       </template>
@@ -98,14 +96,13 @@
     <v-autocomplete
       label="Unit"
       variant="outlined"
-      density="compact"
+      class="filter-field mt-1"
       v-model="workOrder.unit"
       :items="units"
-      class="mt-1"
       clearable
       :rules="[requiredRule]"
     >
-      <template #label> Unit <span class="text-red">*</span> </template>
+      <template #label> Unit <span class="form-required">*</span> </template>
     </v-autocomplete>
 
     <!-- <v-text-field
@@ -125,23 +122,21 @@
     <v-textarea
       label="Work Order Description"
       variant="outlined"
-      density="compact"
+      class="filter-field mt-1"
       v-model="workOrder.description"
-      class="mt-1"
       rows="4"
       clearable
       auto-grow
       :rules="[requiredRule]"
     >
-      <template #label> Description <span class="text-red">*</span> </template>
+      <template #label> Description <span class="form-required">*</span> </template>
     </v-textarea>
 
     <template #footer>
       <v-btn
-        color="primary-button"
-        class="text-capitalize mb-4"
+        class="screen-btn-primary mb-4"
+        variant="flat"
         block
-        height="40"
         :loading="loading"
         :disabled="loading || !isFormValid"
         @click="submitWorkOrder"
@@ -282,3 +277,17 @@ const customFilter = (value: string, query: string, item: any) => {
   return title.includes(search) || subtitle.includes(search);
 };
 </script>
+
+<style scoped>
+/* The required star was `text-red`, a Vuetify palette word rather than the
+   design's error token. */
+.form-required {
+  color: var(--err);
+}
+
+.form-check-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.128",
+  "version": "3.2.2-staging.130",
   "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.",