@7365admin1/layer-common 3.2.2-staging.111 → 3.2.2-staging.113

package/components/ScheduleTaskAreaFormDialog.vue

@@ -2,69 +2,66 @@
   <v-dialog
     :model-value="modelValue"
     @update:model-value="(v) => emit('update:modelValue', v)"
-    max-width="450"
+    max-width="520"
   >
-    <v-card>
-      <v-toolbar>
-        <template v-if="$slots.header">
-          <slot
-            name="header"
-            :title="
-              mode === 'edit' ? `Edit ${entityType}` : `Add New ${entityType}`
-            "
-            :onClose="onClose"
-          />
-        </template>
-        <template v-else>
-          <v-row no-gutters class="fill-height px-6" align="center">
-            <span class="font-weight-bold text-h6 text-capitalize">{{
-              mode === "edit" ? `Edit ${entityType}` : `Add New ${entityType}`
-            }}</span>
-          </v-row>
-        </template>
-      </v-toolbar>
+    <!-- 520px is the handoff's `--modal-w`, and the card wears `.screen-modal`
+         for the 16px corner, the `--card` surface and the modal shadow. The
+         two `v-toolbar`s standing in for the title row and the footer were
+         fixed grey slabs that stay grey on the dark theme, and the Create
+         button was a hardcoded `color="black"` fill on a `rounded-0` square. -->
+    <v-card class="screen-modal">
+      <template v-if="$slots.header">
+        <slot
+          name="header"
+          :title="
+            mode === 'edit' ? `Edit ${entityType}` : `Add New ${entityType}`
+          "
+          :onClose="onClose"
+        />
+      </template>
+      <v-card-title v-else class="text-capitalize">{{
+        mode === "edit" ? `Edit ${entityType}` : `Add New ${entityType}`
+      }}</v-card-title>
 
-      <v-card-text>
+      <v-card-text class="screen-modal__body">
         <v-form ref="formRef" v-model="valid">
           <v-row>
             <v-col cols="12">
               <InputLabel for="name" :title="label" required />
-              <v-text-field v-model="nameValue" :rules="[requiredRule]" />
+              <!-- Still a `v-text-field`: Submit is gated on `valid`, which
+                   only exists because this `:rules` runs. `.filter-field` gives
+                   it the design's 40px / 10px / 13.5px shape without taking the
+                   validation away. -->
+              <v-text-field
+                v-model="nameValue"
+                class="filter-field"
+                :rules="[requiredRule]"
+              />
             </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="close"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
+      <div class="screen-modal__footer">
+        <v-btn
+          variant="outlined"
+          class="screen-btn-ghost"
+          @click="close"
+        >
+          Cancel
+        </v-btn>
 
-          <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="submit"
-            >
-              {{ mode === "edit" ? "Save" : "Create" }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+        <!-- Kept a `v-btn`: `loading` is the only in-flight signal this form
+             has, and `AppButton` has no equivalent. -->
+        <v-btn
+          variant="flat"
+          class="screen-btn-primary"
+          :loading="submitting"
+          @click="submit"
+        >
+          {{ mode === "edit" ? "Save" : "Create" }}
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>

package/components/ScheduleTaskAreaUpdateMoreAction.vue

@@ -1,74 +1,62 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <template v-if="$slots.header">
-        <slot name="header" :title="title" :onClose="onClose" />
-      </template>
-      <template v-else>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5 text-capitalize">{{
-            title
-          }}</span>
-        </v-row>
-      </template>
-    </v-toolbar>
+  <!-- The schedule-area copy of `Dialog/UpdateMoreAction`, converted the same
+       way: two `v-toolbar`s (fixed grey slabs that stay grey on the dark
+       theme) for the title row and the footer, and a hardcoded `color="black"`
+       fill on a square 48px tile. -->
+  <v-card class="screen-modal" width="100%">
+    <template v-if="$slots.header">
+      <slot name="header" :title="title" :onClose="onClose" />
+    </template>
+    <v-card-title v-else class="text-capitalize">{{ title }}</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+    <v-card-text class="screen-modal__body pb-0">
       <slot name="content" />
     </v-card-text>
 
-    <v-toolbar class="pa-0" density="compact">
-      <v-row no-gutters>
-        <v-col cols="6" class="pa-0">
+    <div class="screen-modal__footer">
+      <v-btn
+        variant="outlined"
+        class="screen-btn-ghost"
+        @click="emit('close')"
+      >
+        Close
+      </v-btn>
+
+      <v-menu>
+        <template #activator="{ props }">
           <v-btn
-            block
-            variant="text"
-            class="text-none"
-            size="large"
-            @click="emit('close')"
-            height="48"
+            variant="flat"
+            class="screen-btn-primary"
+            v-bind="props"
           >
-            Close
+            More actions
           </v-btn>
-        </v-col>
-
-        <v-col cols="6" class="pa-0">
-          <v-menu>
-            <template #activator="{ props }">
-              <v-btn
-                block
-                variant="flat"
-                color="black"
-                class="text-none"
-                height="48"
-                v-bind="props"
-                tile
-              >
-                More actions
-              </v-btn>
-            </template>
+        </template>
 
-            <v-list class="pa-0">
-              <v-list-item v-if="canUpdate" @click="emit('edit')">
-                <v-list-item-title class="text-subtitle-2">
-                  {{ editButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
+        <!-- Dropdown shape left as Vuetify draws it - the handoff specifies
+             the profile dropdown only. `text-red` (Vuetify's fixed #f44336,
+             the same red on both themes) becomes `text-error`, which is
+             `--v-theme-error`, i.e. the design's `--err`, matching the
+             handoff's "red Logout row (err color, err-bg hover)". -->
+        <v-list class="pa-0 area-more__list">
+          <v-list-item v-if="canUpdate" @click="emit('edit')">
+            <v-list-item-title>
+              {{ editButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
 
-              <v-list-item
-                v-if="canDelete"
-                @click="emit('delete')"
-                class="text-red"
-              >
-                <v-list-item-title class="text-subtitle-2">
-                  {{ deleteButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+          <v-list-item
+            v-if="canDelete"
+            @click="emit('delete')"
+            class="text-error"
+          >
+            <v-list-item-title>
+              {{ deleteButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </div>
   </v-card>
 </template>
 
@@ -106,4 +94,11 @@ const {
 } = prop;
 </script>
 
-<style scoped></style>
+<style scoped>
+/* `text-subtitle-2` was Vuetify's 0.875rem/500; the handoff names no type for
+   a menu row, so it takes the established cell type. */
+.area-more__list :deep(.v-list-item-title) {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
+</style>

package/components/ServiceProviderFormCreate.vue

@@ -1,21 +1,29 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">
-          {{ props.title }}
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
+  <!--
+    A dialog card, so it wears `.screen-modal` (16px corner, the modal shadow,
+    the `--card` surface) rather than Vuetify's 4px factory card. The two
+    `v-toolbar`s this used to have were grey slabs standing in for a title row
+    and a footer; a `v-card-title` and a `v-card-actions` are those two rows
+    without the slab, and they follow the theme instead of staying grey in dark.
+  -->
+  <v-card width="100%" class="screen-modal">
+    <v-card-title>{{ props.title }}</v-card-title>
+
+    <v-card-text class="screen-modal__body">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
               <InputLabel class="text-capitalize" title="Email" required />
               <v-col cols="12">
+                <!-- Still a `v-text-field`, not an `AppField`: the Submit
+                     button is gated on `validForm`, which only exists because
+                     these `:rules` run. `.filter-field` is the established way
+                     to give a Vuetify input the design's 40px/10px/13.5px shape
+                     without taking its validation away. -->
                 <v-text-field
                   v-model="email"
+                  class="filter-field"
                   density="comfortable"
                   :rules="[requiredRule, emailRule]"
                 ></v-text-field>
@@ -38,27 +46,28 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar>
-      <v-row class="px-6">
-        <v-col cols="6">
+    <!-- The two-across, full-width footer is kept: the handoff draws no modal,
+         so its layout is not specified and changing it would be invention.
+         What changes is the chrome - `color="black"` was a hardcoded fill that
+         ignored the theme, and the bare text Cancel had no shape at all. -->
+    <v-card-actions class="screen-modal__footer">
+      <v-row class="px-4" no-gutters>
+        <v-col cols="6" class="pr-2">
           <v-btn
             block
-            variant="text"
-            class="text-none"
-            size="large"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="cancel"
           >
             Cancel
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="large"
+            class="text-none screen-btn-primary"
             :disabled="!validForm"
             @click="submit"
           >
@@ -66,7 +75,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/ServiceProviderInvitationPrompt.vue

@@ -1,37 +1,36 @@
 <template>
-  <v-card
-    v-if="invitation"
-    width="100%"
-    rounded="lg"
-    variant="outlined"
-    border="thin"
-    class="sp-invite-prompt"
-  >
-    <v-card-item>
-      <template #prepend>
-        <v-avatar color="primary" variant="tonal" size="44">
-          <v-icon>mdi-office-building-marker-outline</v-icon>
-        </v-avatar>
-      </template>
-      <v-card-title class="text-wrap sp-invite-prompt-title">
-        {{ invitation.orgName }} has invited you to {{ invitation.siteName }}
-      </v-card-title>
-      <v-card-subtitle class="text-wrap">
-        Approved by Seven365 · {{ expiryLine }}
-      </v-card-subtitle>
-    </v-card-item>
+  <!-- `AppCard` is the design's card - 14px radius, a 1px `--border` rule and
+       the one-pixel shadow on `--card`. The `v-card rounded="lg"
+       variant="outlined"` it replaced was Vuetify's own card at its own
+       radius and border weight. -->
+  <AppCard v-if="invitation" class="sp-invite-prompt">
+    <div class="d-flex align-start ga-3 pa-4">
+      <v-avatar color="primary" variant="tonal" size="44">
+        <v-icon>mdi-office-building-marker-outline</v-icon>
+      </v-avatar>
+      <div class="flex-grow-1">
+        <div class="screen-card-title">
+          {{ invitation.orgName }} has invited you to {{ invitation.siteName }}
+        </div>
+        <div class="screen-hint sp-invite-prompt__sub">
+          Approved by Seven365 · {{ expiryLine }}
+        </div>
+      </div>
+    </div>
 
-    <v-card-text class="text-body-2">
+    <div class="px-4 sp-invite-prompt__body">
       {{ invitation.orgName }} would like your company to provide services at
       <strong>{{ invitation.siteName }}</strong
       >. If you accept, this site will be added to your list of sites.
-    </v-card-text>
+    </div>
 
-    <v-card-actions class="px-4 pb-4">
+    <div class="d-flex align-center ga-2 px-4 py-4">
+      <!-- Both stay `v-btn`s: `loading` is the only signal that an accept or a
+           decline is in flight, and `AppButton` has no equivalent. They take
+           the design's two button classes instead. -->
       <v-btn
         variant="flat"
-        color="primary"
-        class="text-none"
+        class="screen-btn-primary"
         :loading="working === 'accept'"
         :disabled="Boolean(working) || !open"
         @click="accept"
@@ -40,7 +39,7 @@
       </v-btn>
       <v-btn
         variant="outlined"
-        class="text-none ml-2"
+        class="screen-btn-ghost"
         :loading="working === 'decline'"
         :disabled="Boolean(working) || !open"
         @click="decline"
@@ -48,21 +47,21 @@
         Decline
       </v-btn>
       <v-spacer />
-      <v-chip
+      <!-- Was a raw `v-chip` on Vuetify's fixed `success` green, or no colour
+           at all for every other outcome. `StatusChip` maps the status WORD
+           through the shared `utils/status.ts` tones, so "complete" and
+           "declined" come out the same colours they do everywhere else. -->
+      <StatusChip
         v-if="!open"
-        size="small"
-        variant="tonal"
-        class="text-none"
-        :color="invitation.status === 'complete' ? 'success' : undefined"
-      >
-        {{ invitation.statusLabel }}
-      </v-chip>
-    </v-card-actions>
-  </v-card>
+        :status="invitation.status"
+        :label="invitation.statusLabel"
+      />
+    </div>
+  </AppCard>
 
-  <v-card v-else-if="error" width="100%" rounded="lg" variant="outlined" border="thin">
-    <v-card-text class="text-body-2">{{ error }}</v-card-text>
-  </v-card>
+  <AppCard v-else-if="error">
+    <div class="pa-4 sp-invite-prompt__body">{{ error }}</div>
+  </AppCard>
 </template>
 
 <script setup lang="ts">
@@ -142,9 +141,15 @@ await load();
 </script>
 
 <style scoped>
-.sp-invite-prompt-title {
-  font-size: 1.05rem;
-  font-weight: 600;
+/* The title was a hand-set 1.05rem/600; `.screen-card-title` is the design's
+   15.5px/800, so only the wrap and the leading are left here. */
+.sp-invite-prompt :deep(.screen-card-title) {
+  display: block;
   line-height: 1.35;
 }
+
+.sp-invite-prompt__sub,
+.sp-invite-prompt__body {
+  font-size: var(--fs-cell);
+}
 </style>

package/package.json

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