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

package/assets/css/screens.css

@@ -398,6 +398,31 @@
   opacity: 0;
 }
 
+/*
+ * DISABLED. The two rules above set `background` and `color` unconditionally,
+ * and they out-specify the treatment Vuetify would otherwise give a disabled
+ * button - so a Submit that a `v-form` has genuinely gated OFF was painting
+ * the full accent fill at full opacity, identical to a live one. Measured on
+ * `OnlineFormFill` with its required field emptied: enabled and disabled came
+ * back byte-identical (`rgb(75, 116, 196)` / `rgb(255, 255, 255)` /
+ * `opacity: 1`) on BOTH themes. The gate held; nothing showed it.
+ *
+ * 0.5 is the design's own disabled step - `.app-btn:disabled` in
+ * `primitives.css` uses it - so the two button families dim by the same amount
+ * rather than inventing a second number here.
+ *
+ * Both the attribute and Vuetify's class are named: `:disabled` is what a
+ * plain `<button>` carries, `.v-btn--disabled` is what Vuetify adds, and a
+ * rule that matched only one of them would go quiet the moment the other path
+ * was used.
+ */
+.v-btn.screen-btn-primary:disabled,
+.v-btn.screen-btn-primary.v-btn--disabled,
+.v-btn.screen-btn-ghost:disabled,
+.v-btn.screen-btn-ghost.v-btn--disabled {
+  opacity: 0.5;
+}
+
 /**
  * The icon-only actions next to a primary button (download template, import,
  * export). The design draws an icon button as a bordered square the height of

package/components/OnlineFormConfigurationForm.vue

@@ -1,20 +1,26 @@
 <template>
-  <v-card width="100%" style="display: flex; flex-direction: column; max-height: 92vh">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">
-          {{ prop.mode === "edit" ? "Edit" : "New" }} Online Form
-        </span>
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text style="flex: 1; overflow-y: auto; padding: 0">
-      <v-form v-model="validForm">
+  <!-- The card wears `.screen-modal` for the 16px corner, the `--card` surface
+       and the modal shadow. Its title row and its Cancel/Create row were both
+       `v-toolbar`s - Vuetify `surface` slabs that stay a visible grey bar on
+       the dark card - and are now a `v-card-title` and the shared
+       `.screen-modal__footer` on the card's own surface. -->
+  <v-card class="screen-modal d-flex flex-column" width="100%">
+    <v-card-title class="flex-grow-0">
+      {{ prop.mode === "edit" ? "Edit" : "New" }} Online Form
+    </v-card-title>
+
+    <v-card-text class="screen-modal__body flex-grow-1 pa-0">
+      <!-- `.filter-field` is a DESCENDANT selector (`.filter-field .v-field`),
+           so one class on the form gives every input below it the design's
+           40px/10px/13.5px geometry. Not one `AppField` anywhere in here: the
+           Create gate runs off these `:rules`, and AppField carries none. -->
+      <v-form v-model="validForm" class="filter-field">
         <div class="pa-4 pb-0">
 
           <!-- Form Name -->
           <div class="mb-3">
-            <InputLabel title="Form Name" />
+            <!-- Create is gated on this being filled, so the label says so. -->
+            <InputLabel title="Form Name" :required="prop.mode !== 'edit'" />
             <v-text-field
               v-if="prop.mode !== 'edit'"
               v-model="formName"
@@ -90,13 +96,14 @@
             <span class="text-subtitle-2 font-weight-bold">Form Blocks</span>
             <v-menu :close-on-content-click="true">
               <template #activator="{ props: menuProps }">
+                <!-- The design's primary button. `tonal` painted Vuetify's own
+                     wash over the accent; `.screen-btn-primary` is the 40px
+                     accent fill the rest of the layer uses. -->
                 <v-btn
                   v-bind="menuProps"
-                  size="small"
-                  color="primary"
-                  variant="tonal"
+                  variant="flat"
+                  class="screen-btn-primary"
                   prepend-icon="mdi-plus"
-                  class="text-none"
                 >
                   Add Block
                 </v-btn>
@@ -118,11 +125,14 @@
             </v-menu>
           </div>
 
-          <!-- Empty state -->
+          <!-- Empty state. The dashed edge was a hardcoded `#e0e0e0` - the same
+               near-white line on the dark card, where it read as a bright box
+               around nothing. `--border` is the design's own and follows the
+               theme; the dashed treatment stays, because this is a drop target
+               and not a card. -->
           <div
             v-if="blocks.length === 0"
-            class="text-center pa-8 text-medium-emphasis text-caption"
-            style="border: 2px dashed #e0e0e0; border-radius: 8px"
+            class="online-form-config__empty"
           >
             No blocks yet. Click "Add Block" to start building your form.
           </div>
@@ -133,18 +143,25 @@
             :key="block._uid"
             class="mb-2"
           >
-            <v-card variant="outlined" class="rounded-lg">
+            <v-card class="screen-card" flat>
               <!-- Header row -->
               <div class="d-flex align-center px-3 py-2 ga-2">
-                <v-chip
-                  size="x-small"
-                  :color="blockTypeColor(block.type)"
-                  variant="flat"
-                  label
-                  style="min-width: 110px; justify-content: center; flex-shrink: 0"
-                >
-                  {{ blockTypeLabel(block.type) }}
-                </v-chip>
+                <!-- MEASURED, and the colour coding is deliberately GONE.
+                     `blockTypeColor` painted eight fixed Vuetify palette fills
+                     - teal, purple, orange, indigo - the SAME on both themes,
+                     with white 10px text on them: "Heading" read 4.37:1 and
+                     "Field" 3.67:1, identically light and dark, which is the
+                     tell that nothing about them followed the theme. The
+                     design has one tag, and it is neutral; the tag already
+                     PRINTS the block type, so the eight colours told the user
+                     nothing the word did not. Deleting the map is the fix, not
+                     re-tinting it. -->
+                <StatusChip
+                  :label="blockTypeLabel(block.type)"
+                  tone="neutral"
+                  :dot="false"
+                  class="online-form-config__tag"
+                />
                 <span
                   class="text-caption text-medium-emphasis flex-grow-1"
                   style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
@@ -363,54 +380,51 @@
       </v-form>
     </v-card-text>
 
-    <!-- Action bar -->
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="emit('cancel')">Cancel</v-btn>
-        </v-col>
-        <v-col cols="6">
-          <v-btn
-            tile block variant="flat" color="black" class="text-none" size="48"
-            :disabled="!canSubmit || loading"
-            :loading="loading"
-            @click="submit"
-          >
-            {{ prop.mode === "edit" ? "Update" : "Create Form" }}
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <!-- The design's footer: two equal-width buttons, ghost then primary. The
+         confirming button was a hardcoded `color="black"` fill, the same black
+         on both themes. `loading` keeps it a `v-btn` - AppButton has no
+         in-flight state. `:disabled` is unchanged, so the submit gate is
+         exactly the gate it was. -->
+    <div class="screen-modal__footer flex-grow-0">
+      <v-btn variant="outlined" class="screen-btn-ghost" @click="emit('cancel')">Cancel</v-btn>
+      <v-btn
+        variant="flat"
+        class="screen-btn-primary"
+        :disabled="!canSubmit || loading"
+        :loading="loading"
+        @click="submit"
+      >
+        {{ prop.mode === "edit" ? "Update" : "Create Form" }}
+      </v-btn>
+    </div>
 
     <!-- Template picker dialog -->
     <v-dialog v-model="showTemplatePicker" width="520" scrollable>
-      <v-card>
-        <v-toolbar density="compact">
-          <span class="pl-4 font-weight-medium text-subtitle-1">Load Template</span>
-        </v-toolbar>
-        <div class="pt-3 px-4 pb-2 text-caption text-medium-emphasis" style="white-space: normal">
+      <v-card class="screen-modal">
+        <v-card-title>Load Template</v-card-title>
+        <div class="screen-hint px-6 pb-2" style="white-space: normal">
           Select a template to pre-populate form blocks. You can customise them after loading.
         </div>
-        <v-card-text style="max-height: 55vh; overflow-y: auto; padding: 0">
-          <v-list density="compact">
+        <v-card-text class="screen-modal__body pa-0" style="max-height: 55vh">
+          <!-- `bg-color="transparent"` so the list sits on the card's own
+               surface rather than Vuetify's `surface` slab. -->
+          <v-list density="compact" bg-color="transparent">
             <v-list-item
               v-if="sortedTemplateNames.length === 0"
               disabled
               title="All templates have already been added for this site"
-              class="text-caption text-medium-emphasis"
             />
             <v-list-item
               v-for="name in sortedTemplateNames"
               :key="name"
               :title="name"
-              class="text-caption"
               @click="loadTemplate(name)"
             />
           </v-list>
         </v-card-text>
-        <v-toolbar density="compact">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="showTemplatePicker = false">Close</v-btn>
-        </v-toolbar>
+        <div class="screen-modal__footer">
+          <v-btn variant="outlined" class="screen-btn-ghost" @click="showTemplatePicker = false">Close</v-btn>
+        </div>
       </v-card>
     </v-dialog>
   </v-card>
@@ -528,20 +542,6 @@ function blockTypeLabel(type: string): string {
   return map[type] ?? type;
 }
 
-function blockTypeColor(type: string): string {
-  const map: Record<string, string> = {
-    "section-header": "blue-grey",
-    paragraph: "grey",
-    "ordered-list": "indigo",
-    "unordered-list": "indigo",
-    divider: "grey",
-    field: "teal",
-    "checkbox-group": "purple",
-    "signature-row": "orange",
-  };
-  return map[type] ?? "grey";
-}
-
 function blockSummary(block: AnyBlock): string {
   switch (block.type) {
     case "section-header":
@@ -720,3 +720,26 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/* The block builder's drop target. Same copy, same dashed treatment, on the
+   design's own border colour and secondary ink so it follows the theme. */
+.online-form-config__empty {
+  padding: 32px 16px;
+  text-align: center;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+  border: 2px dashed var(--border);
+  border-radius: var(--r-inner);
+}
+
+/* The tags sit in a column, so they keep the fixed width the `v-chip` had -
+   otherwise "Divider" and "Numbered List" start their summaries at different
+   x positions down the list. */
+.online-form-config__tag {
+  min-width: 110px;
+  justify-content: center;
+  flex-shrink: 0;
+}
+</style>

package/components/OnlineFormFill.vue

@@ -1,32 +1,29 @@
 <template>
-  <v-card width="100%">
-    <!-- Title bar -->
-    <v-toolbar color="grey-darken-3" style="min-height: 56px">
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span
-          class="font-weight-bold text-subtitle-1 text-white text-uppercase"
-          style="letter-spacing: 0.5px; line-height: 1.3"
-        >
-          {{ definition.title }}
-        </span>
-        <v-spacer v-if="$slots['title-actions']" />
-        <slot name="title-actions" />
-      </v-row>
-    </v-toolbar>
+  <v-card class="screen-modal" width="100%">
+    <!-- The title row was a `grey-darken-3` v-toolbar with white uppercase
+         text: the same hardcoded dark slab on both themes. A `v-card-title` on
+         `.screen-modal` is the same row on the card's own surface, so it
+         follows the theme - and the actions slot keeps its place on the right. -->
+    <v-card-title class="d-flex align-center ga-2">
+      <span class="flex-grow-1">{{ definition.title }}</span>
+      <slot name="title-actions" />
+    </v-card-title>
 
     <!-- Submission metadata bar (readonly only) -->
     <div
       v-if="readonly && (submissionStatus)"
-      class="px-6 py-2 d-flex align-center ga-4"
-      style="background: #f5f5f5; border-bottom: 1px solid #e0e0e0; flex-wrap: wrap"
+      class="online-form-fill__meta px-6 py-2 d-flex align-center ga-4"
     >
-      <v-chip
+      <!-- `StatusChip` IS the design's status pill: it maps the WORD to a tone
+           through the shared `utils/status.ts`, so "Pending" is the same amber
+           here as on a work order, and it carries `--tone-bg` with the ink so
+           both halves of the measured pair arrive together. The `v-chip` it
+           replaces painted a flat fixed-palette fill under a white label. -->
+      <StatusChip
         v-if="submissionStatus"
-        :color="submissionStatusColor"
-        variant="flat"
-        size="x-small"
+        :status="submissionStatus"
         class="text-capitalize"
-      >{{ submissionStatus }}</v-chip>
+      />
       <span v-if="(initialValues as any).block" class="text-caption text-medium-emphasis">
         Block: <strong>{{ (initialValues as any).block }}</strong>
       </span>
@@ -37,18 +34,14 @@
         Unit: <strong>{{ submissionUnit }}</strong>
       </span>
       <template v-if="requiresPayment">
-        <v-chip
+        <!-- The payment pair is not a status WORD the shared map knows, so the
+             tone is given directly - the same pill, the same measured pair. -->
+        <StatusChip
           v-if="initialManagementValues?.paymentStatus"
-          color="green"
-          variant="flat"
-          size="x-small"
-        >Payment {{ initialManagementValues.paymentStatus }}</v-chip>
-        <v-chip
-          v-else
-          color="orange"
-          variant="flat"
-          size="x-small"
-        >Payment Not Paid</v-chip>
+          tone="ok"
+          :label="`Payment ${initialManagementValues.paymentStatus}`"
+        />
+        <StatusChip v-else tone="warn" label="Payment Not Paid" />
         <span
           v-if="initialManagementValues?.paymentOrderId"
           class="text-caption text-medium-emphasis"
@@ -58,17 +51,21 @@
 
     <!-- Scrollable body -->
     <v-card-text
-      style="max-height: 76vh; overflow-y: auto"
-      class="pa-6"
+      style="max-height: 76vh"
+      class="screen-modal__body pa-6"
     >
-      <v-form v-model="validForm">
+      <!-- `.filter-field` is a DESCENDANT selector (`.filter-field .v-field`),
+           so one class on the form gives every input below it the design's
+           40px/10px/13.5px geometry. Every `:rules` below is untouched, and no
+           field becomes an `AppField` - AppField carries no rules, and Submit
+           is gated on `validForm`, which only exists because these rules run. -->
+      <v-form v-model="validForm" class="filter-field">
         <template v-for="(block, i) in displayBlocks" :key="i">
 
           <!-- ADDRESS BLOCK -->
           <div
             v-if="block.type === 'address'"
-            class="mb-4 pa-3"
-            style="background: #f5f5f5; border-radius: 6px"
+            class="online-form-fill__panel mb-4 pa-3"
           >
             <v-row no-gutters>
               <v-col cols="5">
@@ -91,7 +88,11 @@
               :key="field.key"
               :cols="field.cols || 6"
             >
-              <InputLabel :title="field.label" />
+              <!-- `required` was never passed, so the design system's own
+                   asterisk never drew: a field the form REFUSES to submit
+                   without looked identical to an optional one. The rule below
+                   is keyed on the same `field.required`. -->
+              <InputLabel :title="field.label" :required="!readonly && !!field.required" />
               <v-text-field
                 v-if="field.fieldType === 'text'"
                 v-model="values[field.key]"
@@ -137,7 +138,7 @@
 
           <!-- SINGLE FULL-WIDTH FIELD -->
           <div v-else-if="block.type === 'field'" class="mb-0">
-            <InputLabel :title="block.field.label" />
+            <InputLabel :title="block.field.label" :required="!readonly && !!block.field.required" />
             <v-text-field
               v-if="block.field.fieldType === 'text'"
               v-model="values[block.field.key]"
@@ -233,16 +234,12 @@
           </div>
 
           <!-- PARAGRAPH (terms / info text) -->
+          <!-- `color: #333` was a near-black on a dark card: the terms text was
+               invisible on the dark theme (measured 1.32:1). `--text` is the
+               design's own ink and `--border` the design's own rule. -->
           <p
             v-else-if="block.type === 'paragraph'"
-            class="text-body-2 mb-3"
-            style="
-              line-height: 1.65;
-              color: #333;
-              text-align: justify;
-              border-left: 3px solid #ddd;
-              padding-left: 10px;
-            "
+            class="online-form-fill__para text-body-2 mb-3"
           >
             {{ resolveText(block.text) }}
           </p>
@@ -259,7 +256,7 @@
                 v-for="(item, itemIdx) in block.items"
                 :key="itemIdx"
                 class="text-body-2 mb-1"
-                style="line-height: 1.55; color: #333"
+                style="line-height: 1.55; color: var(--text)"
               >{{ item }}</li>
             </ol>
           </div>
@@ -276,7 +273,7 @@
                 v-for="(item, itemIdx) in block.items"
                 :key="itemIdx"
                 class="text-body-2 mb-1"
-                style="line-height: 1.55; color: #333"
+                style="line-height: 1.55; color: var(--text)"
               >{{ item }}</li>
             </ul>
           </div>
@@ -299,6 +296,12 @@
             class="mt-3 mb-5"
           >
             <span class="text-caption text-medium-emphasis d-block mb-1">{{ block.label }}</span>
+            <!-- DELIBERATELY NOT TOKENISED. `detectSigBackground` reads the
+                 saved PNG and decides whether its ink is black or white; this
+                 plate has to match THAT ink, not the current theme. A white
+                 signature on a `--card` plate is invisible on the light theme,
+                 and a black one on the dark theme - which is the whole reason
+                 the detection exists. -->
             <div
               v-if="initialValues[block.key]"
               :style="{
@@ -317,15 +320,14 @@
             </div>
             <div
               v-else
-              style="border-bottom: 1px dashed #bbb; height: 56px; background: #fafafa; border-radius: 4px"
+              class="online-form-fill__sig-blank"
             />
           </div>
 
           <!-- ACKNOWLEDGEMENT -->
           <div
             v-else-if="block.type === 'acknowledgement'"
-            class="mb-4 pa-3"
-            style="background: #f9f9f9; border-radius: 6px; border: 1px solid #eee"
+            class="online-form-fill__panel online-form-fill__panel--bordered mb-4 pa-3"
           >
             <span class="text-body-2 font-weight-medium">{{ resolveText(block.text) }}</span>
           </div>
@@ -333,10 +335,10 @@
           <!-- MANAGEMENT USE -->
           <div
             v-else-if="block.type === 'management-use'"
-            class="pa-4 mt-2"
-            :style="approvalMode && selectedAction === 'approved'
-              ? 'background: #e8f5e9; border-radius: 6px; border: 1px solid #a5d6a7'
-              : 'background: #f0f0f0; border-radius: 6px; opacity: 0.75'"
+            class="online-form-fill__panel pa-4 mt-2"
+            :class="approvalMode && selectedAction === 'approved'
+              ? 'online-form-fill__panel--ok'
+              : 'online-form-fill__panel--dim'"
           >
             <v-row no-gutters class="mb-2">
               <span class="text-caption font-weight-bold text-medium-emphasis">
@@ -360,7 +362,7 @@
                 />
                 <div
                   v-else
-                  style="border-bottom: 1px solid #aaa; min-width: 120px; height: 22px; font-size: 13px; padding-top: 2px"
+                  class="online-form-fill__mgmt-line"
                 >{{ managementValues[item] || '' }}</div>
               </div>
             </v-row>
@@ -378,7 +380,7 @@
     <!-- Approval action panel -->
     <div
       v-if="readonly && approvalMode"
-      style="border-top: 1px solid #e0e0e0; padding: 12px 16px; background: #fafafa; display: flex; flex-direction: column; gap: 10px"
+      class="online-form-fill__approve"
     >
       <v-text-field
         v-model="adminRemarks"
@@ -389,35 +391,35 @@
         :error="remarksRequired && adminRemarks.trim().length === 0"
         :error-messages="remarksRequired && adminRemarks.trim().length === 0 ? 'Remarks are required' : ''"
       />
-      <div class="d-flex align-center ga-2 justify-end">
-        <v-btn variant="text" class="text-none" size="small" @click="emit('cancel')">Close</v-btn>
+      <!-- The three verdicts keep their colour coding - it is what tells them
+           apart - but on the theme's own status colours rather than fixed
+           palette entries, so both the tonal and the flat state follow the
+           theme. Confirm was a hardcoded `grey-darken-3` fill and is now the
+           design's primary button, which is what it is. -->
+      <div class="d-flex align-center ga-2 justify-end flex-wrap">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="emit('cancel')">Close</v-btn>
         <v-btn
           :variant="selectedAction === 'resubmission' ? 'flat' : 'tonal'"
-          color="orange-darken-1"
+          color="warning"
           class="text-none"
-          size="small"
           @click="selectAction('resubmission')"
         >Resubmit</v-btn>
         <v-btn
           :variant="selectedAction === 'rejected' ? 'flat' : 'tonal'"
-          color="red"
+          color="error"
           class="text-none"
-          size="small"
           @click="selectAction('rejected')"
         >Reject</v-btn>
         <v-btn
           :variant="selectedAction === 'approved' ? 'flat' : 'tonal'"
-          color="green"
+          color="success"
           class="text-none"
-          size="small"
           @click="selectAction('approved')"
         >Approve</v-btn>
         <v-btn
           v-if="selectedAction"
           variant="flat"
-          color="grey-darken-3"
-          class="text-none"
-          size="small"
+          class="screen-btn-primary"
           :disabled="!canConfirm"
           :loading="updatingStatus"
           @click="confirmStatusUpdate"
@@ -425,24 +427,25 @@
       </div>
     </div>
 
-    <!-- Normal action bar -->
-    <v-toolbar v-else density="compact">
-      <v-row no-gutters>
-        <template v-if="readonly">
-          <v-col cols="12">
-            <v-btn tile block variant="text" class="text-none" size="48" @click="emit('cancel')">Close</v-btn>
-          </v-col>
-        </template>
-        <template v-else>
-          <v-col cols="6">
-            <v-btn tile block variant="text" class="text-none" size="48" :disabled="submitting" @click="emit('cancel')">Cancel</v-btn>
-          </v-col>
-          <v-col cols="6">
-            <v-btn tile block variant="flat" color="black" class="text-none" size="48" :disabled="!validForm || submitting" :loading="submitting" @click="submit">Submit</v-btn>
-          </v-col>
-        </template>
-      </v-row>
-    </v-toolbar>
+    <!-- The design's footer: equal-width buttons, ghost then primary, on a
+         bordered strip. Submit was a hardcoded `color="black"` block fill. Its
+         `:disabled="!validForm || submitting"` is untouched - the gate is still
+         the form's own validity. -->
+    <div v-else class="screen-modal__footer">
+      <template v-if="readonly">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="emit('cancel')">Close</v-btn>
+      </template>
+      <template v-else>
+        <v-btn variant="outlined" class="screen-btn-ghost" :disabled="submitting" @click="emit('cancel')">Cancel</v-btn>
+        <v-btn
+          variant="flat"
+          class="screen-btn-primary"
+          :disabled="!validForm || submitting"
+          :loading="submitting"
+          @click="submit"
+        >Submit</v-btn>
+      </template>
+    </div>
   </v-card>
 </template>
 <script setup lang="ts">
@@ -621,15 +624,10 @@ function confirmStatusUpdate() {
 
 const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "This field is required";
 
-const submissionStatusColor = computed(() => {
-  switch (props.submissionStatus?.toLowerCase()) {
-    case "approved": return "green";
-    case "pending": return "orange";
-    case "resubmission": return "orange";
-    case "rejected": return "red";
-    default: return "grey";
-  }
-});
+// The local status -> colour switch this file carried is gone: `StatusChip`
+// maps the word through the shared `utils/status.ts`, which already had
+// approved/pending/rejected and now has resubmission too. One mapping, not a
+// second private copy that could drift from it.
 
 const requiresPayment = computed(() => {
   if (props.paymentAmount <= 0) return false;
@@ -771,3 +769,74 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/*
+ * Every surface below was a hardcoded near-white hex - `#f5f5f5`, `#f9f9f9`,
+ * `#f0f0f0`, `#fafafa` - with THEMED text on top of it. On the dark theme that
+ * put the design's near-white ink on a near-white plate: the address strip read
+ * 1.05:1, the acknowledgement 1.08:1 and the management panel 1:1, i.e. text
+ * that was there and could not be seen. `--bg` is the design's own recessed
+ * surface and follows the theme, so the same rows read correctly on both.
+ */
+.online-form-fill__meta {
+  flex-wrap: wrap;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+
+.online-form-fill__panel {
+  background: var(--bg);
+  border-radius: var(--r-inner);
+}
+
+.online-form-fill__panel--bordered {
+  border: 1px solid var(--border);
+}
+
+/* The approved state of the management panel. `--ok-bg` / `--ok` are the
+   design's own success pair; it was `#e8f5e9` on `#a5d6a7`, the same greens on
+   both themes. */
+.online-form-fill__panel--ok {
+  background: var(--ok-bg);
+  border: 1px solid var(--ok);
+}
+
+.online-form-fill__panel--dim {
+  opacity: 0.75;
+}
+
+.online-form-fill__para {
+  line-height: 1.65;
+  color: var(--text);
+  text-align: justify;
+  border-left: 3px solid var(--border);
+  padding-left: 10px;
+}
+
+/* The ruled line a management entry is written on, and the empty signature
+   plate - both were fixed greys. */
+.online-form-fill__mgmt-line {
+  border-bottom: 1px solid var(--border);
+  min-width: 120px;
+  height: 22px;
+  font-size: var(--fs-cell);
+  padding-top: 2px;
+}
+
+.online-form-fill__sig-blank {
+  border-bottom: 1px dashed var(--border);
+  height: 56px;
+  background: var(--bg);
+  border-radius: var(--r-inner-sm);
+}
+
+.online-form-fill__approve {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+}
+</style>

package/components/OnlineFormRenderPreview.vue

@@ -5,25 +5,25 @@
     width="560"
     persistent
   >
-    <v-card max-height="85vh" class="d-flex flex-column">
-      <v-toolbar color="grey-darken-3" class="flex-grow-0">
-        <v-toolbar-title class="text-subtitle-1 font-weight-bold text-white text-uppercase">
-          {{ form?.formType }}
-        </v-toolbar-title>
-      </v-toolbar>
+    <!-- The title row was a `grey-darken-3` v-toolbar: the same hardcoded grey
+         slab on both themes, with white text sitting on it. A `v-card-title` on
+         `.screen-modal` is the same row on the card's own surface, so it
+         follows the theme. -->
+    <v-card class="screen-modal d-flex flex-column">
+      <v-card-title class="flex-grow-0">{{ form?.formType }}</v-card-title>
 
-      <v-card-subtitle class="px-6 pt-3 pb-0 text-caption text-medium-emphasis flex-grow-0">
+      <v-card-subtitle class="screen-hint px-6 pb-0 flex-grow-0">
         Form preview — fields are read-only
       </v-card-subtitle>
 
-      <v-card-text class="px-6 py-4 flex-grow-1" style="overflow-y: auto">
+      <v-card-text class="screen-modal__body px-6 py-4 flex-grow-1">
         <template v-for="(input, index) in form?.inputs" :key="index">
           <v-text-field
             v-if="input.dataType === 'Text Input'"
             :label="input.label"
             density="comfortable"
             variant="outlined"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -34,7 +34,7 @@
             density="comfortable"
             variant="outlined"
             rows="3"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -45,7 +45,7 @@
             type="date"
             density="comfortable"
             variant="outlined"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -56,7 +56,7 @@
             :items="input.options || []"
             density="comfortable"
             variant="outlined"
-            class="mb-1"
+            class="filter-field mb-1"
             :hint="input.required ? 'Required' : ''"
             persistent-hint
             readonly
@@ -65,29 +65,24 @@
             v-else-if="input.dataType === 'Checkbox'"
             :label="input.label"
             density="comfortable"
-            class="mb-1"
+            class="filter-field mb-1"
             readonly
           />
         </template>
       </v-card-text>
 
-      <v-toolbar density="compact" class="flex-grow-0">
-        <v-row no-gutters>
-          <v-col cols="12">
-            <v-btn
-              tile
-              block
-              variant="flat"
-              color="black"
-              class="text-none"
-              height="48"
-              @click="$emit('update:modelValue', false)"
-            >
-              Close Preview
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <!-- The design's modal footer. The Close button was a `color="black"`
+           square-cornered block fill - the same black on both themes, and the
+           shape of a primary action for what is only a dismiss. -->
+      <div class="screen-modal__footer flex-grow-0">
+        <v-btn
+          variant="outlined"
+          class="screen-btn-ghost"
+          @click="$emit('update:modelValue', false)"
+        >
+          Close Preview
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>

package/components/OnlineFormsConfiguration.vue

@@ -22,24 +22,23 @@
       <AppCard class="table-card">
         <CardToolbar :count="pageRange">
           <template #left>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
+            <!-- The design's 32px icon button, the same one every other
+                 converted table toolbar uses, instead of Vuetify's tinted
+                 fab. -->
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
               @click="getOnlineFormConfigurations"
-            >
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
-              :color="sortAlpha ? 'primary' : undefined"
+            />
+            <AppButton
+              variant="icon"
+              icon="mdi-sort-alphabetical-ascending"
+              class="online-forms-config__sort"
+              :class="{ 'online-forms-config__sort--on': sortAlpha }"
               :title="sortAlpha ? 'Sorted A–Z' : 'Sort A–Z'"
               @click="sortAlpha = !sortAlpha"
-            >
-              <v-icon>mdi-sort-alphabetical-ascending</v-icon>
-            </v-btn>
+            />
             <AppField
               v-model="search"
               search
@@ -109,12 +108,15 @@
         @cancel="previewDialog = false"
       >
         <template #title-actions>
+          <!-- `color="white"` was correct only while the fill's title bar was a
+               hardcoded dark slab. The bar now paints from `--card`, so the
+               pencil takes the card's own ink; `error` is a theme colour and
+               follows both themes. -->
           <v-btn
             v-if="canUpdate && canUpdateOnlineFormConfiguration"
             icon
             size="small"
             variant="text"
-            color="white"
             @click="openEditDialog()"
           >
             <v-icon>mdi-pencil</v-icon>
@@ -133,34 +135,38 @@
       </OnlineFormFill>
 
       <!-- Fallback: no block definition found for this form type -->
-      <v-card v-else width="100%">
-        <v-card-text class="text-center pa-10">
-          <v-icon size="48" class="mb-3 text-medium-emphasis">mdi-file-question-outline</v-icon>
-          <div class="text-body-2 text-medium-emphasis">
-            No preview available for "{{ selectedFormType }}".
-          </div>
-        </v-card-text>
-        <v-toolbar density="compact">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="previewDialog = false">
+      <v-card v-else class="screen-modal" width="100%">
+        <!-- The design's empty block, the same one every other "nothing to
+             show here" surface in the layer draws. -->
+        <div class="screen-empty">
+          <v-icon size="48">mdi-file-question-outline</v-icon>
+          <div>No preview available for "{{ selectedFormType }}".</div>
+        </div>
+        <div class="screen-modal__footer">
+          <v-btn variant="outlined" class="screen-btn-ghost" @click="previewDialog = false">
             Close
           </v-btn>
-        </v-toolbar>
+        </div>
       </v-card>
     </v-dialog>
 
     <!-- Delete Dialog -->
+    <!-- 520px is the handoff's `--modal-w`. The two `v-toolbar`s this drew for
+         its title row and its footer were Vuetify `surface` slabs - a visible
+         grey bar on the dark card; a `v-card-title` and the shared
+         `.screen-modal__footer` are the same rows on the card's own surface.
+         The confirming button was a hardcoded `color="black"` fill, the same
+         black on both themes. -->
     <v-dialog
       v-model="confirmDialog"
       :loading="deleteLoading"
-      width="450"
+      width="520"
       persistent
     >
-      <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
-          <span class="font-weight-medium text-h5">Delete Online Form</span>
-        </v-toolbar>
-        <v-card-text>
-          <p class="text-subtitle-2 text-center">
+      <v-card class="screen-modal" width="100%">
+        <v-card-title>Delete Online Form</v-card-title>
+        <v-card-text class="screen-modal__body">
+          <p class="text-center">
             Are you sure you want to delete this online form? This action cannot
             be undone.
           </p>
@@ -171,38 +177,25 @@
             </span>
           </v-row>
         </v-card-text>
-        <v-toolbar density="compact">
-          <v-row no-gutters>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                variant="text"
-                class="text-none"
-                @click="confirmDialog = false"
-                :disabled="deleteLoading"
-              >
-                Close
-              </v-btn>
-            </v-col>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                color="black"
-                variant="flat"
-                class="text-none"
-                :loading="deleteLoading"
-                :disabled="deleteLoading"
-                @click="handleDeleteOnlineFormConfiguration()"
-              >
-                Delete Online Form
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-toolbar>
+        <div class="screen-modal__footer">
+          <v-btn
+            variant="outlined"
+            class="screen-btn-ghost"
+            :disabled="deleteLoading"
+            @click="confirmDialog = false"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            variant="flat"
+            class="screen-btn-primary"
+            :loading="deleteLoading"
+            :disabled="deleteLoading"
+            @click="handleDeleteOnlineFormConfiguration()"
+          >
+            Delete Online Form
+          </v-btn>
+        </div>
       </v-card>
     </v-dialog>
 
@@ -433,4 +426,12 @@ function successUpdate() {
 .online-forms-config__search {
   max-width: 240px;
 }
+
+/* The sort toggle is the only control on this toolbar with an on/off state.
+   `--accent-strong` is the design's own accent; the icon button has no
+   "selected" variant, so the state is one declaration rather than a variant
+   nothing else would use. */
+.online-forms-config__sort--on {
+  color: var(--accent-strong);
+}
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.159",
+  "version": "3.2.2-staging.161",
   "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/utils/status.ts

@@ -58,6 +58,11 @@ const TONES: Record<string, TStatusTone> = {
   resolved: "ok", // was #4CAF50, green
   active: "ok", // was `success`
 
+  // An online-form submission sent back to the resident to correct and send
+  // again. Unlisted it would come out neutral, which would make "needs your
+  // attention" look the same as "nothing is happening".
+  resubmission: "warn",
+
   assigned: "info", // was `primary`, on the access-card details dialog
   replaced: "warn", // was `orange`, same screen
   returned: "warn", // was `orange`, same screen - the card came back