@7365admin1/layer-common 3.2.2-staging.114 → 3.2.2-staging.118

package/components/OvernightParkingAvailability.vue

@@ -35,8 +35,7 @@
             />
           </span>
         </v-row>
-        <v-card class="mt-2">
-          <v-card-text>
+        <AppCard class="mt-2 pa-4">
             <template
               v-for="(slot, index) in overnightParkingSlotsArray"
               :key="slot.day"
@@ -44,9 +43,12 @@
               <v-row no-gutters class="mb-4">
                 <v-col
                   cols="12"
-                  class="text-capitalize mb-2 text-subtitle-1 d-flex align-center justify-space-between"
+                  class="text-capitalize mb-2 d-flex align-center justify-space-between"
                 >
-                  <span class="font-weight-black">{{ slot.day }}</span>
+                  <span class="screen-card-title">{{ slot.day }}</span>
+                  <!-- `black-lighten-1` is a literal black: on the dark theme
+                       the off state was a black tick on a #1c1e24 card. Both
+                       states take a token now. -->
                   <v-icon
                     :icon="
                       slot?.isEnabled
@@ -54,10 +56,10 @@
                         : 'mdi-check-circle-outline'
                     "
                     size="20"
-                    :class="{ 'cursor-pointer': !viewMode }"
-                    :color="
-                      slot.isEnabled ? 'green-darken-2' : 'black-lighten-1'
-                    "
+                    :class="[
+                      { 'cursor-pointer': !viewMode },
+                      slot.isEnabled ? 'day-tick--on' : 'day-tick--off',
+                    ]"
                     @click="!viewMode && toggleEnabled(slot.day)"
                   />
                 </v-col>
@@ -91,7 +93,7 @@
 
                 <v-col v-if="!viewMode" cols="12" class="mt-1">
                   <div
-                    class="d-flex align-center ga-1 cursor-pointer text-caption text-medium-emphasis"
+                    class="d-flex align-center ga-1 cursor-pointer screen-hint apply-link"
                     @click="applyToOtherDays(slot.day)"
                   >
                     <v-icon icon="mdi-content-copy" size="14" />
@@ -107,10 +109,10 @@
             </template>
 
             <v-col cols="12" align="end">
+              <!-- Stays a `v-btn`: `:loading` is the only in-flight signal on
+                   this form and AppButton has none. Tokenised instead. -->
               <v-btn
-                color="primary"
-                class="text-none mt-2"
-                size="large"
+                class="screen-btn-primary mt-2"
                 :loading="loading.updating"
                 variant="flat"
                 text="Save"
@@ -118,8 +120,7 @@
                 @click="handleSave('save')"
               />
             </v-col>
-          </v-card-text>
-        </v-card>
+        </AppCard>
       </v-col>
     </v-row>
   </v-form>
@@ -132,12 +133,10 @@
   />
 
   <v-dialog v-model="applyDialog.open" max-width="360" persistent>
-    <v-card>
-      <v-card-title class="text-subtitle-1 font-weight-bold pt-4 px-4"
-        >Apply to days</v-card-title
-      >
-      <v-card-text class="px-4 pb-2">
-        <p class="text-caption text-medium-emphasis mb-3">
+    <v-card class="screen-modal">
+      <v-card-title class="pt-4 px-4">Apply to days</v-card-title>
+      <v-card-text class="screen-modal__body px-4 pb-2">
+        <p class="screen-hint apply-link mb-3">
           Select the days to apply
           <span class="font-weight-bold text-capitalize">{{
             applyDialog.sourceDay
@@ -154,21 +153,45 @@
           class="text-capitalize"
         />
       </v-card-text>
-      <v-card-actions class="px-4 pb-4">
+      <!-- `ga-2`: v-card-actions only spaces `.v-btn` children, and these are
+           the design's own buttons - without it Cancel and Apply touch. -->
+      <v-card-actions class="px-4 pb-4 ga-2">
         <v-spacer />
-        <v-btn variant="text" @click="applyDialog.open = false">Cancel</v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
+        <AppButton variant="ghost" @click="applyDialog.open = false">
+          Cancel
+        </AppButton>
+        <AppButton
           :disabled="!applyDialog.targetDays.some((d) => d.selected)"
           @click="confirmApply"
-          >Apply</v-btn
         >
+          Apply
+        </AppButton>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
+<style scoped>
+/* The prototype names no colour for a per-day enable tick, so it takes the
+   design's own success / muted semantics rather than two literal Vuetify
+   greys - the off state was `black-lighten-1`, which stayed black on the dark
+   theme's card. */
+.day-tick--on {
+  /* `--ok`, not `--success`: the token is named for the design's tone, and an
+     undefined custom property makes the whole declaration invalid, so the tick
+     silently inherited `--text` instead. */
+  color: var(--ok);
+}
+
+.day-tick--off {
+  color: var(--muted);
+}
+
+.apply-link {
+  font-size: var(--fs-breadcrumb);
+}
+</style>
+
 <script setup lang="ts">
 const props = defineProps({
   viewMode: {

package/components/SiteSettings.vue

@@ -152,7 +152,10 @@
           Delivery Companies
         </v-expansion-panel-title>
         <v-expansion-panel-text class="">
-          <DeliveryCompany :site="siteId" v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
+          <!-- The panel above already names this section, and the component
+               prints its own name unless told not to - so without hide-title
+               the words "Delivery Companies" appear twice on the open panel. -->
+          <DeliveryCompany :site="siteId" hide-title v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
             @update:companiesValue="handleUpdateCompanies" :read-only="!canManageSiteSettings" />
         </v-expansion-panel-text>
       </v-expansion-panel>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.114",
+  "version": "3.2.2-staging.118",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {