Fix error pages. Background color should match container. Use one hea…

…ding approach

services/app-web/src/components/Header/Header.module.scss

@@ -25,13 +25,13 @@
 .landingPageHeading {
     background-color: custom.$mcr-cmsblue-dark;
     color: custom.$mcr-foundation-white;
-    padding: uswds.units(2) 0;
+    padding: 1rem 0;
     & h1 {
         display: flex;
         flex-flow: column;
         text-align: center;
         font-weight: uswds.font-weight('light');
-        line-height: 1.5rem;
+        line-height: 1.5;
     }
 }
 
@@ -47,12 +47,11 @@
 
     .logoImg {
         border-right: 2px solid custom.$mcr-foundation-white;
-        padding-right: 2rem;
+        padding-right: 1rem;
     }
 
     span {
-        margin-left: 2rem;
-        font-size: size('body', 'lg');
+        margin-left: 1rem;
         color: custom.$mcr-foundation-white;
         height: 100%;
     }
@@ -68,7 +67,7 @@
         flex-wrap: wrap;
         align-items: center;
         font-size: 2rem;
-        line-height: 1.5rem;
+        line-height: 1.5;
         font-weight: bold;
         > span {
             padding: 0 1rem;

services/app-web/src/components/Header/PageHeadingRow/PageHeadingRow.tsx

@@ -3,7 +3,6 @@ import { GridContainer, Grid } from '@trussworks/react-uswds'
 
 import styles from '../Header.module.scss'
 
-import { PageHeading } from '../../../components/PageHeading'
 import { StateIcon, StateIconProps } from '../StateIcon/StateIcon'
 import {
     User,
@@ -24,7 +23,7 @@ const CMSUserRow = ({
         <div className={styles.dashboardHeading}>
             <GridContainer>
                 <Grid row className="flex-align-center">
-                    <PageHeading>
+                    <h1>
                         <span>CMS</span>
                         {heading && (
                             <span
@@ -34,7 +33,7 @@ const CMSUserRow = ({
                                 {heading}
                             </span>
                         )}
-                    </PageHeading>
+                    </h1>
                 </Grid>
             </GridContainer>
         </div>
@@ -58,7 +57,7 @@ const StateUserRow = ({
                         />
                         <span>{user.state.name}&nbsp;</span>
                     </div>
-                    <PageHeading>
+                    <h1>
                         {/* Have to have state name here but screen reader only to make page heading announce as expected */}
                         <span className="srOnly">{user.state.name}&nbsp;</span>
                         {heading && (
@@ -69,7 +68,7 @@ const StateUserRow = ({
                                 {heading}
                             </span>
                         )}
-                    </PageHeading>
+                    </h1>
                 </Grid>
             </GridContainer>
         </div>

services/app-web/src/components/index.ts

@@ -29,8 +29,6 @@ export { Header } from './Header'
 export { Loading } from './Loading'
 export { Logo } from './Logo'
 
-export { PageHeading } from './PageHeading'
-
 export { PoliteErrorMessage } from './PoliteErrorMessage'
 export { Spinner } from './Spinner'
 export { SectionHeader } from './SectionHeader'

services/app-web/src/constants/routes.ts

@@ -114,7 +114,6 @@ const PageHeadingsRecord: Partial<Record<RouteTWithUnknown, string>> = {
     DASHBOARD_SUBMISSIONS: 'Submissions dashboard',
     DASHBOARD_RATES: 'Rate reviews dashboard',
     SUBMISSIONS_NEW: 'New submission',
-    UNKNOWN_ROUTE: '404',
 }
 
 /*

services/app-web/src/pages/Errors/Error404Page.tsx

@@ -3,15 +3,17 @@ import React from 'react'
 import { NavLink } from 'react-router-dom'
 import styles from './Errors.module.scss'
 
-import { PageHeading } from '../../components/PageHeading'
 import { GridContainer } from '@trussworks/react-uswds'
 import { RoutesRecord } from '../../constants'
+import { usePage } from '../../contexts/PageContext'
 
 export const Error404 = (): React.ReactElement => {
+    const { updateHeading } = usePage()
+    updateHeading({ customHeading: 'Not found' })
     return (
         <section className={styles.errorsContainer}>
             <GridContainer>
-                <PageHeading>404 / Page not found</PageHeading>
+                <h1>404 / Page not found</h1>
                 <p>You might want to double-check your link and try again.</p>
                 <p>
                     <span>Or return to your </span>

services/app-web/src/pages/Errors/ErrorFailedRequestPage.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import styles from './Errors.module.scss'
 
-import { PageHeading } from '../../components/PageHeading'
 import { GridContainer } from '@trussworks/react-uswds'
 import { ApolloError } from '@apollo/client'
 import {
@@ -10,6 +9,7 @@ import {
 } from '../../gqlHelpers/apolloErrors'
 import { ErrorAlertFailedRequest, ErrorAlertSignIn } from '../../components'
 import { useAuth } from '../../contexts/AuthContext'
+import { usePage } from '../../contexts/PageContext'
 
 /*
     For use with an unknown ApolloError coming back from API requests
@@ -28,11 +28,12 @@ export const ErrorFailedRequestPage = ({
     const { loginStatus } = useAuth()
     const isAuthenticated = loginStatus === 'LOGGED_IN'
     handleApolloError(error, isAuthenticated)
-
+    const { updateHeading } = usePage()
+    updateHeading({ customHeading: 'Error' })
     return (
         <section data-testid={testID} className={styles.errorsContainer}>
             <GridContainer>
-                <PageHeading> Error </PageHeading>
+                <h1> Error</h1>
                 {isLikelyUserAuthError(error, isAuthenticated) ? (
                     <ErrorAlertSignIn />
                 ) : (

services/app-web/src/pages/Errors/ErrorForbiddenPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styles from './Errors.module.scss'
 import { GridContainer } from '@trussworks/react-uswds'
-import { PageHeading } from '../../components'
+import { usePage } from '../../contexts/PageContext'
 
 interface ForbiddenErrorPageProps {
     errorMsg?: string
@@ -10,10 +10,12 @@ interface ForbiddenErrorPageProps {
 export const ErrorForbiddenPage = ({
     errorMsg,
 }: ForbiddenErrorPageProps): React.ReactElement => {
+    const { updateHeading } = usePage()
+    updateHeading({ customHeading: 'Not allowed' })
     return (
         <section className={styles.errorsContainer}>
             <GridContainer>
-                <PageHeading>Forbidden</PageHeading>
+                <h1>Forbidden </h1>
                 {errorMsg ? (
                     <p>{errorMsg}</p>
                 ) : (

services/app-web/src/pages/Errors/ErrorInvalidSubmissionStatusPage.tsx

@@ -3,15 +3,17 @@ import React from 'react'
 import { NavLink } from 'react-router-dom'
 import styles from './Errors.module.scss'
 
-import { PageHeading } from '../../components/PageHeading'
 import { GridContainer } from '@trussworks/react-uswds'
 import { RoutesRecord } from '../../constants'
+import { usePage } from '../../contexts/PageContext'
 
 export const ErrorInvalidSubmissionStatus = (): React.ReactElement => {
+    const { updateHeading } = usePage()
+    updateHeading({ customHeading: 'Not allowed' })
     return (
         <section className={styles.errorsContainer}>
             <GridContainer>
-                <PageHeading>This submission was sent to CMS</PageHeading>
+                <h1>This submission was sent to CMS </h1>
                 <p>
                     <span>It cannot be edited. Return to your </span>
                     <NavLink to={RoutesRecord.DASHBOARD_SUBMISSIONS}>

services/app-web/src/pages/Errors/GenericErrorPage.tsx

@@ -2,16 +2,20 @@ import React from 'react'
 import { useStringConstants } from '../../hooks/useStringConstants'
 import styles from './Errors.module.scss'
 
-import { PageHeading } from '../../components/PageHeading'
 import { GridContainer } from '@trussworks/react-uswds'
+import { usePage } from '../../contexts/PageContext'
 
 export const GenericErrorPage = (): React.ReactElement => {
     const stringConstants = useStringConstants()
     const MAIL_TO_SUPPORT = stringConstants.MAIL_TO_SUPPORT
+
+    const { updateHeading } = usePage()
+    updateHeading({ customHeading: 'Error' })
+
     return (
         <section className={styles.errorsContainer}>
             <GridContainer>
-                <PageHeading>System error</PageHeading>
+                <h1>System error </h1>
                 <p>
                     <span>
                         We're having trouble loading this page. Please refresh

services/app-web/src/pages/SubmissionSideNav/SubmissionSideNav.module.scss

@@ -17,12 +17,11 @@
 
 .container {
     @include custom.default-page-container;
-    flex: 1 0 auto;
-    flex-direction: row;
+    padding: 0 !important; // override GridContainer to make sure our sidenav background alwaysmatches the content inside it
 }
 
-.sideNavContainer {
-    padding: 2rem 0;
+.verticalNavContainer {
+    padding: 2rem;
     width: 20rem;
     min-width: 18rem;
     max-width: custom.$mcr-container-max-width-fixed;

services/app-web/src/pages/SubmissionSideNav/SubmissionSideNav.tsx

@@ -169,7 +169,7 @@ export const SubmissionSideNav = () => {
         >
             <GridContainer className={styles.container}>
                 {showSidebar && (
-                    <div className={styles.sideNavContainer}>
+                    <div className={styles.verticalNavContainer}>
                         <div className={styles.backLinkContainer}>
                             <Link
                                 asCustom={NavLink}