Skip to content

Commit

Permalink
styling changes from amanda
Browse files Browse the repository at this point in the history
  • Loading branch information
@haworku
haworku committed Oct 24, 2023
1 parent 964bf08 commit bb147fc
Show file tree
Hide file tree
Showing 9 changed files with 115 additions and 188 deletions.
63 changes: 2 additions & 61 deletions services/app-web/src/components/SectionHeader/SectionHeader.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
Expand Down
12 changes: 6 additions & 6 deletions services/app-web/src/components/SectionHeader/SectionHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 (
<div
className={`${styles.summarySectionHeader} ${
!hideBorder ? styles.summarySectionHeaderBorder : ''
}`}
id={sectionId}
>
<div className={classes} id={sectionId}>
<h2 id={headerId}>{header}</h2>
<div>
{navigateTo && (
Expand Down
17 changes: 7 additions & 10 deletions ...src/components/SubmissionSummarySection/ContactsSummarySection/ContactsSummarySection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,11 @@ export const ContactsSummarySection = ({

return (
<section id="stateContacts" className={styles.summarySection}>
<dl>
<SectionHeader
header="State contacts"
navigateTo={navigateTo}
/>
<SectionHeader header="State contacts" navigateTo={navigateTo} />

<GridContainer>
<Grid row>
<GridContainer>
<Grid row>
<dl>
{submission.stateContacts.length > 0 ? (
submission.stateContacts.map(
(stateContact, index) => (
Expand All @@ -70,9 +67,9 @@ export const ContactsSummarySection = ({
children={undefined}
/>
)}
</Grid>
</GridContainer>
</dl>
</dl>
</Grid>
</GridContainer>

{submission.submissionType === 'CONTRACT_AND_RATES' && (
<>
Expand Down
116 changes: 58 additions & 58 deletions ...mponents/SubmissionSummarySection/RateDetailsSummarySection/RateDetailsSummarySection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,23 +260,23 @@ export const RateDetailsSummarySection = ({

return (
<section id="rateDetails" className={styles.summarySection}>
<dl>
<SectionHeader header="Rate details" navigateTo={navigateTo}>
{isSubmitted &&
!isPreviousSubmission &&
renderDownloadButton(zippedFilesURL)}
</SectionHeader>
{submission.rateInfos.length > 0 ? (
submission.rateInfos.map((rateInfo) => {
return (
// When we complete rates refactor we can remove workaround for the react key
<React.Fragment key={rateInfo.id || uuidv4()}>
<h3
aria-label={`Rate ID: ${rateInfo.rateCertificationName}`}
className={styles.rateName}
>
{rateInfo.rateCertificationName}
</h3>
<SectionHeader header="Rate details" navigateTo={navigateTo}>
{isSubmitted &&
!isPreviousSubmission &&
renderDownloadButton(zippedFilesURL)}
</SectionHeader>
{submission.rateInfos.length > 0 ? (
submission.rateInfos.map((rateInfo) => {
return (
// When we complete rates refactor we can remove workaround for the react key
<React.Fragment key={rateInfo.id || uuidv4()}>
<h3
aria-label={`Rate ID: ${rateInfo.rateCertificationName}`}
className={styles.rateName}
>
{rateInfo.rateCertificationName}
</h3>
<dl>
<DoubleColumnGrid>
{ratePrograms && (
<DataDetail
Expand Down Expand Up @@ -366,47 +366,47 @@ export const RateDetailsSummarySection = ({
children={rateCapitationType(rateInfo)}
/>
</DoubleColumnGrid>
{!loading ? (
<UploadedDocumentsTable
documents={rateInfo.rateDocuments}
packagesWithSharedRateCerts={refreshPackagesWithSharedRateCert(
rateInfo
)}
documentDateLookupTable={
documentDateLookupTable
}
multipleDocumentsAllowed={false}
caption="Rate certification"
documentCategory="Rate certification"
isEditing={isEditing}
isSubmitted={isSubmitted}
/>
) : (
<span className="srOnly">'LOADING...'</span>
)}
{supportingDocsByRate && !loading ? (
<UploadedDocumentsTable
documents={rateInfo.supportingDocuments}
packagesWithSharedRateCerts={refreshPackagesWithSharedRateCert(
rateInfo
)}
documentDateLookupTable={
documentDateLookupTable
}
caption="Rate supporting documents"
isSupportingDocuments
documentCategory="Rate-supporting"
/>
) : (
<span className="srOnly">'LOADING...'</span>
)}
</React.Fragment>
)
})
) : (
<DataDetailMissingField />
)}
</dl>
</dl>
{!loading ? (
<UploadedDocumentsTable
documents={rateInfo.rateDocuments}
packagesWithSharedRateCerts={refreshPackagesWithSharedRateCert(
rateInfo
)}
documentDateLookupTable={
documentDateLookupTable
}
multipleDocumentsAllowed={false}
caption="Rate certification"
documentCategory="Rate certification"
isEditing={isEditing}
isSubmitted={isSubmitted}
/>
) : (
<span className="srOnly">'LOADING...'</span>
)}
{supportingDocsByRate && !loading ? (
<UploadedDocumentsTable
documents={rateInfo.supportingDocuments}
packagesWithSharedRateCerts={refreshPackagesWithSharedRateCert(
rateInfo
)}
documentDateLookupTable={
documentDateLookupTable
}
caption="Rate supporting documents"
isSupportingDocuments
documentCategory="Rate-supporting"
/>
) : (
<span className="srOnly">'LOADING...'</span>
)}
</React.Fragment>
)
})
) : (
<DataDetailMissingField />
)}
{
// START - This whole block gets deleted when we remove the feature flag.
!supportingDocsByRate && (
Expand Down
22 changes: 3 additions & 19 deletions ...ices/app-web/src/components/SubmissionSummarySection/SubmissionSummarySection.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
font-size: size('body', 'lg');
}
}

ul {
list-style-type: none;
margin: 0;
Expand All @@ -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 {
Expand Down
66 changes: 34 additions & 32 deletions services/app-web/src/pages/CMSDashboard/CMSDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,41 +24,43 @@ const CMSDashboard = (): React.ReactElement => {
return (
<div data-testid="cms-dashboard-page" className={styles.wrapper}>
<GridContainer className={styles.container}>
<div className={styles.panelHeader}>
<h2>
Submissions
{showRateReviews && <span> and rate reviews</span>}
</h2>
</div>
<section className={styles.panel}>
<div className={styles.panelHeader}>
<h2>
Submissions
{showRateReviews && <span> and rate reviews</span>}
</h2>
</div>

{showRateReviews ? (
<Tabs
defaultActiveTab={
loadOnRateReviews
? TAB_NAMES.RATES
: TAB_NAMES.SUBMISSIONS
}
className={styles.tabs}
>
<TabPanel
id="submissions"
nestedRoute={RoutesRecord.DASHBOARD_SUBMISSIONS}
tabName={TAB_NAMES.SUBMISSIONS}
{showRateReviews ? (
<Tabs
defaultActiveTab={
loadOnRateReviews
? TAB_NAMES.RATES
: TAB_NAMES.SUBMISSIONS
}
className={styles.tabs}
>
<Outlet />
</TabPanel>
<TabPanel
id="submissions"
nestedRoute={RoutesRecord.DASHBOARD_SUBMISSIONS}
tabName={TAB_NAMES.SUBMISSIONS}
>
<Outlet />
</TabPanel>

<TabPanel
id="rate-reviews"
nestedRoute={RoutesRecord.DASHBOARD_RATES}
tabName={TAB_NAMES.RATES}
>
<Outlet />
</TabPanel>
</Tabs>
) : (
<Outlet />
)}
<TabPanel
id="rate-reviews"
nestedRoute={RoutesRecord.DASHBOARD_RATES}
tabName={TAB_NAMES.RATES}
>
<Outlet />
</TabPanel>
</Tabs>
) : (
<Outlet />
)}
</section>
</GridContainer>
</div>
)
Expand Down
Loading

0 comments on commit bb147fc

Please sign in to comment.