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

package/components/EquipmentManagementMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment`"
         :items="items"
         :headers="headers"
         :loading="loading"
@@ -20,10 +20,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canAddEquipment">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="onCreateUnit()"
               >
                 Add Equipment
@@ -32,7 +30,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -47,11 +45,15 @@
         </template>
 
         <template #item.attachment="{ value }">
+          <!--
+            `variant="tonal"` drew Vuetify's own grey slab in the cell, the one
+            off-design control left on the row. The design's ghost button.
+          -->
           <v-btn
             v-if="value"
             size="small"
-            variant="tonal"
-            class="text-none"
+            variant="outlined"
+            class="screen-btn-ghost"
             @click.stop="viewAttachment(value)"
           >
             View Image
@@ -60,7 +62,11 @@
         </template>
 
         <template #item.status="{ value }">
-          <v-chip class="text-capitalize">{{ value || "N/A" }}</v-chip>
+          <StatusChip
+            class="text-capitalize"
+            :status="value"
+            :label="value || 'N/A'"
+          />
         </template>
 
         <template #item.block="{ value }">
@@ -141,67 +147,54 @@
     </HygieneUpdateMoreAction>
   </v-dialog>
 
-  <v-dialog v-model="dialogDeleteEquipment" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            Delete {{ selectedEquipment?.name || "Unit" }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text>
-        <span class="text-subtitle-2"
-          >Are you sure you want to delete this equipment?</span
-        >
-      </v-card-text>
+  <!--
+    All three dialogs were `v-toolbar` title bars over toolbar footers carrying
+    two block buttons, the confirm one on `color="black"` - not a token, so it
+    painted a light-theme fill on the dark theme, and the toolbar surface sat
+    visibly lighter than the card it was on. They are the shared `.screen-modal`
+    shape now. Same fields, same labels, same handlers, same busy states.
+  -->
+  <v-dialog v-model="dialogDeleteEquipment" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        Delete {{ selectedEquipment?.name || "Unit" }}
+      </v-card-title>
 
-      <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"
-              @click="dialogDeleteEquipment = false"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
+      <v-card-text class="screen-modal__body">
+        Are you sure you want to delete this equipment?
+      </v-card-text>
 
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold"
-              height="48"
-              :loading="submitting"
-              @click="_deleteEquipment"
-            >
-              Delete
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogDeleteEquipment = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="_deleteEquipment"
+        >
+          Delete
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
-  <v-dialog v-model="dialogStockAction" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text class="pa-4">
+  <v-dialog v-model="dialogStockAction" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <v-form ref="stockActionFormRef" v-model="stockActionValid">
           <v-row no-gutters>
-            <v-col cols="12" class="mb-4">
+            <v-col cols="12">
               <InputLabel
                 for="stockActionQty"
                 title="Quantity"
@@ -212,68 +205,53 @@
                 v-model.number="stockActionQuantity"
                 :rules="[requiredRule]"
                 density="comfortable"
-                variant="outlined"
                 type="number"
                 min="1"
                 placeholder="Enter quantity"
                 hide-details="auto"
+                class="filter-field"
               />
             </v-col>
           </v-row>
         </v-form>
       </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"
-              @click="dialogStockAction = false"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
-              :loading="submitting"
-              @click="stockActionMode === 'add' ? _addStock() : _requestItem()"
-            >
-              {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogStockAction = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="stockActionMode === 'add' ? _addStock() : _requestItem()"
+        >
+          {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
   <v-dialog v-model="showAttachmentDialog" max-width="720" persistent>
-    <v-card rounded="lg">
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">Attachment</span>
-
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Attachment
         <v-spacer />
-
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="(showAttachmentDialog = false), (attachmentUrl = '')"
         />
       </v-card-title>
 
-      <v-divider />
-
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body">
         <v-img :src="attachmentUrl" contain />
       </v-card-text>
     </v-card>

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/Feedback/Form.vue

@@ -1,7 +1,7 @@
 <template>
   <FormDialog v-model="dialog" @close="closeDialog">
     <template #title>
-      <span class="text-h6 font-weight-medium pt-1 text-capitalize">
+      <span class="screen-card-title pt-1 text-capitalize">
         {{ isEditMode ? "Edit Feedback" : "Create Feedback" }}
       </span>
     </template>
@@ -22,13 +22,13 @@
       item-value="value"
       item-props
       variant="outlined"
-      density="compact"
-      class="mb-2"
+      density="comfortable"
+      class="mb-2 filter-field"
       clearable
       :custom-filter="customFilter"
       :rules="[requiredRule]"
     >
-      <template #label> Subject <span class="text-red">*</span> </template>
+      <template #label> Subject <span class="feedback-form__required">*</span> </template>
     </v-autocomplete>
 
     <!-- <v-autocomplete
@@ -44,37 +44,43 @@
       clearable
       :rules="[requiredRule]"
     >
-      <template #label> Category <span class="text-red">*</span> </template>
+      <template #label> Category <span class="feedback-form__required">*</span> </template>
     </v-autocomplete> -->
 
     <v-text-field
       label="Location"
       variant="outlined"
-      density="compact"
+      density="comfortable"
+      class="mb-2 filter-field"
       v-model="localFeedback.location"
       :rules="[requiredRule]"
     >
-      <template #label> Location <span class="text-red">*</span> </template>
+      <template #label> Location <span class="feedback-form__required">*</span> </template>
     </v-text-field>
 
     <v-textarea
       label="Description"
       variant="outlined"
-      density="compact"
+      density="comfortable"
+      class="filter-field"
       auto-grow
       rows="4"
       v-model="localFeedback.description"
       :rules="[requiredRule]"
     >
-      <template #label> Description <span class="text-red">*</span> </template>
+      <template #label> Description <span class="feedback-form__required">*</span> </template>
     </v-textarea>
 
     <template #footer>
+      <!-- `color="primary-button"` was already the right token (the FILL, not
+           the `primary` foreground) and `height="40"` already the right number,
+           but both were stated by hand. `.screen-btn-primary` is where the
+           layer says that once, and it wins over Vuetify's `--v-btn-height`
+           without an `!important`. -->
       <v-btn
-        color="primary-button"
-        class="text-capitalize mb-4"
+        class="text-capitalize mb-4 screen-btn-primary"
+        variant="flat"
         block
-        height="40"
         :loading="loading"
         :disabled="loading || !isFormValid"
         @click="submitFeedback"
@@ -171,3 +177,11 @@ const customFilter = (value: string, query: string, item: any) => {
   return title.includes(search) || subtitle.includes(search);
 };
 </script>
+
+<style scoped>
+/* Was `text-red`, a fixed Vuetify red that is the same red on both themes.
+   `--err` is the theme's error ink and follows it. */
+.feedback-form__required {
+  color: var(--err);
+}
+</style>