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

package/components/EquipmentManagementMain.vue

@@ -45,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
@@ -143,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"
@@ -214,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/Input/Date.vue

@@ -13,6 +13,7 @@
             v-model="month"
             :items="props.months"
             label="Month"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-month'"
             hide-details
@@ -28,6 +29,7 @@
             label="Day"
             hide-details
             placeholder="DD"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-day'"
             :error="!!validationErrMsg"
@@ -42,6 +44,7 @@
             label="Year"
             hide-details
             placeholder="YYYY"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-year'"
             :error="!!validationErrMsg"

package/components/Input/File.vue

@@ -11,7 +11,7 @@
         "
       >
         <div
-          class="d-flex align-center justify-center pa-4 rounded-lg border-dashed border border-grey"
+          class="file-drop d-flex align-center justify-center pa-4"
           @dragover.prevent
           @drop="handleDrop"
           style="position: relative; z-index: 1"
@@ -35,12 +35,10 @@
             class="d-flex align-center"
             style="z-index: 1; pointer-events: none"
           >
-            <v-icon size="28" class="mr-2" color="primary"
+            <v-icon size="28" class="file-drop__icon mr-2"
               >mdi-cloud-upload-outline</v-icon
             >
-            <span class="text-body-1 font-weight-medium"
-              >Drag and drop files here</span
-            >
+            <span class="file-drop__hint">Drag and drop files here</span>
           </div>
         </div>
       </v-col>
@@ -55,11 +53,10 @@
         "
       >
         <v-btn
-          color="primary-button"
-          min-width="55"
-          width="55"
-          height="55"
+          class="screen-btn-primary file-camera"
+          variant="flat"
           elevation="0"
+          aria-label="Take a photo"
           @click="selectAttachment"
         >
           <v-icon size="20">mdi-camera-outline</v-icon>
@@ -73,7 +70,7 @@
           v-for="(file, index) in attachments"
           :key="index"
           cols="12"
-          class="d-flex align-center pa-2 mr-2 mb-2 rounded bg-white border-sm"
+          class="file-row d-flex align-center pa-2 mr-2 mb-2"
         >
           <div class="mr-3">
             <!-- <v-img
@@ -108,6 +105,8 @@
 
           <v-icon
             size="small"
+            class="file-row__remove"
+            aria-label="Remove file"
             @click.stop="$emit('delete', file)"
             v-if="
               props.createdFrom === 'feedback' && props.attachments.length > 0
@@ -234,3 +233,49 @@ defineExpose({
   },
 });
 </script>
+
+<style scoped>
+/* The drop zone was `border-dashed border border-grey` with a `primary` glyph -
+   `primary` being the FOREGROUND token, used here as an icon colour, and the
+   grey a fixed light-theme hairline. */
+.file-drop {
+  border: 1px dashed var(--border);
+  border-radius: var(--r-inner);
+  position: relative;
+  z-index: 1;
+}
+
+.file-drop__icon {
+  color: var(--accent-text);
+}
+
+.file-drop__hint {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* Was a 55px square. The design's button is 40px, which is what
+   .screen-btn-primary carries; this only keeps it square. */
+.file-camera {
+  min-width: var(--btn-h) !important;
+  width: var(--btn-h);
+  padding: 0 !important;
+}
+
+/* Each attachment row was `bg-white border-sm` - a hard white slab drawn on the
+   dark theme as well. */
+.file-row {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.file-row__remove {
+  color: var(--err);
+}
+</style>

package/components/Input/ListGroupSelection.vue

@@ -1,6 +1,6 @@
 <template>
   <v-input v-bind="attrs">
-    <v-card width="100%" v-bind="attrs">
+    <v-card class="perm-list screen-card" elevation="0" width="100%" v-bind="attrs">
       <v-list
         v-model:selected="selected"
         lines="two"
@@ -18,14 +18,14 @@
           <v-list-group :value="permissionKey" fluid>
             <template v-slot:activator="{ props }">
               <v-list-item v-bind="props" density="compact">
-                <span class="text-capitalize">
+                <span class="perm-list__group text-capitalize">
                   {{ formatResourceLabel(String(permissionKey)) }}
                 </span>
 
                 <template #prepend>
-                  <v-chip class="mr-2" small>
+                  <span class="perm-list__count mr-2">
                     {{ selectedActionCount(String(permissionKey)) }}
-                  </v-chip>
+                  </span>
                 </template>
               </v-list-item>
             </template>
@@ -34,13 +34,13 @@
               <v-divider></v-divider>
               <v-list-item v-if="attrs.readonly" density="compact">
                 <template #title class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__title text-capitalize">
                     {{ String(itemKey).replace(/-/g, " ") }}
                   </span>
                 </template>
 
                 <template #subtitle class="pl-2">
-                  <span class="text-subtitle-2">{{ item.description }}</span>
+                  <span class="perm-list__sub">{{ item.description }}</span>
                 </template>
               </v-list-item>
 
@@ -50,13 +50,13 @@
                 density="compact"
               >
                 <template #title class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__title text-capitalize">
                     {{ String(itemKey).replace(/-/g, " ") }}
                   </span>
                 </template>
 
                 <template #subtitle class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__sub text-capitalize">
                     {{ String(item.description).replace(/-/g, " ") }}
                   </span>
                 </template>
@@ -101,3 +101,51 @@ const selectedActionCount = (resource: string) => {
     .length;
 };
 </script>
+
+<style scoped>
+.perm-list {
+  font-family: var(--font-sans);
+}
+
+.perm-list__group {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--text);
+}
+
+/**
+ * The count beside each permission group. The handoff draws no counter here at
+ * all, so this is the neutral chip's own geometry - 999px, 12px/700, the tone
+ * wash - rather than a new shape: a `v-chip small`, which is what it was, is
+ * 24px of Vuetify grey with its own font.
+ */
+.perm-list__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: var(--r-pill);
+  background: var(--hover);
+  color: var(--text2);
+  font-size: var(--fs-chip);
+  font-weight: 700;
+}
+
+/* A ticked row was Vuetify's own rgb(224,224,224) slab - a light-theme grey
+   painted on the dark theme too. Same emphasis, on the design's hover wash. */
+.perm-list :deep(.v-list-item--active) {
+  background: var(--hover);
+}
+
+.perm-list__title {
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.perm-list__sub {
+  font-size: var(--fs-cell-dense);
+  color: var(--muted);
+}
+</style>

package/components/MemberMain.vue

@@ -184,13 +184,20 @@
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
-    <v-dialog v-model="assignRoleDialog" max-width="400px">
-      <v-card>
-        <v-card-title class="text-h5">Assign Role</v-card-title>
-        <v-card-text>
-          <v-form v-model="memberRoleForm" @submit.prevent="updateMemberRole()">
+    <!--
+      Was a `text-h5` title, an untokenised select, and two block buttons - the
+      submit one on `color="black"`, not a token, so it drew a light-theme fill
+      on the dark theme. The shared `.screen-modal` shape now. The footer stays
+      INSIDE the `v-form` because Submit is a `type="submit"` and moving it out
+      would break the form's own submit.
+    -->
+    <v-dialog v-model="assignRoleDialog" max-width="520">
+      <v-card class="screen-modal">
+        <v-card-title>Assign Role</v-card-title>
+        <v-form v-model="memberRoleForm" @submit.prevent="updateMemberRole()">
+          <v-card-text class="screen-modal__body">
             <v-row no-gutters>
-              <v-col cols="12" class="mb-2">
+              <v-col cols="12">
                 <v-row no-gutters>
                   <InputLabel class="text-capitalize" title="Name" required />
                   <v-col cols="12">
@@ -207,6 +214,7 @@
                           : ''
                       "
                       persistent-hint
+                      class="filter-field"
                     ></v-select>
                   </v-col>
 
@@ -215,34 +223,27 @@
                   </v-col>
                 </v-row>
               </v-col>
-
-              <v-col cols="12">
-                <v-row>
-                  <v-col cols="6">
-                    <v-btn
-                      block
-                      variant="text"
-                      @click="setMember({ mode: 'assign-role' })"
-                    >
-                      Cancel
-                    </v-btn>
-                  </v-col>
-                  <v-col cols="6">
-                    <v-btn
-                      block
-                      variant="flat"
-                      color="black"
-                      :disabled="!memberRoleForm"
-                      type="submit"
-                    >
-                      Submit
-                    </v-btn>
-                  </v-col>
-                </v-row>
-              </v-col>
             </v-row>
-          </v-form>
-        </v-card-text>
+          </v-card-text>
+
+          <div class="screen-modal__footer">
+            <v-btn
+              class="screen-btn-ghost"
+              variant="outlined"
+              @click="setMember({ mode: 'assign-role' })"
+            >
+              Cancel
+            </v-btn>
+            <v-btn
+              class="screen-btn-primary"
+              variant="flat"
+              :disabled="!memberRoleForm"
+              type="submit"
+            >
+              Submit
+            </v-btn>
+          </div>
+        </v-form>
       </v-card>
     </v-dialog>
   </div>

package/components/RolePermissionMain.vue

@@ -105,23 +105,23 @@
       />
     </v-dialog>
 
-    <v-dialog v-model="confirmDialog" 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 Role
-            </span>
-          </v-row>
-        </v-toolbar>
+    <!--
+      Was a `v-toolbar` title bar over a toolbar footer of two block buttons,
+      the confirm one on `color="black"` - not a token, so it drew a
+      light-theme fill on the dark theme. The shared confirmation shape now.
+      Same question, same reassignment rows, same disabled rule.
+    -->
+    <v-dialog v-model="confirmDialog" max-width="520">
+      <v-card class="screen-modal">
+        <v-card-title>Delete Role</v-card-title>
 
-        <v-card-text>
-          <span v-if="!hasAssignedMembers" class="text-subtitle-2">
+        <v-card-text class="screen-modal__body">
+          <span v-if="!hasAssignedMembers">
             Are you sure you want to delete this role? This action cannot be
             undone.
           </span>
           <template v-else>
-            <p class="text-subtitle-2 mb-4">
+            <p class="mb-4">
             There are currently
             <span class="text-error font-weight-bold">
               {{ deletionPreview.members.length }}
@@ -138,7 +138,7 @@
               class="mb-3 pa-3 border rounded-lg"
               align="center"
             >
-              <v-col cols="12" sm="5" class="text-body-2 mb-2 mb-sm-0">
+              <v-col cols="12" sm="5" class="mb-2 mb-sm-0">
                 {{ member.name || member.user }}
               </v-col>
               <v-col cols="12" sm="7">
@@ -150,43 +150,32 @@
                   label="Reassign role"
                   density="comfortable"
                   hide-details
+                  class="filter-field"
                 />
               </v-col>
             </v-row>
           </template>
         </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"
-                height="48"
-                @click="closeDeleteDialog"
-                :disabled="deleteLoading"
-              >
-                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"
-                @click="handleDeleteRole"
-                :loading="deleteLoading"
-                :disabled="hasAssignedMembers && !canConfirmDeletion"
-              >
-                {{ hasAssignedMembers ? "Confirm" : "Delete" }}
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-toolbar>
+        <div class="screen-modal__footer">
+          <v-btn
+            class="screen-btn-ghost"
+            variant="outlined"
+            :disabled="deleteLoading"
+            @click="closeDeleteDialog"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            class="screen-btn-primary"
+            variant="flat"
+            :loading="deleteLoading"
+            :disabled="hasAssignedMembers && !canConfirmDeletion"
+            @click="handleDeleteRole"
+          >
+            {{ hasAssignedMembers ? "Confirm" : "Delete" }}
+          </v-btn>
+        </div>
       </v-card>
     </v-dialog>