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

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/Authorities.vue

@@ -2,37 +2,39 @@
   <v-row no-gutters class="px-5 pt-4">
     <!-- Authorities (Police/SCDF/Ambulance called in at the scene) -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="screen-card-title mb-2">
         Authorities (Police/SCDF/Ambulance called in at the scene)?
       </p>
       <p
         v-if="authorities?.authoritiesValue == 'no'"
-        class="mt-2 text-h6 text-capitalize"
+        class="report-answer mt-2 text-capitalize"
       >
         {{ authorities?.authoritiesValue }}
       </p>
 
-      <v-data-table
-        v-else
-        :headers="authoritiesTableHeader"
-        :items="authorities?.authoritiesCalled"
-        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="authoritiesTableHeader"
+          :items="authorities?.authoritiesCalled"
+          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>
-    <div class="w-100 my-8 mx-2">
-      <v-table class="responsive-table border elevation-0">
+    <!-- `w-100` + `mx-2` made the card 16px wider than its column, so its right
+         corner was clipped off. The card supplies its own edge now. -->
+    <AppCard class="table-card w-100 my-8">
+      <v-table class="responsive-table elevation-0">
         <thead>
           <tr>
             <th
               v-for="(item, index) in concernHeader"
               :key="index"
-              class="text-left font-weight-bold text-black border-e"
+              class="text-left border-e"
             >
               {{ item }}
             </th>
@@ -196,10 +198,20 @@
           </tr>
         </tbody>
       </v-table>
-    </div>
+    </AppCard>
   </v-row>
 </template>
 
+<style scoped>
+/* The prototype states no size for a plain answer line, so it takes the body
+   row's own type rather than Vuetify's `text-h6`. */
+.report-answer {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+</style>
+
 <script lang="ts" setup>
 definePageMeta({
   middleware: ["01-auth", "02-org"],

package/components/IncidentReport/IncidentInformation.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters class="px-5 pt-4">
     <!-- Site Information -->
     <v-col cols="12" class="border-b pb-3 mb-5">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Site Information
       </p>
       <v-row no-gutters class="mt-5">
@@ -36,7 +36,7 @@
 
     <!-- Place of Incident -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Place of Incident
       </p>
       <p class="my-1 text-h6 text-capitalize">
@@ -46,7 +46,7 @@
 
     <!-- Incident Type / Time -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Incident Type / Time
       </p>
       <v-row no-gutters class="mt-5">
@@ -106,7 +106,7 @@
 
     <!-- Response/Submission From (1st Contact) -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Response/Submission From (1st Contact)
       </p>
       <v-row no-gutters class="mt-5">
@@ -130,7 +130,7 @@
 
     <!-- Name of Informant/Complainant Information -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Name of Informant/Complainant Information
       </p>
       <v-row no-gutters class="d-flex align-center mt-5">
@@ -146,7 +146,7 @@
             <v-icon
               v-if="incidentInformation?.complaintInfo?.nric"
               size="small"
-              color="blue"
+              color="primary"
               class="cursor-pointer"
               @click="toggleNRICComplainant"
             >
@@ -172,7 +172,7 @@
 
     <!-- Name of Recipient of Complaint (1st Contact) -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Name of Recipient of Complaint (1st Contact)
       </p>
       <v-row no-gutters class="d-flex align-center mt-5">
@@ -188,7 +188,7 @@
             <v-icon
               v-if="incidentInformation?.recipientOfComplaint?.nric"
               size="small"
-              color="blue"
+              color="primary"
               class="cursor-pointer"
               @click="toggleNRICRecipient"
             >
@@ -214,7 +214,7 @@
 
     <!-- Complaint Received through -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Complaint Received through
       </p>
       <v-col cols="12">
@@ -238,7 +238,7 @@
 
     <!-- Brief Description -->
     <v-col cols="12" class="mb-10">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Brief Description
       </p>
       <p class="mt-5 text-h6 text-capitalize">

package/components/IncidentReport/IncidentInformationDownload.vue

@@ -2,15 +2,14 @@
   <v-row no-gutters class="px-5 pt-4">
     <!-- Site Information -->
     <p
-      class="text-uppercase text-center w-100 text-h6"
-      style="background: #aa212a; color: #fff; padding: 10px"
+      class="text-uppercase text-center w-100 text-h6 bg-error text-on-error"
+      style="padding: 10px"
     >
       Incident Report
     </p>
     <v-row no-gutters class="mt-5 border pb-5">
       <p
-        class="w-100 text-h6 pa-2 text-white text-center"
-        style="background: #fcbf49"
+        class="w-100 text-h6 pa-2 text-center bg-warning text-on-warning"
       >
         Incident Information
       </p>

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/Input/Date.vue

@@ -13,6 +13,7 @@
             v-model="month"
             :items="props.months"
             label="Month"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-month'"
             hide-details
@@ -28,6 +29,7 @@
             label="Day"
             hide-details
             placeholder="DD"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-day'"
             :error="!!validationErrMsg"
@@ -42,6 +44,7 @@
             label="Year"
             hide-details
             placeholder="YYYY"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-year'"
             :error="!!validationErrMsg"

package/components/Input/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="d-flex flex-column">
-        <v-text-field v-bind="$attrs" ref="datePickerRef" :model-value="dateFormattedReadOnly" autocomplete="off"
+        <v-text-field v-bind="$attrs" class="filter-field" ref="datePickerRef" :model-value="dateFormattedReadOnly" autocomplete="off"
             :placeholder="placeholder" :rules="rules" style="z-index: 10" @click="openDatePicker" @click:clear.stop="clearDate">
             <template #append-inner>
                 <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
@@ -106,6 +106,5 @@ defineExpose({
 .hidden-input {
     opacity: 0;
     height: 0;
-    width: 1px;
 }
 </style>

package/components/Input/DateTimePicker.vue

@@ -2,6 +2,7 @@
   <div class="d-flex flex-column">
     <v-text-field
       v-bind="$attrs"
+      class="filter-field"
       ref="dateTimePickerRef"
       :model-value="dateTimeFormattedReadOnly"
       autocomplete="off"
@@ -196,6 +197,5 @@ defineExpose({
 .hidden-input {
   opacity: 0;
   height: 0;
-  width: 1px;
 }
 </style>

package/components/Input/File.vue

@@ -11,7 +11,7 @@
         "
       >
         <div
-          class="d-flex align-center justify-center pa-4 rounded-lg border-dashed border border-grey"
+          class="file-drop d-flex align-center justify-center pa-4"
           @dragover.prevent
           @drop="handleDrop"
           style="position: relative; z-index: 1"
@@ -35,12 +35,10 @@
             class="d-flex align-center"
             style="z-index: 1; pointer-events: none"
           >
-            <v-icon size="28" class="mr-2" color="primary"
+            <v-icon size="28" class="file-drop__icon mr-2"
               >mdi-cloud-upload-outline</v-icon
             >
-            <span class="text-body-1 font-weight-medium"
-              >Drag and drop files here</span
-            >
+            <span class="file-drop__hint">Drag and drop files here</span>
           </div>
         </div>
       </v-col>
@@ -55,11 +53,10 @@
         "
       >
         <v-btn
-          color="primary-button"
-          min-width="55"
-          width="55"
-          height="55"
+          class="screen-btn-primary file-camera"
+          variant="flat"
           elevation="0"
+          aria-label="Take a photo"
           @click="selectAttachment"
         >
           <v-icon size="20">mdi-camera-outline</v-icon>
@@ -73,7 +70,7 @@
           v-for="(file, index) in attachments"
           :key="index"
           cols="12"
-          class="d-flex align-center pa-2 mr-2 mb-2 rounded bg-white border-sm"
+          class="file-row d-flex align-center pa-2 mr-2 mb-2"
         >
           <div class="mr-3">
             <!-- <v-img
@@ -108,6 +105,8 @@
 
           <v-icon
             size="small"
+            class="file-row__remove"
+            aria-label="Remove file"
             @click.stop="$emit('delete', file)"
             v-if="
               props.createdFrom === 'feedback' && props.attachments.length > 0
@@ -234,3 +233,49 @@ defineExpose({
   },
 });
 </script>
+
+<style scoped>
+/* The drop zone was `border-dashed border border-grey` with a `primary` glyph -
+   `primary` being the FOREGROUND token, used here as an icon colour, and the
+   grey a fixed light-theme hairline. */
+.file-drop {
+  border: 1px dashed var(--border);
+  border-radius: var(--r-inner);
+  position: relative;
+  z-index: 1;
+}
+
+.file-drop__icon {
+  color: var(--accent-text);
+}
+
+.file-drop__hint {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* Was a 55px square. The design's button is 40px, which is what
+   .screen-btn-primary carries; this only keeps it square. */
+.file-camera {
+  min-width: var(--btn-h) !important;
+  width: var(--btn-h);
+  padding: 0 !important;
+}
+
+/* Each attachment row was `bg-white border-sm` - a hard white slab drawn on the
+   dark theme as well. */
+.file-row {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.file-row__remove {
+  color: var(--err);
+}
+</style>

package/components/Input/FileV2.vue

@@ -22,7 +22,7 @@
     <template v-else>
       <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
         :loading="processing" :disabled="processing" :height="height" :title="title" :accept="accept"
-        :name="`upload_images`" class="text-caption w-100" clearable :multiple="multiple">
+        :name="`upload_images`" class="w-100 file-v2__drop" clearable :multiple="multiple">
         <template #item="{ props: itemProps, file }">
           <v-file-upload-item v-bind="itemProps" lines="one" nav @click="handleClickItem(file)">
             <template #prepend>
@@ -30,8 +30,19 @@
             </template>
 
             <!-- delete button NOT shown in view mode -->
-            <template #clear="{ props: clearProps }">
-              <v-btn v-if="!viewMode" color="primary" @click.stop="handleRemove(file)"></v-btn>
+            <!-- This button had NO icon and NO label, so it drew as an empty
+                 slab, and `color="primary"` filled that slab with the design's
+                 FOREGROUND token (the link ink) rather than a fill. It is the
+                 remove control for one attached file: a plain close glyph. -->
+            <template #clear>
+              <v-btn
+                v-if="!viewMode"
+                icon="mdi-close"
+                variant="text"
+                size="small"
+                aria-label="Remove file"
+                @click.stop="handleRemove(file)"
+              />
             </template>
           </v-file-upload-item>
         </template>
@@ -39,7 +50,7 @@
     </template>
 
     <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 file-v2__error">{{ errorMessage }}</p>
     </v-row>
 
     <ImageCarousel v-model="showImageCarousel" :files="idsArray" :active-file-id="activeImageId" />
@@ -224,12 +235,34 @@ async function downloadFile(id: string, filename: string) {
 
 
 <style scoped>
+/* The drop zone on the design's surface: `--r-inner`, a `--border` edge and the
+   13.5px cell type, instead of Vuetify's 4px radius and `text-caption` scale.
+   `:deep` because every box below is rendered by `v-file-upload`. */
+.file-v2__drop {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  border-radius: var(--r-inner);
+  border-color: var(--border);
+}
+
+.file-v2__drop :deep(.v-file-upload-item) {
+  border-radius: var(--r-inner);
+}
+
 * :deep(.v-file-upload-title) {
-  font-size: 1rem;
-  font-weight: 500;
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
 }
 
 * :deep(.v-file-upload-items) {
   min-width: 100%;
 }
+
+.file-v2__error {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
 </style>