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

package/components/PeopleForm.vue

@@ -1,20 +1,20 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
+  <v-card width="100%" class="screen-modal" :loading="processing">
+    <v-toolbar class="screen-dialog-bar" flat>
       <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
+        <span class="screen-card-title text-capitalize">
           {{ prop.mode }} {{ prop.type }}
         </span>
       </v-row>
     </v-toolbar>
     <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
       <div class="w-100 d-flex justify-space-between ga-2">
-        <span v class="text-subtitle-1 w-100 font-weight-bold mb-3">
+        <span v class="people-form__section w-100 mb-3">
           <span v-if="step === 1">General Information</span>
           <span v-else-if="step === 2">Pass Information</span>
         </span>
-        <span class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap;">Step
-          <span class="text-primary-button">{{ step }}</span>/2</span>
+        <span class="people-form__step" style="text-wrap: nowrap;">Step
+          <span class="people-form__stepno">{{ step }}</span>/2</span>
       </div>
       <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <v-row no-gutters class="pt-4">
@@ -93,7 +93,7 @@
             <v-col v-if="prop.mode === 'add'" cols="12" class="mt-2">
               <v-checkbox v-model="createMore" density="comfortable" hide-details>
                 <template #label>
-                  <span class="text-subtitle-2 font-weight-bold">
+                  <span class="people-form__step">
                     Create more
                   </span>
                 </template>
@@ -106,20 +106,14 @@
     </v-card-text>
 
     <v-row no-gutters class="w-100" v-if="errorMessage">
-      <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
+      <p class="text-error w-100 text-center people-form__error">{{ errorMessage }}</p>
     </v-row>
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn v-if="step > 1" tile block variant="text" class="text-none" size="48" @click="back" text="Back" />
-          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="close" text="Close" />
-        </v-col>
-        <v-col cols="6">
-          <v-btn tile block variant="flat" color="primary-button" class="text-none" size="48" :disabled="processing"
-            @click="handleNextPage" :text="step === 2 ? 'Submit' : 'Next'" />
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <div class="screen-modal__footer">
+      <v-btn v-if="step > 1" variant="outlined" class="screen-btn-ghost" @click="back" text="Back" />
+      <v-btn v-else variant="outlined" class="screen-btn-ghost" @click="close" text="Close" />
+      <v-btn variant="flat" class="screen-btn-primary" :disabled="processing"
+        @click="handleNextPage" :text="step === 2 ? 'Submit' : 'Next'" />
+    </div>
   </v-card>
 </template>
 
@@ -449,4 +443,31 @@ onMounted(() => {
 .button-outline-class {
   border: 1px solid rgba(var(--v-theme-primary));
 }
+
+/* Was `text-subtitle-1` / `text-subtitle-2` - Vuetify's 16px/14px scale, which
+   drew the section label LARGER than the card title above it. The step counter
+   step number is handled below and the error line keeps `text-error`;
+   only their sizes move. */
+.people-form__section {
+  font-size: var(--fs-card-title);
+  font-weight: 700;
+  color: var(--text);
+}
+
+.people-form__step {
+  font-size: var(--fs-cell);
+  font-weight: 700;
+  color: var(--text2);
+}
+
+.people-form__error {
+  font-size: var(--fs-cell);
+}
+
+/* The step number was `text-primary-button` - the design's FILL token used as
+   ink. On dark that is rgb(75,116,196) on rgb(28,30,36): 3.64:1 against a 4.5
+   floor. `--accent-text` is the foreground half of the same pair. */
+.people-form__stepno {
+  color: var(--accent-text);
+}
 </style>

package/components/PhotoUpload.vue

@@ -1,9 +1,9 @@
 <template>
   <v-row no-gutters class="mb-6">
     <v-col cols="12">
-      <div class="text-subtitle-2 font-weight-bold mb-3">
+      <div class="photo-upload__title mb-3">
         {{ title }}
-        <span v-if="required" class="text-error">*</span>
+        <span v-if="required" class="photo-upload__req">*</span>
       </div>
 
       <v-sheet
@@ -17,13 +17,13 @@
         <v-icon
           :icon="uploading ? 'mdi-loading mdi-spin' : 'mdi-camera-plus-outline'"
           size="56"
-          :color="uploading ? 'grey' : 'primary'"
           class="mb-3"
+          :class="uploading ? 'photo-upload__icon--wait' : 'photo-upload__icon'"
         />
-        <div class="text-body-1 font-weight-medium mb-1">
+        <div class="photo-upload__lead mb-1">
           {{ uploading ? "Uploading Photo..." : "Add Photo" }}
         </div>
-        <div class="text-caption text-medium-emphasis">
+        <div class="photo-upload__hint">
           {{ uploading ? "Please wait" : "Take a photo or upload from device" }}
         </div>
       </v-sheet>
@@ -50,8 +50,8 @@
           icon="mdi-close"
           size="x-small"
           variant="tonal"
-          color="error"
-          class="delete-btn"
+          aria-label="Remove photo"
+          class="delete-btn photo-upload__remove"
           @click.stop="removePhoto(index)"
           style="position: absolute; top: -8px; right: -8px"
         />
@@ -60,11 +60,13 @@
   </v-row>
 
   <v-dialog v-model="showPhotoPreview" max-width="900">
-    <v-card>
+    <v-card class="screen-modal">
       <v-card-actions class="pa-2 justify-end">
         <v-btn
           icon="mdi-close"
           variant="text"
+          class="screen-modal__close"
+          aria-label="Close photo preview"
           @click="showPhotoPreview = false"
         />
       </v-card-actions>
@@ -75,46 +77,47 @@
   </v-dialog>
 
   <v-dialog v-model="photoOptionsDialog" max-width="420">
-    <v-card>
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">Add Photo</span>
+    <v-card class="screen-modal">
+      <!-- `text-h6` is 20px/500 Roboto; the design's modal heading is the
+           `v-card-title` row's own size and weight. -->
+      <v-card-title class="d-flex align-center">
+        Add Photo
         <v-spacer />
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="photoOptionsDialog = false"
         />
       </v-card-title>
 
-      <v-divider />
-
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body">
         <v-list class="pa-0" bg-color="transparent">
           <v-list-item class="rounded-lg mb-2" @click="openCameraFromOptions">
             <template v-slot:prepend>
-              <v-avatar color="primary" variant="tonal" size="48">
-                <v-icon icon="mdi-camera" color="primary" />
+              <v-avatar variant="flat" size="48" class="photo-upload__avatar">
+                <v-icon icon="mdi-camera" />
               </v-avatar>
             </template>
-            <v-list-item-title class="font-weight-medium mb-1">
+            <v-list-item-title class="photo-upload__lead mb-1">
               Take a Photo
             </v-list-item-title>
-            <v-list-item-subtitle class="text-caption">
+            <v-list-item-subtitle class="photo-upload__hint">
               Use device camera to capture an image
             </v-list-item-subtitle>
           </v-list-item>
 
           <v-list-item class="rounded-lg" @click="triggerFileInput">
             <template v-slot:prepend>
-              <v-avatar color="primary" variant="tonal" size="48">
-                <v-icon icon="mdi-upload" color="primary" />
+              <v-avatar variant="flat" size="48" class="photo-upload__avatar">
+                <v-icon icon="mdi-upload" />
               </v-avatar>
             </template>
-            <v-list-item-title class="font-weight-medium mb-1">
+            <v-list-item-title class="photo-upload__lead mb-1">
               Upload a Photo
             </v-list-item-title>
-            <v-list-item-subtitle class="text-caption">
+            <v-list-item-subtitle class="photo-upload__hint">
               Select an image from your device
             </v-list-item-subtitle>
           </v-list-item>
@@ -124,17 +127,22 @@
   </v-dialog>
 
   <v-dialog v-model="showCameraDialog" max-width="720">
-    <v-card>
-      <v-toolbar density="compact">
-        <v-toolbar-title class="text-subtitle-1 font-weight-medium">
-          Camera
-        </v-toolbar-title>
+    <!-- Was a bare `v-toolbar`, which Vuetify paints from its own `surface` -
+         a grey slab across the top of the card, lighter than the card on the
+         dark theme. -->
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Camera
         <v-spacer />
-        <v-btn icon @click="closeCameraDialog">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </v-toolbar>
-      <v-card-text>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          class="screen-modal__close"
+          aria-label="Close camera"
+          @click="closeCameraDialog"
+        />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
         <div class="d-flex flex-column align-center">
           <div style="width: 100%; max-width: 640px">
             <video
@@ -146,33 +154,32 @@
             />
           </div>
           <canvas ref="canvasRef" style="display: none"></canvas>
-          <div class="text-caption grey--text mt-2">
+          <div class="screen-hint mt-2">
             Tip: Allow camera permissions to use this feature.
           </div>
         </div>
       </v-card-text>
-      <v-card-actions>
+      <!-- Was a `v-card-actions` holding a plain text CANCEL and a 56px
+           `color="black"` bar forced to `rounded-0` - black is neither theme's
+           accent and reads as a hole in the dark modal. This is the design's
+           shared modal footer: ghost secondary, then the primary. -->
+      <div class="screen-modal__footer">
         <v-btn
-          text
+          class="text-none screen-btn-ghost"
+          variant="outlined"
           @click="closeCameraDialog"
-          class="text-none font-weight-medium"
         >
-          CANCEL
+          Cancel
         </v-btn>
-        <v-spacer />
         <v-btn
-          block
+          class="text-none screen-btn-primary"
           variant="flat"
-          color="black"
-          class="text-none font-weight-bold rounded-0"
-          height="56"
-          size="large"
           @click="capturePhoto"
         >
           <v-icon class="mr-2">mdi-camera</v-icon>
-          CAPTURE
+          Capture
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 
@@ -393,13 +400,68 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
+/* Was `rgb(var(--v-theme-primary))`, i.e. the design's FOREGROUND token used
+   as a rule and a wash. `--accent-strong` is the accent's fill form, which is
+   what a hover state on a drop zone is. */
 .upload-area {
   &:hover:not(.upload-disabled) {
-    border-color: rgb(var(--v-theme-primary)) !important;
-    background-color: rgba(var(--v-theme-primary), 0.04);
+    border-color: var(--accent-strong) !important;
+    background-color: var(--accent-soft);
   }
 }
 
+/* The section title was `text-subtitle-2 font-weight-bold` and the two leads
+   `text-body-1 font-weight-medium` - Vuetify Roboto at Vuetify's sizes. These
+   take the design's card-title and cell type. */
+.photo-upload__title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+}
+
+.photo-upload__req {
+  color: var(--err);
+}
+
+.photo-upload__lead {
+  font-family: var(--font-sans);
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* Was `text-caption text-medium-emphasis` / `grey--text`, Vuetify's 60% alpha.
+   `--muted` is the design's sub-line and follows the theme. */
+.photo-upload__hint {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* The drop-zone glyph was `color="primary"`, the FOREGROUND token; the
+   accent's ink form is the one held at >= 4.5:1 on the card. */
+.photo-upload__icon {
+  color: var(--accent-text);
+}
+
+.photo-upload__icon--wait {
+  color: var(--muted);
+}
+
+/* The two option tiles were `v-avatar color="primary" variant="tonal"` with a
+   `primary` glyph inside - accent on accent. */
+.photo-upload__avatar {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+}
+
+/* `color="error"` is Vuetify's palette red, not the theme's `--err`. */
+.photo-upload__remove {
+  background: var(--err-bg);
+  color: var(--err);
+}
+
 .upload-disabled {
   cursor: not-allowed !important;
   opacity: 0.6;

package/components/PlaceholderComponent.vue

@@ -1,34 +1,50 @@
+<!--
+  The "page under maintenance" screen — 38 routes across 10 applications.
+
+  What it was: `font-family: Arial` on `color: #333`. Not a token, not the
+  product font, and the same dark grey on the dark page. It was the one screen
+  in the estate that ignored both the theme switch and Manrope.
+
+  DESIGN GAP, STATED: the handoff draws no maintenance / under-construction
+  page at all. So this is assembled from the established primitive rather than
+  invented — `.screen-empty` (`assets/css/screens.css:149`) is the design's
+  centred, muted, 52px-padded empty block, and the heading takes the
+  `--fs-card-title` / `--fw-card-title` type the design uses for every other
+  panel heading (handoff line 133, `font-size:15.5px;font-weight:800`).
+
+  The 🚧 emoji is replaced by the central icon: emoji renders in the OS font,
+  which is neither Manrope nor a colour the theme controls. `mdi-wrench-clock`
+  is translated centrally to Material Symbols `build` — no hand-mapping here.
+-->
 <template>
-  <div class="maintenance-container">
-    <h1>🚧 Page Under Maintenance</h1>
-    <p>
+  <div class="screen-empty placeholder-screen">
+    <v-icon icon="mdi-wrench-clock" size="32" />
+    <h1 class="placeholder-screen__title">Page Under Maintenance</h1>
+    <p class="placeholder-screen__body">
       We're currently working on improving this page to serve you better. Please
       check back soon!
     </p>
-    <p>Thank you for your patience.</p>
+    <p class="placeholder-screen__body">Thank you for your patience.</p>
   </div>
 </template>
 
 <style scoped>
-.maintenance-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+/* The only value kept from the old stylesheet: it is a whole route, so it
+   holds the viewport rather than collapsing to the height of three lines. */
+.placeholder-screen {
   min-height: 50vh;
-  margin: 0;
-  font-family: Arial, sans-serif;
-  color: #333;
 }
 
-h1 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
+.placeholder-screen__title {
+  margin: 0;
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
 }
 
-p {
-  font-size: 1.1rem;
-  line-height: 1.5;
+.placeholder-screen__body {
+  max-width: 42ch;
+  margin: 0;
+  font-weight: var(--fw-cell);
 }
 </style>

package/components/PlanActionsMenu.vue

@@ -1,22 +1,32 @@
 <template>
+  <!-- The per-row kebab and its dropdown. Both were Vuetify defaults: a text
+       icon button with no border, and a plain `v-list` panel at Vuetify's 4px
+       radius with no border at all. The design draws both - the kebab at
+       `iService365 Redesign.dc.html:494`, the dropdown at lines 79-90 - and
+       `.screen-kebab` / `.screen-menu` in `screens.css` carry those values. -->
   <v-menu location="bottom end">
     <template #activator="{ props }">
       <v-btn
         v-bind="props"
         icon="mdi-dots-vertical"
         variant="text"
-        density="comfortable"
+        class="screen-kebab"
       />
     </template>
 
-    <v-list density="compact">
+    <v-list class="screen-menu" density="compact">
       <v-list-item
+        class="screen-menu__item"
         prepend-icon="mdi-pencil-outline"
         title="Edit plan"
         @click="$emit('edit')"
       />
 
+      <!-- Deactivating a plan is the destructive action, so it takes the
+           handoff's destructive row treatment (line 89): `--err` ink over an
+           `--err-bg` hover, not a filled red button. -->
       <v-list-item
+        class="screen-menu__item screen-menu__item--danger"
         prepend-icon="mdi-close-circle-outline"
         title="Deactivate"
         @click="$emit('deactivate')"

package/components/PlanStatusBadge.vue

@@ -1,12 +1,11 @@
 <template>
-  <v-chip
-    :color="isActive ? 'success' : 'grey'"
-    size="small"
-    variant="tonal"
-    class="font-weight-medium"
-  >
-    {{ isActive ? 'Active' : 'Deactive' }}
-  </v-chip>
+  <!--
+    The design's status pill, not Vuetify's tonal chip. The word is passed
+    through so `utils/status.ts` picks the tone: "Active" -> ok, and "Deactive"
+    is not a word the map names, so it comes out neutral - the same two colours
+    the old `success` / `grey` chip drew, now from the shared tokens.
+  -->
+  <StatusChip :status="isActive ? 'Active' : 'Deactive'" />
 </template>
 
 <script setup lang="ts">

package/components/PlateNumberDisplay.vue

@@ -4,13 +4,16 @@
       {{ formatted }}
     </span>
 
-    <v-chip
+    <!--
+      The overflow count is a tag, not a status, so it takes the design's
+      dotless neutral chip rather than Vuetify's default grey one.
+    -->
+    <StatusChip
       v-if="extraCount > 0 && !showAll"
-      density="comfortable"
-      size="small"
-    >
-      + {{ extraCount }}
-    </v-chip>
+      tone="neutral"
+      :dot="false"
+      :label="`+ ${extraCount}`"
+    />
   </div>
 </template>