@7365admin1/layer-common 3.2.2-staging.158 → 3.2.2-staging.160

package/components/ClientDetailForm.vue

@@ -85,7 +85,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -107,7 +107,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -132,7 +132,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -150,7 +150,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -175,7 +175,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -200,13 +200,13 @@
                 width="14"
                 height="12"
                 rx="2"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
               />
-              <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3" />
+              <path d="M1 7h14" stroke="currentColor" stroke-width="1.3" />
               <path
                 d="M5 1v3M11 1v3"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
                 stroke-linecap="round"
               />
@@ -224,13 +224,13 @@
                 width="14"
                 height="12"
                 rx="2"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
               />
-              <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3" />
+              <path d="M1 7h14" stroke="currentColor" stroke-width="1.3" />
               <path
                 d="M5 1v3M11 1v3"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
                 stroke-linecap="round"
               />
@@ -581,12 +581,12 @@ watch(
 }
 
 .form-wrap {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: var(--font-sans);
   font-size: 14px;
-  color: #111827;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
+  color: var(--text);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
   padding: 24px 28px 32px;
 }
 
@@ -596,17 +596,17 @@ watch(
   align-items: flex-start;
   justify-content: space-between;
   padding-bottom: 18px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--border);
   margin-bottom: 22px;
 }
 .header h2 {
   font-size: 20px;
   font-weight: 700;
-  color: #111827;
+  color: var(--text);
 }
 .header p {
   font-size: 13px;
-  color: #2563eb;
+  color: var(--accent-text);
   margin-top: 2px;
 }
 .actions {
@@ -618,7 +618,7 @@ watch(
 .btn-cancel,
 .btn-submit {
   border: none;
-  border-radius: 20px;
+  border-radius: var(--r-pill);
   padding: 9px 22px;
   font-size: 13px;
   font-weight: 600;
@@ -626,15 +626,18 @@ watch(
   transition: opacity 0.15s;
 }
 .btn-cancel {
-  background: #e5e7eb;
-  color: #374151;
+  background: var(--border);
+  color: var(--text2);
 }
 .btn-cancel:hover {
   opacity: 0.85;
 }
+/* `.btn-submit` was an exact copy of `.btn-cancel` - same grey fill, same ink -
+   so the form's primary action was indistinguishable from the one that throws
+   the edit away. It takes the design's accent fill and its white-safe pair. */
 .btn-submit {
-  background: #e5e7eb;
-  color: #374151;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
 }
 .btn-submit:hover {
   opacity: 0.85;
@@ -647,7 +650,7 @@ watch(
 .section h3 {
   font-size: 15px;
   font-weight: 700;
-  color: #111827;
+  color: var(--text);
   margin-bottom: 14px;
 }
 
@@ -669,29 +672,29 @@ watch(
 }
 .field label {
   font-size: 12px;
-  color: #6b7280;
+  color: var(--text2);
 }
 
 .field input[type='text'],
 .field input[type='email'] {
   height: 38px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   padding: 0 12px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   outline: none;
 }
 .field input:focus {
-  border-color: #9ca3af;
+  border-color: var(--muted);
 }
 .field input::placeholder {
-  color: #9ca3af;
+  color: var(--muted);
 }
 .field input:disabled {
-  background: #f9fafb;
-  color: #6b7280;
+  background: var(--bg);
+  color: var(--text2);
 }
 
 /* ===== SELECT ===== */
@@ -701,18 +704,18 @@ watch(
 .select-wrap select {
   width: 100%;
   height: 38px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   padding: 0 30px 0 12px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   appearance: none;
   cursor: pointer;
   outline: none;
 }
 .select-wrap select:focus {
-  border-color: #9ca3af;
+  border-color: var(--muted);
 }
 .select-wrap .chevron {
   position: absolute;
@@ -733,12 +736,12 @@ watch(
 .date-input input {
   width: 100%;
   height: 38px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   padding: 0 34px 0 12px;
   font-size: 13px;
-  color: #6b7280;
-  background: #f9fafb;
+  color: var(--text2);
+  background: var(--bg);
   outline: none;
 }
 .date-input svg {
@@ -750,7 +753,7 @@ watch(
 /* ===== HINT ===== */
 .hint {
   font-size: 11px;
-  color: #9ca3af;
+  color: var(--text2);
   line-height: 1.4;
 }
 .hint-below {
@@ -766,13 +769,13 @@ watch(
 }
 .app-list li {
   font-size: 13px;
-  color: #374151;
+  color: var(--text2);
 }
 
 /* ===== SITE TABLE ===== */
 .site-table {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   overflow: hidden;
 }
 .site-table table {
@@ -784,12 +787,12 @@ watch(
   padding: 10px 16px;
   text-align: left;
   font-weight: 600;
-  color: #374151;
-  background: #f9fafb;
-  border-bottom: 1px solid #e5e7eb;
+  color: var(--text2);
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
 }
 .site-table tbody tr {
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid var(--border);
 }
 .site-table tbody tr:last-child {
   border-bottom: none;
@@ -799,14 +802,14 @@ watch(
 }
 .site-table .td-name {
   font-weight: 500;
-  color: #111827;
+  color: var(--text);
 }
 .site-table .td-muted {
-  color: #6b7280;
+  color: var(--text2);
 }
 .site-table .empty {
   text-align: center;
-  color: #9ca3af;
+  color: var(--text2);
   padding: 24px 0 !important;
 }
 .phone-input {
@@ -816,7 +819,7 @@ watch(
 
 .phone-input .prefix {
   width: 80px;
-  background: #f3f4f6;
+  background: var(--bg);
 }
 
 .phone-input .number {
@@ -826,6 +829,28 @@ watch(
 .error {
   margin-top: 4px;
   font-size: 12px;
-  color: #ef4444;
+  color: var(--err);
+}
+
+/*
+ * MEASURED at 360: the form overflowed the viewport by 147px in both themes.
+ * Its two-column grid, its 28px side padding and its header row are all fixed,
+ * and the component carries no media query at all - so on a phone the right
+ * column, the Submit button and half the site table sat off screen. One
+ * breakpoint, matching the shell's own mobile padding.
+ */
+@media (max-width: 600px) {
+  .form-wrap {
+    padding: 16px 14px 22px;
+  }
+
+  .row {
+    grid-template-columns: 1fr;
+  }
+
+  .header {
+    flex-direction: column;
+    gap: 12px;
+  }
 }
 </style>

package/components/EntryPassInformation.vue

@@ -60,8 +60,8 @@
         </v-alert>
         <template v-else>
           <!-- Generating / loading state -->
-          <div v-if="generating || cardsLoading" class="d-flex align-center ga-2 mt-3 text-caption text-grey-darken-1">
-            <v-progress-circular size="14" width="2" indeterminate color="grey" />
+          <div v-if="generating || cardsLoading" class="d-flex align-center ga-2 mt-3 text-caption text-fontgray">
+            <v-progress-circular size="14" width="2" indeterminate />
             <span>{{ generating ? 'Generating QR passes...' : 'Checking availability...' }}</span>
           </div>
           <!-- 0 available after all loading -->
@@ -79,7 +79,7 @@
           <template v-else>
             <div class="d-flex align-center justify-space-between mt-3">
               <InputLabel title="Quantity" />
-              <span v-if="availableCount !== null" class="text-caption text-grey">
+              <span v-if="availableCount !== null" class="text-caption text-fontgray">
                 {{ availableCount }} available
               </span>
             </div>
@@ -133,6 +133,7 @@
               :color="isBarcodeScanningActive ? 'success' : 'primary'"
               variant="outlined"
               block
+              class="text-none"
               prepend-icon="mdi-barcode-scan"
               @click="toggleBarcodeScanning"
             >
@@ -145,6 +146,7 @@
               variant="outlined"
               color="primary"
               block
+              class="text-none"
               prepend-icon="mdi-camera"
               @click="openCameraDialog"
             >
@@ -224,11 +226,11 @@
       @after-leave="stopCamera"
     >
       <v-container class="d-flex justify-center" style="max-height: 90vh">
-        <v-card elevation="2" class="d-flex flex-column align-center pa-2 w-100">
+        <v-card class="screen-modal d-flex flex-column align-center pa-2 w-100">
           <v-toolbar color="transparent">
-            <v-card-title class="text-h5">Scan Card</v-card-title>
+            <v-card-title>Scan Card</v-card-title>
             <v-spacer />
-            <v-btn icon="mdi-close" color="grey-darken-1" @click="closeCameraDialog" />
+            <v-btn icon="mdi-close" class="screen-modal__close" @click="closeCameraDialog" />
           </v-toolbar>
 
           <div class="position-relative w-100" style="aspect-ratio: 4/3; background: #000">

package/components/HidReaderForm.vue

@@ -1,12 +1,12 @@
 <template>
   <v-dialog v-model="dialogModel" max-width="430" persistent>
-    <v-card class="hid-reader-form" rounded="lg">
+    <v-card class="hid-reader-form screen-modal">
       <v-card-title class="form-title">
         {{ mode === "edit" ? "Edit Reader" : "Add Reader" }}
       </v-card-title>
 
-      <v-card-text class="form-body">
-        <div class="field-label">HID Reader Name <span>*</span></div>
+      <v-card-text class="form-body screen-modal__body">
+        <InputLabel title="HID Reader Name" required class="mb-1" />
         <v-text-field
           v-model="draft.name"
           aria-label="HID Reader Name"
@@ -17,7 +17,7 @@
           class="mb-3"
         />
 
-        <div class="field-label">Base URL / IP address <span>*</span></div>
+        <InputLabel title="Base URL / IP address" required class="mb-1" />
         <v-text-field
           v-model="draft.baseUrl"
           aria-label="Base URL / IP address"
@@ -28,7 +28,7 @@
           class="mb-3"
         />
 
-        <div class="field-label">Location <span>*</span></div>
+        <InputLabel title="Location" required class="mb-1" />
         <v-text-field
           v-model="draft.location"
           aria-label="Location"
@@ -39,13 +39,13 @@
           class="mb-3"
         />
 
-        <div class="field-label">Monitor Path <span>*</span></div>
+        <InputLabel title="Monitor Path" required class="mb-1" />
         <v-btn-toggle v-model="monitorEnabled" mandatory divided class="monitor-toggle mb-3">
           <v-btn :value="true" class="text-none">Enable</v-btn>
           <v-btn :value="false" class="text-none">Disable</v-btn>
         </v-btn-toggle>
 
-        <div class="field-label">Username <span>*</span></div>
+        <InputLabel title="Username" required class="mb-1" />
         <v-text-field
           v-model="draft.username"
           aria-label="Username"
@@ -56,7 +56,7 @@
           class="mb-3"
         />
 
-        <div class="field-label">Confirm Password <span>*</span></div>
+        <InputLabel title="Confirm Password" required class="mb-1" />
         <v-text-field
           v-model="draft.password"
           :type="showPassword ? 'text' : 'password'"
@@ -86,7 +86,7 @@
           {{ discoveryError }}
         </v-alert>
 
-        <div class="field-label mt-3">Device ID <span>*</span></div>
+        <InputLabel title="Device ID" required class="mt-3 mb-1" />
         <v-text-field
           v-model="draft.deviceId"
           aria-label="Device ID"
@@ -98,7 +98,7 @@
           readonly
         />
 
-        <div class="field-label">HID Portal <span>*</span></div>
+        <InputLabel title="HID Portal" required class="mb-1" />
         <v-select
           v-model="draft.portalId"
           :items="portals"
@@ -113,19 +113,17 @@
         />
       </v-card-text>
 
-      <v-card-actions class="form-actions pa-0">
+      <v-card-actions class="screen-modal__footer">
         <v-btn
-          class="text-none action-cancel"
+          class="text-none screen-btn-ghost"
           variant="flat"
-          height="48"
           @click="close"
         >
           Cancel
         </v-btn>
         <v-btn
-          class="text-none action-submit"
+          class="text-none screen-btn-primary"
           variant="flat"
-          height="48"
           :loading="loading"
           :disabled="mode === 'add' && (!draft.deviceId || !draft.portalId)"
           @click="submit"
@@ -290,28 +288,18 @@ function submit() {
   overflow: hidden;
 }
 
+/* Type comes from `.screen-modal .v-card-title`; only the header strip's own
+   padding and rule stay here. `#ececec` was a fixed near-white line, i.e.
+   invisible on a light card and a bright scratch across a dark one. */
 .form-title {
-  font-size: 14px;
-  font-weight: 700;
   padding: 12px 16px;
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid var(--border);
 }
 
 .form-body {
   padding: 18px 16px 20px;
 }
 
-.field-label {
-  color: #4f5a66;
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.field-label span {
-  color: #e53935;
-}
-
 .monitor-toggle {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -322,32 +310,11 @@ function submit() {
   height: 36px;
 }
 
-.form-actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.action-cancel {
-  background: #ffffff;
-  color: #111827;
-  border-radius: 0;
-}
-
-.action-submit {
-  background: #062d42;
-  color: #ffffff;
-  border-radius: 0;
-}
-
 @media (max-width: 600px) {
   .form-body {
     padding: 14px 12px 16px;
   }
 
-  .form-actions {
-    grid-template-columns: 1fr;
-  }
-
   :global(.v-dialog > .v-overlay__content) {
     max-width: calc(100vw - 24px) !important;
     margin: 12px !important;

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">