diff --git a/services/app-web/src/components/SectionHeader/SectionHeader.module.scss b/services/app-web/src/components/SectionHeader/SectionHeader.module.scss index ae49b82e93..5f2e119edb 100644 --- a/services/app-web/src/components/SectionHeader/SectionHeader.module.scss +++ b/services/app-web/src/components/SectionHeader/SectionHeader.module.scss @@ -5,55 +5,13 @@ max-width: 50rem; } -.summarySection { - margin: units(2) auto; - background: $cms-color-white; - padding: units(2) units(4); - border: 1px solid $theme-color-base-lighter; - line-height: units(3); - @include u-radius('md'); - - h2 { - margin: 0; - @include u-text('normal'); - } - &:first-of-type { - h2 { - @include u-text('bold'); - font-size: size('body', 'lg'); - } - } - - ul { - list-style-type: none; - margin: 0; - padding: 0; - - li { - padding: units(1) 0; - } - } - - // align state contacts - dl div[class^='grid-container'] { - padding: 0; - - div { - padding-bottom: units(2); - } - - // dont bottom pad last two grid items - div:nth-last-child(-n + 2) { - padding-bottom: 0; - } - } -} .summarySectionHeader { display: flex; justify-content: space-between; align-items: center; - padding-bottom: units(2); + padding-bottom: units(1); + min-height: 3rem; } .summarySectionHeaderBorder { @@ -70,25 +28,8 @@ border-top: 1px solid $theme-color-base-lighter; } -.contactInfo p { - margin: units(1) 0; -} - -.documentDesc { - margin: 0; -} - -.submitButton { - background: $theme-color-success; - &:hover { - background-color: #2a7a3b !important; - } -} @media print { - header, - footer, - .pageActions, .summarySectionHeader a { display: none; } diff --git a/services/app-web/src/components/SectionHeader/SectionHeader.tsx b/services/app-web/src/components/SectionHeader/SectionHeader.tsx index dfe9a47edd..d77533ac53 100644 --- a/services/app-web/src/components/SectionHeader/SectionHeader.tsx +++ b/services/app-web/src/components/SectionHeader/SectionHeader.tsx @@ -1,6 +1,7 @@ import { Link } from '@trussworks/react-uswds' import { NavLink } from 'react-router-dom' import styles from './SectionHeader.module.scss' +import classNames from 'classnames' export type SectionHeaderProps = { header: string @@ -19,13 +20,12 @@ export const SectionHeader = ({ headerId, hideBorder, }: SectionHeaderProps & JSX.IntrinsicElements['div']): React.ReactElement => { + const classes = classNames({ + [styles.summarySectionHeader]: true, + [styles.summarySectionHeaderBorder]: !hideBorder, + }) return ( -