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 ( -
+

{header}

{navigateTo && ( diff --git a/services/app-web/src/components/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.tsx b/services/app-web/src/components/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.tsx index 9b3326466b..6a7b542fa7 100644 --- a/services/app-web/src/components/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.tsx +++ b/services/app-web/src/components/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.tsx @@ -38,14 +38,11 @@ export const ContactsSummarySection = ({ return (
-
- + - - + + +
{submission.stateContacts.length > 0 ? ( submission.stateContacts.map( (stateContact, index) => ( @@ -70,9 +67,9 @@ export const ContactsSummarySection = ({ children={undefined} /> )} - - -
+
+ + {submission.submissionType === 'CONTRACT_AND_RATES' && ( <> diff --git a/services/app-web/src/components/SubmissionSummarySection/RateDetailsSummarySection/RateDetailsSummarySection.tsx b/services/app-web/src/components/SubmissionSummarySection/RateDetailsSummarySection/RateDetailsSummarySection.tsx index 3318892e26..4a9ccbd4a4 100644 --- a/services/app-web/src/components/SubmissionSummarySection/RateDetailsSummarySection/RateDetailsSummarySection.tsx +++ b/services/app-web/src/components/SubmissionSummarySection/RateDetailsSummarySection/RateDetailsSummarySection.tsx @@ -260,23 +260,23 @@ export const RateDetailsSummarySection = ({ return (
-
- - {isSubmitted && - !isPreviousSubmission && - renderDownloadButton(zippedFilesURL)} - - {submission.rateInfos.length > 0 ? ( - submission.rateInfos.map((rateInfo) => { - return ( - // When we complete rates refactor we can remove workaround for the react key - -

- {rateInfo.rateCertificationName} -

+ + {isSubmitted && + !isPreviousSubmission && + renderDownloadButton(zippedFilesURL)} + + {submission.rateInfos.length > 0 ? ( + submission.rateInfos.map((rateInfo) => { + return ( + // When we complete rates refactor we can remove workaround for the react key + +

+ {rateInfo.rateCertificationName} +

+
{ratePrograms && ( - {!loading ? ( - - ) : ( - 'LOADING...' - )} - {supportingDocsByRate && !loading ? ( - - ) : ( - 'LOADING...' - )} - - ) - }) - ) : ( - - )} -
+
+ {!loading ? ( + + ) : ( + 'LOADING...' + )} + {supportingDocsByRate && !loading ? ( + + ) : ( + 'LOADING...' + )} + + ) + }) + ) : ( + + )} { // START - This whole block gets deleted when we remove the feature flag. !supportingDocsByRate && ( diff --git a/services/app-web/src/components/SubmissionSummarySection/SubmissionSummarySection.module.scss b/services/app-web/src/components/SubmissionSummarySection/SubmissionSummarySection.module.scss index 3e548d63ae..4a73a1616c 100644 --- a/services/app-web/src/components/SubmissionSummarySection/SubmissionSummarySection.module.scss +++ b/services/app-web/src/components/SubmissionSummarySection/SubmissionSummarySection.module.scss @@ -22,7 +22,6 @@ font-size: size('body', 'lg'); } } - ul { list-style-type: none; margin: 0; @@ -46,24 +45,9 @@ padding-bottom: 0; } } -} - -.summarySectionHeader { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: units(4); - padding-bottom: units(2); - border-bottom: 1px solid $theme-color-base-lighter; -} - -.summarySectionSubHeader { - display: flex; - justify-content: space-between; - align-items: center; - margin: units(4) 0; - padding-top: units(4); - border-top: 1px solid $theme-color-base-lighter; + table:last-of-type { + margin-bottom: units(2); + } } .contactInfo p { diff --git a/services/app-web/src/pages/CMSDashboard/CMSDashboard.tsx b/services/app-web/src/pages/CMSDashboard/CMSDashboard.tsx index 75703d08d7..6a4c89e302 100644 --- a/services/app-web/src/pages/CMSDashboard/CMSDashboard.tsx +++ b/services/app-web/src/pages/CMSDashboard/CMSDashboard.tsx @@ -24,41 +24,43 @@ const CMSDashboard = (): React.ReactElement => { return (
-
-

- Submissions - {showRateReviews && and rate reviews} -

-
+
+
+

+ Submissions + {showRateReviews && and rate reviews} +

+
- {showRateReviews ? ( - - - - + + + - - - - - ) : ( - - )} + + + + + ) : ( + + )} +
) diff --git a/services/app-web/src/pages/StateDashboard/StateDashboard.module.scss b/services/app-web/src/pages/StateDashboard/StateDashboard.module.scss index 58168d495e..c190fa8613 100644 --- a/services/app-web/src/pages/StateDashboard/StateDashboard.module.scss +++ b/services/app-web/src/pages/StateDashboard/StateDashboard.module.scss @@ -4,7 +4,6 @@ .wrapper { display: flex; flex: 1 0 auto; - padding-top: units(4); width: 100%; max-width: 100%; background-color: $cms-color-white; @@ -31,6 +30,7 @@ align-items: center; justify-content: space-between; font-weight: 700; + padding-bottom: units(2); } } diff --git a/services/app-web/src/pages/SubmissionSummary/RateSummary.tsx b/services/app-web/src/pages/SubmissionSummary/RateSummary.tsx index 0575117501..7f117d1e92 100644 --- a/services/app-web/src/pages/SubmissionSummary/RateSummary.tsx +++ b/services/app-web/src/pages/SubmissionSummary/RateSummary.tsx @@ -63,7 +63,7 @@ export const RateSummary = (): React.ReactElement => { data-testid="rate-summary" className={styles.container} > -
+