@7365admin1/layer-common 3.2.2-staging.155 → 3.2.2-staging.157

package/components/Facility/BookingSetup.vue

@@ -79,7 +79,7 @@
           <p class="flex-grow-1">Booking Fee</p>
           <v-switch
             v-model="facility.isBookingFeeEnabled"
-            color="success"
+            color="accent"
             hide-details
             @update:modelValue="onChangeIsBookingFeeEnabled"
           ></v-switch>
@@ -139,7 +139,7 @@
             />
           </v-col>
           <v-col cols="12" class="mt-4">
-            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
+            <v-card class="mx-auto border-sm pa-2 fee-summary" tile>
               <v-row no-gutters align="center">
                 <v-col cols="" class="text-caption"> Total Booking Fee </v-col>
                 <v-col cols="" class="text-right text-caption">
@@ -169,7 +169,7 @@
             </v-card>
           </v-col>
           <v-col cols="12" class="mt-4">
-            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
+            <v-card class="mx-auto border-sm pa-2 fee-summary" tile>
               <v-row no-gutters align="center">
                 <v-col class="text-caption"> Peak Total Booking Fee </v-col>
                 <v-col class="text-right text-caption">
@@ -210,7 +210,7 @@
           <p class="flex-grow-1">Guest</p>
           <v-switch
             v-model="facility.isGuestEnabled"
-            color="success"
+            color="accent"
             hide-details
             :disabled="!facility.isBookingFeeEnabled"
           />
@@ -256,7 +256,7 @@
             />
           </v-col>
           <v-col cols="12" class="mt-4">
-            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
+            <v-card class="mx-auto border-sm pa-2 fee-summary" tile>
               <v-row no-gutters align="center">
                 <v-col class="text-caption">
                   Total Booking Fee for Guest
@@ -288,7 +288,7 @@
             </v-card>
           </v-col>
           <v-col cols="12" class="mt-4">
-            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
+            <v-card class="mx-auto border-sm pa-2 fee-summary" tile>
               <v-row no-gutters align="center">
                 <v-col class="text-caption">
                   Peak Total Booking Fee for Guest
@@ -332,7 +332,7 @@
           <p class="flex-grow-1">Deposit</p>
           <v-switch
             v-model="facility.isDepositEnabled"
-            color="success"
+            color="accent"
             hide-details
             @update:modelValue="onChangeIsDepositFeeEnabled"
           ></v-switch>
@@ -366,7 +366,7 @@
           <p class="flex-grow-1">Booking Policy</p>
           <v-switch
             v-model="facility.isBookingPolicyEnabled"
-            color="success"
+            color="accent"
             hide-details
           />
         </div>
@@ -419,16 +419,14 @@
             ></v-number-input>
           </v-col>
           <v-col cols="12" md="2" class="pa-1">
-            <v-btn
+            <AppButton
               :disabled="!sampleData.description && !sampleData.count"
               type="submit"
-              color="primary"
+              class="w-100"
               @click="upsertChecklist()"
-              block
-              size="large"
             >
               {{ !isEditing ? "Add" : "Edit" }}
-            </v-btn>
+            </AppButton>
           </v-col>
         </v-row>
       </section>
@@ -445,7 +443,7 @@
               <v-icon
                 icon="mdi-drag"
                 class="drag-handle cursor-move mr-2"
-                color="grey-lighten-1"
+                color="muted"
               />
             </template>
 
@@ -465,7 +463,7 @@
                       ? 'mdi-message'
                       : 'mdi-message-outline'
                   "
-                  :color="item.permanentRemarks ? 'primary' : 'grey-darken-1'"
+                  :color="item.permanentRemarks ? 'primary' : 'muted'"
                   variant="text"
                   density="comfortable"
                   @click="remarksDialog(true, item?.permanentRemarks, index)"
@@ -503,7 +501,7 @@
             <v-switch
               v-model="isBookingUnitLimitEnabled"
               class="d-flex align-center"
-              color="primary"
+              color="accent"
               hide-details
               @update:model-value="onToggleBookingUnitLimit"
             />
@@ -541,7 +539,7 @@
             <v-switch
               v-model="isMaxNumberGuestLimitEnabled"
               class="d-flex align-center"
-              color="primary"
+              color="accent"
               hide-details
               @update:model-value="onToggleMaxNumberGuestLimit"
             />
@@ -578,7 +576,7 @@
             <v-switch
               v-model="isCancelAllowedLimitEnabled"
               class="d-flex align-center"
-              color="primary"
+              color="accent"
               hide-details
               @update:model-value="onToggleCancelAllowedLimit"
             />
@@ -607,17 +605,14 @@
       width="300"
       persistent
     >
-      <v-card class="rounded-lg">
-        <v-toolbar class="border-b">
-          <span class="pl-6 font-weight-bold">Permanent Remarks</span>
-          <v-spacer />
-          <v-icon
-            icon="mdi-close"
-            size="30"
-            class="pr-6"
-            @click="remarksDialog(false)"
-          />
-        </v-toolbar>
+      <!-- Was a `v-card` with a bare `v-toolbar` heading, which Vuetify paints
+           from its own `surface` - a slab visibly lighter than the card on the
+           dark theme. The design's modal heading is the card's own title row. -->
+      <v-card class="screen-modal">
+        <v-card-title class="d-flex align-center">
+          <span class="flex-grow-1">Permanent Remarks</span>
+          <v-icon icon="mdi-close" size="30" @click="remarksDialog(false)" />
+        </v-card-title>
 
         <v-row no-gutters class="pa-4">
           <!-- remarks -->
@@ -635,13 +630,9 @@
           <!-- clear/confirm buttons-->
           <v-col cols="12" class="mt-4">
             <v-row no-gutters>
-              <v-btn
-                block
-                text="confirm"
-                color="primary"
-                flat
-                @click="confirmRemarks()"
-              />
+              <AppButton class="w-100" @click="confirmRemarks()">
+                Confirm
+              </AppButton>
             </v-row>
           </v-col>
         </v-row>
@@ -650,18 +641,18 @@
 
     <!-- delete -->
     <v-dialog v-model="isDeleteItem" width="500" persistent class="text-center">
-      <v-card class="rounded-xl">
-        <!-- HEADER -->
-        <v-toolbar class="border-b pb-2 pr-4">
-          <v-spacer />
+      <v-card class="screen-modal">
+        <!-- HEADER - the close cross sat in a `v-toolbar`, a second grey slab
+             above the card on the dark theme. It is the title row's own end. -->
+        <v-card-title class="d-flex justify-end">
           <v-icon
             icon="mdi-close"
             size="x-large"
             @click="isDeleteItem = false"
           />
-        </v-toolbar>
+        </v-card-title>
 
-        <v-card-text class="d-flex flex-column align-center">
+        <v-card-text class="screen-modal__body d-flex flex-column align-center">
           <img
             src="/icons/delete-dialog-icon.svg"
             alt="delete-dialog-icon"
@@ -671,15 +662,8 @@
           />
           Are you sure you want to delete this?
         </v-card-text>
-        <v-col>
-          <v-btn
-            text="yes"
-            type="submit"
-            color="primary"
-            @click="confirmDelete()"
-            width="50%"
-            elevation="0"
-          />
+        <v-col class="d-flex justify-center pb-4">
+          <AppButton type="submit" @click="confirmDelete()">Yes</AppButton>
         </v-col>
       </v-card>
     </v-dialog>
@@ -1080,10 +1064,17 @@ function onToggleCancelAllowedLimit(val: any) {
 }
 
 .list-feature-toggle {
-  border: 1px solid #bbbaba;
+  border: 1px solid var(--border);
   height: 50px;
 }
 
+/* The four fee-summary panels asked Vuetify for `grey-lighten-4` - #f5f5f5 in
+   BOTH themes, so a white slab inside a dark card. `--bg` is the design's
+   recessed surface and follows the theme. */
+.fee-summary {
+  background: var(--bg);
+}
+
 .drag-area {
   cursor: grab;
 }

package/components/QrTemplate/PrintDialog.vue

@@ -5,7 +5,11 @@
     fullscreen
   >
     <v-card>
-      <v-toolbar style="background-color: white">
+      <!-- The inline `background-color: white` painted this bar white in BOTH
+           themes - a white slab across the top of the dialog on the dark one.
+           Removed, so Vuetify paints it from the theme's `surface` as every
+           other converted bar in the estate does. -->
+      <v-toolbar>
         <v-btn icon="mdi-arrow-left" @click="closeDialog"></v-btn>
 
         <v-toolbar-title>Pass & Keys</v-toolbar-title>
@@ -14,7 +18,7 @@
       </v-toolbar>
       <v-row no-gutters class="pa-15">
         <v-col cols="12">
-          <v-card class="pa-6">
+          <AppCard class="pa-6">
             <v-row no-gutters>
               <v-col
                 cols="12"
@@ -67,7 +71,9 @@
                 >
                   <template v-slot:label>
                     Select template
-                    <span class="text-red font-weight-bold">*</span>
+                    <!-- `text-red` is Vuetify's own palette red, a literal that
+                         ignores the theme. `text-error` is the design's. -->
+                    <span class="text-error font-weight-bold">*</span>
                   </template>
                   <!-- <template v-slot:append-item>
                     <div v-intersect="endIntersectTemplateList" />
@@ -112,7 +118,7 @@
                       @click="selectedChoicePaperSizeOrientation = 'A4'"
                       :color="
                         selectedChoicePaperSizeOrientation === 'A4'
-                          ? 'green'
+                          ? 'success'
                           : ''
                       "
                     >
@@ -156,7 +162,7 @@
                       @click="selectedChoicePaperSizeOrientation = 'CCP'"
                       :color="
                         selectedChoicePaperSizeOrientation === 'CCP'
-                          ? 'green'
+                          ? 'success'
                           : ''
                       "
                     >
@@ -199,7 +205,7 @@
                       @click="selectedChoicePaperSizeOrientation = 'CCL'"
                       :color="
                         selectedChoicePaperSizeOrientation === 'CCL'
-                          ? 'green'
+                          ? 'success'
                           : ''
                       "
                     >
@@ -310,7 +316,7 @@
                   <template v-slot:loader="{ isActive }">
                     <v-progress-linear
                       :active="isActive"
-                      color="deep-purple"
+                      color="primary-button"
                       height="4"
                       indeterminate
                     ></v-progress-linear>
@@ -436,7 +442,7 @@
                                       cols="12"
                                       sm="7"
                                       md="1"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -483,7 +489,7 @@
                                       cols="12"
                                       sm="7"
                                       md="3"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -524,7 +530,7 @@
                                       cols="12"
                                       sm="7"
                                       md="1"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -569,7 +575,7 @@
                                       cols="12"
                                       sm="7"
                                       md="4"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -610,7 +616,7 @@
                                       cols="12"
                                       sm="7"
                                       md="2"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -728,16 +734,15 @@
 
             <v-row no-gutters class="pt-2">
               <v-col cols="12" class="d-flex justify-end">
-                <v-btn
-                  color="primary"
-                  @click="printContent"
-                  :disabled="isPrintDisabled"
-                >
+                <!-- `color="primary"` on a v-btn asked Vuetify to FILL with the
+                     foreground token. The design's filled action is AppButton,
+                     which paints from `primary-button`. -->
+                <AppButton @click="printContent" :disabled="isPrintDisabled">
                   Print
-                </v-btn>
+                </AppButton>
               </v-col>
             </v-row>
-          </v-card>
+          </AppCard>
         </v-col>
       </v-row>
     </v-card>
@@ -746,7 +751,8 @@
   <!-- start range dialog -->
   <v-snackbar
     v-model="snackbarStartRange"
-    color="red"
+    class="app-toast"
+    color="error"
     :timeout="5000"
     multi-line
   >
@@ -761,8 +767,11 @@
       generate
     </v-btn>
     <template v-slot:actions>
+      <!-- Was `color="white"`. The dark theme's `error` fill is a LIGHT colour
+           carrying dark ink (`on-error`), so a hardcoded white cross measured
+           ~2:1 on it. Dropping the colour lets the button inherit `on-error`
+           and read correctly in both themes. -->
       <v-btn
-        color="white"
         variant="text"
         @click="snackbarStartRange = false"
         icon="mdi-close"
@@ -1226,23 +1235,20 @@ async function nextPage() {
 </script>
 
 <style scoped>
-.custom-placeholer-color input::placeholder {
-  color: red !important;
-  opacity: 1;
-}
-
-.custom-label-color .v-label {
-  color: red;
-  opacity: 1;
-}
-
-.custom-placeholer-color input,
-.custom-label-color input {
-  color: red !important;
-}
-
+/*
+  `.custom-placeholer-color` and `.custom-label-color` were declared here and
+  applied to NOTHING - neither class appears anywhere in the template. Deleted
+  rather than left as three blocks of red-text styling waiting to be pasted
+  onto a field by mistake.
+
+  `.placeHolderDarken` IS applied (the three paper-size fields). Its
+  `color: primary` was not a colour - `primary` is a Vuetify theme NAME, not a
+  CSS keyword, so the browser dropped that one declaration as invalid and the
+  placeholder has never been darkened. The `opacity: 1` beside it did apply.
+  Now points at the design's muted ink, which is what "darken" meant.
+*/
 .placeHolderDarken ::placeholder {
-  color: primary !important;
+  color: var(--muted) !important;
   opacity: 1;
 }
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.155",
+  "version": "3.2.2-staging.157",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",