@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/ClientMain.vue

@@ -632,7 +632,7 @@ onUnmounted(() => {
 .page-wrap {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-size: 14px;
-  color: #111827;
+  color: var(--text);
   background: transparent;
 }
 
@@ -643,17 +643,21 @@ onUnmounted(() => {
   gap: 12px;
   padding: 12px 0;
   background: transparent;
+  /* The title, the 260px search and the invite button do not fit a phone on
+     one line, and without this the whole page scrolled sideways. */
+  flex-wrap: wrap;
 }
 .topbar-right {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 12px;
+  flex-wrap: wrap;
 }
 .btn-invite {
-  background: #fff;
-  color: #111827;
-  border: 1px solid #D1D5DB;
+  background: var(--card);
+  color: var(--text);
+  border: 1px solid var(--border);
   border-radius: 24px;
   padding: 10px 22px;
   font-size: 14px;
@@ -662,26 +666,27 @@ onUnmounted(() => {
   white-space: nowrap;
   transition: background 0.15s;
 }
-.btn-invite:hover { background: #F9FAFB; }
+.btn-invite:hover { background: var(--hover); }
 
 .search-wrap {
   position: relative;
   width: 260px;
+  max-width: 100%;
   flex-shrink: 0;
 }
 .search-input {
   width: 100%;
   height: 36px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 0 34px 0 12px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   outline: none;
 }
-.search-input:focus { border-color: #9CA3AF; }
-.search-input::placeholder { color: #9CA3AF; }
+.search-input:focus { border-color: var(--muted); }
+.search-input::placeholder { color: var(--muted); }
 .search-icon {
   position: absolute;
   right: 12px;
@@ -698,18 +703,25 @@ onUnmounted(() => {
   transform: translateY(-50%);
   border: none;
   background: transparent;
-  color: #9CA3AF;
+  color: var(--muted);
   font-size: 16px;
   cursor: pointer;
   line-height: 1;
   padding: 0;
 }
-.clear-btn:hover { color: #374151; }
+.clear-btn:hover { color: var(--text2); }
 
 .filter-wrap {
   display: flex;
   gap: 10px;
-  flex-shrink: 0;
+  /* Three filters do not fit a phone beside the search box. `flex-shrink: 0`
+     kept this row at its 463px content width, so it never wrapped and the
+     whole page scrolled sideways at 360. */
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.filter-wrap > * {
+  max-width: 100%;
 }
 .filter-field {
   position: relative;
@@ -721,8 +733,8 @@ onUnmounted(() => {
   top: -8px;
   left: 9px;
   font-size: 10px;
-  color: #6B7280;
-  background: #fff;
+  color: var(--muted);
+  background: var(--card);
   padding: 0 3px;
   pointer-events: none;
   z-index: 1;
@@ -730,18 +742,18 @@ onUnmounted(() => {
 }
 .filter-field select {
   height: 36px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 0 28px 0 10px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   appearance: none;
   cursor: pointer;
   outline: none;
   min-width: 110px;
 }
-.filter-field select:focus { border-color: #9CA3AF; }
+.filter-field select:focus { border-color: var(--muted); }
 .chevron {
   position: absolute;
   right: 9px;
@@ -755,8 +767,8 @@ onUnmounted(() => {
 /* ===== TABLE CARD ===== */
 .table-card {
   margin: 12px 0 0 0;
-  background: #fff;
-  border: 1px solid #E5E7EB;
+  background: var(--card);
+  border: 1px solid var(--border);
   border-radius: 10px;
   overflow: hidden;
 }
@@ -767,8 +779,8 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 6px 12px;
-  background: #fff;
-  border-bottom: 1px solid #F3F4F6;
+  background: var(--card);
+  border-bottom: 1px solid var(--hover);
 }
 .toolbar-left { display: flex; align-items: center; }
 .toolbar-right { display: flex; align-items: center; gap: 6px; }
@@ -777,7 +789,7 @@ onUnmounted(() => {
   background: none;
   border: none;
   cursor: pointer;
-  color: #6B7280;
+  color: var(--muted);
   width: 28px;
   height: 28px;
   border-radius: 6px;
@@ -786,14 +798,14 @@ onUnmounted(() => {
   justify-content: center;
   transition: background 0.15s;
 }
-.refresh-btn:hover { background: #F3F4F6; }
+.refresh-btn:hover { background: var(--hover); }
 .refresh-btn.spinning svg { animation: spin 0.8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
 
-.page-range-text { font-size: 12px; color: #6B7280; }
+.page-range-text { font-size: 12px; color: var(--muted); }
 .page-btn {
   background: none;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 5px;
   width: 24px;
   height: 24px;
@@ -801,22 +813,22 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: #374151;
+  color: var(--text2);
   transition: background 0.1s;
 }
-.page-btn:hover:not(:disabled) { background: #F3F4F6; }
+.page-btn:hover:not(:disabled) { background: var(--hover); }
 .page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
 
 /* ===== TABS ===== */
 .tabs-row {
   display: flex;
-  border-bottom: 1px solid #E5E7EB;
+  border-bottom: 1px solid var(--border);
   padding: 0 16px;
 }
 .tab {
   padding: 10px 14px;
   font-size: 13px;
-  color: #6B7280;
+  color: var(--muted);
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
@@ -824,15 +836,15 @@ onUnmounted(() => {
   margin-bottom: -1px;
   transition: color 0.15s, border-color 0.15s;
 }
-.tab:hover { color: #374151; }
-.tab.active { color: #111827; border-bottom-color: #111827; font-weight: 500; }
+.tab:hover { color: var(--text2); }
+.tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 500; }
 
 /* ===== LOADING BAR ===== */
-.loading-bar { height: 2px; background: #F3F4F6; overflow: hidden; }
+.loading-bar { height: 2px; background: var(--hover); overflow: hidden; }
 .loading-bar-fill {
   height: 100%;
   width: 35%;
-  background: #6B7280;
+  background: var(--muted);
   animation: slide 1.1s ease-in-out infinite;
 }
 @keyframes slide {
@@ -843,39 +855,37 @@ onUnmounted(() => {
 /* ===== TABLE ===== */
 .table-scroll { overflow-x: auto; }
 table { width: 100%; border-collapse: collapse; font-size: 13px; }
+/* `.table-card thead th` / `tbody td` in screens.css state the design's table
+   header and cell with `!important`; the padding, font, colour and background
+   this block used to set never applied. Only what still applies is kept. */
 thead th {
-  padding: 10px 16px;
   text-align: left;
-  font-weight: 600;
-  font-size: 13px;
-  color: #374151;
-  border-bottom: 1px solid #E5E7EB;
+  border-bottom: 1px solid var(--border);
   white-space: nowrap;
-  background: #fff;
 }
-tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
+tbody tr { border-bottom: 1px solid var(--hover); transition: background 0.1s; }
 tbody tr:last-child { border-bottom: none; }
-tbody tr:hover { background: #FAFAFA; }
-tbody td { padding: 14px 16px; vertical-align: middle; }
+tbody tr:hover { background: var(--thead); }
+tbody td { vertical-align: middle; }
 
-.empty { text-align: center; color: #9CA3AF; padding: 48px 0 !important; }
-.td-name { font-weight: 500; color: #111827; }
-.td-muted { color: #6B7280; font-size: 13px; }
+.empty { text-align: center; color: var(--muted); padding: 48px 0 !important; }
+.td-name { font-weight: 500; color: var(--text); }
+.td-muted { color: var(--muted); font-size: 13px; }
 
 .sites-badge {
   display: inline-block;
-  background: #F3F4F6;
+  background: var(--hover);
   border-radius: 20px;
   padding: 3px 12px;
   font-size: 12px;
-  color: #374151;
+  color: var(--text2);
 }
 .date-cell {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
-  color: #374151;
+  color: var(--text2);
 }
 
 /* ===== STATUS CHIPS ===== */
@@ -889,12 +899,12 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   font-weight: 500;
 }
 .status-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
-.status-chip.active    { background: #D1FAE5; color: #065F46; }
-.status-chip.active::before    { background: #10B981; }
-.status-chip.suspended { background: #FEE2E2; color: #991B1B; }
-.status-chip.suspended::before { background: #EF4444; }
-.status-chip.pending   { background: #FEF9C3; color: #854D0E; }
-.status-chip.pending::before   { background: #EAB308; }
+.status-chip.active    { background: var(--ok-bg); color: var(--ok); }
+.status-chip.active::before    { background: currentColor; }
+.status-chip.suspended { background: var(--err-bg); color: var(--err); }
+.status-chip.suspended::before { background: currentColor; }
+.status-chip.pending   { background: var(--warn-bg); color: var(--warn); }
+.status-chip.pending::before   { background: currentColor; }
 
 /* ===== ACTION MENU ===== */
 .action-wrap { position: relative; }
@@ -907,16 +917,16 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   border-radius: 6px;
   padding: 6px 8px;
   cursor: pointer;
-  color: #9CA3AF;
+  color: var(--muted);
   transition: background 0.15s;
 }
-.dots-btn:hover { background: #F3F4F6; color: #374151; }
+.dots-btn:hover { background: var(--hover); color: var(--text2); }
 .dots-btn span { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
 
 .dropdown {
   position: fixed;
-  background: #fff;
-  border: 1px solid #E5E7EB;
+  background: var(--card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   min-width: 130px;
@@ -932,12 +942,12 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   background: none;
   border: none;
   cursor: pointer;
-  color: #374151;
+  color: var(--text2);
   transition: background 0.1s;
 }
-.dd-item:hover { background: #F9FAFB; }
-.dd-item.danger { color: #DC2626; }
-.dd-item.danger:hover { background: #FEF2F2; }
+.dd-item:hover { background: var(--hover); }
+.dd-item.danger { color: var(--err); }
+.dd-item.danger:hover { background: var(--err-bg); }
 
 .cancel-btn {
   display: inline-flex;
@@ -945,27 +955,27 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   gap: 6px;
   padding: 5px 12px;
   font-size: 12px;
-  color: #DC2626;
-  background: #FEF2F2;
-  border: 1px solid #FECACA;
+  color: var(--err);
+  background: var(--err-bg);
+  border: 1px solid var(--err-bg);
   border-radius: 6px;
   cursor: pointer;
   transition: background 0.15s;
 }
-.cancel-btn:hover { background: #FEE2E2; }
+.cancel-btn:hover { background: var(--err-bg); }
 .cancel-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .spinner {
   display: inline-block;
   width: 11px;
   height: 11px;
-  border: 1.5px solid #FECACA;
-  border-top-color: #DC2626;
+  border: 1.5px solid var(--err-bg);
+  border-top-color: var(--err);
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
 }
 .spinner-light {
   border: 1.5px solid rgba(255,255,255,0.5);
-  border-top-color: #fff;
+  border-top-color: var(--card);
 }
 
 .client-detail {
@@ -982,7 +992,7 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   z-index: 1000;
 }
 .dialog-box {
-  background: #fff;
+  background: var(--card);
   border-radius: 12px;
   max-width: 500px;
   width: 90%;
@@ -992,7 +1002,7 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
 
 /* ===== SUSPEND CONFIRMATION DIALOG ===== */
 .confirm-box {
-  background: #fff;
+  background: var(--card);
   border-radius: 12px;
   max-width: 380px;
   width: 90%;
@@ -1002,12 +1012,12 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
 .confirm-title {
   font-size: 16px;
   font-weight: 600;
-  color: #111827;
+  color: var(--text);
   margin-bottom: 8px;
 }
 .confirm-text {
   font-size: 13.5px;
-  color: #4B5563;
+  color: var(--text2);
   line-height: 1.5;
   margin-bottom: 20px;
 }
@@ -1020,14 +1030,14 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   padding: 8px 16px;
   font-size: 13px;
   font-weight: 500;
-  border: 1px solid #D1D5DB;
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: #fff;
-  color: #374151;
+  background: var(--card);
+  color: var(--text2);
   cursor: pointer;
   transition: background 0.15s;
 }
-.btn-cancel:hover { background: #F9FAFB; }
+.btn-cancel:hover { background: var(--hover); }
 .btn-confirm-danger {
   display: inline-flex;
   align-items: center;
@@ -1039,11 +1049,11 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   font-weight: 500;
   border: none;
   border-radius: 8px;
-  background: #DC2626;
-  color: #fff;
+  background: var(--err);
+  color: var(--card);
   cursor: pointer;
   transition: background 0.15s;
 }
-.btn-confirm-danger:hover:not(:disabled) { background: #B91C1C; }
+.btn-confirm-danger:hover:not(:disabled) { background: var(--err); }
 .btn-confirm-danger:disabled { opacity: 0.7; cursor: not-allowed; }
 </style>

package/components/ConfirmDialog.vue

@@ -1,36 +1,42 @@
 <template>
-  <v-dialog v-model="dialog" max-width="400" persistent>
-    <v-card class="rounded-xl pa-6" elevation="2">
+  <!-- 520px is the handoff's `--modal-w`; the card was `rounded-xl` (24px) on a
+       Material elevation, where the design draws a 16px corner and its own
+       modal shadow. -->
+  <v-dialog v-model="dialog" max-width="520" persistent>
+    <v-card class="screen-modal pa-6">
       <!-- Close Button -->
       <v-btn
         icon
         variant="text"
         size="small"
-        class="position-absolute"
+        class="screen-modal__close position-absolute"
         style="top: 8px; right: 8px"
         @click="closeDialog"
       >
         <v-icon>mdi-close</v-icon>
       </v-btn>
 
-      <v-card-text class="text-center">
+      <v-card-text class="screen-modal__body text-center">
         <v-row v-if="imageSrc" justify="center" class="py-10">
           <v-img height="120" :src="imageSrc" alt="Dialog Image" contain />
         </v-row>
 
-        <!-- Title Slot -->
-        <div class="text-h6 font-weight-medium mb-2">
+        <!-- Title Slot. The handoff's 17px/800 modal title belongs to a
+             bordered header row this dialog does not draw - a centred title
+             inside the body is a case it is silent on, so it takes the
+             established `.screen-card-title` primitive. -->
+        <div class="screen-card-title mb-2">
           <slot name="title"></slot>
         </div>
 
         <!-- Description Slot -->
-        <div class="text-body-1 mb-4">
+        <div class="mb-4">
           <slot name="description"></slot>
         </div>
       </v-card-text>
 
       <!-- Footer Slot -->
-      <v-card-actions>
+      <v-card-actions class="screen-modal__footer">
         <slot name="footer"></slot>
       </v-card-actions>
     </v-card>

package/components/Container/Standard.vue

@@ -1,15 +1,17 @@
 <template>
   <v-row no-gutters>
+    <!--
+      The same Back link and the same page title as `SpecificAttr.vue`, which
+      is the other half of this pair - it was already on `PageHeader` and this
+      one was still on `text-h5 font-weight-medium`, Vuetify's 24px/500 Roboto
+      rather than the design's 22px/800. `.screen-back` is stated once in
+      `screens.css` with the design gap written out next to it.
+    -->
     <v-col cols="12">
-      <span
-        class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
-        @click="emit('back')"
-      >
-        Back
-      </span>
+      <span class="screen-back" @click="emit('back')"> Back </span>
     </v-col>
     <v-col cols="12">
-      <span class="text-h5 font-weight-medium">{{ props.title }}</span>
+      <PageHeader :title="props.title" />
     </v-col>
 
     <v-col cols="12" class="mt-4">