@7365admin1/layer-common 3.2.2-staging.110 → 3.2.2-staging.112

package/assets/css/primitives.css

@@ -286,13 +286,16 @@
   filter: none;
 }
 
+/* The design draws the ghost at the SAME size as the primary it stands next to
+   - Bulk Upload beside Add Unit, Scan QR Code beside Add Visitor are both
+     `height:40px; padding:0 16px; font-size:13.5px`, and only the fill, the
+   border and the weight differ. 38px / 0 14px / 13px was a smaller button than
+   the handoff asks for, and the 2px mismatch shows on every screen that draws
+   the pair. Height, padding and type therefore come from `.app-btn`. */
 .app-btn--ghost {
-  height: 38px;
-  padding: 0 14px;
   border: 1px solid var(--border);
   background: var(--card);
   color: var(--text2);
-  font-size: var(--fs-nav);
   font-weight: var(--fw-btn);
 }
 

package/assets/css/screens.css

@@ -242,9 +242,94 @@
   font-size: var(--fs-cell);
 }
 
-/* The design's two buttons, for the dialogs and toolbars that draw their own. */
-.screen-btn-primary {
-  height: var(--btn-h);
+/**
+ * ...and the same size again, because inside a real dialog the rule above
+ * never reached the glass. Vuetify scopes
+ *
+ *   .v-dialog > .v-overlay__content > .v-card > .v-card-text { font-size: inherit }
+ *
+ * which is a FOUR-class chain against our one, so a `.screen-modal__body` in a
+ * `v-dialog` inherited the root 16px instead of the design's 13.5px --fs-cell.
+ * Measured on `AccessCardDeleteDialog`: 16px/400 where --fs-cell is 13.5px.
+ * It is invisible in a harness that mounts the card WITHOUT its dialog, which
+ * is how it survived. Naming the same chain plus the card's own class wins it
+ * back on specificity alone - no `!important`, same technique as the button
+ * height fix.
+ */
+.v-dialog > .v-overlay__content > .v-card.screen-modal > .screen-modal__body {
+  font-size: var(--fs-cell);
+}
+
+/**
+ * The design's modal footer, literal from the prototype's Create Role dialog:
+ *
+ *   <div style="display:flex;gap:10px;padding:16px 22px;
+ *               border-top:1px solid var(--border)">
+ *     <button style="flex:1; ...ghost">Cancel</button>
+ *     <button style="flex:1; ...primary">Submit</button>
+ *
+ * Two EQUAL-WIDTH buttons on a bordered strip, ghost first. Stated once
+ * because the product opens confirm dialogs from a couple of dozen components
+ * and each of them was drawing its own footer by hand.
+ */
+.screen-modal__footer {
+  display: flex;
+  gap: 10px;
+  padding: 16px 22px;
+  border-top: 1px solid var(--border);
+}
+
+.screen-modal__footer > .v-btn,
+.screen-modal__footer > .app-btn {
+  flex: 1;
+}
+
+/**
+ * The modal's close control, literal from the same Create Role dialog:
+ *
+ *   <button style="display:flex;align-items:center;justify-content:center;
+ *                  width:32px;height:32px;border:none;border-radius:8px;
+ *                  background:transparent;color:var(--muted);"
+ *           style-hover="background:var(--hover)">close</button>
+ *
+ * Borderless and 32px square - NOT `.screen-icon-btn`, which is the bordered
+ * 40px square the design draws in a toolbar. The glyph is 19px.
+ */
+.screen-modal__close {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.screen-modal__close:hover {
+  background: var(--hover);
+}
+
+.screen-modal__close .v-icon {
+  font-size: 19px;
+}
+
+/**
+ * The design's two buttons, for the dialogs and toolbars that draw their own.
+ *
+ * `.v-btn` is named on every selector below for SPECIFICITY, not decoration.
+ * Vuetify sizes its button from `--v-btn-height` (36px, set on
+ * `.v-btn--size-default`) and applies it at `.v-btn.v-btn--density-default` -
+ * two classes, which outrank a bare `.screen-btn-*`. So `height: var(--btn-h)`
+ * never reached the glass and EVERY one of these buttons drew at 36px against
+ * the design's 40. `min-width` lost the same argument at 64px.
+ *
+ * Beaten by specificity, not `!important` - the same way the central font
+ * re-point beat Vuetify's own font declarations. And the fix FEEDS
+ * `--v-btn-height` rather than overwriting `height`, so Vuetify's density
+ * arithmetic (including the icon button's `+12px`) keeps working off our number.
+ */
+.v-btn.screen-btn-primary {
+  --v-btn-height: var(--btn-h);
+  min-width: 0;
   border-radius: var(--r-inner);
   padding: 0 16px;
   font-family: var(--font-sans);
@@ -269,10 +354,12 @@
  * the input next to it - the same button Phase 2 gave the top bar - not a
  * tinted pill.
  */
-.screen-icon-btn {
+.v-btn.screen-icon-btn {
+  --v-btn-height: var(--btn-h);
   height: var(--btn-h);
   width: var(--btn-h);
   min-width: var(--btn-h);
+  padding: 0;
   border-radius: var(--r-inner);
   border: 1px solid var(--border);
   background: var(--card);
@@ -283,8 +370,9 @@
   opacity: 0;
 }
 
-.screen-btn-ghost {
-  height: var(--btn-h);
+.v-btn.screen-btn-ghost {
+  --v-btn-height: var(--btn-h);
+  min-width: 0;
   border-radius: var(--r-inner);
   padding: 0 16px;
   font-family: var(--font-sans);

package/components/AccessCardDeleteDialog.vue

@@ -1,20 +1,28 @@
 <template>
-  <v-dialog :model-value="modelValue" width="450" persistent>
-    <v-card width="100%">
-      <v-toolbar density="compact" class="pl-4">
-        <span class="font-weight-medium text-h5">Delete Card</span>
-      </v-toolbar>
+  <!-- 520px is the handoff's `--modal-w`; the card wears `.screen-modal` for
+       the 16px corner, the `--card` surface and the modal shadow. The two
+       `v-toolbar`s it used for the title row and the footer were grey slabs
+       that stay grey on the dark theme - a `v-card-title` and the shared
+       `.screen-modal__footer` are the same rows on the card's own surface. -->
+  <v-dialog :model-value="modelValue" width="520" persistent>
+    <v-card class="screen-modal" width="100%">
+      <v-card-title>Delete Card</v-card-title>
 
-      <v-card-text>
-        <p class="text-subtitle-2 text-center mb-4">
+      <v-card-text class="screen-modal__body">
+        <p class="text-center mb-4">
           Are you sure you want to delete this card? This action cannot be
           undone.
         </p>
 
         <v-form v-model="validForm" :disabled="loading">
           <InputLabel class="text-capitalize font-weight-bold" title="Remarks" required />
+          <!-- Still a `v-textarea`, not an `AppField`: Delete Card is gated on
+               `validForm`, which only exists because this `:rules` runs.
+               `.filter-field` gives it the design's 10px corner and 13.5px
+               type without taking the validation away. -->
           <v-textarea
             v-model="remarks"
+            class="filter-field"
             placeholder="Enter remarks..."
             persistent-placeholder
             rows="3"
@@ -29,38 +37,32 @@
         </v-row>
       </v-card-text>
 
-      <v-toolbar density="compact">
-        <v-row no-gutters>
-          <v-col cols="6">
-            <v-btn
-              tile
-              block
-              size="48"
-              variant="text"
-              class="text-none"
-              :disabled="loading"
-              @click="handleClose"
-            >
-              Close
-            </v-btn>
-          </v-col>
-          <v-col cols="6">
-            <v-btn
-              tile
-              block
-              size="48"
-              color="black"
-              variant="flat"
-              class="text-none"
-              :loading="loading"
-              :disabled="!validForm || loading"
-              @click="handleConfirm"
-            >
-              Delete Card
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <!-- The design's footer: two equal-width buttons, ghost then primary, on
+           a bordered strip. The confirming button was a hardcoded color="black"
+           fill - the same black on both themes. The handoff draws no
+           destructive button, so it takes the primary shape like every other
+           modal's confirm; the destructive-variant gap stays a design
+           decision. `loading` keeps it a v-btn: AppButton has no in-flight
+           state, and this is the only signal the delete is running. -->
+      <div class="screen-modal__footer">
+        <v-btn
+          variant="outlined"
+          class="screen-btn-ghost"
+          :disabled="loading"
+          @click="handleClose"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          variant="flat"
+          class="screen-btn-primary"
+          :loading="loading"
+          :disabled="!validForm || loading"
+          @click="handleConfirm"
+        >
+          Delete Card
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>

package/components/AppButton.vue

@@ -9,7 +9,8 @@
 
   Variants, straight from the handoff:
     primary  40px pill-radius accent fill, 13.5px/800, white label
-    ghost    38px, 1px border, card fill, 13px/700 in `--text2`
+    ghost    40px, 1px border, card fill, 13.5px/700 in `--text2` - the SAME
+             box as primary; the handoff differs only in fill, border and weight
     icon     32px transparent square, 8px radius
     row      30px bordered square - the `more_vert` at the end of a table row
 -->

package/components/AttendanceDetailsDialog.vue

@@ -4,16 +4,14 @@
     :max-width="attendance?.checkOut?.timestamp ? 900 : 500"
     persistent
   >
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize"
-            >Attendance Details</span
-          >
-        </v-row>
-      </v-toolbar>
+    <!-- The card wears `.screen-modal` (16px corner, `--card`, the modal
+         shadow). The `v-toolbar` that stood in for the title row and the one
+         that stood in for the footer were both fixed grey slabs that stay grey
+         on the dark theme. -->
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">Attendance Details</v-card-title>
 
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body pa-6">
         <v-row v-if="attendance" dense>
           <v-col :cols="attendance.checkOut?.timestamp ? 6 : 12">
             <v-row dense>
@@ -21,14 +19,14 @@
                 <InputLabel title="Check In" />
               </v-col>
               <v-col cols="12" class="mb-1">
-                <span class="text-body-1">{{
+                <span class="att-dlg__time">{{
                   attendance.checkIn?.timestamp
                     ? formatDate(attendance.checkIn.timestamp)
                     : "N/A"
                 }}</span>
               </v-col>
               <v-col cols="12" class="mb-2">
-                <span class="text-caption text-medium-emphasis">
+                <span class="screen-hint att-dlg__meta">
                   {{
                     attendance.checkIn?.location?.latitude &&
                     attendance.checkIn?.location?.longitude
@@ -38,29 +36,21 @@
                 </span>
               </v-col>
               <v-col cols="12">
-                <v-card
-                  v-if="attendance.checkIn?.img"
-                  variant="outlined"
-                  class="pa-0"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12)"
-                >
+                <!-- Was an inline `border: 1px solid rgba(0,0,0,.12)` - a
+                     literal black rule that is the same black on the dark
+                     theme. `--border` is that rule in each theme, and the
+                     frame takes the design's inner radius. -->
+                <div v-if="attendance.checkIn?.img" class="att-dlg__frame">
                   <v-img
                     :src="getFileUrl(attendance.checkIn.img)"
                     height="280"
                     width="100%"
                     cover
                   ></v-img>
-                </v-card>
-                <v-card
-                  v-else
-                  variant="outlined"
-                  class="pa-8 text-center"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12); height: 280px"
-                >
-                  <span class="text-caption text-medium-emphasis"
-                    >No image</span
-                  >
-                </v-card>
+                </div>
+                <div class="att-dlg__frame att-dlg__frame--empty pa-8 text-center" v-else>
+                  <span class="screen-hint att-dlg__meta">No image</span>
+                </div>
               </v-col>
             </v-row>
           </v-col>
@@ -71,12 +61,12 @@
                 <InputLabel title="Check Out" />
               </v-col>
               <v-col cols="12" class="mb-1">
-                <span class="text-body-1">{{
+                <span class="att-dlg__time">{{
                   formatDate(attendance.checkOut.timestamp)
                 }}</span>
               </v-col>
               <v-col cols="12" class="mb-2">
-                <span class="text-caption text-medium-emphasis">
+                <span class="screen-hint att-dlg__meta">
                   {{
                     attendance.checkOut?.location?.latitude &&
                     attendance.checkOut?.location?.longitude
@@ -86,29 +76,17 @@
                 </span>
               </v-col>
               <v-col cols="12">
-                <v-card
-                  v-if="attendance.checkOut?.img"
-                  variant="outlined"
-                  class="pa-0"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12)"
-                >
+                <div v-if="attendance.checkOut?.img" class="att-dlg__frame">
                   <v-img
                     :src="getFileUrl(attendance.checkOut.img)"
                     height="280"
                     width="100%"
                     cover
                   ></v-img>
-                </v-card>
-                <v-card
-                  v-else
-                  variant="outlined"
-                  class="pa-8 text-center"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12); height: 280px"
-                >
-                  <span class="text-caption text-medium-emphasis"
-                    >No image</span
-                  >
-                </v-card>
+                </div>
+                <div class="att-dlg__frame att-dlg__frame--empty pa-8 text-center" v-else>
+                  <span class="screen-hint att-dlg__meta">No image</span>
+                </div>
               </v-col>
             </v-row>
           </v-col>
@@ -121,22 +99,11 @@
         </v-row>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="12" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="close"
-              height="48"
-            >
-              Close
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="close">
+          Close
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -183,3 +150,30 @@ watch(showDialog, (newVal) => {
   }
 });
 </script>
+
+<style scoped>
+/* `text-body-1` was 1rem/400 and `text-caption text-medium-emphasis` was
+   0.75rem on Vuetify's 60%-alpha ink. The handoff names no type for a
+   label/value detail row, so both take the established cell and hint. */
+.att-dlg__time {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
+
+.att-dlg__meta {
+  font-size: var(--fs-breadcrumb);
+}
+
+.att-dlg__frame {
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  overflow: hidden;
+}
+
+.att-dlg__frame--empty {
+  height: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/components/ConfirmDialog.vue

@@ -1,36 +1,42 @@
 <template>
-  <v-dialog v-model="dialog" max-width="400" persistent>
-    <v-card class="rounded-xl pa-6" elevation="2">
+  <!-- 520px is the handoff's `--modal-w`; the card was `rounded-xl` (24px) on a
+       Material elevation, where the design draws a 16px corner and its own
+       modal shadow. -->
+  <v-dialog v-model="dialog" max-width="520" persistent>
+    <v-card class="screen-modal pa-6">
       <!-- Close Button -->
       <v-btn
         icon
         variant="text"
         size="small"
-        class="position-absolute"
+        class="screen-modal__close position-absolute"
         style="top: 8px; right: 8px"
         @click="closeDialog"
       >
         <v-icon>mdi-close</v-icon>
       </v-btn>
 
-      <v-card-text class="text-center">
+      <v-card-text class="screen-modal__body text-center">
         <v-row v-if="imageSrc" justify="center" class="py-10">
           <v-img height="120" :src="imageSrc" alt="Dialog Image" contain />
         </v-row>
 
-        <!-- Title Slot -->
-        <div class="text-h6 font-weight-medium mb-2">
+        <!-- Title Slot. The handoff's 17px/800 modal title belongs to a
+             bordered header row this dialog does not draw - a centred title
+             inside the body is a case it is silent on, so it takes the
+             established `.screen-card-title` primitive. -->
+        <div class="screen-card-title mb-2">
           <slot name="title"></slot>
         </div>
 
         <!-- Description Slot -->
-        <div class="text-body-1 mb-4">
+        <div class="mb-4">
           <slot name="description"></slot>
         </div>
       </v-card-text>
 
       <!-- Footer Slot -->
-      <v-card-actions>
+      <v-card-actions class="screen-modal__footer">
         <slot name="footer"></slot>
       </v-card-actions>
     </v-card>

package/components/Dialog/ReplaceAutofillPrompt.vue

@@ -1,32 +1,25 @@
 <template>
-    <v-card width="100%" :disabled="loading" :loading="loading">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
-            <v-row no-gutters>
-                <v-col cols="12" class="font-weight-bold text-h6">{{ promptTitle }}</v-col>
-                <v-col cols="12" class="mt-5">
-                    <span>
-                        By proceeding, your previous user inputs will be replaced.
-                    </span>
-                </v-col>
-            </v-row>
+    <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
+            <span class="screen-card-title d-block">{{ promptTitle }}</span>
+
+            <span class="d-block mt-5">
+                By proceeding, your previous user inputs will be replaced.
+            </span>
         </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" tile @click="emit('close')" height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. Replaces the `v-toolbar` of two square 48px
+             tiles, whose Proceed was a hardcoded `color="black"` fill. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
+                Cancel
+            </v-btn>
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
-                        @click="emit('proceed')">
-                        Proceed
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+            <v-btn class="screen-btn-primary" variant="flat" @click="emit('proceed')">
+                Proceed
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -46,4 +39,4 @@ const emit = defineEmits(["close", "proceed"])
 
 </script>
 
-<style scoped></style>
+<style scoped></style>

package/components/Dialog/ReusablePrompt.vue

@@ -1,34 +1,35 @@
 <template>
-    <v-card width="100%" :disabled="loading" :loading="loading">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
-            <v-row no-gutters>
-                <v-col cols="12" class="text-h6 font-weight-bold">
-                    <span class=""> {{ promptTitle }}</span>
-                </v-col>
-                <v-col v-if="message" cols="12" class="mt-5">
-                    <span  >
-                        {{ message }}
-                    </span>
-                </v-col>
-            </v-row>
+    <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
+            <span class="screen-card-title d-block">{{ promptTitle }}</span>
+
+            <span v-if="message" class="d-block mt-5">
+                {{ message }}
+            </span>
         </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" tile @click="emit('close')" height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
+                Cancel
+            </v-btn>
+
+            <!-- The old default was a hardcoded `color="black"` fill, which is
+                 the same black on the dark theme as on the light one. With no
+                 colour asked for, the confirming action now takes the design's
+                 primary shape like every other modal's Submit.
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48"
-                        :color="confirmButtonColor" @click="emit('proceed')">
-                        {{ confirmLabel }}
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+                 A caller that DOES name a colour keeps it: `NumberSettingField`
+                 passes `red` to mark a destructive confirm, and the handoff
+                 draws no destructive button, so overriding it here would be
+                 inventing a control the design never named. Left as it renders
+                 today and raised for a design decision. -->
+            <v-btn :class="confirmButtonColor ? 'text-none' : 'screen-btn-primary'"
+                variant="flat" :color="confirmButtonColor || undefined" @click="emit('proceed')">
+                {{ confirmLabel }}
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -52,7 +53,7 @@ const props = defineProps({
     },
     confirmButtonColor: {
         type: String,
-        default: "black"
+        default: ""
     }
 
 })
@@ -61,4 +62,4 @@ const emit = defineEmits(["close", "proceed"])
 
 </script>
 
-<style scoped></style>
+<style scoped></style>