Skip to content

Commit

Permalink
Fix error pages. Background color should match container. Use one hea…
Browse files Browse the repository at this point in the history
…ding approach
  • Loading branch information
haworku committed Mar 6, 2024
1 parent c917349 commit 61031da
Show file tree
Hide file tree
Showing 16 changed files with 35 additions and 103 deletions.
11 changes: 5 additions & 6 deletions services/app-web/src/components/Header/Header.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand All @@ -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%;
}
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -24,7 +23,7 @@ const CMSUserRow = ({
<div className={styles.dashboardHeading}>
<GridContainer>
<Grid row className="flex-align-center">
<PageHeading>
<h1>
<span>CMS</span>
{heading && (
<span
Expand All @@ -34,7 +33,7 @@ const CMSUserRow = ({
{heading}
</span>
)}
</PageHeading>
</h1>
</Grid>
</GridContainer>
</div>
Expand All @@ -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 && (
Expand All @@ -69,7 +68,7 @@ const StateUserRow = ({
{heading}
</span>
)}
</PageHeading>
</h1>
</Grid>
</GridContainer>
</div>
Expand Down

This file was deleted.

This file was deleted.

10 changes: 0 additions & 10 deletions services/app-web/src/components/PageHeading/PageHeading.test.tsx

This file was deleted.

41 changes: 0 additions & 41 deletions services/app-web/src/components/PageHeading/PageHeading.tsx

This file was deleted.

1 change: 0 additions & 1 deletion services/app-web/src/components/PageHeading/index.ts

This file was deleted.

2 changes: 0 additions & 2 deletions services/app-web/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
1 change: 0 additions & 1 deletion services/app-web/src/constants/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}

/*
Expand Down
6 changes: 4 additions & 2 deletions services/app-web/src/pages/Errors/Error404Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 4 additions & 3 deletions services/app-web/src/pages/Errors/ErrorFailedRequestPage.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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
Expand All @@ -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 />
) : (
Expand Down
6 changes: 4 additions & 2 deletions services/app-web/src/pages/Errors/ErrorForbiddenPage.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>
) : (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
8 changes: 6 additions & 2 deletions services/app-web/src/pages/Errors/GenericErrorPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down

0 comments on commit 61031da

Please sign in to comment.