@7365admin1/layer-common 3.2.2-staging.122 → 3.2.2-staging.124

package/assets/css/primitives.css

@@ -92,6 +92,45 @@
   font-family: var(--font-sans, Roboto, sans-serif);
 }
 
+/* ------------------------------------------------------------------ */
+/* The icon face.                                                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The handoff draws every icon with Google's `Material Symbols Outlined`
+ * variable font, requested in `nuxt.config.ts` alongside Manrope. The icon
+ * set in `plugins/vuetify.ts` turns each `mdi-*` name into that font's
+ * ligature and puts this class on the element; this rule is what makes the
+ * ligature resolve.
+ *
+ * One class, no `!important`. `.v-icon` already gives us `font-feature-
+ * settings: "liga"`, `letter-spacing: normal`, `line-height: 1` and the 1em
+ * box, and Vuetify never sets `font-family` on it - the old family arrived
+ * through `.mdi:before`, which we no longer emit. Only `text-transform` has
+ * to be stated: `.v-btn` uppercases its contents, and an uppercased "close"
+ * matches no ligature, so the icon would render as the word.
+ */
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-variation-settings:
+    "FILL" 0,
+    "GRAD" 0,
+    "opsz" 24;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 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. */
+.material-symbols-outlined.mdi-spin {
+  animation: mdi-spin 2s infinite linear;
+}
+
 /* ------------------------------------------------------------------ */
 /* PageHeader - the row every screen opens with.                       */
 /* ------------------------------------------------------------------ */

package/components/EntryPass/QrTemplatePreview.vue

@@ -6,24 +6,28 @@
     persistent
     @update:model-value="emit('update:modelValue', $event)"
   >
-    <v-card>
-      <v-toolbar
-        style="height: 12px"
-        :color="isDark ? 'grey-darken-4' : 'white'"
-      >
-        <v-spacer></v-spacer>
+    <v-card class="screen-modal">
+      <!-- Was a 12px-tall `v-toolbar` themed by hand (`white` / `grey-darken-4`)
+           carrying a `grey-darken-1` icon button. The design's modal close is a
+           borderless 32px square on `--muted`, so the whole bar goes and the
+           close sits on the card's own surface. -->
+      <div class="d-flex justify-end pa-2">
         <v-btn
-          color="grey-darken-1"
+          variant="text"
           icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close preview"
           @click="emit('update:modelValue', false)"
         ></v-btn>
-      </v-toolbar>
+      </div>
 
-      <v-card-text style="padding: 0 !important">
+      <v-card-text class="screen-modal__body pa-0">
         <v-container>
           <v-row no-gutters class="text-center">
             <v-col cols="12">
-              <p class="font-weight-bold text-h5 mb-3">{{ header }}</p>
+              <!-- `text-h5` is Vuetify's 24px/400 Roboto scale. The design's
+                   modal title token is `--fs-card-title` / `--fw-card-title`. -->
+              <p class="qr-preview__title mb-3">{{ header }}</p>
               <p>{{ subText }}</p>
             </v-col>
 
@@ -53,8 +57,8 @@
             </v-col>
 
             <v-col cols="12" class="mt-5">
-              <p class="font-weight-bold text-h5 mb-2">Company Name</p>
-              <p class="font-weight-bold text-h5 mb-3">BL 01/03/24</p>
+              <p class="qr-preview__title mb-2">Company Name</p>
+              <p class="qr-preview__title mb-3">BL 01/03/24</p>
               <p class="mb-1">{{ `Date: ${dateStr} ${timeStr}` }}</p>
               <p class="mb-1">Access: Door</p>
               <p>Scan and press level 1. One time use.</p>
@@ -67,7 +71,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useTheme } from "vuetify";
 import QRCode from "qrcode";
 
 defineProps({
@@ -87,9 +90,6 @@ defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const { global: themeGlobal } = useTheme();
-const isDark = computed(() => themeGlobal.current.value.dark);
-
 const qrSmall = ref<string>("");
 const qrLarge = ref<string>("");
 
@@ -102,3 +102,14 @@ const now = new Date();
 const dateStr = now.toLocaleDateString();
 const timeStr = now.toLocaleTimeString();
 </script>
+
+<style scoped>
+/* The pass body is a printed artefact, so its own sizes stay. Only the two
+   heading lines move off Vuetify's Roboto display scale onto the design's
+   modal-title token. */
+.qr-preview__title {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+}
+</style>

package/components/Feedback/Form.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 Feedback" : "Create Feedback" }}
       </span>
     </template>
@@ -22,13 +22,13 @@
       item-value="value"
       item-props
       variant="outlined"
-      density="compact"
-      class="mb-2"
+      density="comfortable"
+      class="mb-2 filter-field"
       clearable
       :custom-filter="customFilter"
       :rules="[requiredRule]"
     >
-      <template #label> Subject <span class="text-red">*</span> </template>
+      <template #label> Subject <span class="feedback-form__required">*</span> </template>
     </v-autocomplete>
 
     <!-- <v-autocomplete
@@ -44,37 +44,43 @@
       clearable
       :rules="[requiredRule]"
     >
-      <template #label> Category <span class="text-red">*</span> </template>
+      <template #label> Category <span class="feedback-form__required">*</span> </template>
     </v-autocomplete> -->
 
     <v-text-field
       label="Location"
       variant="outlined"
-      density="compact"
+      density="comfortable"
+      class="mb-2 filter-field"
       v-model="localFeedback.location"
       :rules="[requiredRule]"
     >
-      <template #label> Location <span class="text-red">*</span> </template>
+      <template #label> Location <span class="feedback-form__required">*</span> </template>
     </v-text-field>
 
     <v-textarea
       label="Description"
       variant="outlined"
-      density="compact"
+      density="comfortable"
+      class="filter-field"
       auto-grow
       rows="4"
       v-model="localFeedback.description"
       :rules="[requiredRule]"
     >
-      <template #label> Description <span class="text-red">*</span> </template>
+      <template #label> Description <span class="feedback-form__required">*</span> </template>
     </v-textarea>
 
     <template #footer>
+      <!-- `color="primary-button"` was already the right token (the FILL, not
+           the `primary` foreground) and `height="40"` already the right number,
+           but both were stated by hand. `.screen-btn-primary` is where the
+           layer says that once, and it wins over Vuetify's `--v-btn-height`
+           without an `!important`. -->
       <v-btn
-        color="primary-button"
-        class="text-capitalize mb-4"
+        class="text-capitalize mb-4 screen-btn-primary"
+        variant="flat"
         block
-        height="40"
         :loading="loading"
         :disabled="loading || !isFormValid"
         @click="submitFeedback"
@@ -171,3 +177,11 @@ const customFilter = (value: string, query: string, item: any) => {
   return title.includes(search) || subtitle.includes(search);
 };
 </script>
+
+<style scoped>
+/* Was `text-red`, a fixed Vuetify red that is the same red on both themes.
+   `--err` is the theme's error ink and follows it. */
+.feedback-form__required {
+  color: var(--err);
+}
+</style>

package/components/HygieneUpdateMoreAction.vue

@@ -1,55 +1,46 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <template v-if="$slots.header">
-        <slot name="header" :title="title" :onClose="onClose" />
-      </template>
-      <template v-else>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5 text-capitalize">{{
-            title
-          }}</span>
-        </v-row>
-      </template>
-    </v-toolbar>
-
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+  <!-- The hygiene twin of `Dialog/UpdateMoreAction`, converted to the same
+       shape on staging. Its title row and its footer were both `v-toolbar`s -
+       fixed grey slabs that stay grey on the dark theme - and the footer's
+       action was a hardcoded `color="black"` fill, i.e. the same black on the
+       dark theme as on the light one. -->
+  <v-card class="screen-modal" width="100%">
+    <template v-if="$slots.header">
+      <slot name="header" :title="title" :onClose="onClose" />
+    </template>
+    <v-card-title v-else class="text-capitalize">{{ title }}</v-card-title>
+
+    <v-card-text class="screen-modal__body pb-0">
       <slot name="content" />
     </v-card-text>
 
-    <v-toolbar class="pa-0" density="compact">
-      <v-row no-gutters>
-        <v-col :cols="showMoreActions ? 6 : 12" class="pa-0">
-          <v-btn
-            block
-            variant="text"
-            class="text-none"
-            size="large"
-            @click="emit('close')"
-            height="48"
-          >
-            Close
-          </v-btn>
-        </v-col>
-
-        <v-col v-if="showMoreActions" cols="6" class="pa-0">
-          <v-menu>
+    <!-- The design's footer strip: equal-width buttons, ghost then primary. -->
+    <div class="screen-modal__footer">
+      <v-btn
+        variant="outlined"
+        class="text-none screen-btn-ghost"
+        @click="emit('close')"
+      >
+        Close
+      </v-btn>
+
+      <v-menu v-if="showMoreActions" contained>
             <template #activator="{ props }">
               <v-btn
-                block
                 variant="flat"
-                color="black"
-                class="text-none"
-                height="48"
+                class="text-none screen-btn-primary"
                 :disabled="disabled"
                 v-bind="props"
-                tile
               >
                 More actions
               </v-btn>
             </template>
 
-            <v-list class="pa-0 rounded-0">
+            <!-- The dropdown itself is left as Vuetify draws it, exactly as the
+                 converted twin left it: the handoff gives a per-row menu no
+                 shape, and this menu opens on a click the harness cannot drive,
+                 so it could not be render-verified either. -->
+            <v-list class="pa-0 hyg-more__list">
               <v-list-item
                 v-if="showQrButton && qrButtonLabel"
                 @click="emit('showqr')"
@@ -110,20 +101,22 @@
                 </v-list-item-title>
               </v-list-item>
 
+              <!-- `text-red` was Vuetify's fixed #f44336, the same red on both
+                   themes. `text-error` is Vuetify's own class over
+                   `--v-theme-error`, which IS the design's `--err` - the same
+                   substitution the converted twin made. -->
               <v-list-item
                 v-if="canDelete"
                 @click="emit('delete')"
-                class="text-red"
+                class="text-error"
               >
                 <v-list-item-title class="text-subtitle-2">
                   {{ deleteButtonLabel }}
                 </v-list-item-title>
               </v-list-item>
             </v-list>
-          </v-menu>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+      </v-menu>
+    </div>
   </v-card>
 </template>
 
@@ -240,4 +233,11 @@ const {
 } = prop;
 </script>
 
-<style scoped></style>
+<style scoped>
+/* `text-subtitle-2` is Vuetify's 0.875rem/500; the handoff names no type for a
+   menu row, so it takes the established cell type - same rule as the twin. */
+.hyg-more__list :deep(.v-list-item-title) {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
+</style>

package/components/IncidentReport/affectedEntities.vue

@@ -2,18 +2,22 @@
   <v-row no-gutters class="px-5 pt-4">
     <!-- Anyone affected/injured -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <!-- Same shape as this report's `Authorities.vue` sibling, already on
+           staging: a `.screen-card-title` question, a `.report-answer` line
+           when the answer is "no", and the table inside an `AppCard` instead of
+           a `border` class Vuetify draws from its own fixed grey. -->
+      <p class="screen-card-title mb-2">
         Anyone affected/injured?
       </p>
       <p
         v-if="affectedEntities?.anyoneAffectedValue == 'no'"
-        class="my-1 text-h6 text-capitalize"
+        class="report-answer mt-2 text-capitalize"
       >
         {{ affectedEntities?.anyoneAffectedValue }}
       </p>
 
+      <AppCard v-else class="table-card mt-5">
       <v-data-table
-        v-else
         :headers="injuredTableHeader"
         :items="affectedEntities?.affectedInjured"
         fixed-header
@@ -21,16 +25,17 @@
         :hide-default-header="false"
         items-per-page="100"
         style="max-height: calc(100vh - (200px))"
-        class="border mt-5"
       >
         <template #header.nric>
           <div class="d-flex align-center">
             NRIC
+            <!-- `color="blue"` is a fixed Vuetify blue, the same on both
+                 themes. `--accent-text` is the design's interactive ink. -->
             <v-icon
             v-if="isShowEyeIcon"
-              class="cursor-pointer ml-1"
+              class="cursor-pointer ml-1 affected__eye"
               size="18"
-              color="blue"
+              :aria-label="isShowNRIC ? 'Hide NRIC' : 'Show NRIC'"
               @click="isShowNRIC = !isShowNRIC"
             >
               {{ isShowNRIC ? "mdi-eye-off-outline" : "mdi-eye-outline" }}
@@ -45,36 +50,52 @@
           </tr>
         </template>
       </v-data-table>
+      </AppCard>
     </v-col>
 
     <!-- Anyone damage to property -->
     <v-col cols="12" class="pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="screen-card-title mb-2">
         Anyone damage to property?
       </p>
       <p
         v-if="affectedEntities?.anyUnitAffectedValue == 'no'"
-        class="my-1 text-h6 text-capitalize"
+        class="report-answer mt-2 text-capitalize"
       >
         {{ affectedEntities?.anyUnitAffectedValue }}
       </p>
 
-      <v-data-table
-        v-else
-        :headers="damagePropertyTableHeader"
-        :items="affectedEntities?.anyoneDamageToProperty"
-        fixed-header
-        hide-default-footer
-        :hide-default-header="false"
-        items-per-page="100"
-        style="max-height: calc(100vh - (200px))"
-        class="border mt-5"
-      >
-      </v-data-table>
+      <AppCard v-else class="table-card mt-5">
+        <v-data-table
+          :headers="damagePropertyTableHeader"
+          :items="affectedEntities?.anyoneDamageToProperty"
+          fixed-header
+          hide-default-footer
+          :hide-default-header="false"
+          items-per-page="100"
+          style="max-height: calc(100vh - (200px))"
+        >
+        </v-data-table>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
 
+<style scoped>
+/* Same two rules as this report's `Authorities.vue` sibling: the prototype
+   states no size for a plain answer line, so it takes the body row's type
+   rather than Vuetify's `text-h6`. */
+.report-answer {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+
+.affected__eye {
+  color: var(--accent-text);
+}
+</style>
+
 <script lang="ts" setup>
 definePageMeta({
   middleware: ["01-auth", "02-org"],

package/components/NumberSettingField.vue

@@ -4,11 +4,18 @@
             <v-row>
                 <v-col cols="6">
                     <InputLabel class="text-capitalize font-weight-bold" :title="title" :required="required" />
-                    <v-text-field v-model.number="count" type="number" density="comfortable" :rules="rules" :readonly="readOnly" />
+                    <v-text-field v-model.number="count" type="number" class="filter-field" density="comfortable" :rules="rules" :readonly="readOnly" />
                 </v-col>
 
                 <v-col cols="6">
-                    <v-btn v-if="!readOnly" color="primary" class="text-none mt-6" size="large" variant="flat"
+                    <!-- Was `color="primary" size="large"`. On a `v-btn`,
+                         `primary` is this theme's FOREGROUND token (links,
+                         icons, text buttons) - the fill is `primary-button`, so
+                         a flat button asking for `primary` painted itself with
+                         an ink colour. `.screen-btn-primary` is the design's
+                         40px primary and carries the correct fill, so the
+                         colour prop and the Vuetify size both go. -->
+                    <v-btn v-if="!readOnly" class="text-none mt-6 screen-btn-primary" variant="flat"
                         :disabled="!valid || disabled" :loading="loading || updating" text="Save" @click="handleSave" />
                 </v-col>
             </v-row>

package/components/Signature.vue

@@ -1,16 +1,28 @@
 <template>
   <v-dialog v-model="dialogModel" max-width="700" persistent>
-    <v-card>
-      <v-toolbar>
-        <v-toolbar-title>Signature</v-toolbar-title>
+    <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. A `v-card-title` is the same row on the card's own
+           surface, and the close is the design's borderless 32px square. -->
+      <v-card-title class="d-flex align-center">
+        Signature
         <v-spacer />
-        <v-btn icon="mdi-close" @click="hideModal" />
-      </v-toolbar>
-
-      <v-card-text>
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close signature"
+          @click="hideModal"
+        />
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <v-row no-gutters>
           <v-col cols="12">
-            <div class="text-subtitle-1 text-medium-emphasis ml-2">
+            <!-- `text-medium-emphasis` is Vuetify's 60%-alpha ink; `--muted` is
+                 the design's sub-line and follows the theme. -->
+            <div class="screen-hint ml-2 mb-2">
               Your signature here
             </div>
 
@@ -23,34 +35,28 @@
               class="border"
             />
           </v-col>
-
-          <v-col cols="12" class="text-center">
-            <v-row class="d-flex">
-              <v-col class="w-50 px-3">
-                <v-btn
-                  text="clear"
-                  color="warning"
-                  class="my-4 w-100 rounded-lg"
-                  height="40px"
-                  @click="clear"
-                />
-              </v-col>
-
-              <v-col class="w-50 px-3">
-                <v-btn
-                  text="submit"
-                  color="#1867C0"
-                  class="my-4 w-100 rounded-lg"
-                  height="40px"
-                  :loading="loading"
-                  :disabled="loading"
-                  @click="submit"
-                />
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
       </v-card-text>
+
+      <!-- The design's modal footer: two equal-width buttons on a bordered
+           strip, ghost then primary. Was a hand-built `v-row` of two 50%
+           columns, one `color="warning"` and one a LITERAL `#1867C0` - a fixed
+           hex that is the same blue on both themes and is not the theme's
+           accent either. Both colours go; the shape is the shared one. -->
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="outlined" @click="clear">
+          Clear
+        </v-btn>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          :loading="loading"
+          :disabled="loading"
+          @click="submit"
+        >
+          Submit
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>