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

package/components/AreaChecklistHistoryMain.vue

@@ -32,11 +32,12 @@
 
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
-            <v-card
-              class="w-100 filter-bar d-flex align-center ga-5"
-              flat
-              :height="60"
-            >
+            <!--
+              A bare `v-card` here paints Vuetify's own `surface`, a shade off
+              the table card it sits inside. A plain row on the card's own
+              background, with both filters on the design's field.
+            -->
+            <div class="w-100 filter-bar d-flex align-center ga-5">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -45,6 +46,7 @@
                 max-width="300"
                 append-inner-icon="mdi-magnify"
                 hide-details
+                class="filter-field"
               />
               <v-select
                 v-model="status"
@@ -55,8 +57,9 @@
                 clearable
                 hide-details
                 max-width="200"
+                class="filter-field"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
 

package/components/AreaMain.vue

@@ -19,23 +19,24 @@
       >
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
-            <v-card
-              class="w-100 px-3 d-flex align-center ga-5 py-2"
-              flat
-              :height="60"
-            >
+            <!--
+              A bare `v-card` here paints Vuetify's own `surface`, a slab a
+              shade off the table card it sits inside. A plain row on the
+              card's own background, with the filter on the design's field.
+            -->
+            <div class="w-100 px-3 d-flex align-center ga-5 py-2">
               <v-select
                 v-model="areaTypeFilter"
                 :items="typeOptions"
                 density="compact"
                 hide-details
-                class="mx-2"
+                class="mx-2 filter-field"
                 style="max-width: 160px"
                 item-title="title"
                 item-value="value"
                 label="Type"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
 
@@ -213,64 +214,50 @@
     </HygieneUpdateMoreAction>
   </v-dialog>
 
-  <v-dialog v-model="dialogDeleteItem" 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 {{ selectedItem?.name || entityTypeLabel }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text>
-        <span class="text-subtitle-2"
-          >Are you sure you want to delete this {{ entityTypeLabel }}?</span
-        >
+  <!--
+    Both dialogs were `v-toolbar` title bars over toolbar footers of 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. The shared `.screen-modal` shape now, same copy,
+    same labels, same handlers, same busy states.
+  -->
+  <v-dialog v-model="dialogDeleteItem" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        Delete {{ selectedItem?.name || entityTypeLabel }}
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
+        Are you sure you want to delete this {{ entityTypeLabel }}?
       </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="dialogDeleteItem = 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="_deleteItem"
-            >
-              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="dialogDeleteItem = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="_deleteItem"
+        >
+          Delete
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
-  <v-dialog v-if="isToiletLocation" v-model="dialogShowQR" max-width="500">
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize">
-            QR Code for {{ selectedItem?.name || "Toilet Location" }}
-          </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text class="d-flex justify-center pa-6">
+  <v-dialog v-if="isToiletLocation" v-model="dialogShowQR" max-width="520">
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">
+        QR Code for {{ selectedItem?.name || "Toilet Location" }}
+      </v-card-title>
+      <v-card-text class="screen-modal__body d-flex justify-center">
         <v-row no-gutters class="d-flex justify-center">
           <v-col cols="12" class="text-center">
             <div v-if="qrLoading" class="d-flex flex-column align-center">
@@ -301,36 +288,23 @@
         </v-row>
       </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="dialogShowQR = 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="qrLoading"
-              @click="onDownloadQrCode"
-            >
-              Download
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="dialogShowQR = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="qrLoading"
+          @click="onDownloadQrCode"
+        >
+          Download
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 

package/components/Carousel.vue

@@ -22,9 +22,7 @@
 
         <div class="edit-btn mb-5" v-if="imgEditable">
           <v-btn
-            color="primary"
-            height="42px"
-            width="100px"
+            class="screen-btn-primary"
             @click.stop="onMediaEdit(item.url, idx)"
           >
             Edit
@@ -32,14 +30,9 @@
         </div>
 
         <div class="delete-btn mb-3" v-if="imgDelete">
-          <v-btn
-            color="red"
-            height="42px"
-            width="100px"
-            @click.stop="onMediaDelete(item.url)"
-          >
+          <AppButton variant="err" @click.stop="onMediaDelete(item.url)">
             Delete
-          </v-btn>
+          </AppButton>
         </div>
       </v-carousel-item>
 
@@ -53,20 +46,15 @@
             <source :src="item.url" />
           </video>
           <div class="play-overlay">
-            <v-btn class="play-btn" icon size="55" color="primary">
+            <v-btn class="play-btn" icon size="55">
               <v-icon icon="mdi-play" size="40" />
             </v-btn>
           </div>
 
           <div class="delete-btn pb-4" v-if="imgDelete">
-            <v-btn
-              color="red"
-              height="42px"
-              width="100px"
-              @click.stop="onMediaDelete(item.url)"
-            >
+            <AppButton variant="err" @click.stop="onMediaDelete(item.url)">
               Delete
-            </v-btn>
+            </AppButton>
           </div>
         </div>
       </v-carousel-item>
@@ -82,19 +70,16 @@
           <v-icon
             :icon="getFileIcon(item.type)"
             size="150"
-            :color="getFileIconColor(getFileIcon(item.type))"
+            :class="getFileIconTone(getFileIcon(item.type))"
           />
-          <div class="text-h6 text-center text-wrap mt-2">{{ item.name }}</div>
+          <div class="screen-card-title text-center text-wrap mt-2">
+            {{ item.name }}
+          </div>
 
           <div class="delete-btn pb-4" v-if="imgDelete">
-            <v-btn
-              color="red"
-              height="42px"
-              width="100px"
-              @click.stop="onMediaDelete(item.url)"
-            >
+            <AppButton variant="err" @click.stop="onMediaDelete(item.url)">
               Delete
-            </v-btn>
+            </AppButton>
           </div>
         </div>
       </v-carousel-item>
@@ -105,7 +90,7 @@
 
   <!-- Dialog for fullscreen view -->
   <v-dialog v-model="isDialogOpen" max-width="700">
-    <v-card>
+    <v-card class="screen-modal">
       <v-btn icon class="close-btn" @click="isDialogOpen = false">
         <v-icon icon="mdi-close" size="40" />
       </v-btn>
@@ -346,14 +331,21 @@ const getFileIcon = (type: string) => {
   return iconMap[type] || "mdi-file-outline";
 };
 
-function getFileIconColor(icon?: string) {
-  if (icon === "mdi-file-pdf-box") return "#F44336"; // Red
-  if (icon === "mdi-file-word-box") return "#2196F3"; // Blue
+/**
+ * The file-type tone. The handoff draws no file-type icon palette at all, so
+ * the six distinctions this screen already made are kept and simply said in the
+ * tokens that carry those tones - the same reading `AttachmentsViewer` took.
+ * The one exception is the archive icon, which was purple: there is no purple
+ * token, so it falls in with the generic files on `--muted`. That IS a change
+ * of meaning and is recorded rather than papered over.
+ */
+function getFileIconTone(icon?: string) {
+  if (icon === "mdi-file-pdf-box") return "tone-err";
+  if (icon === "mdi-file-word-box") return "tone-info";
   if (icon === "mdi-file-excel-box" || icon === "mdi-file-delimited-outline")
-    return "#4CAF50"; // Green
-  if (icon === "mdi-file-powerpoint-box") return "#FF9800"; // Orange
-  if (icon === "mdi-zip-box-outline") return "#9C27B0"; // Purple
-  return "grey";
+    return "tone-ok";
+  if (icon === "mdi-file-powerpoint-box") return "tone-warn";
+  return "tone-muted";
 }
 
 const message = ref("");
@@ -419,6 +411,13 @@ async function downloadFile({
   right: 5%;
 }
 
+/**
+ * DELIBERATELY NOT `.screen-modal__close`. This close sits ON the picture, not
+ * on a card, so the design's borderless muted glyph would be unreadable over a
+ * bright photo in light theme and over a dark one in dark theme. The existing
+ * dark chip is legible on both, and the handoff draws no media lightbox at all
+ * - parity with a readable control wins over a primitive that would disappear.
+ */
 .close-btn {
   position: absolute;
   top: 10px;
@@ -440,8 +439,29 @@ async function downloadFile({
   pointer-events: auto;
 }
 
+/* Was `color="primary"`, i.e. the FOREGROUND token used as a fill. The button
+   the design fills is `--accent-strong` with `--on-accent-strong` ink. */
 .play-btn {
-  border-radius: 9999px;
+  border-radius: var(--r-pill);
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+/* The file-type tones, on tokens instead of six hard-coded hexes. */
+.tone-err {
+  color: var(--err);
+}
+.tone-info {
+  color: var(--info);
+}
+.tone-ok {
+  color: var(--ok);
+}
+.tone-warn {
+  color: var(--warn);
+}
+.tone-muted {
+  color: var(--muted);
 }
 
 .dialog-video-container {

package/components/Chat/Bubbles.vue

@@ -1,36 +1,32 @@
 <template>
-  <v-card class="mb-2 pa-4 rounded-lg" width="400" elevation="2">
+  <v-card class="chat-bubble screen-card mb-2 pa-4" width="400" elevation="0">
     <v-row no-gutters align="center">
       <v-col cols="auto" class="mr-3">
-        <v-avatar color="surface-variant" size="35">
+        <v-avatar class="chat-bubble__avatar" size="35">
           <v-img v-if="currentUser?.profile" width="15" height="15" />
-          <span v-else class="text-h5">{{ getNameInitials(senderName) }}</span>
+          <span v-else>{{ getNameInitials(senderName) }}</span>
         </v-avatar>
       </v-col>
 
       <v-col class="d-flex flex-column">
-        <span class="text-body-2 font-weight-medium">{{ senderName }}</span>
-        <span class="text-caption text-grey">{{ role }}</span>
+        <span class="chat-bubble__sender">{{ senderName }}</span>
+        <span class="chat-bubble__sub">{{ role }}</span>
       </v-col>
     </v-row>
 
     <v-row no-gutters class="mt-1">
       <v-col>
-        <span class="py-2">{{ message }}</span>
+        <span class="chat-bubble__text py-2">{{ message }}</span>
 
         <v-row no-gutters justify="space-between" align="center" class="mt-1">
           <v-col cols="auto">
-            <span class="text-caption">{{ timestamp }}</span>
+            <span class="chat-bubble__sub">{{ timestamp }}</span>
           </v-col>
-          <v-col
-            v-if="isCurrentUser"
-            cols="auto"
-            class="d-flex align-center bg-grey-200"
-          >
-            <v-icon size="16" class="mr-1 text--secondary"
+          <v-col v-if="isCurrentUser" cols="auto" class="d-flex align-center">
+            <v-icon size="16" class="chat-bubble__sub mr-1"
               >mdi-eye-outline</v-icon
             >
-            <span class="text-caption text--secondary">{{ seenLabel }}</span>
+            <span class="chat-bubble__sub">{{ seenLabel }}</span>
           </v-col>
         </v-row>
       </v-col>
@@ -51,3 +47,36 @@ defineProps<{
 const { currentUser } = useLocalAuth();
 const { getNameInitials } = useUtils();
 </script>
+
+<style scoped>
+.chat-bubble {
+  font-family: var(--font-sans);
+  color: var(--text);
+}
+
+/* Was `color="surface-variant"` with the initials at `text-h5`, i.e. a 24px
+   pair of letters in a 35px circle. The design's avatar is the tone wash with
+   the accent ink, and the initials fit inside it. */
+.chat-bubble__avatar {
+  background: var(--hover);
+  color: var(--text2);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.chat-bubble__sender {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+}
+
+.chat-bubble__text {
+  font-size: var(--fs-cell);
+}
+
+/* The role, the timestamp and the seen label were `text-grey`, `text-caption`
+   and `text--secondary` - three different greys for one sub-line. One tone. */
+.chat-bubble__sub {
+  font-size: var(--fs-chip);
+  color: var(--muted);
+}
+</style>

package/components/Chat/Information.vue

@@ -1,21 +1,16 @@
 <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-info fill-height d-flex flex-column"
   >
     <v-row class="pa-4">
       <v-sheet
         class="overflow-y-auto flex-grow-1"
         :style="{ height: 'calc(100vh - 250px)', overflowX: 'hidden' }"
       >
-        <v-col
-          cols="12"
-          class="mb-2"
-          style="position: sticky; top: 0; background-color: white; z-index: 1"
-        >
-          <h3 class="text-h6">
+        <v-col cols="12" class="chat-info__head mb-2">
+          <h3 class="screen-card-title">
             {{ type === "workOrder" ? "Work Order" : "Feedback" }} Information
           </h3>
         </v-col>
@@ -105,7 +100,7 @@
             </v-col>
             <v-col v-else cols="6" class="py-1 text-right">
               <v-btn
-                class="text-none text-capitalize text-blue"
+                class="chat-info__link text-none"
                 rounded="pill"
                 variant="flat"
                 size="small"
@@ -130,13 +125,7 @@
           <v-row dense class="my-1">
             <v-col cols="6" class="py-1"><strong>Status:</strong></v-col>
             <v-col cols="6" class="py-1 text-right">
-              <v-chip
-                :color="getColorStatus(item.status)"
-                size="x-small"
-                text-color="white"
-              >
-                {{ item.status }}
-              </v-chip>
+              <StatusChip :status="item.status" />
             </v-col>
           </v-row>
 
@@ -152,12 +141,11 @@
       </v-sheet>
     </v-row>
 
-    <v-sheet class="px-4 py-2">
+    <v-sheet class="chat-info__actions px-4 py-2">
       <v-btn
         block
-        color="primary"
         variant="flat"
-        class="mb-2 text-capitalize"
+        class="screen-btn-primary mb-2"
         @click="$emit('edit')"
       >
         Edit
@@ -165,23 +153,15 @@
       <v-btn
         v-if="item?.status !== 'Completed'"
         block
-        color="primary-button"
-        density="default"
-        class="mb-2 text-capitalize"
+        variant="flat"
+        class="screen-btn-primary mb-2"
         @click="$emit('mark-complete-request')"
       >
         Mark as Complete
       </v-btn>
-      <v-btn
-        block
-        variant="flat"
-        color="red"
-        density="default"
-        class="text-white text-capitalize"
-        @click="$emit('delete')"
-      >
+      <AppButton variant="err" class="chat-info__delete" @click="$emit('delete')">
         Delete
-      </v-btn>
+      </AppButton>
     </v-sheet>
 
     <WorkOrderCreate
@@ -414,3 +394,40 @@ function showWorkOrderInfo(workOrderId: string) {
   };
 }
 </script>
+
+<style scoped>
+/* The same two hard-coded #e0e0e0 hairlines the other two chat panels carried,
+   and a sticky heading whose background was the literal word `white` - i.e. a
+   white bar across the dark theme. */
+.chat-info {
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-sans);
+  color: var(--text);
+}
+
+.chat-info__head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--card);
+}
+
+.chat-info__actions {
+  background: var(--card);
+}
+
+/* AppButton is a <button>, not a v-btn, so `block` does not reach it. */
+.chat-info__delete {
+  width: 100%;
+}
+
+/* Was `text-blue` - a Vuetify palette word, not a token. */
+.chat-info__link {
+  background: transparent;
+  color: var(--accent-text);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn-strong);
+}
+</style>