@7365admin1/layer-common 3.2.1-staging.74 → 3.2.1-staging.75

package/.changeset/service-provider-invitation-actions.md

@@ -0,0 +1,28 @@
+---
+"@7365admin1/layer-common": minor
+---
+
+Make the Pending tab's invitation actions reachable, and say which state an invitation is really in
+
+The row menu in the service-provider list was drawn only for provider rows, so a
+pending invitation offered no actions at all — including the cancel that was
+already wired up behind it. Invitation rows now carry Cancel, Resend and Delete,
+each behind a confirmation that names the company and the site, and Resend is
+disabled with the reason while Seven365 has not approved the invitation yet.
+
+Every invitation also used to read "Pending" whatever had happened to it. Rows
+now show the state they are actually in — Waiting for Seven365, Waiting for the
+provider, Not approved, Declined, Cancelled, Expired — in those words, with
+Seven365's reason shown underneath a rejected one.
+
+Also here: a new ServiceProviderInvitationPrompt, which is how an existing
+provider answers an invitation from inside the app they already use, with no
+sign-up and no one-time code.
+
+Three contrast fixes found while rendering these screens: the list's tab strip
+was a hardcoded light grey that turned into a white slab in dark mode and took
+the tab labels with it; the service type column read the raw stored slug
+("security_agency") instead of "Security"; and `on-warning`, `on-info` and
+dark's `on-error` are now set explicitly, because Vuetify derives white for them
+and that measures 2.37:1, 3.12:1 and 3.60:1 on those fills — every filled
+warning, info and error chip, alert and button in the product.

package/components/ServiceProviderInvitationPrompt.vue

@@ -0,0 +1,150 @@
+<template>
+  <v-card
+    v-if="invitation"
+    width="100%"
+    rounded="lg"
+    variant="outlined"
+    border="thin"
+    class="sp-invite-prompt"
+  >
+    <v-card-item>
+      <template #prepend>
+        <v-avatar color="primary" variant="tonal" size="44">
+          <v-icon>mdi-office-building-marker-outline</v-icon>
+        </v-avatar>
+      </template>
+      <v-card-title class="text-wrap sp-invite-prompt-title">
+        {{ invitation.orgName }} has invited you to {{ invitation.siteName }}
+      </v-card-title>
+      <v-card-subtitle class="text-wrap">
+        Approved by Seven365 · {{ expiryLine }}
+      </v-card-subtitle>
+    </v-card-item>
+
+    <v-card-text class="text-body-2">
+      {{ invitation.orgName }} would like your company to provide services at
+      <strong>{{ invitation.siteName }}</strong
+      >. If you accept, this site will be added to your list of sites.
+    </v-card-text>
+
+    <v-card-actions class="px-4 pb-4">
+      <v-btn
+        variant="flat"
+        color="primary"
+        class="text-none"
+        :loading="working === 'accept'"
+        :disabled="Boolean(working) || !open"
+        @click="accept"
+      >
+        Accept
+      </v-btn>
+      <v-btn
+        variant="outlined"
+        class="text-none ml-2"
+        :loading="working === 'decline'"
+        :disabled="Boolean(working) || !open"
+        @click="decline"
+      >
+        Decline
+      </v-btn>
+      <v-spacer />
+      <v-chip
+        v-if="!open"
+        size="small"
+        variant="tonal"
+        class="text-none"
+        :color="invitation.status === 'complete' ? 'success' : undefined"
+      >
+        {{ invitation.statusLabel }}
+      </v-chip>
+    </v-card-actions>
+  </v-card>
+
+  <v-card v-else-if="error" width="100%" rounded="lg" variant="outlined" border="thin">
+    <v-card-text class="text-body-2">{{ error }}</v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+/**
+ * The invitation as the service provider sees it — inside the app they already
+ * use, from the session they already have.
+ *
+ * There is deliberately no sign-up and no one-time code anywhere on this
+ * screen: a company that already exists on iService365 never creates a second
+ * account. The email they receive only carries them here.
+ *
+ * An invitation that has not been approved by Seven365 is not readable at all —
+ * the server answers "not found" — so this component cannot show one.
+ */
+const props = defineProps({
+  invitationId: { type: String, required: true },
+});
+
+const emit = defineEmits<{ (e: "answered", status: string): void }>();
+
+const { getInvitation, declineInvitation } = useServiceProviderInvitation();
+const { addViaInvite } = useCustomerSite();
+
+const invitation = ref<any>(null);
+const error = ref("");
+const working = ref("");
+
+const open = computed(() => invitation.value?.status === "pending");
+
+const expiryLine = computed(() => {
+  const expires = invitation.value?.expireAt;
+  if (!expires) return "";
+  const days = Math.max(
+    0,
+    Math.ceil((new Date(expires).getTime() - Date.now()) / 86400000),
+  );
+  if (!open.value) return "no longer waiting for an answer";
+  return days <= 1 ? "expires within a day" : `expires in ${days} days`;
+});
+
+async function load() {
+  try {
+    invitation.value = await getInvitation(props.invitationId);
+  } catch (err: any) {
+    error.value =
+      err?.data?.message || "This invitation is no longer available.";
+  }
+}
+
+async function accept() {
+  working.value = "accept";
+  try {
+    await addViaInvite(props.invitationId);
+    await load();
+    emit("answered", "complete");
+  } catch (err: any) {
+    error.value = err?.data?.message || "Could not accept this invitation.";
+  } finally {
+    working.value = "";
+  }
+}
+
+async function decline() {
+  working.value = "decline";
+  try {
+    await declineInvitation(props.invitationId);
+    await load();
+    emit("answered", "declined");
+  } catch (err: any) {
+    error.value = err?.data?.message || "Could not decline this invitation.";
+  } finally {
+    working.value = "";
+  }
+}
+
+await load();
+</script>
+
+<style scoped>
+.sp-invite-prompt-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+</style>

package/components/ServiceProviderMain.vue

@@ -65,9 +65,12 @@
         :loading="loading"
       >
         <div class="sp-table-header">
+          <!-- No fixed colour: `grey-lighten-4` is a light-mode grey in both
+               themes, which is what made this strip a white slab in dark
+               mode. `transparent` lets the themed .sp-table-header show. -->
           <v-toolbar
             density="compact"
-            color="grey-lighten-4"
+            color="transparent"
             flat
             class="sp-toolbar-top px-2"
           >
@@ -137,17 +140,68 @@
             <span class="text-body-2">{{ item.members }}</span>
           </template>
           <template #item.status="{ item }">
+            <!--
+              Invitation rows use a FILLED chip, not a tonal one. A tonal chip
+              paints the status colour as TEXT, and measured on white the
+              warning and info tokens come out at 2.4:1 and 3.1:1 — under the
+              4.5:1 a 12px label needs. Filled puts the colour in the
+              background and lets Vuetify pick a readable foreground for it.
+            -->
             <v-chip
-              :color="statusChipColor(item.status)"
+              :color="statusChipColor(item.status, item.statusRaw)"
               size="small"
-              variant="tonal"
+              :variant="item.source === 'invite' ? 'flat' : 'tonal'"
               class="text-none"
             >
               {{ item.status }}
             </v-chip>
+            <div
+              v-if="item.rejectionReason"
+              class="text-caption text-medium-emphasis mt-1 sp-reject-reason"
+            >
+              Seven365 said: {{ item.rejectionReason }}
+            </div>
           </template>
           <template #item.actions="{ item }">
-            <v-menu v-if="item.source === 'provider'" location="bottom end">
+            <!--
+              Invitation rows. The menu used to be drawn only for
+              `source === 'provider'`, so a pending invitation showed no
+              actions at all and the cancel already wired up behind it was
+              unreachable.
+            -->
+            <v-menu v-if="item.source === 'invite'" location="bottom end">
+              <template #activator="{ props: menuProps }">
+                <v-btn
+                  v-bind="menuProps"
+                  icon
+                  variant="text"
+                  density="comfortable"
+                  aria-label="Invitation actions"
+                >
+                  <v-icon>mdi-dots-vertical</v-icon>
+                </v-btn>
+              </template>
+              <v-list density="compact" min-width="220">
+                <v-list-item
+                  title="Cancel invitation"
+                  :disabled="!canCancelInvite(item)"
+                  :subtitle="canCancelInvite(item) ? undefined : 'Only while it is still waiting.'"
+                  @click="openInviteAction(item, 'cancel')"
+                />
+                <v-list-item
+                  title="Resend invitation"
+                  :disabled="!canResendInvite(item)"
+                  :subtitle="resendHint(item)"
+                  @click="openInviteAction(item, 'resend')"
+                />
+                <v-list-item
+                  title="Delete invitation"
+                  base-color="error"
+                  @click="openInviteAction(item, 'delete')"
+                />
+              </v-list>
+            </v-menu>
+            <v-menu v-else-if="item.source === 'provider'" location="bottom end">
               <template #activator="{ props: menuProps }">
                 <v-btn
                   v-bind="menuProps"
@@ -284,6 +338,56 @@
     </v-card>
   </v-dialog>
 
+  <!-- Cancel / Resend / Delete an invitation. Same shape as the provider
+       dialog above so the two read as one product. -->
+  <v-dialog v-model="inviteDialog" max-width="728" persistent>
+    <v-card rounded="lg" class="sp-status-card">
+      <v-card-title class="sp-status-title">
+        {{ inviteDialogTitle }}
+      </v-card-title>
+
+      <v-card-text class="sp-status-body">
+        <div class="sp-status-question">
+          {{ inviteDialogQuestion }}
+        </div>
+        <div class="sp-status-copy">
+          {{ inviteDialogCopy }}
+        </div>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="pa-0">
+        <v-row no-gutters class="fill-height">
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="flat"
+              height="82"
+              class="text-none sp-status-cancel"
+              :disabled="inviteWorking"
+              @click="closeInviteDialog"
+            >
+              Keep it
+            </v-btn>
+          </v-col>
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="flat"
+              height="82"
+              class="text-none sp-status-confirm"
+              :loading="inviteWorking"
+              @click="confirmInviteAction"
+            >
+              {{ inviteConfirmLabel }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
   <v-dialog v-model="createDialog" width="500" persistent>
     <v-card width="100%">
       <v-toolbar>
@@ -582,6 +686,11 @@ type TableRow = {
   members: string;
   status: string;
   source: "provider" | "invite";
+  /** the stored status, for deciding which actions a row may offer */
+  statusRaw?: string;
+  /** shown under a "Not approved" row, in Seven365's own words */
+  rejectionReason?: string;
+  siteName?: string;
 };
 
 type ServiceProviderMemberRow = {
@@ -739,6 +848,13 @@ const { getAll: getAllMembers, getAllByUserId } = useMember();
 const { getVerifications, cancelUserInvitation, getVerificationByEmail } =
   useVerification();
 
+const {
+  getInvitations,
+  cancelInvitation,
+  resendInvitation,
+  deleteInvitation,
+} = useServiceProviderInvitation();
+
 const existingAccount = ref<any>(null);
 const checkingExistingAccount = ref(false);
 // const { getRoles } = useRole();
@@ -877,6 +993,109 @@ function canViewMembers(row: TableRow) {
   return row.source === "provider";
 }
 
+// --- invitation actions (Cancel / Resend / Delete) ---------------------------
+//
+// Each one confirms first, and each one leaves an audit line on the server —
+// who did it, when, and what. Delete is a SOFT delete: the row leaves this
+// list, Seven365 keeps the record and its history.
+
+type InviteAction = "cancel" | "resend" | "delete";
+
+const inviteDialog = ref(false);
+const inviteWorking = ref(false);
+const inviteActionRow = ref<TableRow | null>(null);
+const inviteAction = ref<InviteAction>("cancel");
+
+function canCancelInvite(row: TableRow) {
+  return ["awaiting-approval", "pending"].includes(row.statusRaw ?? "");
+}
+
+function canResendInvite(row: TableRow) {
+  return (row.statusRaw ?? "") === "pending";
+}
+
+function resendHint(row: TableRow) {
+  if (canResendInvite(row)) return undefined;
+  return (row.statusRaw ?? "") === "awaiting-approval"
+    ? "You can resend once Seven365 has approved it."
+    : "Only an approved invitation can be sent again.";
+}
+
+const inviteDialogTitle = computed(() => {
+  if (inviteAction.value === "resend") return "Resend Invitation";
+  if (inviteAction.value === "delete") return "Delete Invitation";
+  return "Cancel Invitation";
+});
+
+const inviteDialogQuestion = computed(() => {
+  const row = inviteActionRow.value;
+  const who = row?.companyName && row.companyName !== "-" ? row.companyName : row?.email;
+  const site = row?.siteName ? ` for ${row.siteName}` : "";
+
+  if (inviteAction.value === "resend") {
+    return `Send this invitation again to ${row?.email}?`;
+  }
+  if (inviteAction.value === "delete") {
+    return "Delete this invitation permanently?";
+  }
+  return `Cancel this invitation to ${who}${site}?`;
+});
+
+const inviteDialogCopy = computed(() => {
+  if (inviteAction.value === "resend") {
+    return "They will get a fresh message and another 3 days to accept. This does not create a second invitation.";
+  }
+  if (inviteAction.value === "delete") {
+    return "It will disappear from this list. Seven365 keeps the record of who sent it and what happened to it.";
+  }
+  return "They will not be able to accept it. You can send a new one later.";
+});
+
+const inviteConfirmLabel = computed(() => {
+  if (inviteAction.value === "resend") return "Resend";
+  if (inviteAction.value === "delete") return "Delete";
+  return "Cancel invitation";
+});
+
+function openInviteAction(row: TableRow, action: InviteAction) {
+  if (action === "cancel" && !canCancelInvite(row)) return;
+  if (action === "resend" && !canResendInvite(row)) return;
+  inviteActionRow.value = row;
+  inviteAction.value = action;
+  inviteDialog.value = true;
+}
+
+function closeInviteDialog() {
+  if (inviteWorking.value) return;
+  inviteDialog.value = false;
+  inviteActionRow.value = null;
+}
+
+async function confirmInviteAction() {
+  const row = inviteActionRow.value;
+  if (!row) return;
+
+  inviteWorking.value = true;
+  try {
+    const run =
+      inviteAction.value === "resend"
+        ? resendInvitation
+        : inviteAction.value === "delete"
+          ? deleteInvitation
+          : cancelInvitation;
+
+    const result = await run(row._id);
+    showMessage(result?.message ?? "Done.", "success");
+    inviteDialog.value = false;
+    inviteActionRow.value = null;
+    await loadList();
+  } catch (error: any) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    inviteWorking.value = false;
+  }
+}
+
 const statusDialog = ref(false);
 const statusUpdating = ref(false);
 const statusActionRow = ref<TableRow | null>(null);
@@ -908,7 +1127,11 @@ function rowActionLabel(row: TableRow) {
 
 function typeDisplay(type: string, nature?: string) {
   if (nature && String(nature).trim()) return String(nature);
-  const list = natureOfBusinessV3.value as Array<{
+  // useLocal returns a plain array; reading `.value` off it was always
+  // undefined, so every row fell through to the raw stored slug
+  // ("security_agency") instead of "Security".
+  const source = natureOfBusinessV3 as any;
+  const list = (Array.isArray(source) ? source : source?.value) as Array<{
     title?: string;
     value?: string;
   }>;
@@ -924,7 +1147,18 @@ function statusDisplay(raw: string, source: TableRow["source"]) {
   return raw.charAt(0).toUpperCase() + raw.slice(1).toLowerCase();
 }
 
-function statusChipColor(statusLabel: string) {
+const INVITE_STATUS_COLOURS: Record<string, string> = {
+  "awaiting-approval": "warning",
+  pending: "info",
+  complete: "success",
+  rejected: "error",
+  declined: "default",
+  cancelled: "default",
+  expired: "default",
+};
+
+function statusChipColor(statusLabel: string, statusRaw?: string) {
+  if (statusRaw) return INVITE_STATUS_COLOURS[statusRaw] ?? "primary";
   const s = statusLabel.toLowerCase();
   if (s === "active") return "success";
   if (s === "pending") return "warning";
@@ -1006,7 +1240,12 @@ function mapInviteRows(raw: Record<string, any>[]): TableRow[] {
       ? typeDisplay(row.metadata.app)
       : inviteTypeLabel(row.type ?? ""),
     members: "-",
-    status: "Pending",
+    // Every invitation used to read "Pending" whatever had happened to it. It
+    // now says which of the seven states it is actually in, in words.
+    status: row.statusLabel || serviceProviderInviteLabel(row.status),
+    statusRaw: String(row.status ?? ""),
+    rejectionReason: row.rejectionReason ?? "",
+    siteName: row.metadata?.siteName ?? "",
     source: "invite",
   }));
 }
@@ -1022,13 +1261,14 @@ async function loadList() {
   loading.value = true;
   try {
     if (listTab.value === "pending") {
-      const data = await getVerifications({
-        status: "pending",
-        type: "service-provider-invite,service-provider-create-org",
+      // Everything that is not a finished engagement, so a rejection or a
+      // cancellation is visible here instead of the row simply vanishing.
+      const data = await getInvitations({
+        org: props.orgId,
+        status:
+          "awaiting-approval,pending,rejected,declined,cancelled,expired",
         page: page.value,
         search: searchText.value?.trim() || "",
-        siteId: props.siteId,
-        orgId: props.orgId,
         limit: pageSize,
       });
       items.value = mapInviteRows(data.items ?? []);
@@ -1282,8 +1522,12 @@ async function submitServiceProviderInvite() {
 }
 
 .sp-table-header {
-  background: #f5f5f5;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  /* Was a hardcoded #f5f5f5 with a black border: in dark mode the tab strip
+     became a white slab and the tab labels and the page range disappeared
+     into it. These take the colour of whichever theme they are in. */
+  background: rgb(var(--v-theme-surface-light, var(--v-theme-surface)));
+  border-bottom: 1px solid
+    rgba(var(--v-border-color), var(--v-border-opacity));
 }
 
 .sp-tabs {

package/composables/useServiceProviderInvitation.ts

@@ -0,0 +1,145 @@
+/**
+ * Service-provider invitations — the list a property manager sees and the
+ * things they can do to a row.
+ *
+ * Separate from `useVerification` because these rows are not generic
+ * verifications any more: they have their own states (waiting for Seven365,
+ * waiting for the provider, not approved, declined) and their own actions,
+ * and the server scopes them to the caller's own organisation.
+ */
+export type TServiceProviderInvitation = {
+  _id: string;
+  email: string;
+  type: string;
+  status: string;
+  statusLabel: string;
+  rejectionReason?: string | null;
+  createdAt?: string;
+  expireAt?: string;
+  deletedAt?: string | null;
+  metadata?: Record<string, any>;
+  history?: Array<{
+    action: string;
+    at: string;
+    byName?: string;
+    reason?: string;
+  }>;
+};
+
+/** The words on screen. Kept beside the server's own list on purpose — a
+ *  status the server invents must never render as a raw stored value. */
+export const SERVICE_PROVIDER_INVITE_LABELS: Record<string, string> = {
+  "awaiting-approval": "Waiting for Seven365",
+  pending: "Waiting for the provider",
+  rejected: "Not approved",
+  complete: "Accepted",
+  declined: "Declined",
+  cancelled: "Cancelled",
+  expired: "Expired",
+};
+
+export function serviceProviderInviteLabel(status?: string) {
+  return SERVICE_PROVIDER_INVITE_LABELS[String(status ?? "")] ?? "Unknown";
+}
+
+export default function useServiceProviderInvitation() {
+  const base = "/api/service-provider-invitations";
+
+  function getInvitations({
+    org = "",
+    status = "",
+    page = 1,
+    limit = 20,
+  } = {}): Promise<{
+    items: TServiceProviderInvitation[];
+    pages: number;
+    pageRange: string;
+  }> {
+    return useNuxtApp().$api(base, {
+      method: "GET",
+      query: { org, status, page, limit },
+    });
+  }
+
+  function cancelInvitation(id: string) {
+    return useNuxtApp().$api<{ message: string }>(`${base}/${id}/cancel`, {
+      method: "PUT",
+    });
+  }
+
+  /** Sends the same invitation again. Never creates a second row. */
+  function resendInvitation(id: string) {
+    return useNuxtApp().$api<{ message: string }>(`${base}/${id}/resend`, {
+      method: "PUT",
+    });
+  }
+
+  /** Soft delete — the row leaves this list, Seven365 keeps the record. */
+  function deleteInvitation(id: string) {
+    return useNuxtApp().$api<{ message: string }>(`${base}/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  // ---- Seven365 super admin ------------------------------------------------
+
+  function getApprovals({
+    status = "awaiting-approval",
+    page = 1,
+    limit = 20,
+    includeDeleted = false,
+  } = {}): Promise<{
+    items: TServiceProviderInvitation[];
+    pages: number;
+    pageRange: string;
+    awaitingApprovalCount: number;
+  }> {
+    return useNuxtApp().$api(`${base}/approvals`, {
+      method: "GET",
+      query: { status, page, limit, includeDeleted },
+    });
+  }
+
+  function getApprovalCount(): Promise<{ count: number }> {
+    return useNuxtApp().$api(`${base}/approvals/count`, { method: "GET" });
+  }
+
+  function approveInvitation(id: string) {
+    return useNuxtApp().$api<{ message: string }>(`${base}/${id}/approve`, {
+      method: "PUT",
+    });
+  }
+
+  /** The reason is required — it is what the property manager is shown. */
+  function rejectInvitation(id: string, reason: string) {
+    return useNuxtApp().$api<{ message: string }>(`${base}/${id}/reject`, {
+      method: "PUT",
+      body: { reason },
+    });
+  }
+
+  // ---- the invited service provider ----------------------------------------
+
+  function getInvitation(id: string): Promise<TServiceProviderInvitation> {
+    return useNuxtApp().$api(`${base}/${id}`, { method: "GET" });
+  }
+
+  function declineInvitation(id: string) {
+    return useNuxtApp().$api<{ message: string }>(`${base}/${id}/decline`, {
+      method: "PUT",
+    });
+  }
+
+  return {
+    getInvitations,
+    cancelInvitation,
+    resendInvitation,
+    deleteInvitation,
+    getApprovals,
+    getApprovalCount,
+    approveInvitation,
+    rejectInvitation,
+    getInvitation,
+    declineInvitation,
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.1-staging.74",
+  "version": "3.2.1-staging.75",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/utils/theme.ts

@@ -75,6 +75,17 @@ export const LIGHT_THEME = {
     "brand-surface": "#EDF1F7",
     /** The drawer's label colour. On the rail: 15.43:1. */
     "on-brand-surface": "#0B1B27",
+    /**
+     * Vuetify leaves `warning` (#FB8C00) and `info` (#2196F3) at its stock
+     * values and DERIVES their foreground, and — as with `on-primary` — the
+     * derivation picks WHITE. Measured, that is 2.37:1 on warning and 3.12:1
+     * on info: every filled warning/info chip, alert, button and badge in the
+     * product, including the invitation status chips. Setting the label to the
+     * dark page colour takes them to 8.9:1 and 5.3:1. Same value in both
+     * themes because the two fills are the same in both themes.
+     */
+    "on-warning": "#0E1319",
+    "on-info": "#0E1319",
     "primary-button": "#1867C0",
     "text-primary": "#052439",
   },
@@ -132,6 +143,14 @@ export const DARK_THEME = {
     "brand-surface": "#1B242F",
     /** The drawer's label colour. On the rail: 13.21:1. */
     "on-brand-surface": "#E8ECF1",
+    /** See LIGHT_THEME: Vuetify derives white on these fills, at 2.37:1. */
+    "on-warning": "#0E1319",
+    "on-info": "#0E1319",
+    /**
+     * Dark's stock `error` is the pale #CF6679, and white on it is 3.60:1 —
+     * the light theme's darker #B00020 carries white fine, this one does not.
+     */
+    "on-error": "#0E1319",
     /** Unchanged on purpose: it already passes in both themes. */
     "primary-button": "#1867C0",
     /** #052439 on a dark page measures 1.18:1. This is 15.72:1. */