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

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.112",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {