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

package/components/BuildingManagement/buildings.vue

@@ -1,46 +1,40 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn class="text-none" rounded="pill" variant="tonal" @click="setBuilding()" size="large"
-          v-if="canCreate && canCreateBuilding">
-          Add Block
-        </v-btn>
-      </v-row>
-    </v-col>
+    <!-- Title row; nav calls this screen "Blocks". The Add pill moves onto it. -->
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getBuildings()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-text-field v-model="searchInput" autocomplete="off" placeholder="Search" density="compact" hide-details
-              dense clearable class="mx-2" style="width: 200px;" />
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" @update:value="getBuildings()" />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table :headers="headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
-          <template #item.createdAt="{ value }">
-            {{ new Date(value).toLocaleDateString() }}
-          </template>
-          <template #item.levels="{ item }">
-            {{ item.levels.length }}
-          </template>
-        </v-data-table>
-      </v-card>
+      <PageHeader title="Blocks">
+        <template #actions>
+          <AppButton v-if="canCreate && canCreateBuilding" icon="mdi-plus" @click="setBuilding()">
+            Add Block
+          </AppButton>
+        </template>
+      </PageHeader>
     </v-col>
 
+    <!--
+      Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`.
+      `TableMain` draws the same card, the same refresh/search/page-range/pager
+      row and the same table - with the design's uppercase header row.
+    -->
+    <TableMain :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages"
+      :pageRange="pageRange" show-header @refresh="getBuildings()"
+      @update:page="page = $event; getBuildings()" @row-click="(data: any) => tableRowClickHandler(null, data)">
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
+      </template>
+      <template #item.createdAt="{ value }">
+        {{ new Date(value).toLocaleDateString() }}
+      </template>
+      <!--
+        `item.levels.length` threw during render for any block whose record has
+        no `levels` array, and a TypeError in a row template tears the whole
+        table down - one incomplete block blanked every block.
+      -->
+      <template #item.levels="{ item }">
+        {{ levelCount(item) }}
+      </template>
+    </TableMain>
+
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" width="450" persistent>
       <BuildingForm :site="site" mode="add" :blocks="items" @cancel="createDialog = false" @success="successCreate()"
@@ -69,7 +63,9 @@
 
             <v-col cols="12">
               <strong>Levels:</strong>
-              {{ selectedBuilding?.levels.length ?? "N/A" }}
+              <!-- The optional chain stopped one property early: `?.levels.length`
+                   still reads `.length` of undefined when the block has no levels. -->
+              {{ selectedBuilding ? levelCount(selectedBuilding) : "N/A" }}
             </v-col>
             <v-col cols="12">
               <strong>Files:</strong>
@@ -162,6 +158,10 @@
 </template>
 
 <script setup lang="ts">
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// into the consuming apps but not reliably into the layer's own components.
+import { levelCount } from "../../utils/data";
+
 definePageMeta({
   middleware: ["01-auth", "02-org"],
   memberOnly: true,

package/components/BuildingManagement/units.vue

@@ -1,50 +1,34 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn class="text-none" rounded="pill" variant="tonal" @click="setBuilding()" size="large"
-          v-if="canCreate && canCreateUnit">
-          Add Unit
-        </v-btn>
-        <v-btn class="text-none ml-2" rounded="pill" variant="tonal" @click="openBulkUploadFilePicker()" size="large"
-          :loading="bulkUploadLoading" v-if="canCreate && canCreateUnit">
-          <v-icon start>mdi-upload</v-icon>
-          Bulk Upload
-        </v-btn>
-        <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
-          @change="handleBulkUploadFileChange" />
-      </v-row>
-    </v-col>
+    <!-- Title row; nav calls this screen "Units". Both pills move onto it. -->
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getBuildingUnit()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-text-field v-model="searchInput" placeholder="Search" density="compact" hide-details dense clearable
-              class="mx-2" style="width: 200px;" />
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" @update:value="getBuildingUnit()" />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table :headers="props.headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
-          <template #item.block="{ value, item }">
-            {{ value ? `Block ${value}` : "" }}
-          </template>
-        </v-data-table>
-      </v-card>
+      <PageHeader title="Units">
+        <template #actions>
+          <AppButton v-if="canCreate && canCreateUnit" variant="ghost" icon="mdi-upload"
+            :disabled="bulkUploadLoading" @click="openBulkUploadFilePicker()">
+            Bulk Upload
+          </AppButton>
+          <AppButton v-if="canCreate && canCreateUnit" icon="mdi-plus" @click="setBuilding()">
+            Add Unit
+          </AppButton>
+        </template>
+      </PageHeader>
+      <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
+        @change="handleBulkUploadFileChange" />
     </v-col>
 
+    <!-- Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`. -->
+    <TableMain :headers="props.headers" :items="items" :loading="loading" :page="page" :pages="pages"
+      :pageRange="pageRange" show-header @refresh="getBuildingUnit()"
+      @update:page="page = $event; getBuildingUnit()" @row-click="(data: any) => tableRowClickHandler(null, data)">
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
+      </template>
+      <template #item.block="{ value, item }">
+        {{ value ? `Block ${value}` : "" }}
+      </template>
+    </TableMain>
+
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" :width="smAndUp ? '50svw' : '100%'" persistent>
       <BuildingUnitFormAdd :site="site" @cancel="createDialog = false" @success="successCreate()"

package/components/BuildingUnitFormAdd.vue

@@ -1,13 +1,10 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5"> Add Unit </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
+  <v-card width="100%" class="screen-modal">
+    <v-card-title>Add Unit</v-card-title>
+
+    <v-card-text class="screen-modal__body pa-0">
       <v-form v-model="validForm" :disabled="disable">
-        <v-row no-gutters>
+        <v-row no-gutters class="px-6 pt-4">
           <!-- <v-col cols="12" class="mt-2">
             <v-row no-gutters>
               <InputLabel class="text-capitalize" title="Name" required />
@@ -25,11 +22,11 @@
             <v-row>
               <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize" title="Block" required />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Block" required />
                   <v-col cols="12">
                     <v-autocomplete v-model="buildingUnit.building" :items="buildings" item-title="name"
-                      item-value="_id" v-model:search="searchBuilding" :hide-no-data="false" density="comfortable"
-                      :rules="[requiredRule]" variant="outlined">
+                      item-value="_id" v-model:search="searchBuilding" :hide-no-data="false" class="filter-field"
+                      density="comfortable" :rules="[requiredRule]" variant="outlined">
                       <template v-slot:item="{ props: itemProps, item }">
                         <v-list-item v-bind="itemProps" :title="item?.raw?.name">
 
@@ -45,20 +42,20 @@
 
               <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize" title="Level" required />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Level" required />
                   <v-col cols="12">
                     <v-select v-model="buildingUnit.level" :items="buildingLevels" item-title="name" item-value="_id"
-                      density="comfortable" :rules="[requiredRule]"></v-select>
+                      class="filter-field" density="comfortable" :rules="[requiredRule]"></v-select>
                   </v-col>
                 </v-row>
               </v-col>
 
               <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize" title="No. of Units to be added" required />
+                  <InputLabel class="text-capitalize font-weight-bold" title="No. of Units to be added" required />
                   <v-col cols="12">
-                    <v-text-field v-model.number="buildingUnitQty" density="comfortable" :rules="[requiredRule]"
-                      type="number" @update:model-value="setBuildingLevels()"></v-text-field>
+                    <v-text-field v-model.number="buildingUnitQty" class="filter-field" density="comfortable"
+                      :rules="[requiredRule]" type="number" @update:model-value="setBuildingLevels()"></v-text-field>
                   </v-col>
                 </v-row>
               </v-col>
@@ -176,7 +173,7 @@
                         <v-row no-gutters>
                           <!-- <InputLabel class="text-capitalize font-weight-bold" :title="`#${unitLabelIndex + 1}`" /> -->
                           <v-col cols="12">
-                            <v-text-field v-model.trim="unitLabels[unitLabelIndex]"
+                            <v-text-field v-model.trim="unitLabels[unitLabelIndex]" class="filter-field"
                               density="comfortable"></v-text-field>
                           </v-col>
                         </v-row>
@@ -225,22 +222,22 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="cancel" :disabled="disable">
+        <v-col cols="6" class="pr-2">
+          <v-btn block variant="outlined" class="text-none screen-btn-ghost" @click="cancel" :disabled="disable">
             Cancel
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
-          <v-btn tile block variant="flat" color="black" class="text-none" size="48" :disabled="!validForm || disable"
+        <v-col cols="6" class="pl-2">
+          <v-btn block variant="flat" class="text-none screen-btn-primary" :disabled="!validForm || disable"
             @click="submit" :loading="disable">
             Submit
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-card>

package/components/BuildingUnitFormEdit.vue

@@ -1,11 +1,11 @@
 <template>
   <v-card width="100%" :loading="getUnitPeoplePending || loading.ownerProcessing" :disabled="loading.ownerProcessing">
-    <v-toolbar>
+    <v-toolbar class="screen-dialog-bar">
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5"> Unit Info ( {{ buildingUnit.name }} ) </span>
       </v-row>
     </v-toolbar>
-    <v-toolbar density="compact">
+    <v-toolbar class="screen-dialog-bar" density="compact">
       <v-tabs v-model="tab" class="mt-0" active-class="bg-success">
         <v-tab value="general">General</v-tab>
         <v-tab value="residents">Residents/Tenants</v-tab>
@@ -253,7 +253,7 @@
       </v-row>
     </v-col>
 
-    <v-toolbar class="pa-0" density="compact">
+    <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
       <v-row no-gutters>
         <v-col :cols="canUpdateUnit || canDeleteUnit ? 6 : 12" class="pa-0">
           <v-btn block variant="text" class="text-none" size="large" @click="emit('cancel')" height="48">
@@ -263,8 +263,12 @@
 
         <v-col v-if="canUpdateUnit || canDeleteUnit" cols="6" class="pa-0">
           <v-menu>
+            <!-- Was `color="black"`: a fixed slab that stayed black on the dark
+                 card. `primary-button` is the theme's FILL token, and its pair
+                 `on-primary-button` supplies the white label - unlike
+                 `primary`, which is a FOREGROUND here. -->
             <template #activator="{ props }">
-              <v-btn block variant="flat" color="black" class="text-none" height="48" v-bind="props" tile
+              <v-btn block variant="flat" color="primary-button" class="text-none" height="48" v-bind="props" tile
                 :disabled="!canUpdateUnit && !canDeleteUnit">
                 More actions
               </v-btn>

package/components/BulletinBoardForm.vue

@@ -1,18 +1,14 @@
 <template>
   <v-card
+    class="screen-modal"
     width="100%"
     :loading="loading.processing"
     :disabled="loading.processing || getAnnouncementByIdPending"
     :key="`form-key-${formKey}`"
   >
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} Announcement
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-6">
+    <v-card-title class="text-capitalize">{{ prop.mode }} Announcement</v-card-title>
+
+    <v-card-text class="screen-modal__body pa-6">
       <v-form
         ref="formRef"
         v-model="validForm"
@@ -41,7 +37,7 @@
                   <template v-slot:prepend>
                     <v-checkbox-btn
                       :color="
-                        selectedSomeRecipients ? 'indigo-darken-4' : undefined
+                        selectedSomeRecipients ? 'primary-button' : undefined
                       "
                       :indeterminate="
                         selectedSomeRecipients && !selectedAllRecipients
@@ -61,7 +57,7 @@
                       density="compact"
                       color="transparent"
                       flat
-                      class="ml-3 text-black"
+                      class="ml-3"
                       @mousedown.stop
                       @click.stop="handleRemoveRecipient(item)"
                     />
@@ -112,10 +108,14 @@
               >Attachments</v-col
             >
             <v-col cols="12">
+              <!-- Was `color="primary-button"` on an OUTLINED button, i.e. a
+                   FILL token used as ink - the exact case `utils/theme.ts`
+                   warns about. Measured 3.64:1 on the dark card, under AA. It
+                   is a secondary action, so it takes the design's ghost
+                   button, whose `--text2` ink is readable in both themes. -->
               <v-btn
                 text="Upload"
-                class="text-capitalize"
-                color="primary-button"
+                class="text-capitalize screen-btn-ghost"
                 variant="outlined"
                 min-width="150"
                 @click="handleUpload"
@@ -161,34 +161,29 @@
         {{ errorMessage }}
       </p>
     </v-row>
-    <v-toolbar density="compact">
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col cols="6" class="pr-2">
           <v-btn
-            tile
             block
-            variant="text"
-            class="text-none"
-            size="48"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="close"
             text="Close"
           />
         </v-col>
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
-            tile
             block
             variant="flat"
-            color="primary-button"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :text="prop.mode === 'add' ? 'Add Bulletin' : 'Save'"
             :disabled="loading.processing || !validForm"
             @click="onSubmit"
           />
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/BulletinBoardManagement.vue

@@ -1,17 +1,39 @@
 <template>
     <v-row no-gutters>
-        <TableMain :headers="headers" :items="paginatePlaceholderItem" v-model:search="searchInput"
+        <!-- Title left, primary action right - the design's opening row. -->
+        <v-col cols="12">
+            <PageHeader title="Bulletin Board">
+                <template #actions>
+                    <AppButton v-if="canCreateBulletinBoard" icon="mdi-plus" @click="handleCreateEvent">
+                        Add Announcement
+                    </AppButton>
+                </template>
+            </PageHeader>
+        </v-col>
+
+        <TableMain :headers="headers" :items="items" v-model:search="searchInput"
             :loading="getAnnouncementPending" :page="page" :pages="pages" :pageRange="pageRange"
-            @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick"
-            @create="handleCreateEvent" :can-create="canCreateBulletinBoard" create-label="Add Announcement">
-            <template #extension>
-                <v-row no-gutters class="w-100 d-flex flex-column">
-                    <v-tabs v-model="status" color="primary" :height="40" @update:model-value="toRoute" class="w-100">
-                        <v-tab v-for="tab in tabOptions" :value="tab.status" :key="tab.status" class="text-capitalize">
-                            {{ tab.name }}
-                        </v-tab>
-                    </v-tabs>
-                </v-row>
+            @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick">
+            <!--
+                The tabs move ONTO the toolbar row (the design draws them there)
+                instead of a stacked strip above the table. Same options, same
+                order, same `toRoute` - which already sets the status itself.
+            -->
+            <template #tabs>
+                <button v-for="tab in tabOptions" :key="tab.status" type="button" role="tab" class="app-tab"
+                    :class="{ 'app-tab--active': status === tab.status }" :aria-selected="status === tab.status"
+                    @click="status = tab.status as any; toRoute(tab.status)">
+                    {{ tab.name }}
+                </button>
+            </template>
+
+            <!--
+                A failed request is not an empty bulletin board. Without this the
+                table drew its neutral "No data available" for a 500, which reads
+                as "there are no announcements" - a statement the server never made.
+            -->
+            <template v-if="getAnnouncementError" #no-data>
+                <DashboardEmptyState error />
             </template>
 
             <template v-slot:item.createdAt="{ item }">
@@ -62,6 +84,10 @@
 <script setup lang="ts">
 import useBulletin from '../composables/useBulletin';
 import { APP_CONSTANTS } from '../constants/app';
+// Imported by relative path, not left to Nuxt's auto-import: this layer's
+// components always import their utils explicitly, and a missing import here
+// is a ReferenceError that blanks the screen in every consuming app.
+import { readListPage } from '../utils/list-page';
 
 definePageMeta({
     memberOnly: true,
@@ -122,6 +148,13 @@ const headers = computed(() => {
     return arr;
 
 });
+// THE SERVER PAGES THIS LIST. `getAll` is called with `page`, so `items` is
+// already one page of rows and `pages` / `pageRange` are the server's own
+// answer for the whole list. A computed used to re-derive both from
+// `items.value.length` - i.e. from the page it had just been handed - so 47
+// announcements read "1-10 of 10", the pager was told there was 1 page, and
+// page 2 was unreachable. Nothing here recomputes them any more; the watcher
+// below is the only writer.
 const items = ref<TAnnouncement[]>([]);
 const page = ref(1);
 const pages = ref(0);
@@ -150,28 +183,11 @@ const activeAnnouncementObj = computed(() => {
     return items.value.find(x => x._id === selectedAnnouncementId.value)
 })
 
-const paginatePlaceholderItem = computed(() => {
-    const pageSize = 10
-    const total = items.value.length
-    const currentPage = page.value
-
-    const start = (currentPage - 1) * pageSize
-    const end = start + pageSize
-
-    const from = total === 0 ? 0 : start + 1
-    const to = Math.min(end, total)
-    pageRange.value = `${from}-${to} of ${total}`
-
-    pages.value = Math.ceil(total / pageSize)
-
-    return items.value.slice(start, end)
-})
-
-
 const {
     data: getAnnouncementReq,
     refresh: getAnnouncementsRefresh,
     pending: getAnnouncementPending,
+    error: getAnnouncementError,
 } = await useLazyAsyncData(
     `get-all-announcements-${page.value}`,
     () => getAll({ page: page.value, site: siteId, status: status.value, recipients: props.recipients ?? "" }),
@@ -181,37 +197,13 @@ const {
 );
 
 watch(getAnnouncementReq, (newVal) => {
-    items.value = newVal?.items || [];
-    pages.value = newVal?.pages || 0;
-    pageRange.value = newVal?.pageRange || "-- - -- of --";
+    const listPage = readListPage<TAnnouncement>(newVal);
+    items.value = listPage.items;
+    pages.value = listPage.pages;
+    pageRange.value = listPage.pageRange;
 });
 
 
-function eventStatusFormat(status: any) {
-    switch (status) {
-        case 'In Progress':
-            return {
-                color: 'orange',
-                text: 'In Progress'
-            };
-        case 'Active':
-            return {
-                color: 'green',
-                text: status
-            }
-        case 'Scheduled':
-            return {
-                color: 'blue',
-                text: status
-            }
-        default:
-            return {
-                color: 'grey',
-                text: status
-            }
-    }
-}
-
 const tabOptions = [
     { name: "Active", status: "active" },
     { name: "Upcoming", status: "upcoming" },

package/components/BulletinBoardView.vue

@@ -1,14 +1,17 @@
 <template>
-  <v-card width="100%" :loading="processing">
+  <v-card width="100%" class="screen-modal" :loading="processing">
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-subtitle-1 text-capitalize">
+        <span class="screen-card-title text-capitalize">
           Preview Announcement
         </span>
       </v-row>
     </v-toolbar>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0 my-3">
+    <v-card-text
+      style="max-height: 100vh; overflow-y: auto"
+      class="screen-modal__body pb-0 my-3"
+    >
       <v-row no-gutters>
         <template v-for="(label, key) in formattedFields" :key="key">
           <v-col cols="12" class="mb-5">
@@ -39,7 +42,7 @@
             <v-col class="font-weight-bold">Attachments:</v-col>
             <v-col cols="9" class="px-10">
               <template v-if="videosArray.length > 0">
-                <div class="text-caption text-medium-emphasis mb-1">
+                <div class="text-caption screen-hint mb-1">
                   Videos ({{ videosArray.length }})
                 </div>
                 <v-list density="compact" class="pa-0 rounded-lg border mb-3">
@@ -71,7 +74,7 @@
 
               <template v-if="photosArray.length > 0">
                 <div
-                  class="text-caption text-medium-emphasis mb-1"
+                  class="text-caption screen-hint mb-1"
                   :class="{ 'mt-3': videosArray.length > 0 }"
                 >
                   Photos ({{ photosArray.length }})
@@ -110,7 +113,7 @@
 
               <template v-if="filesArray.length > 0">
                 <div
-                  class="text-caption text-medium-emphasis mb-1"
+                  class="text-caption screen-hint mb-1"
                   :class="{
                     'mt-3': videosArray.length > 0 || photosArray.length > 0,
                   }"

package/components/BulletinExpirationChip.vue

@@ -1,8 +1,17 @@
 <template>
-  <v-chip
-    size="small"
-    :color="value ? 'green' : 'red'"
-    :text="value ? 'Yes' : 'No'"
+  <!--
+    The design's status pill rather than a raw v-chip. Vuetify's `green` and
+    `red` are fixed hues that are in no token file: the red one printed
+    `rgb(244,67,54)` and measured 3.4:1 against the surface behind it, below AA
+    on the word people actually read, and the green one measured 2.78:1.
+    `approved` and `rejected` are the shared tone words, so this chip now takes
+    `--ok` / `--err` and their paired `--ok-bg` / `--err-bg` - the handoff's own
+    values - and carries its own background instead of borrowing whatever it
+    happens to sit on.
+  -->
+  <StatusChip
+    :status="value ? 'approved' : 'rejected'"
+    :label="value ? 'Yes' : 'No'"
   />
 </template>
 

package/components/Button/Close.vue

@@ -1,6 +1,6 @@
 <template>
-    <v-btn v-if="!prop.iconOnly" text="Close" class="bg-grey-lighten-2 text-capitalize" :height="prop.height" @click="emit('click')" />
-    <v-btn v-else icon="mdi-close" size="small" class="bg-grey-lighten-2 text-capitalize" :height="prop.height" @click="emit('click')" />
+    <v-btn v-if="!prop.iconOnly" text="Close" variant="flat" class="screen-btn-ghost" :height="prop.height" @click="emit('click')" />
+    <v-btn v-else icon="mdi-close" variant="flat" size="small" class="screen-modal__close" :height="prop.height" @click="emit('click')" />
 </template>
 
 <script setup lang="ts">