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

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>

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>