@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/AreaFormDialog.vue

@@ -1,30 +1,40 @@
 <template>
   <v-dialog v-model="showDialog" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <template v-if="$slots.header">
-          <slot
-            name="header"
-            :title="
-              prop.mode === 'edit'
-                ? `Edit ${prop.entityType}`
-                : `Add New ${prop.entityType}`
-            "
-            :close="close"
-          />
-        </template>
-        <template v-else>
-          <v-row no-gutters class="fill-height px-6" align="center">
-            <span class="font-weight-bold text-h6 text-capitalize">{{
-              prop.mode === "edit"
-                ? `Edit ${prop.entityType}`
-                : `Add New ${prop.entityType}`
-            }}</span>
-          </v-row>
-        </template>
-      </v-toolbar>
+    <v-card class="screen-modal">
+      <!-- Was a bare `v-toolbar`, which Vuetify paints from its own `surface` -
+           a grey slab across the top of the card, visibly lighter than the card
+           on the dark theme - carrying a `text-h6` (20px/500 Roboto) heading.
+           The design's modal heading is the `v-card-title` row on the card's own
+           surface, and it carries the design's own title size and weight. The
+           `header` slot keeps its title/close payload unchanged. -->
+      <template v-if="$slots.header">
+        <slot
+          name="header"
+          :title="
+            prop.mode === 'edit'
+              ? `Edit ${prop.entityType}`
+              : `Add New ${prop.entityType}`
+          "
+          :close="close"
+        />
+      </template>
+      <v-card-title v-else class="d-flex align-center text-capitalize">
+        {{
+          prop.mode === "edit"
+            ? `Edit ${prop.entityType}`
+            : `Add New ${prop.entityType}`
+        }}
+        <v-spacer />
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close"
+          @click="close"
+        />
+      </v-card-title>
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body">
         <v-form ref="formRef" v-model="valid">
           <v-row no-gutters class="pa-0">
             <v-col v-if="prop.showType" cols="12" class="pa-0 mb-2">
@@ -35,7 +45,7 @@
                 density="comfortable"
                 variant="outlined"
                 hide-details
-                class="w-100 mb-0"
+                class="filter-field w-100 mb-0"
               />
             </v-col>
 
@@ -49,7 +59,7 @@
               <v-text-field
                 v-model="model"
                 :rules="[requiredRule]"
-                class="mb-0"
+                class="filter-field mb-0"
               />
             </v-col>
 
@@ -68,18 +78,21 @@
                 chips
                 closable-chips
                 placeholder="Select units"
-                class="mb-0"
+                class="filter-field mb-0"
               />
             </v-col>
 
             <v-col v-if="prop.showOptional" cols="12" class="mb-4">
               <v-row dense justify="center">
                 <v-col cols="6" class="pa-0">
+                  <!-- `color="primary"` on a `v-btn` is the design's FOREGROUND
+                       token; this is a plain text toggle, so it takes the
+                       accent's INK form, which the theme test already holds at
+                       >= 4.5:1 on the card. -->
                   <v-btn
                     block
-                    color="primary"
                     variant="text"
-                    class="text-none font-weight-bold"
+                    class="text-none font-weight-bold area-form-dialog__optional"
                     text="Optional"
                     @click="show = !show"
                   ></v-btn>
@@ -101,6 +114,7 @@
                         density="comfortable"
                         type="number"
                         min="1"
+                        class="filter-field"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -111,36 +125,24 @@
         </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="close"
-              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="submit"
-            >
-              {{ prop.mode === "edit" ? "Save" : "Create" }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <!-- Was a second `v-toolbar` holding two square 48px bars - the primary a
+           hardcoded `color="black"`, which is neither theme's accent and reads
+           as a hole in the dark modal - with `rounded-0` forcing 0px corners.
+           This is the design's shared modal footer: a bordered strip with a
+           ghost secondary and the primary beside it, both 40px at 10px. -->
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="outlined" @click="close">
+          Cancel
+        </v-btn>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="submit"
+        >
+          {{ prop.mode === "edit" ? "Save" : "Create" }}
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -268,3 +270,13 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/* The "Optional" reveal is plain text, not a filled button, so it takes the
+   accent's INK form. `--accent-strong` is the FILL that a white label sits on;
+   `--accent-text` is the one `utils/theme.test.ts` holds at >= 4.5:1 against
+   the card in both themes. */
+.area-form-dialog__optional {
+  color: var(--accent-text);
+}
+</style>

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>
 
@@ -49,10 +50,8 @@
                 <!-- Primary action -->
                 <v-btn
                   v-if="canCreateArea"
-                  class="text-none mr-3"
-                  rounded="pill"
-                  variant="tonal"
-                  size="large"
+                  class="text-none mr-3 screen-btn-primary"
+                  variant="flat"
                   @click="onCreateItem"
                 >
                   {{ createLabel }}
@@ -63,10 +62,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       href="/files/area-sample-data.xlsx"
                       target="_blank"
                       download
@@ -81,10 +78,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="onImportData"
                     >
                       <v-icon>mdi-upload</v-icon>
@@ -97,10 +92,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="handleDownloadExcel"
                       :loading="isDownloading"
                     >
@@ -114,7 +107,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -221,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">
@@ -309,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/AttachmentsViewer.vue

@@ -6,8 +6,10 @@
 
                 <!-- Loading Skeleton -->
                 <template v-if="loading && files?.length > 0">
-                    <v-card v-for="(file, index) in files" :key="index" height="50px" flat border="sm black"
-                        class="mb-2">
+                    <!-- `border="sm black"` painted a literal black hairline on
+                         both themes; the design's rule is `--border`. -->
+                    <v-card v-for="(file, index) in files" :key="index" height="50px" flat
+                        class="att-skeleton mb-2">
                         <v-skeleton-loader type="list-item" class="mb-2" />
                     </v-card>
                 </template>
@@ -17,7 +19,7 @@
 
                     <!-- Videos -->
                     <template v-if="videosArray.length > 0">
-                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1">Videos ({{
+                        <div v-if="showFileTypeTitle" class="att-group mb-1">Videos ({{
                             videosArray.length }})</div>
                         <v-list density="compact" class="pa-0 rounded-lg border mb-2">
                             <template v-for="(item, i) in videosArray" :key="item._id">
@@ -26,11 +28,11 @@
                                     :subtitle="item.mimeType" class="cursor-pointer"
                                     @click="openMediaViewer(item._id, item.mimeType)">
                                     <template #prepend>
-                                        <v-icon :color="getFileIconColor(item.mimeType)" class="mr-3">{{
+                                        <v-icon :class="[getFileIconClass(item.mimeType), 'mr-3']">{{
                                             getFileIcon(item.mimeType) }}</v-icon>
                                     </template>
                                     <template #append>
-                                        <v-icon size="16" color="grey-lighten-1">mdi-play-circle-outline</v-icon>
+                                        <v-icon size="16" class="att-icon--muted">mdi-play-circle-outline</v-icon>
                                     </template>
                                 </v-list-item>
                             </template>
@@ -39,7 +41,7 @@
 
                     <!-- Photos -->
                     <template v-if="photosArray.length > 0">
-                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1"
+                        <div v-if="showFileTypeTitle" class="att-group mb-1"
                             :class="{ 'mt-3': videosArray.length > 0 }">
                             Photos ({{ photosArray.length }})</div>
                         <v-list density="compact" class="pa-0 rounded-lg border mb-2">
@@ -50,16 +52,16 @@
                                         <v-avatar size="36" rounded="sm" class="mr-3">
                                             <v-img :src="imageCover(item._id)" cover>
                                                 <template #error>
-                                                    <v-icon color="green" size="20">mdi-image</v-icon>
+                                                    <v-icon size="20" class="att-icon--ok">mdi-image</v-icon>
                                                 </template>
                                             </v-img>
                                         </v-avatar>
                                     </template>
-                                    <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
-                                    <v-list-item-subtitle class="text-caption">{{ item.mimeType
+                                    <v-list-item-title class="att-name">{{ item.file.name }}</v-list-item-title>
+                                    <v-list-item-subtitle class="att-meta">{{ item.mimeType
                                         }}</v-list-item-subtitle>
                                     <template #append>
-                                        <v-icon size="16" color="grey-lighten-1">mdi-eye-outline</v-icon>
+                                        <v-icon size="16" class="att-icon--muted">mdi-eye-outline</v-icon>
                                     </template>
                                 </v-list-item>
                             </template>
@@ -68,7 +70,7 @@
 
                     <!-- Documents & Other Files -->
                     <template v-if="filesArray.length > 0">
-                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1"
+                        <div v-if="showFileTypeTitle" class="att-group mb-1"
                             :class="{ 'mt-3': videosArray.length > 0 || photosArray.length > 0 }">Files ({{
                                 filesArray.length }})</div>
                         <v-list density="compact" class="pa-0 rounded-lg border mb-2">
@@ -77,14 +79,14 @@
                                 <v-list-item class="cursor-pointer"
                                     @click="openDocumentViewer(item._id, item.file.name, item.mimeType)">
                                     <template #prepend>
-                                        <v-icon :color="getFileIconColor(item.mimeType)" class="mr-3">{{
+                                        <v-icon :class="[getFileIconClass(item.mimeType), 'mr-3']">{{
                                             getFileIcon(item.mimeType) }}</v-icon>
                                     </template>
-                                    <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
-                                    <v-list-item-subtitle class="text-caption">{{ item.mimeType
+                                    <v-list-item-title class="att-name">{{ item.file.name }}</v-list-item-title>
+                                    <v-list-item-subtitle class="att-meta">{{ item.mimeType
                                         }}</v-list-item-subtitle>
                                     <template #append>
-                                        <v-icon size="16" color="grey-lighten-1">mdi-open-in-new</v-icon>
+                                        <v-icon size="16" class="att-icon--muted">mdi-open-in-new</v-icon>
                                     </template>
                                 </v-list-item>
                             </template>
@@ -185,13 +187,20 @@ function getFileIcon(mimeType: string): string {
     return 'mdi-file-outline';
 }
 
-function getFileIconColor(mimeType: string): string {
-    if (mimeType === 'application/pdf') return 'red';
-    if (mimeType.includes('word') || mimeType.includes('document')) return 'blue';
-    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'green';
-    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'orange';
-    if (mimeType.startsWith('video/')) return 'purple';
-    return 'grey';
+/**
+ * Was Vuetify's raw palette names - `red`, `blue`, `green`, `orange`, `purple`,
+ * `grey` - which are the same six hexes in both themes and none of them a token.
+ * The handoff draws NO file-type icon palette, so this keeps the distinctions
+ * the screen already made and states each one in the token that already carries
+ * that tone. `purple` has no counterpart at all, so video takes the muted tone
+ * with the rest; that one IS a change of meaning and is recorded as such.
+ */
+function getFileIconClass(mimeType: string): string {
+    if (mimeType === 'application/pdf') return 'att-icon--err';
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'att-icon--info';
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'att-icon--ok';
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'att-icon--warn';
+    return 'att-icon--muted';
 }
 
 function getByType(prefix: 'image/' | 'video/' | 'other') {
@@ -311,3 +320,56 @@ function inferMimeType(ext?: string): string {
     return mimeMap[ext] || 'application/octet-stream';
 }
 </script>
+
+<style scoped>
+/* The group heading was `text-caption text-medium-emphasis` - Vuetify's 12px
+   Roboto at 60% alpha. The design's sub-line is `--muted` at the card's own
+   caption size. */
+.att-group {
+    font-family: var(--font-sans);
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--muted);
+}
+
+/* Row title and meta were `text-body-2` / `text-caption`, i.e. Roboto again.
+   These take the design's cell type, the same pair every converted table row
+   uses. */
+.att-name {
+    font-family: var(--font-sans);
+    font-size: 13.5px;
+    font-weight: 600;
+    color: var(--text);
+}
+
+.att-meta {
+    font-family: var(--font-sans);
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.att-skeleton {
+    border: 1px solid var(--border);
+    border-radius: var(--r-inner);
+}
+
+.att-icon--err {
+    color: var(--err);
+}
+
+.att-icon--info {
+    color: var(--info);
+}
+
+.att-icon--ok {
+    color: var(--ok);
+}
+
+.att-icon--warn {
+    color: var(--warn);
+}
+
+.att-icon--muted {
+    color: var(--muted);
+}
+</style>