@7365admin1/layer-common 3.2.2-staging.127 → 3.2.2-staging.128

package/components/ServiceProviderMain.vue

@@ -99,22 +99,22 @@
           style="max-height: calc(100vh - 280px)"
         >
           <template #item.companyName="{ item }">
-            <span class="text-body-2 d-block text-truncate sp-col-company">{{
+            <span class="d-block text-truncate sp-col-company">{{
               item.companyName
             }}</span>
           </template>
           <template #item.email="{ item }">
-            <span class="text-body-2 d-block text-truncate sp-col-email">{{
+            <span class="d-block text-truncate sp-col-email">{{
               item.email
             }}</span>
           </template>
           <template #item.type="{ item }">
-            <span class="text-body-2 d-block text-truncate sp-col-type">{{
+            <span class="d-block text-truncate sp-col-type">{{
               item.type
             }}</span>
           </template>
           <template #item.members="{ item }">
-            <span class="text-body-2">{{ item.members }}</span>
+            <span>{{ item.members }}</span>
           </template>
           <template #item.status="{ item }">
             <!--
@@ -129,10 +129,9 @@
               :status="item.statusRaw || item.status"
               :label="item.status"
             />
-            <div
-              v-if="item.rejectionReason"
-              class="text-caption text-medium-emphasis mt-1 sp-reject-reason"
-            >
+            <!-- Was `text-caption text-medium-emphasis` - Roboto 12px at
+                 Vuetify's 60% opacity. The design's sub-line is `--muted`. -->
+            <div v-if="item.rejectionReason" class="mt-1 sp-reject-reason">
               Seven365 said: {{ item.rejectionReason }}
             </div>
           </template>
@@ -168,9 +167,11 @@
                   :subtitle="resendHint(item)"
                   @click="openInviteAction(item, 'resend')"
                 />
+                <!-- `base-color="error"` is Vuetify's own red (#B00020 light,
+                     #CF6679 dark), not the design's `--err`. -->
                 <v-list-item
                   title="Delete invitation"
-                  base-color="error"
+                  class="sp-menu-danger"
                   @click="openInviteAction(item, 'delete')"
                 />
               </v-list>
@@ -195,11 +196,11 @@
                 />
                 <v-list-item
                   :title="rowActionLabel(item)"
-                  :base-color="
-                    item.source === 'provider' && listTab === 'inactive'
-                      ? undefined
-                      : 'error'
-                  "
+                  :class="{
+                    'sp-menu-danger': !(
+                      item.source === 'provider' && listTab === 'inactive'
+                    ),
+                  }"
                   @click="onDeleteRow(item)"
                 />
               </v-list>
@@ -208,73 +209,86 @@
         </v-data-table>
       </div>
 
-      <div
-        v-if="!canViewServiceProviders"
-        class="pa-4 text-body-2 text-medium-emphasis"
-      >
+      <div v-if="!canViewServiceProviders" class="pa-4 sp-no-permission">
         You do not have permission to view service providers.
       </div>
     </AppCard>
   </div>
 
-  <v-dialog v-model="viewDialog" max-width="514">
-    <v-card rounded="lg" class="sp-members-card">
-      <v-card-title class="sp-members-title">
-        Members ({{ memberDialogCount }})
-      </v-card-title>
+  <!--
+    THE MEMBERS DIALOG ON THE DESIGN'S MODAL.
 
-      <v-divider />
-
-      <v-table class="sp-members-table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th class="text-right">Role</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="loadingMembers">
-            <td colspan="2" class="text-center text-medium-emphasis">
-              Loading...
-            </td>
-          </tr>
-          <tr v-else-if="!serviceProviderMembers.length">
-            <td colspan="2" class="text-center text-medium-emphasis">
-              No members found.
-            </td>
-          </tr>
-          <template v-else>
-            <tr v-for="member in serviceProviderMembers" :key="member._id">
-              <td>{{ member.name }}</td>
-              <td class="text-right">{{ member.role }}</td>
-            </tr>
-          </template>
-        </tbody>
-      </v-table>
+    Was a `rounded="lg"` v-card whose title was a hand-drawn 20px/700 bar and
+    whose table painted its own 64px rows in `#667085` - a literal grey that is
+    the same grey on the dark theme, where the card behind it is nearly black.
+    It is `.screen-modal` now: the design's radius, shadow and card surface, the
+    shared `v-card-title` size/weight, the body as the thing that scrolls, and
+    the shared ghost footer instead of a block text button pretending to be one.
 
-      <v-divider />
+    Same members, same two columns, same loading and empty copy, same close.
+  -->
+  <v-dialog v-model="viewDialog" max-width="514">
+    <v-card class="screen-modal">
+      <v-card-title>Members ({{ memberDialogCount }})</v-card-title>
+
+      <div class="screen-modal__body sp-members-scroll">
+        <v-table class="sp-members-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th class="text-right">Role</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="loadingMembers">
+              <td colspan="2" class="text-center sp-members-note">
+                Loading...
+              </td>
+            </tr>
+            <tr v-else-if="!serviceProviderMembers.length">
+              <td colspan="2" class="text-center sp-members-note">
+                No members found.
+              </td>
+            </tr>
+            <template v-else>
+              <tr v-for="member in serviceProviderMembers" :key="member._id">
+                <td>{{ member.name }}</td>
+                <td class="text-right">{{ member.role }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </v-table>
+      </div>
 
-      <v-card-actions class="pa-0">
+      <div class="screen-modal__footer">
         <v-btn
-          block
-          variant="text"
-          height="56"
-          class="text-none font-weight-bold"
+          class="screen-btn-ghost"
+          variant="outlined"
           @click="viewDialog = false"
         >
           Close
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 
-  <v-dialog v-model="statusDialog" max-width="728" persistent>
-    <v-card rounded="lg" class="sp-status-card">
-      <v-card-title class="sp-status-title">
-        {{ statusDialogTitle }}
-      </v-card-title>
+  <!--
+    THE TWO CONFIRMATIONS ON THE DESIGN'S MODAL.
+
+    Both were a 728px card with an 82px `#f5f5f5` title bar in 28px/700, a
+    44px/46px body in 24px type, and two 82px-tall half-width buttons on
+    hardcoded `#ffffff` / `#00263a` - none of which is a token, so the whole
+    thing drew light-theme colours on the dark theme. They are the shared
+    confirmation shape now: `.screen-modal`, the design's title, the body at
+    `--fs-cell`, and the ghost-then-primary footer stated once in `screens.css`.
 
-      <v-card-text class="sp-status-body">
+    Same question, same copy, same labels, same handlers, same busy states.
+  -->
+  <v-dialog v-model="statusDialog" max-width="520" persistent>
+    <v-card class="screen-modal">
+      <v-card-title>{{ statusDialogTitle }}</v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <div class="sp-status-question">
           {{ statusDialogQuestion }}
         </div>
@@ -283,48 +297,34 @@
         </div>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-0">
-        <v-row no-gutters class="fill-height">
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              height="82"
-              class="text-none sp-status-cancel"
-              :disabled="statusUpdating"
-              @click="closeStatusDialog"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              height="82"
-              class="text-none sp-status-confirm"
-              :loading="statusUpdating"
-              @click="confirmStatusChange"
-            >
-              {{ statusConfirmLabel }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="statusUpdating"
+          @click="closeStatusDialog"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="statusUpdating"
+          @click="confirmStatusChange"
+        >
+          {{ statusConfirmLabel }}
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
   <!-- Cancel / Resend / Delete an invitation. Same shape as the provider
        dialog above so the two read as one product. -->
-  <v-dialog v-model="inviteDialog" max-width="728" persistent>
-    <v-card rounded="lg" class="sp-status-card">
-      <v-card-title class="sp-status-title">
-        {{ inviteDialogTitle }}
-      </v-card-title>
+  <v-dialog v-model="inviteDialog" max-width="520" persistent>
+    <v-card class="screen-modal">
+      <v-card-title>{{ inviteDialogTitle }}</v-card-title>
 
-      <v-card-text class="sp-status-body">
+      <v-card-text class="screen-modal__body">
         <div class="sp-status-question">
           {{ inviteDialogQuestion }}
         </div>
@@ -333,47 +333,51 @@
         </div>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-0">
-        <v-row no-gutters class="fill-height">
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              height="82"
-              class="text-none sp-status-cancel"
-              :disabled="inviteWorking"
-              @click="closeInviteDialog"
-            >
-              Keep it
-            </v-btn>
-          </v-col>
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              height="82"
-              class="text-none sp-status-confirm"
-              :loading="inviteWorking"
-              @click="confirmInviteAction"
-            >
-              {{ inviteConfirmLabel }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="inviteWorking"
+          @click="closeInviteDialog"
+        >
+          Keep it
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="inviteWorking"
+          @click="confirmInviteAction"
+        >
+          {{ inviteConfirmLabel }}
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
+  <!--
+    ADD SERVICE PROVIDER, on the design's modal.
+
+    The heading was a bare `v-toolbar` - Vuetify paints that from its own
+    `surface`, a grey slab across the top of the card and visibly lighter than
+    the card on the dark theme - carrying a `text-h5` (24px/500 Roboto). The
+    footer was a SECOND toolbar holding a text Cancel and a `color="black"`
+    Submit: a literal black fill in both themes. Both are the shared shapes now,
+    and the four untokenised fields take `.filter-field`.
+  -->
   <v-dialog v-model="createDialog" width="500" persistent>
-    <v-card width="100%">
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5"> Add Service Provider </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text style="max-height: 100vh; overflow-y: auto">
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Add Service Provider
+        <v-spacer />
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close"
+          @click="setServiceProvider({ mode: 'add', dialog: false })"
+        />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
         <v-form
           v-model="validServiceProvider"
           :disabled="disableServiceProvider"
@@ -387,6 +391,7 @@
                     v-model="serviceProvider.name"
                     density="comfortable"
                     :rules="[requiredRule]"
+                    class="filter-field"
                   ></v-text-field>
                 </v-col>
               </v-row>
@@ -403,6 +408,7 @@
                     :items="natureOfBusinessV3"
                     density="comfortable"
                     :rules="[requiredRule]"
+                    class="filter-field"
                   ></v-select>
                 </v-col>
               </v-row>
@@ -416,6 +422,7 @@
                     v-model="serviceProvider.email"
                     density="comfortable"
                     :rules="[emailRule, requiredRule]"
+                    class="filter-field"
                   ></v-text-field>
                 </v-col>
               </v-row>
@@ -430,6 +437,7 @@
                     density="comfortable"
                     no-resize
                     rows="2"
+                    class="filter-field"
                   ></v-textarea>
                 </v-col>
               </v-row>
@@ -452,9 +460,10 @@
             <v-col cols="12" class="my-2">
               <v-row no-gutters>
                 <v-col cols="12" class="text-center">
-                  <span
-                    class="text-none text-subtitle-2 font-weight-medium text-error"
-                  >
+                  <!-- `text-error` is Vuetify's error colour, not the design's
+                       `--err`; the two disagree, and only one of them moves
+                       with the theme. -->
+                  <span class="sp-form-error">
                     {{ messageServiceProvider }}
                   </span>
                 </v-col>
@@ -463,50 +472,52 @@
           </v-row>
         </v-form>
       </v-card-text>
-      <v-toolbar>
-        <v-row class="px-6">
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="setServiceProvider({ mode: 'add', dialog: false })"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none"
-              size="small"
-              :disabled="!validServiceProvider"
-              :loading="disableServiceProvider"
-              @click="submitServiceProviderAdd"
-            >
-              Submit
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="setServiceProvider({ mode: 'add', dialog: false })"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :disabled="!validServiceProvider"
+          :loading="disableServiceProvider"
+          @click="submitServiceProviderAdd"
+        >
+          Submit
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
+  <!--
+    INVITE SERVICE PROVIDER, on the design's modal.
+
+    Was a `rounded="lg"` card with a 76px toolbar heading in `text-h5`, a body
+    padded 48/44/34 whose fields were forced to 64px tall and 20px type, and a
+    footer of two 76px square-cornered buttons on hardcoded `#ffffff` /
+    `#0b253b` at 20px/700. None of those figures is in the handoff and none of
+    those colours is a token. It is the shared modal now, with the same fields
+    and the same two actions in the same order.
+  -->
   <v-dialog v-model="createInviteDialog" width="580" persistent>
-    <v-card width="100%" rounded="lg" class="sp-invite-card">
-      <v-toolbar flat color="transparent" class="table-card__toolbar" height="76">
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5">
-            Invite Service Provider
-          </span>
-        </v-row>
-      </v-toolbar>
-
-      <v-card-text class="sp-invite-body">
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Invite Service Provider
+        <v-spacer />
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close"
+          @click="setServiceProvider({ mode: 'invite', dialog: false })"
+        />
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <v-form
           v-model="validServiceProvider"
           :disabled="disableServiceProvider"
@@ -522,6 +533,7 @@
                     variant="outlined"
                     density="comfortable"
                     :rules="[requiredRule, emailRule]"
+                    class="filter-field"
                   ></v-text-field>
                 </v-col>
               </v-row>
@@ -547,6 +559,7 @@
                     readonly
                     variant="outlined"
                     density="comfortable"
+                    class="filter-field"
                   />
                 </v-col>
               </v-row>
@@ -570,6 +583,7 @@
                       variant="outlined"
                       density="comfortable"
                       :rules="[requiredRule]"
+                      class="filter-field"
                     ></v-select>
                   </v-col>
                 </v-row>
@@ -587,6 +601,7 @@
                       variant="outlined"
                       density="comfortable"
                       :rules="[requiredRule]"
+                      class="filter-field"
                       @update:model-value="setInviteSiteName"
                     ></v-select>
                   </v-col>
@@ -598,9 +613,10 @@
             <v-col cols="12" class="my-2">
               <v-row no-gutters>
                 <v-col cols="12" class="text-center">
-                  <span
-                    class="text-none text-subtitle-2 font-weight-medium text-error"
-                  >
+                  <!-- `text-error` is Vuetify's error colour, not the design's
+                       `--err`; the two disagree, and only one of them moves
+                       with the theme. -->
+                  <span class="sp-form-error">
                     {{ messageServiceProvider }}
                   </span>
                 </v-col>
@@ -610,35 +626,24 @@
         </v-form>
       </v-card-text>
 
-      <v-toolbar flat height="76" class="sp-invite-footer">
-        <v-row no-gutters class="fill-height">
-          <v-col cols="6" class="fill-height">
-            <v-btn
-              block
-              variant="flat"
-              class="text-none sp-invite-footer-btn"
-              height="76"
-              @click="setServiceProvider({ mode: 'invite', dialog: false })"
-            >
-              Back
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="fill-height">
-            <v-btn
-              block
-              variant="flat"
-              class="text-none sp-invite-submit-btn"
-              height="76"
-              :disabled="!canSubmitInvite"
-              :loading="disableServiceProvider"
-              @click="submitServiceProviderInvite()"
-            >
-              Submit
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="setServiceProvider({ mode: 'invite', dialog: false })"
+        >
+          Back
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :disabled="!canSubmitInvite"
+          :loading="disableServiceProvider"
+          @click="submitServiceProviderInvite()"
+        >
+          Submit
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
@@ -1498,142 +1503,81 @@ async function submitServiceProviderInvite() {
   max-width: 180px;
 }
 
-.sp-table :deep(thead th) {
-  font-weight: 600;
-  font-size: 0.8125rem;
-  color: rgba(0, 0, 0, 0.7);
-}
-
+/* The header/cell type is `.table-card`'s, stated once in `screens.css`; what
+   was here was a `rgba(0,0,0,0.7)` header that never reached the glass anyway
+   (the shared rule carries `!important`) and would have been a black-on-black
+   header on the dark theme if it had. Only the alignment is kept. */
 .sp-table :deep(tbody td) {
   vertical-align: middle;
 }
 
-.sp-invite-card {
-  overflow: hidden;
-}
-
-.sp-invite-body {
-  max-height: 100vh;
-  overflow-y: auto;
-  padding: 48px 44px 34px;
-}
-
-.sp-invite-body :deep(.v-field) {
-  border-radius: 6px;
+/* The design's sub-line: `--muted` at 12px, the same figure batch I's
+   `AttachmentsViewer` settled on. There is no `--fs-sub` token. */
+.sp-reject-reason,
+.sp-no-permission,
+.sp-members-note {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  color: var(--muted);
 }
 
-.sp-invite-body :deep(.v-field__input) {
-  min-height: 64px;
-  font-size: 1.25rem;
+/* A row menu is teleported out of this component's subtree by `v-menu`, so the
+   scoped attribute lands on the item and the title needs `:deep`. */
+.sp-menu-danger :deep(.v-list-item-title) {
+  color: var(--err);
 }
 
-.sp-invite-footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.sp-invite-footer-btn {
-  border-radius: 0;
-  background: #ffffff !important;
-  color: #111827 !important;
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.sp-invite-submit-btn {
-  border-radius: 0;
-  background: #0b253b !important;
-  color: #ffffff !important;
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.sp-members-card {
-  overflow: hidden;
-}
-
-.sp-members-title {
-  min-height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  font-size: 1.25rem;
-  font-weight: 700;
+.sp-form-error {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--err);
 }
 
-.sp-members-table {
+/* The modal body scrolls, not the card - the shared rule; this only bounds it
+   so a long member list does not push the footer off the screen. */
+.sp-members-scroll {
   max-height: 444px;
-  overflow-y: auto;
 }
 
 .sp-members-table :deep(th) {
-  height: 64px;
-  color: #667085;
-  font-size: 1rem;
-  font-weight: 500;
+  color: var(--muted);
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  background: var(--thead);
 }
 
 .sp-members-table :deep(td) {
-  height: 64px;
-  color: #667085;
-  font-size: 1rem;
-}
-
-.sp-status-card {
-  overflow: hidden;
-}
-
-.sp-status-title {
-  min-height: 82px;
-  display: flex;
-  align-items: center;
-  padding: 0 24px;
-  background: #f5f5f5;
-  color: #101828;
-  font-size: 1.75rem;
-  font-weight: 700;
-}
-
-.sp-status-body {
-  padding: 44px 46px 42px;
+  color: var(--text);
+  font-size: var(--fs-cell);
 }
 
 .sp-status-question {
-  color: #101828;
-  font-size: 1.5rem;
-  font-weight: 700;
+  color: var(--text);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
   line-height: 1.35;
 }
 
 .sp-status-copy {
-  margin-top: 28px;
-  color: #667085;
-  font-size: 1.5rem;
-  line-height: 1.2;
-}
-
-.sp-status-cancel {
-  color: #101828;
-  background: #ffffff;
-  font-size: 1.5rem;
-  font-weight: 700;
+  margin-top: 12px;
+  color: var(--muted);
+  font-size: var(--fs-cell);
+  line-height: 1.5;
 }
 
-.sp-status-confirm {
-  color: #ffffff;
-  background: #00263a;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
 .sp-existing-title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: #101828;
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
   margin-bottom: 16px;
 }
 
 .sp-existing-copy {
-  font-size: 1rem;
-  color: #344054;
+  font-size: var(--fs-cell);
+  color: var(--muted);
   line-height: 1.5;
   margin-bottom: 24px;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.127",
+  "version": "3.2.2-staging.128",
   "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.",