update 404 page to use ds classes

department-of-veterans-affairs · Jan 11, 2024 · 3c81ea6 · 3c81ea6
1 parent ef62bf5
commit 3c81ea6
Showing 1 changed file with 24 additions and 16 deletions.
diff --git 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>