From 3c81ea6005c4bd451a71dd253693c48500e461ce Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tanner.heffner@agile6.com>
Date: Thu, 11 Jan 2024 12:22:31 -0800
Subject: [PATCH 1/3] update 404 page to use ds classes

---
 src/pages/404.tsx | 40 ++++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index de0163483..a854212a6 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -15,31 +15,39 @@ const Error404Page = ({ headerFooterData }) => {
         <title>VA.gov | Veterans Affairs</title>
       </Head>
       <Wrapper bannerData={[]} headerFooterData={headerFooterData}>
-        <div className="main maintenance-page" role="main">
-          <div className="primary">
+        <div className="main maintenance-page vads-u-padding-y--8" role="main">
+          <div className="primary vads-u-margin-bottom--6">
             <div className="row">
-              <div className="text-center usa-content">
+              <div className="vads-u-text-align--center usa-content vads-u-margin-x--auto">
                 <h3>Sorry — we can’t find that page</h3>
                 <p>Try the search box or one of the common questions below.</p>
-                <div className="feature va-flex va-flex--ctr">
+                <div className="feature">
                   <form
                     acceptCharset="UTF-8"
                     action="/search/"
                     id="search_form"
-                    className="full-width"
+                    className="vads-u-width--full vads-u-display--flex vads-u-align-items--flex-start vads-u-justify-content--center"
                     method="get"
                   >
-                    <div className="va-flex va-flex--top va-flex--jctr">
-                      <label htmlFor="mobile-query">Search:</label>
-                      <input
-                        autoComplete="off"
-                        className="usagov-search-autocomplete full-width"
-                        id="mobile-query"
-                        name="query"
-                        type="text"
-                      />
-                      <input type="submit" value="Search" />
-                    </div>
+                    <label
+                      htmlFor="mobile-query"
+                      className="vads-u-visibility--screen-reader"
+                    >
+                      Search:
+                    </label>
+                    <input
+                      autoComplete="off"
+                      className="usagov-search-autocomplete vads-u-max-width--100 vads-u-margin--0"
+                      id="mobile-query"
+                      name="query"
+                      type="text"
+                    />
+                    <input
+                      type="submit"
+                      value="Search"
+                      className="vads-u-margin--0"
+                      style={{ borderRadius: '0 3px 3px 0' }}
+                    />
                   </form>
                 </div>
               </div>

From fd3eca64af5ced1bdb22742289d7c4275c537a23 Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tanner.heffner@agile6.com>
Date: Thu, 11 Jan 2024 14:34:50 -0800
Subject: [PATCH 2/3] update 404-related templates to DS styles

---
 src/pages/404.tsx                             | 55 ++++++++++---------
 .../common/commonAndPopular/index.tsx         | 28 ++++++----
 2 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index a854212a6..b0e8e464b 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -15,47 +15,52 @@ const Error404Page = ({ headerFooterData }) => {
         <title>VA.gov | Veterans Affairs</title>
       </Head>
       <Wrapper bannerData={[]} headerFooterData={headerFooterData}>
-        <div className="main maintenance-page vads-u-padding-y--8" role="main">
-          <div className="primary vads-u-margin-bottom--6">
+        <div
+          className="main maintenance-page vads-u-padding-top--4"
+          role="main"
+        >
+          <div className="primary">
             <div className="row">
-              <div className="vads-u-text-align--center usa-content vads-u-margin-x--auto">
+              <div className="usa-content vads-u-text-align--center vads-u-margin-x--auto">
                 <h3>Sorry — we can’t find that page</h3>
                 <p>Try the search box or one of the common questions below.</p>
-                <div className="feature">
+                <div className="feature vads-u-display--flex vads-u-align-items--center">
                   <form
                     acceptCharset="UTF-8"
                     action="/search/"
                     id="search_form"
-                    className="vads-u-width--full vads-u-display--flex vads-u-align-items--flex-start vads-u-justify-content--center"
+                    className="full-width search-form-bottom-margin"
                     method="get"
                   >
-                    <label
-                      htmlFor="mobile-query"
-                      className="vads-u-visibility--screen-reader"
+                    <div
+                      className="vads-u-display--flex vads-u-align-items--flex-start vads-u-justify-content--center"
+                      style={{ height: '5.7rem' }}
                     >
-                      Search:
-                    </label>
-                    <input
-                      autoComplete="off"
-                      className="usagov-search-autocomplete vads-u-max-width--100 vads-u-margin--0"
-                      id="mobile-query"
-                      name="query"
-                      type="text"
-                    />
-                    <input
-                      type="submit"
-                      value="Search"
-                      className="vads-u-margin--0"
-                      style={{ borderRadius: '0 3px 3px 0' }}
-                    />
+                      <label htmlFor="mobile-query" className="sr-only">
+                        Search:
+                      </label>
+                      <input
+                        autoComplete="off"
+                        className="usagov-search-autocomplete full-width vads-u-height--full vads-u-margin--0 vads-u-max-width--100"
+                        id="mobile-query"
+                        name="query"
+                        type="text"
+                      />
+                      <input
+                        type="submit"
+                        value="Search"
+                        style={{ borderRadius: '0 3px 3px 0' }}
+                        className="vads-u-height--full vads-u-margin--0"
+                      />
+                    </div>
                   </form>
                 </div>
               </div>
             </div>
           </div>
-
-          <CommonAndPopular />
         </div>
+
+        <CommonAndPopular />
       </Wrapper>
     </>
   )
diff --git a/src/templates/common/commonAndPopular/index.tsx b/src/templates/common/commonAndPopular/index.tsx
index 9696f788c..f4b2f37bc 100644
--- a/src/templates/common/commonAndPopular/index.tsx
+++ b/src/templates/common/commonAndPopular/index.tsx
@@ -2,21 +2,23 @@ import Link from 'next/link'
 
 export function CommonAndPopular() {
   return (
-    <div className="row va-quicklinks va-quicklinks--commpop">
+    <div className="row vads-u-padding-bottom--9">
       <div className="small-12 usa-width-one-half medium-6 columns">
-        <h3 className="va-h-ruled">Common Questions</h3>
-        <ul className="va-list--plain">
-          <li>
+        <h3 className="va-h-ruled vads-u-margin-bottom--2 vads-u-padding-bottom--1 vads-u-font-size--xl">
+          Common Questions
+        </h3>
+        <ul className="va-list--plain vads-u-margin-top--1">
+          <li className="vads-u-padding-y--1">
             <Link href="/health-care/how-to-apply/">
               How do I apply for health care?
             </Link>
           </li>
-          <li>
+          <li className="vads-u-padding-y--1">
             <Link href="/disability/how-to-file-claim/">
               How do I file for disability benefits?
             </Link>
           </li>
-          <li>
+          <li className="vads-u-padding-y--1">
             <Link href="/education/how-to-apply/">
               How do I apply for education benefits?
             </Link>
@@ -24,20 +26,22 @@ export function CommonAndPopular() {
         </ul>
       </div>
       <div className="small-12 usa-width-one-half medium-6 columns">
-        <h3 className="va-h-ruled">Popular on VA.gov</h3>
-        <ul className="va-list--plain">
-          <li>
+        <h3 className="va-h-ruled vads-u-margin-bottom--2 vads-u-padding-bottom--1 vads-u-font-size--xl">
+          Popular on VA.gov
+        </h3>
+        <ul className="va-list--plain vads-u-margin-top--1">
+          <li className="vads-u-padding-y--1">
             <Link href="/find-locations/">Find nearby VA locations</Link>
           </li>
-          <li>
+          <li className="vads-u-padding-y--1">
             <Link href="/education/gi-bill-comparison-tool">
               View education benefits available by school
             </Link>
           </li>
-          <li>
+          <li className="vads-u-padding-y--1">
             <a
-              href="https://www.veteranscrisisline.net/"
               target="_blank"
+              href="https://www.veteranscrisisline.net/"
               rel="noopener noreferrer"
               className="external no-external-icon"
             >

From 280e61047be80466863e1bce0a482467ebbfed74 Mon Sep 17 00:00:00 2001
From: Tanner Heffner <tanner.heffner@agile6.com>
Date: Thu, 11 Jan 2024 16:54:48 -0800
Subject: [PATCH 3/3] update playwright test for 404

---
 playwright/tests/404page.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright/tests/404page.spec.js b/playwright/tests/404page.spec.js
index 4c37a1ea8..46a15d343 100644
--- a/playwright/tests/404page.spec.js
+++ b/playwright/tests/404page.spec.js
@@ -15,7 +15,7 @@ test.describe('404 Error Page', () => {
 
     await expect(page.locator('form#search_form')).toBeVisible()
 
-    await expect(page.locator('.va-quicklinks--commpop')).toBeVisible()
+    await expect(page.locator('h3 >> nth=1')).toHaveText('Common Questions')
   })
 
   test('Should render without a11y accessibility errors', async ({