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

package/components/Chat/ListCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="mb-2 pa-2 rounded-lg border-sm" elevation="0">
+  <v-card class="chat-listcard screen-card mb-2 pa-2" elevation="0">
     <v-row no-gutters align="center">
       <v-col cols="12" sm="4" class="d-flex justify-center align-center">
         <v-img
@@ -15,30 +15,30 @@
       <v-col cols="12" sm="8" class="py-2 pe-1">
         <v-row dense>
           <v-col cols="12" class="d-flex align-center flex-wrap">
-            <span class="text-caption font-weight-medium me-1">Created by</span>
+            <span class="chat-listcard__label me-1">Created by</span>
 
-            <v-avatar color="surface-variant" size="20" class="me-1">
+            <v-avatar class="chat-listcard__avatar me-1" size="20">
               <v-img
                 v-if="userProfile"
                 :src="userProfile"
                 width="20"
                 height="20"
               />
-              <span v-else class="text-overline">
+              <span v-else class="chat-listcard__initials">
                 {{ getNameInitials }}
               </span>
             </v-avatar>
 
-            <span class="text-caption">{{ createdByName || "Unknown" }}</span>
+            <span class="chat-listcard__cell">{{ createdByName || "Unknown" }}</span>
           </v-col>
 
-          <v-col cols="12" class="text-caption">Subject: {{ subject }}</v-col>
+          <v-col cols="12" class="chat-listcard__cell">Subject: {{ subject }}</v-col>
 
-          <v-col cols="12" class="text-caption">
-            Status: <span class="text-orange">{{ status }}</span>
+          <v-col cols="12" class="chat-listcard__cell d-flex align-center ga-1">
+            Status: <StatusChip :status="status" />
           </v-col>
 
-          <v-col cols="12" class="text-caption">
+          <v-col cols="12" class="chat-listcard__cell">
             Date Created: {{ createdAt }}
           </v-col>
         </v-row>
@@ -60,3 +60,32 @@ defineProps({
   getNameInitials: Function,
 });
 </script>
+
+<style scoped>
+.chat-listcard {
+  font-family: var(--font-sans);
+  color: var(--text);
+}
+
+.chat-listcard__cell,
+.chat-listcard__label {
+  font-size: var(--fs-cell-dense);
+}
+
+.chat-listcard__label {
+  font-weight: 600;
+}
+
+/* Was `color="surface-variant"` with `text-overline` initials - 10px letters
+   with 1.6px tracking inside a 20px circle, which drew as one clipped glyph. */
+.chat-listcard__avatar {
+  background: var(--hover);
+  color: var(--text2);
+}
+
+.chat-listcard__initials {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+</style>

package/components/Chat/Message.vue

@@ -1,18 +1,17 @@
 <template>
   <v-sheet
-    elevation="1"
+    elevation="0"
     rounded="0"
-    class="fill-height d-flex flex-column"
-    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
+    class="chat-panel fill-height d-flex flex-column"
   >
-    <div style="border-bottom: 1px solid #e0e0e0" class="px-4 pt-4 pb-2 mb-2">
-      <h3 class="text-h6">
+    <div class="chat-panel__head px-4 pt-4 pb-2 mb-2">
+      <h3 class="screen-card-title">
         {{ type === "workOrder" ? "Work Order" : "Feedback" }} Chat
       </h3>
     </div>
 
     <v-sheet
-      class="overflow-y-auto flex-grow-1 pa-3"
+      class="chat-panel__thread overflow-y-auto flex-grow-1 pa-3"
       :style="{ height: 'calc(100vh - 300px)', overflowX: 'hidden' }"
     >
       <v-row
@@ -35,10 +34,11 @@
       </v-row>
     </v-sheet>
 
-    <v-card class="mx-4 mb-4 mt-2 pa-3 rounded-lg" elevation="2">
+    <v-card class="screen-card mx-4 mb-4 mt-2 pa-3" elevation="0">
       <v-row no-gutters align="end">
         <v-col cols="10">
           <v-textarea
+            class="filter-field"
             label="Message"
             auto-grow
             hide-details
@@ -47,9 +47,7 @@
           />
         </v-col>
         <v-col cols="2" class="pl-2">
-          <v-btn color="primary-button" block class="pa-4 py-6 text-capitalize"
-            >Send</v-btn
-          >
+          <v-btn class="screen-btn-primary" variant="flat" block>Send</v-btn>
         </v-col>
       </v-row>
 
@@ -57,23 +55,27 @@
 
       <v-row justify="start" no-gutters align="center">
         <v-col cols="auto">
-          <v-icon size="20" class="mr-3">mdi-paperclip</v-icon>
+          <v-icon size="20" class="chat-panel__tool mr-3">mdi-paperclip</v-icon>
         </v-col>
 
         <v-col cols="auto">
-          <v-icon size="20" class="mr-3">mdi-emoticon-happy-outline</v-icon>
+          <v-icon size="20" class="chat-panel__tool mr-3"
+            >mdi-emoticon-happy-outline</v-icon
+          >
         </v-col>
 
         <v-col cols="auto">
           <v-menu location="top" offset="10">
             <template #activator="{ props }">
               <v-btn icon v-bind="props" density="compact" variant="text">
-                <v-icon size="20" color="gray">mdi-message-outline</v-icon>
+                <v-icon size="20" class="chat-panel__tool"
+                  >mdi-message-outline</v-icon
+                >
               </v-btn>
             </template>
 
-            <v-card min-width="350" class="rounded-lg">
-              <v-card-title class="text-subtitle-1 font-weight-medium pb-1"
+            <v-card min-width="350" class="screen-card">
+              <v-card-title class="screen-card-title pb-1"
                 >Quick Chat</v-card-title
               >
               <v-divider class="mb-1" />
@@ -156,3 +158,27 @@ const selectQuickChat = (msg: string) => {
   console.log("Quick Chat Selected:", msg);
 };
 </script>
+
+<style scoped>
+/* The panel's two rules were hard-coded `1px solid #e0e0e0`, which is a light-
+   theme hairline drawn on the dark theme as well. Same lines, on `--border`. */
+.chat-panel {
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+}
+
+.chat-panel__head {
+  border-bottom: 1px solid var(--border);
+}
+
+.chat-panel__thread {
+  background: var(--bg);
+}
+
+/* Was a bare icon and one `color="gray"` - not a token, and not the same tone
+   as the icon beside it. */
+.chat-panel__tool {
+  color: var(--muted);
+}
+</style>

package/components/Chat/Navigation.vue

@@ -1,31 +1,24 @@
 <template>
-  <v-sheet
-    elevation="1"
-    rounded="0"
-    class="pa-4 fill-height"
-    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
-  >
-    <h3 class="text-h6 mb-4">{{ title }}</h3>
+  <v-sheet elevation="0" rounded="0" class="chat-nav pa-4 fill-height">
+    <h3 class="screen-card-title mb-4">{{ title }}</h3>
 
     <v-text-field
       v-model="search"
       @input="_search"
       label="Search"
       prepend-inner-icon="mdi-magnify"
-      density="compact"
       hide-details
       variant="outlined"
-      class="mb-4"
+      class="filter-field mb-4"
     />
 
     <v-select
       label="Filter by Status"
       :items="['All', 'In Progress', 'To Do', 'Done']"
       v-model="selectedStatus"
-      density="compact"
       hide-details
       variant="outlined"
-      class="mb-4"
+      class="filter-field mb-4"
     />
 
     <v-row dense class="mb-4" align="center">
@@ -43,7 +36,7 @@
               v-bind="props"
               v-model="startDate"
               label="Start Date"
-              density="compact"
+              class="filter-field"
               variant="outlined"
               readonly
               hide-details
@@ -63,7 +56,7 @@
       </v-col>
 
       <v-col cols="2" class="d-flex align-center justify-center">
-        <span class="text-subtitle-2">to</span>
+        <span class="chat-nav__to">to</span>
       </v-col>
 
       <v-col cols="5">
@@ -80,7 +73,7 @@
               v-bind="props"
               v-model="endDate"
               label="End Date"
-              density="compact"
+              class="filter-field"
               variant="outlined"
               readonly
               hide-details
@@ -101,7 +94,7 @@
     </v-row>
 
     <v-sheet
-      class="overflow-y-auto flex-grow-1 pa-3"
+      class="chat-nav__list overflow-y-auto flex-grow-1 pa-3"
       :style="{ height: 'calc(100vh - 320px)', overflowX: 'hidden' }"
     >
       <v-row dense>
@@ -148,3 +141,22 @@ function _search() {
   emit("search", search.value);
 }
 </script>
+
+<style scoped>
+/* Same two hard-coded #e0e0e0 hairlines the chat panel carried, on --border. */
+.chat-nav {
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+}
+
+.chat-nav__list {
+  background: var(--bg);
+}
+
+.chat-nav__to {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>

package/components/CleaningScheduleMain.vue

@@ -98,11 +98,15 @@
         </template>
       </TableMain>
       <div v-else class="pa-4">
-        <v-card variant="outlined" class="pa-4">
-          <div class="text-subtitle-1">
+        <!--
+          Was an outlined `v-card` painted from Vuetify's own `surface`. The
+          design's card, and the notice at the design's cell size.
+        -->
+        <AppCard class="pa-4">
+          <div class="cs-no-permission">
             You do not have permission to view cleaning schedules.
           </div>
-        </v-card>
+        </AppCard>
       </div>
     </v-col>
   </v-row>
@@ -327,3 +331,11 @@ function showMessage(msg: string, color: string = "error") {
   }
 }
 </script>
+
+<style scoped>
+.cs-no-permission {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>

package/components/DrawImage.vue

@@ -4,32 +4,25 @@
     transition="dialog-top-transition"
     max-width="1000"
   >
-    <v-card class="pa-1">
-      <v-toolbar>
-        <v-spacer></v-spacer>
-        <v-btn icon="mdi-close" @click="emit('onCloseDialog')" />
-      </v-toolbar>
-      <canvas id="imageCanvas" />
-      <v-card-title class="text-end">
+    <v-card class="screen-modal">
+      <div class="draw-image__head">
         <v-btn
-          color="orange-darken-3"
-          size="small"
-          variant="flat"
-          style="height: 40px; margin-right: 12px"
-          @click="onClearDrawing()"
-        >
+          class="screen-modal__close"
+          variant="text"
+          icon="mdi-close"
+          aria-label="Close"
+          @click="emit('onCloseDialog')"
+        />
+      </div>
+      <canvas id="imageCanvas" />
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" @click="onClearDrawing()">
           Clear Drawing
         </v-btn>
-        <v-btn
-          color="blue-darken-3"
-          size="small"
-          variant="flat"
-          style="height: 40px"
-          @click="submit"
-        >
+        <v-btn class="screen-btn-primary" variant="flat" @click="submit">
           Submit
         </v-btn>
-      </v-card-title>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -170,3 +163,18 @@ async function onClearDrawing() {
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 }
 </script>
+
+<style scoped>
+/* The design's modal has a title row; this dialog has never had a title, only
+   a close - so the row keeps that and just moves the close onto the design's
+   borderless 32px square. No copy invented. */
+.draw-image__head {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 12px 0;
+}
+
+/* The canvas itself is untouched: its width/height are computed in script from
+   its own bounding box, so a layout rule here would quietly move the drawing
+   coordinates - a behaviour change no render can prove. */
+</style>

package/components/EquipmentItemMain.vue

@@ -198,22 +198,28 @@
   </v-dialog>
 
   <!-- Main Equipment Item Dialog -->
+  <!--
+    All three dialogs were hand-drawn: a 20px/700 title bar, a divider, and a
+    `v-card-actions` footer of two 56px block buttons with square corners, the
+    confirm one on `color="black"` - not a token, so it painted a light-theme
+    fill on the dark theme. The shared `.screen-modal` shape now. Same fields,
+    same labels, same handlers, same busy states.
+  -->
   <v-dialog v-model="dialogEquipmentItem" max-width="540" persistent>
-    <v-card>
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">Equipment Item</span>
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Equipment Item
         <v-spacer />
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="dialogEquipmentItem = false"
         />
       </v-card-title>
 
-      <v-divider />
-
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body">
         <v-form ref="equipmentItemFormRef">
           <!-- Add Equipment Section -->
           <v-row no-gutters class="mb-4">
@@ -374,49 +380,40 @@
         </v-form>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-0">
-        <v-row no-gutters>
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="text"
-              size="large"
-              height="56"
-              class="text-none font-weight-medium rounded-0"
-              @click="dialogEquipmentItem = false"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              size="large"
-              height="56"
-              class="text-none font-weight-bold rounded-0"
-              :loading="submitting"
-              @click="_equipmentItem()"
-            >
-              Checkout Item
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="submitting"
+          @click="dialogEquipmentItem = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="_equipmentItem()"
+        >
+          Checkout Item
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
   <v-dialog v-model="dialogPhotoForItem" max-width="720" persistent>
-    <v-card rounded="lg">
-      <v-card-title class="d-flex align-center pa-4">
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
         <div>
-          <div class="text-h6 font-weight-bold">Item Photos</div>
-          <div class="text-caption text-medium-emphasis">
+          Item Photos
+          <!--
+            The handoff draws no sub-line under a modal title. `--muted` at
+            12px, the figure batch I's `AttachmentsViewer` settled on, rather
+            than a third number.
+          -->
+          <div class="eqi-modal-sub">
             {{ equipmentItems[activePhotoIndex ?? 0]?.supplyName || "Item" }}
           </div>
         </div>
@@ -426,15 +423,14 @@
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="dialogPhotoForItem = false"
         />
       </v-card-title>
 
-      <v-divider />
-
       <!-- Body -->
-      <v-card-text class="pa-6" v-if="activePhotoIndex !== null">
+      <v-card-text class="screen-modal__body" v-if="activePhotoIndex !== null">
         <PhotoUpload
           title="Add / Take Photos"
           v-model="currentPhotos"
@@ -443,63 +439,42 @@
         />
       </v-card-text>
 
-      <v-divider />
-
       <!-- Footer -->
-      <v-card-actions class="pa-0">
-        <v-row no-gutters class="w-100">
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="text"
-              size="large"
-              height="56"
-              class="text-none font-weight-medium rounded-0"
-              @click="dialogPhotoForItem = false"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              size="large"
-              height="56"
-              class="text-none font-weight-bold rounded-0"
-              @click="dialogPhotoForItem = false"
-            >
-              Done
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="dialogPhotoForItem = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          @click="dialogPhotoForItem = false"
+        >
+          Done
+        </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">
-        <div>
-          <div class="text-h6 font-weight-bold">Attachment</div>
-        </div>
-
+    <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 />
-
       <!-- Body -->
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body">
         <v-img :src="attachmentUrl" contain />
       </v-card-text>
     </v-card>
@@ -817,4 +792,18 @@ const currentPhotoIds = computed({
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+/*
+  The sub-line under the "Item Photos" title. The handoff draws no such line,
+  so it takes the figure already settled on for one: `--muted` at 12px.
+  Scoped to `.v-card-title` because Vuetify's own title rule would otherwise
+  hand it the 20px it gives everything inside.
+*/
+.screen-modal .v-card-title .eqi-modal-sub {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--muted);
+}
+</style>