@7365admin1/layer-common 3.2.2-staging.161 → 3.2.2-staging.163

package/assets/css/screens.css

@@ -456,6 +456,21 @@
   letter-spacing: 0;
   text-transform: none;
   color: var(--text2);
+  /*
+   * THE EDGE IS THE GHOST. The handoff draws this button as "40px, 1px border,
+   * card fill" - the border is what separates it from the page, since the fill
+   * is the same `--card` as the surface behind it.
+   *
+   * `border-color` alone does not draw anything. It only tinted an edge that
+   * Vuetify's `variant` had already decided the width of: `outlined` gives
+   * `thin`, `flat` gives 0. So the same class rendered a bordered button at 48
+   * call sites and a borderless one at 13 - measured 1px vs 0px, both themes -
+   * and which you got depended on a `variant` a caller had no reason to think
+   * was load-bearing. Naming the width here makes the class draw the design's
+   * button whichever variant it is paired with.
+   */
+  border-width: 1px;
+  border-style: solid;
   border-color: var(--border);
   background: var(--card);
 }

package/components/CameraMain.vue

@@ -290,12 +290,25 @@ const computedHeaders = computed(() => {
       { title: "URL", key: "host" },
     ]
   }else if(prop.type === "anpr"){
-  return [ 
+  return [
       { title: "URL", key: "host" },
       { title: "Type", key: "direction" },
     ]
   }
-  // return prop.headers;
+  // A THIRD TYPE FELL OFF THE END. Both arms above are early returns and the
+  // fallback was commented out, so `computedHeaders` resolved to `undefined`
+  // for any `type` that is neither `ip` nor `anpr` - and `:headers="undefined"`
+  // does not mean "no table", it means Vuetify derives the columns from the
+  // first item's own keys, i.e. a raw dump of every field including `_id`.
+  //
+  // `prop.headers` is the component's declared escape hatch for exactly this
+  // and nothing was reading it, so the prop was dead. Reading it makes the
+  // fallback deterministic and gives a caller a way to supply its own columns.
+  //
+  // The four commented-out entries in that prop's default (Host, Category,
+  // Guard House, Actions) are ANOTHER TEAM'S deliberate change (9610a7d,
+  // f24fa80) and are left exactly as they are.
+  return prop.headers;
 });
 
 const items = ref<Array<TCamera>>([]);

package/components/Nfc/PatrolReport/PatrolActivityTable.vue

@@ -1,9 +1,24 @@
+<!--
+  The checkpoint-by-checkpoint rows of a patrol report.
+
+  Same change as the two tables beside it: off `variant="flat"` (no border on
+  either theme) and `border-thin` (a hairline the theme does not own) onto
+  `.table-card`, which is the design's table surface and styles the raw
+  `v-table`'s header row and cells.
+
+  `statusColor()` keeps returning `success`/`error`: those are the design
+  tokens by way of `utils/theme.ts`, and `utils/status.ts` does not name
+  "Skipped", so routing this through `StatusChip` would turn a red skipped
+  checkpoint neutral. That is a design decision, not a conversion.
+-->
 <template>
-  <v-card variant="flat" rounded="lg">
-    <v-card-title>Patrol Activity</v-card-title>
+  <div class="table-card table-card__shrink">
+    <div class="activity-table__head">
+      <span class="screen-card-title">Patrol Activity</span>
+    </div>
 
-    <v-card-text class="pa-0">
-      <v-table class="border-thin">
+    <div>
+      <v-table>
         <thead>
           <tr>
             <th>Checkpoints</th>
@@ -58,8 +73,8 @@
           </tr>
         </tbody>
       </v-table>
-    </v-card-text>
-  </v-card>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -90,6 +105,11 @@ function handleActivityClick(activity: NFCPatrolActivity) {
 </script>
 
 <style scoped>
+.activity-table__head {
+  padding: 14px var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+}
+
 .cursor-pointer {
   cursor: pointer;
 }

package/components/Nfc/PatrolReport/PatrolRouteSummary.vue

@@ -1,14 +1,28 @@
+<!--
+  The schedule-vs-actual pair at the top of a patrol report.
+
+  Was `variant="flat"` - a Vuetify surface with no border on either theme - and
+  the table inside it was `border-thin`, i.e. a hairline the theme does not
+  own. `.table-card` is the design's table surface: `--card` on `--border` at
+  `--r-card`, and it styles the `thead`/`tbody` of a raw `v-table` for us, so
+  the header row picks up the design's uppercase 11px/800 and the rows the
+  49px line box.
+
+  `text-body-2 text-medium-emphasis` on the tolerance was Vuetify's Roboto
+  scale plus an opacity; `--text2` is the design's secondary ink and measures
+  9.62:1 on a card.
+-->
 <template>
-  <v-card class="mb-6" variant="flat" rounded="lg">
-    <v-card-title class="d-flex justify-space-between align-center">
-      <span>Patrol Route Summary: {{ summary.routeName }}</span>
-      <span class="text-body-2 text-medium-emphasis">
+  <div class="table-card table-card__shrink mb-6">
+    <div class="route-summary__head">
+      <span class="screen-card-title">Patrol Route Summary: {{ summary.routeName }}</span>
+      <span class="route-summary__tolerance">
         Tolerance: {{ summary.tolerance }} mins
       </span>
-    </v-card-title>
+    </div>
 
-    <v-card-text class="pa-0">
-      <v-table class="border-thin">
+    <div>
+      <v-table>
         <thead>
           <tr>
             <th>Time</th>
@@ -50,8 +64,8 @@
           </tr>
         </tbody>
       </v-table>
-    </v-card-text>
-  </v-card>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -61,3 +75,21 @@ defineProps<{
   summary: NFCPatrolRouteSummary;
 }>();
 </script>
+
+<style scoped>
+.route-summary__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+}
+
+.route-summary__tolerance {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+  white-space: nowrap;
+}
+</style>

package/components/Nfc/PatrolReport/RemarksDialog.vue

@@ -1,22 +1,39 @@
+<!--
+  The remarks a guard left when skipping a checkpoint.
+
+  Was a bare `v-card rounded="xl"` - a 24px corner where the design's modal is
+  16px (`--r-modal`) - with a `text-h6` heading and Vuetify's default elevation
+  rather than `--shadow-modal`. `.screen-modal` is all three, and it styles its
+  own `.v-card-title`, so the `text-h6` span becomes the title element the
+  design already draws.
+
+  The close control was a tinted `variant="text"` icon button; `.screen-icon-btn`
+  is the design's bordered square, the same one every other dialog uses.
+-->
 <template>
   <v-dialog :model-value="modelValue" max-width="600" persistent>
-    <v-card rounded="xl">
-      <v-card-title class="d-flex align-center pa-6">
-        <span class="text-h6">Skip Checkpoint Remarks</span>
-        <v-spacer />
-        <v-btn icon="mdi-close" variant="text" size="small" @click="close" />
-      </v-card-title>
+    <v-card class="screen-modal">
+      <div class="remarks-dialog__head">
+        <v-card-title class="pa-0">Skip Checkpoint Remarks</v-card-title>
+        <v-btn
+          class="screen-icon-btn"
+          icon="mdi-close"
+          variant="flat"
+          aria-label="Close"
+          @click="close"
+        />
+      </div>
 
-      <v-card-text class="px-6 pb-6">
+      <div class="screen-modal__body px-6 pb-6">
         <v-textarea
+          class="filter-field"
           :model-value="remarks"
           variant="outlined"
-          rounded="lg"
           readonly
           rows="4"
           hide-details
         />
-      </v-card-text>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -35,3 +52,16 @@ function close() {
   emit("update:modelValue", false);
 }
 </script>
+
+<style scoped>
+/* The title row was a `v-card-title` with a `v-spacer` inside it. A flex row
+   with the title and the close button as its two children says the same thing
+   and lets `.screen-modal .v-card-title` reach the heading. */
+.remarks-dialog__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 24px;
+}
+</style>

package/components/Nfc/PatrolReport/ReportEmptyState.vue

@@ -1,13 +1,21 @@
+<!--
+  The patrol report's "nothing selected yet" state.
+
+  It was a bordered `v-card` with a `text-h6` heading, a `text-body-2
+  text-medium-emphasis` line and `color="grey-lighten-1"` on the icon - a fixed
+  Vuetify grey, i.e. the same light grey on the dark page.
+
+  The design already has this exact object: `.screen-empty` is the centred
+  column with the muted icon and the muted sentence, and it colours its own
+  `.v-icon`. So the card and the three type classes go and the design's one
+  class replaces them.
+-->
 <template>
-  <v-card class="text-center pa-12" variant="outlined" rounded="lg">
-    <v-icon size="64" color="grey-lighten-1" class="mb-4">
-      mdi-clipboard-text-outline
-    </v-icon>
-    <h3 class="text-h6 mb-2">{{ title }}</h3>
-    <p class="text-body-2 text-medium-emphasis">
-      {{ message }}
-    </p>
-  </v-card>
+  <div class="screen-empty">
+    <v-icon size="64">mdi-clipboard-text-outline</v-icon>
+    <p class="screen-empty__title">{{ title }}</p>
+    <p class="mb-0">{{ message }}</p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -22,3 +30,15 @@ withDefaults(
   },
 );
 </script>
+
+<style scoped>
+/* The heading keeps its emphasis over the sentence under it, but at the
+   design's card-title size rather than Vuetify's `text-h6` (20px/500 Roboto
+   metrics). `.screen-empty` already supplies the family and the muted ink. */
+.screen-empty__title {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text2);
+  margin-bottom: 0;
+}
+</style>

package/components/Nfc/PatrolReport/ReportFilters.vue

@@ -1,3 +1,17 @@
+<!--
+  The route / time / date filters above a patrol report, and its Export menu.
+
+  The three fields were raw Vuetify: `rounded="lg"` is an 8px corner where the
+  design's input is `--r-inner`, and the label and placeholder sat at Vuetify's
+  own scale rather than `--fs-cell`. `.filter-field` is the design's input, and
+  it is the same class the rest of the estate's filter rows already use, so
+  these three now match every other filter on the product.
+
+  The Export button was `variant="outlined" size="large"` - 44px against the
+  design's 40 - with `rounded="lg"` again. `.screen-btn-ghost` is the design's
+  secondary button; `block` still reaches it, because the layer names
+  `.v-btn--block.screen-btn-ghost` for exactly that.
+-->
 <template>
   <v-row no-gutters class="mb-6">
     <v-col cols="12" md="3" class="pr-md-2 mb-2 mb-md-0">
@@ -7,9 +21,9 @@
         item-title="title"
         item-value="value"
         label="Select Route"
+        class="filter-field"
         variant="outlined"
         density="comfortable"
-        rounded="lg"
         hide-details
         @update:model-value="updateFilter('route', $event)"
       />
@@ -25,9 +39,9 @@
         :model-value="modelValue.timeRange"
         :items="options.timeRanges"
         label="Start Time"
+        class="filter-field"
         variant="outlined"
         density="comfortable"
-        rounded="lg"
         hide-details
         @update:model-value="updateFilter('timeRange', $event)"
       />
@@ -41,9 +55,9 @@
     >
       <ReportDatePicker
         :model-value="modelValue.date"
+        class="filter-field"
         variant="outlined"
         density="comfortable"
-        rounded="lg"
         hide-details
         @update:model-value="updateFilter('date', $event)"
       />
@@ -56,11 +70,9 @@
         <template #activator="{ props: menuProps }">
           <v-btn
             v-bind="menuProps"
-            variant="outlined"
+            class="screen-btn-ghost"
+            variant="flat"
             block
-            size="large"
-            rounded="lg"
-            class="text-none"
             prepend-icon="mdi-export"
           >
             Export

package/components/Nfc/PatrolReport/ReportLocationHeader.vue

@@ -1,11 +1,21 @@
+<!--
+  The site header at the top of a patrol report.
+
+  Was a `variant="flat" rounded="lg"` card with `text-h5` and `text-body-2
+  text-medium-emphasis`. `variant="flat"` is a Vuetify surface with no border,
+  so the block had no edge on either theme; the design's card is
+  `--card` + `--border` + `--r-card` + `--shadow`, which is `.app-card`.
+
+  The two type classes are Vuetify's Roboto scale. `--fs-card-title` and
+  `--text2` are the design's, and `--text2` measures 9.62:1 on a card where
+  `--medium-emphasis` is an opacity applied to the theme ink.
+-->
 <template>
-  <v-card class="text-center pa-8 mt-2" variant="flat" rounded="lg">
+  <div class="app-card text-center pa-8 mt-2">
     <v-icon size="64" class="mb-4">mdi-office-building</v-icon>
-    <h2 class="text-h5 mb-2">{{ location.name }}</h2>
-    <p class="text-body-2 text-medium-emphasis">
-      {{ location.address }}
-    </p>
-  </v-card>
+    <p class="location-header__name">{{ location.name }}</p>
+    <p class="location-header__address mb-0">{{ location.address }}</p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,3 +25,19 @@ defineProps<{
   location: NFCPatrolReportLocation;
 }>();
 </script>
+
+<style scoped>
+.location-header__name {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+  margin-bottom: 8px;
+}
+
+.location-header__address {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+</style>

package/components/Nfc/PatrolReport/SummaryReportTable.vue

@@ -1,9 +1,26 @@
+<!--
+  The per-route summary rows of a patrol report.
+
+  Same change as `PatrolRouteSummary`: `variant="flat"` drew no border on
+  either theme and `border-thin` was a hairline outside the theme.
+  `.table-card` is the design's table surface and styles the raw `v-table`'s
+  header row and cells, so the uppercase 11px/800 header and the 49px rows
+  arrive without restating either here.
+
+  The status stays `text-success` / `text-error`. Those ARE the design tokens -
+  `utils/theme.ts` maps Vuetify's `success`/`error` onto `--ok`/`--err` - and
+  swapping them to `StatusChip` would be a meaning change, not a restyle:
+  `utils/status.ts` does not name "Missed", so the shared map would render it
+  NEUTRAL and a missed patrol would stop being red. Raised, not decided here.
+-->
 <template>
-  <v-card class="mb-6" variant="flat" rounded="lg">
-    <v-card-title>{{ title }}</v-card-title>
+  <div class="table-card table-card__shrink mb-6">
+    <div class="summary-table__head">
+      <span class="screen-card-title">{{ title }}</span>
+    </div>
 
-    <v-card-text>
-      <v-table class="border-thin">
+    <div>
+      <v-table>
         <thead>
           <tr>
             <th>Patrol Route Name</th>
@@ -43,8 +60,8 @@
           </tr>
         </tbody>
       </v-table>
-    </v-card-text>
-  </v-card>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -66,6 +83,11 @@ function statusClass(status: NFCPatrolReportSummaryStatus) {
 </script>
 
 <style scoped>
+.summary-table__head {
+  padding: 14px var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+}
+
 .guard-signature {
   width: 80px;
   height: 40px;

package/error.vue

@@ -1,3 +1,16 @@
+<!--
+  THE ERROR PAGE - what a user sees at their worst moment.
+
+  It was Vuetify's own chrome end to end: `text-h2` (a 60px Roboto display
+  size the design's scale does not contain), and a `variant="tonal"
+  rounded="xl" size="large"` button - a 24px-cornered 44px pill in the theme's
+  tinted wash, where every other action in the product is a 40px, 10px-cornered
+  `.screen-btn-primary`.
+
+  Nothing about the behaviour changes: same `v-app`/`v-main` wrapper (this page
+  renders OUTSIDE the app layout, so it has to bring its own), same message,
+  same route home.
+-->
 <script setup lang="ts">
 import type { NuxtError } from "#app";
 
@@ -17,16 +30,14 @@ const props = defineProps({
       >
         <v-col cols="9">
           <v-row>
-            <v-col cols="12" class="text-center text-h2">
-              <span class="font-weight-bold">{{ props.error?.message }}</span>
+            <v-col cols="12" class="text-center">
+              <p class="error-page__message">{{ props.error?.message }}</p>
             </v-col>
             <v-col cols="12">
               <v-row no-gutters justify="center">
                 <v-btn
-                  rounded="xl"
-                  size="large"
-                  class="text-none font-weight-bold"
-                  variant="tonal"
+                  class="screen-btn-primary"
+                  variant="flat"
                   :to="{ name: 'index' }"
                 >
                   Go back
@@ -39,3 +50,16 @@ const props = defineProps({
     </v-main>
   </v-app>
 </template>
+
+<style scoped>
+/* The design's page title, one step up: an error message is the only thing on
+   the screen, so it keeps display weight without borrowing Roboto's 60px. */
+.error-page__message {
+  font-family: var(--font-sans);
+  font-size: calc(var(--fs-h1) * 1.6);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  color: var(--text);
+  margin-bottom: 24px;
+}
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.161",
+  "version": "3.2.2-staging.163",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/pages/payment-method-linked.vue

@@ -1,20 +1,44 @@
+<!--
+  The "payment method linked" confirmation the payment window returns to.
+
+  THE DEFECT IS THE CLOSE BUTTON, NOT THE CARD. Measured before assuming:
+  `color="success lighten-1"` is Vuetify **2** syntax, but Vuetify 3 takes the
+  first token and applies it, so the card IS green - `rgb(15,138,98)` light,
+  `rgb(65,199,149)` dark. Only `lighten-1` is dead, and it changes nothing.
+  The green card stays: a success page is green on purpose, and swapping it for
+  a neutral surface would be a design decision, not a conversion.
+
+  What was wrong is `color="white" variant="tonal"` on Close. `tonal` paints
+  its tint on an OVERLAY, so the button's own background measured
+  `rgba(0,0,0,0)` and all that reached the glass was white text - on the green
+  card. Light: white on `rgb(15,138,98)` = 4.35:1. **Dark: white on
+  `rgb(65,199,149)` = 2.12:1**, which is the worst reading on this page and the
+  reason it needed touching at all. `.screen-btn-ghost` is the design's
+  secondary button - the card surface with `--text2` ink and a `--border` - so
+  it reads on green in both themes, and it is the 40px/10px button the rest of
+  the product uses rather than a 44px 24px-cornered pill.
+
+  The title had the same defect in the other direction: a literal `text-white`
+  on a fill that changes with the theme. See the comment on it below.
+
+  Behaviour is unchanged: same `window.close()`.
+-->
 <template>
   <v-row no-gutters class="fill-height" justify="center" align-content="center">
-    <v-card class="pa-4" elevation="4" color="success lighten-1">
-      <v-card-title class="text-white d-flex align-center">
+    <v-card class="pa-4" elevation="4" color="success">
+      <!-- `text-white` was a literal on a THEMED fill, and the fill changes with
+           the theme: white on dark's `rgb(65,199,149)` measures **2.14:1**.
+           Dropping it lets the card use its own paired ink - Vuetify sets
+           `on-success` from `color="success"` - which follows the fill. -->
+      <v-card-title class="d-flex align-center">
         <v-icon class="mr-2">mdi-check-circle</v-icon>
         Successfully Linked Payment Method
       </v-card-title>
 
       <v-card-actions class="d-flex justify-center">
-        <v-btn
-          color="white"
-          variant="tonal"
-          rounded="xl"
-          size="large"
-          @click="closeWindow"
-          >Close</v-btn
-        >
+        <v-btn class="screen-btn-ghost" variant="flat" @click="closeWindow">
+          Close
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-row>

package/pages/require-customer.vue

@@ -1,23 +1,32 @@
+<!--
+  The "you must have a customer" gate.
+
+  Was Vuetify's chrome: `text-subtitle-1` for the sentence, `text-subtitle-2`
+  on the buttons, and `variant="tonal" rounded="xl"` - a 24px-cornered pill in
+  the theme's tinted wash, where the product's action is a 40px, 10px-cornered
+  button. The sentence is now `--text2` (9.62:1 on a card) at the design's
+  reading size, and the actions are the design's primary and ghost buttons.
+
+  No behaviour change: same handlers, same destinations, same `plain` layout.
+-->
 <template>
   <v-row no-gutters class="fill-height" align="center" justify="center">
-    <v-col cols="12" lg="6" md="6" sm="6" class="text-center text-subtitle-1">
+    <v-col cols="12" lg="6" md="6" sm="6" class="text-center gate-page__message">
       You must have a customer to view this page. Please join or contact your
       administrator for access.
       <v-row no-gutters justify="center" align="center" class="mt-2">
         <v-btn
+          class="screen-btn-ghost"
+          variant="flat"
           @click="goToAccount"
-          rounded="xl"
-          variant="tonal"
-          class="text-none text-subtitle-2"
         >
           Go to Organization Page
         </v-btn>
-        <span class="mx-2">or</span>
+        <span class="mx-2 gate-page__or">or</span>
         <v-btn
+          class="screen-btn-primary"
+          variant="flat"
           @click="createCustomer"
-          rounded="xl"
-          variant="tonal"
-          class="text-none text-subtitle-2"
         >
           Create an Customer
         </v-btn>
@@ -54,3 +63,18 @@ function createCustomer() {
   }
 }
 </script>
+
+<style scoped>
+.gate-page__message {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+  line-height: 1.6;
+}
+
+.gate-page__or {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>

package/pages/require-organization-membership.vue

@@ -1,23 +1,32 @@
+<!--
+  The "you must be a member of an organization" gate.
+
+  Was Vuetify's chrome: `text-subtitle-1` for the sentence, `text-subtitle-2`
+  on the buttons, and `variant="tonal" rounded="xl"` - a 24px-cornered pill in
+  the theme's tinted wash, where the product's action is a 40px, 10px-cornered
+  button. The sentence is now `--text2` (9.62:1 on a card) at the design's
+  reading size, and the actions are the design's primary and ghost buttons.
+
+  No behaviour change: same handlers, same destinations, same `plain` layout.
+-->
 <template>
   <v-row no-gutters class="fill-height" align="center" justify="center">
-    <v-col cols="12" lg="6" md="6" sm="6" class="text-center text-subtitle-1">
+    <v-col cols="12" lg="6" md="6" sm="6" class="text-center gate-page__message">
       You must be a member of an organization to view this page. Please join or
       contact your administrator for access.
       <v-row no-gutters justify="center" align="center" class="mt-2">
         <v-btn
+          class="screen-btn-ghost"
+          variant="flat"
           @click="goToAccount"
-          rounded="xl"
-          variant="tonal"
-          class="text-none text-subtitle-2"
         >
           Go to Account Page
         </v-btn>
-        <span class="mx-2">or</span>
+        <span class="mx-2 gate-page__or">or</span>
         <v-btn
+          class="screen-btn-primary"
+          variant="flat"
           @click="createOrg"
-          rounded="xl"
-          variant="tonal"
-          class="text-none text-subtitle-2"
         >
           Create an Organization
         </v-btn>
@@ -45,3 +54,18 @@ function createOrg() {
   }
 }
 </script>
+
+<style scoped>
+.gate-page__message {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+  line-height: 1.6;
+}
+
+.gate-page__or {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>

package/pages/unauthorized.vue

@@ -1,14 +1,24 @@
+<!--
+  The "you are not a member of an organization" gate.
+
+  Was Vuetify's chrome: `text-subtitle-1` for the sentence, `text-subtitle-2`
+  on the buttons, and `variant="tonal" rounded="xl"` - a 24px-cornered pill in
+  the theme's tinted wash, where the product's action is a 40px, 10px-cornered
+  button. The sentence is now `--text2` (9.62:1 on a card) at the design's
+  reading size, and the actions are the design's primary and ghost buttons.
+
+  No behaviour change: same handlers, same destinations, same `plain` layout.
+-->
 <template>
   <v-row no-gutters class="fill-height" align="center" justify="center">
-    <v-col cols="12" lg="6" md="6" sm="6" class="text-center text-subtitle-1">
+    <v-col cols="12" lg="6" md="6" sm="6" class="text-center gate-page__message">
       You must be a member of an organization to view this page. Please join or
       contact your administrator for access.
       <v-row no-gutters justify="center" class="mt-2">
         <v-btn
+          class="screen-btn-primary"
+          variant="flat"
           @click="goToAccount"
-          rounded="xl"
-          variant="tonal"
-          class="text-none text-subtitle-2"
         >
           Go to Account Page
         </v-btn>
@@ -27,3 +37,18 @@ function goToAccount() {
   window.location.href = `${APP_ACCOUNT}/home`;
 }
 </script>
+
+<style scoped>
+.gate-page__message {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+  line-height: 1.6;
+}
+
+.gate-page__or {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>