Wire up CO visual walkthrough fixes: button colors, heading styles, logo sizing, dashboard alerts, font variable

Author: Nick Campanini

src/SEBT.Portal.Web/design/fonts.test.ts

@@ -0,0 +1,41 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+import { primaryFont } from './fonts'
+
+/**
+ * Contract test: the SCSS font override must reference the same CSS variable
+ * that the font generator produces. A mismatch causes a FOUT (flash of unstyled
+ * text) because the SCSS !important override resolves to an undefined variable,
+ * falling back to the browser's default serif font.
+ *
+ * This caught a real bug: generate-fonts.js was updated in DC-143 to produce
+ * --font-primary, but _uswds-theme-custom-styles.scss still referenced
+ * --font-urbanist.
+ */
+describe('font variable contract', () => {
+  const scssPath = resolve(__dirname, 'sass/_uswds-theme-custom-styles.scss')
+  const scssContent = readFileSync(scssPath, 'utf-8')
+
+  it('primaryFont exports a CSS variable name', () => {
+    expect(primaryFont.variable).toBeDefined()
+    expect(primaryFont.variable).toMatch(/^--font-/)
+  })
+
+  it('SCSS font override references the same variable as primaryFont', () => {
+    const cssVariable = primaryFont.variable
+    expect(scssContent).toContain(`var(${cssVariable})`)
+  })
+
+  it('SCSS font override does not reference stale font variable names', () => {
+    // Guard against the specific bug: old variable names left behind after
+    // the font generator is updated to produce a different variable.
+    const fontVarPattern = /var\(--font-([^)]+)\)/g
+    const referencedVars = [...scssContent.matchAll(fontVarPattern)].map((m) => `--font-${m[1]}`)
+
+    for (const varName of referencedVars) {
+      expect(varName).toBe(primaryFont.variable)
+    }
+  })
+})

src/SEBT.Portal.Web/design/sass/_uswds-theme-custom-styles.scss

@@ -23,22 +23,22 @@ References:
 Custom Font Override
 ----------------------------------------
 Override USWDS default fonts with our custom font from Next.js font loader.
-The --font-urbanist CSS variable is set by Next.js in layout.tsx.
+The --font-primary CSS variable is set by Next.js in layout.tsx.
 This ensures all USWDS components use our design token font.
 ----------------------------------------
 */
 
 // Override all USWDS font-family declarations to use our custom font
 // This is necessary because USWDS sets font-family on many utility classes
-// TODO: Register Urbanist as a custom USWDS typeface to remove !important hack
+// TODO: Register the design token font as a custom USWDS typeface to remove !important hack
 // See: https://designsystem.digital.gov/documentation/settings/#typography-settings
 body,
 .usa-prose,
 [class*='font-'],
 [class*='text-'],
 [class*='usa-'] {
   font-family:
-    var(--font-urbanist),
+    var(--font-primary),
     system-ui,
     -apple-system,
     BlinkMacSystemFont,

src/SEBT.Portal.Web/design/sass/components/_buttons.scss

@@ -68,3 +68,44 @@ Typography: 16px, Bold (700), Line height 24px
     }
   }
 }
+
+// Temporary CO override: DC uses secondary (gold) for buttons, but CO's secondary
+// is red — intended for error/validation states, not interactive controls.
+// CO mockups show buttons in the primary teal range.
+// TODO: Resolve with a proper per-state button token mapping so this override
+// is unnecessary. See design token discussion re: semantic color roles.
+html[data-state='co'] {
+  .usa-button:not(.usa-language__link):not(.usa-button--unstyled):not(.usa-button--outline) {
+    background-color: color('primary');
+    border-color: color('primary');
+    color: color('white');
+
+    &:hover {
+      background-color: color('primary-dark');
+      border-color: color('primary-dark');
+    }
+
+    &:active {
+      background-color: color('primary-darker');
+      border-color: color('primary-darker');
+    }
+  }
+
+  .usa-button--outline:not(.usa-language__link) {
+    background-color: color('white');
+    border: 2px solid color('primary');
+    color: color('primary');
+
+    &:hover {
+      background-color: color('primary-lightest');
+      border-color: color('primary-dark');
+      color: color('primary-dark');
+    }
+
+    &:active {
+      background-color: color('primary-lighter');
+      border-color: color('primary-darker');
+      color: color('primary-darker');
+    }
+  }
+}

src/SEBT.Portal.Web/src/app/(authenticated)/profile/address/(flow)/page.tsx

@@ -29,8 +29,10 @@ export default function AddressFormPage() {
   }
 
   return (
-    <div className="grid-container maxw-tablet">
-      <h1>{t('pageTitle', 'Tell us where to safely send your mail')}</h1>
+    <div className="grid-container maxw-tablet padding-top-4 padding-bottom-4">
+      <h1 className="font-sans-xl text-primary">
+        {t('pageTitle', 'Tell us where to safely send your mail')}
+      </h1>
       <p className="usa-hint">
         {t('requiredFieldsNote', 'Asterisks (*) indicate a required field')}
       </p>

src/SEBT.Portal.Web/src/app/(authenticated)/profile/address/(flow)/replacement-cards/page.tsx

@@ -24,8 +24,8 @@ export default function ReplacementCardsPage() {
   }
 
   return (
-    <div className="grid-container maxw-tablet">
-      <h1>
+    <div className="grid-container maxw-tablet padding-top-4 padding-bottom-4">
+      <h1 className="font-sans-xl text-primary">
         {t(
           'replacementCardsTitle',
           `Do you want to request replacement ${programName} cards to be sent to this address?`

src/SEBT.Portal.Web/src/app/(authenticated)/profile/address/(flow)/replacement-cards/select/page.tsx

@@ -8,8 +8,10 @@ export default function CardSelectionPage() {
   const { t } = useTranslation('confirmInfo')
 
   return (
-    <div className="grid-container maxw-tablet">
-      <h1>{t('cardSelectionTitle', 'Which cards need to be replaced?')}</h1>
+    <div className="grid-container maxw-tablet padding-top-4 padding-bottom-4">
+      <h1 className="font-sans-xl text-primary">
+        {t('cardSelectionTitle', 'Which cards need to be replaced?')}
+      </h1>
       <CardSelection />
     </div>
   )

src/SEBT.Portal.Web/src/components/layout/Header.tsx

@@ -7,17 +7,28 @@ import { useTranslation } from 'react-i18next'
 import { LanguageSelector } from './LanguageSelector'
 import type { HeaderProps } from './types'
 
+// Logo dimensions match each state's SVG viewBox so the image renders
+// at its natural aspect ratio. maxh-6 caps the height for states with
+// taller logos (DC), while wider logos (CO) spread horizontally.
+const logoDimensions: Record<string, { width: number; height: number }> = {
+  dc: { width: 122, height: 52 },
+  co: { width: 192, height: 28 }
+}
+
 export function Header({ state = 'dc' }: HeaderProps) {
   const { t } = useTranslation('common')
+  const defaultDimensions = { width: 122, height: 52 }
+  // eslint-disable-next-line security/detect-object-injection -- state is typed StateCode
+  const { width, height } = logoDimensions[state] ?? defaultDimensions
 
   return (
     <header
       className="usa-header usa-header--basic bg-white shadow-2"
       role="banner"
     >
-      <div className="display-flex flex-justify flex-align-center width-full padding-y-105 padding-left-1 padding-right-3">
+      <div className="display-flex flex-justify flex-align-center width-full padding-y-105 padding-x-2">
         <div className="usa-navbar border-0">
-          <div className="usa-logo">
+          <div className="usa-logo margin-left-0">
             <Link
               href="/"
               title="Home"
@@ -27,9 +38,10 @@ export function Header({ state = 'dc' }: HeaderProps) {
               <Image
                 src={`/images/states/${state}/logo.svg`}
                 alt={t('logoAlt')}
-                width={121}
-                height={51}
+                width={width}
+                height={height}
                 priority
+                className="maxw-full height-auto maxh-6"
               />
             </Link>
           </div>

src/SEBT.Portal.Web/src/components/layout/HelpSection.tsx

@@ -110,7 +110,7 @@ function COHelpSection({ state = 'co' }: HelpSectionProps) {
           href={links.footer.digitalAccessibility ?? '#'}
           target="_blank"
           rel="noopener noreferrer"
-          className="usa-button usa-button--outline border-primary text-primary"
+          className="usa-button usa-button--outline border-primary text-primary display-block text-center"
         >
           {/* TODO: Use t('digitalAccessibilityStatement') once the key is added to co.csv */}
           Digital accessibility statement

src/SEBT.Portal.Web/src/features/address/components/ReplacementCardPrompt/ReplacementCardPrompt.tsx

@@ -84,7 +84,7 @@ export function ReplacementCardPrompt({ address }: ReplacementCardPromptProps) {
         </Alert>
       )}
 
-      <p className="usa-hint">
+      <p className="usa-hint margin-bottom-3">
         {t('requiredFieldsNote', 'Asterisks (*) indicate a required field')}
       </p>
 
@@ -93,7 +93,7 @@ export function ReplacementCardPrompt({ address }: ReplacementCardPromptProps) {
         aria-label={t('selectOneLabel', 'Select one')}
         aria-describedby={error ? 'replacement-choice-error' : undefined}
       >
-        <legend className="usa-legend">
+        <legend className="usa-legend text-bold">
           {t('selectOneLabel', 'Select one')}
           <span className="text-secondary-dark"> *</span>
         </legend>
@@ -112,7 +112,7 @@ export function ReplacementCardPrompt({ address }: ReplacementCardPromptProps) {
 
         <div className="usa-radio">
           <input
-            className="usa-radio__input"
+            className="usa-radio__input usa-radio__input--tile"
             type="radio"
             id="replacement-yes"
             name="replacementChoice"
@@ -124,7 +124,7 @@ export function ReplacementCardPrompt({ address }: ReplacementCardPromptProps) {
             }}
           />
           <label
-            className="usa-radio__label"
+            className="usa-radio__label text-bold"
             htmlFor="replacement-yes"
           >
             {tCommon('yes', 'Yes')}
@@ -133,7 +133,7 @@ export function ReplacementCardPrompt({ address }: ReplacementCardPromptProps) {
 
         <div className="usa-radio">
           <input
-            className="usa-radio__input"
+            className="usa-radio__input usa-radio__input--tile"
             type="radio"
             id="replacement-no"
             name="replacementChoice"
@@ -145,7 +145,7 @@ export function ReplacementCardPrompt({ address }: ReplacementCardPromptProps) {
             }}
           />
           <label
-            className="usa-radio__label"
+            className="usa-radio__label text-bold"
             htmlFor="replacement-no"
           >
             {tCommon('no', 'No')}

src/SEBT.Portal.Web/src/features/household/components/DashboardAlerts/DashboardAlerts.tsx

@@ -5,7 +5,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 
 /**
- * Displays success alerts on the dashboard triggered by URL search params.
+ * Displays success and warning alerts on the dashboard triggered by URL search params.
  * Captures alert state on first read, then cleans the params from the URL.
  * The alert persists because rendering is driven by captured state, not live params.
  * Extensible: add new param checks for future alert types (e.g., DC-153 card ordering).
@@ -19,10 +19,20 @@ export function DashboardAlerts() {
   // survives the URL cleanup that follows.
   const [alerts] = useState(() => ({
     addressUpdated: searchParams.get('addressUpdated') === 'true',
-    cardsRequested: searchParams.get('cardsRequested') === 'true'
+    cardsRequested: searchParams.get('cardsRequested') === 'true',
+    addressUpdateFailed: searchParams.get('addressUpdateFailed') === 'true',
+    contactUpdateFailed: searchParams.get('contactUpdateFailed') === 'true',
+    // TODO: Determine trigger logic — possibly driven by household data (e.g., address
+    // hasn't been confirmed in N months, or address on file doesn't match state records).
+    addressVerification: searchParams.get('addressVerification') === 'true'
   }))
 
-  const hasAlerts = alerts.addressUpdated || alerts.cardsRequested
+  const hasAlerts =
+    alerts.addressUpdated ||
+    alerts.cardsRequested ||
+    alerts.addressUpdateFailed ||
+    alerts.contactUpdateFailed ||
+    alerts.addressVerification
 
   useEffect(() => {
     if (hasAlerts) {
@@ -35,7 +45,7 @@ export function DashboardAlerts() {
   }
 
   return (
-    <div className="margin-bottom-3">
+    <div className="margin-bottom-3 display-flex flex-column gap-2">
       {alerts.addressUpdated && !alerts.cardsRequested && (
         <Alert
           variant="success"
@@ -59,6 +69,43 @@ export function DashboardAlerts() {
           integration is pending — changes are not yet reflected in the benefits system.
         </Alert>
       )}
+
+      {/* Warning alerts per CO-05 mockup — yellow with dark yellow left border.
+          TODO: Wire to actual error flows once state connector persistence is integrated.
+          Currently triggered by URL params for visual verification. */}
+
+      {alerts.addressUpdateFailed && (
+        <Alert
+          variant="warning"
+          // TODO: Use t('addressUpdateFailedHeading') once key is in CSV
+          heading="There was an issue updating your mailing address."
+        >
+          {/* TODO: Use t('addressUpdateFailedBody') once key is in CSV */}
+          Please try again later or contact the Summer EBT Help Desk for assistance.
+        </Alert>
+      )}
+
+      {alerts.contactUpdateFailed && (
+        <Alert
+          variant="warning"
+          // TODO: Use t('contactUpdateFailedHeading') once key is in CSV
+          heading="There was an issue updating your contact preferences."
+        >
+          {/* TODO: Use t('contactUpdateFailedBody') once key is in CSV */}
+          Please try again later.
+        </Alert>
+      )}
+
+      {alerts.addressVerification && (
+        <Alert
+          variant="warning"
+          // TODO: Use t('addressVerificationHeading') once key is in CSV
+          heading="Is your address correct?"
+        >
+          {/* TODO: Use t('addressVerificationBody') once key is in CSV */}
+          Please verify your mailing address is up to date so you can receive your Summer EBT cards.
+        </Alert>
+      )}
     </div>
   )
 }