Skip to content

Commit

Permalink
Merge pull request #2 from MetroStar/nsf-branding
Browse files Browse the repository at this point in the history 
Apply NSF Branding
  • Loading branch information
@jbouder
jbouder authored Jul 31, 2024
2 parents 8aaceb1 + c7e15bd commit d086084
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 71 deletions.
1 change: 1 addition & 0 deletions public/img/logo--white.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
157 changes: 87 additions & 70 deletions src/components/footer/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import instagramIcon from '~uswds/dist/img/usa-icons/instagram.svg';
import rssIcon from '~uswds/dist/img/usa-icons/rss_feed.svg';
import twitterIcon from '~uswds/dist/img/usa-icons/twitter.svg';
import youtubeIcon from '~uswds/dist/img/usa-icons/youtube.svg';
import logo from '/img/logo.svg';
import logo from '/img/logo--white.svg';

export const Footer = (): React.ReactElement => {
const scrollToTop = (event: React.MouseEvent<HTMLAnchorElement>): void => {
Expand All @@ -24,72 +24,6 @@ export const Footer = (): React.ReactElement => {
Return to top
</a>
</div>
<div className="usa-footer__primary-section">
<nav className="usa-footer__nav" aria-label="Footer navigation">
<ul className="grid-row grid-gap">
<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
&lt;Primary link&gt;
</a>
</li>

<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
&lt;Primary link&gt;
</a>
</li>

<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
&lt;Primary link&gt;
</a>
</li>

<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
&lt;Primary link&gt;
</a>
</li>

<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
&lt;Primary link&gt;
</a>
</li>
</ul>
</nav>
</div>

<div className="usa-footer__secondary-section">
<div className="grid-container">
<div className="grid-row grid-gap">
Expand Down Expand Up @@ -162,16 +96,16 @@ export const Footer = (): React.ReactElement => {
</div>
</div>
<h2 className="usa-footer__contact-heading">
&lt;Agency Contact Center&gt;
Contact Information
</h2>
<address className="usa-footer__address">
<div className="usa-footer__contact-info grid-row grid-gap">
<div className="grid-col-auto">
<a href="tel:1-800-555-5555"> &lt;(800) 555-GOVT&gt; </a>
<a href="tel:(703) 292-5111">(703) 292-5111</a>
</div>
<div className="grid-col-auto">
<a href="mailto:&lt;[email protected]&gt;">
&lt;[email protected]&gt;
Sign up for email updates
</a>
</div>
</div>
Expand All @@ -180,6 +114,89 @@ export const Footer = (): React.ReactElement => {
</div>
</div>
</div>
<div className="usa-footer__primary-section">
<nav className="usa-footer__nav" aria-label="Footer navigation">
<ul className="grid-row grid-gap">
<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
Vulnerability Disclosures
</a>
</li>
<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
Inspector General
</a>
</li>
<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
Privacy
</a>
</li>
<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
FOIA
</a>
</li>
<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
No FEAT Act
</a>
</li>
<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
USA.gov
</a>
</li>
<li
className="
mobile-lg:grid-col-4
desktop:grid-col-auto
usa-footer__primary-content
"
>
<a className="usa-footer__primary-link" href="/#">
Accessibility
</a>
</li>
</ul>
</nav>
</div>
</footer>
);
};
2 changes: 1 addition & 1 deletion src/providers/uswds/uswds-settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
// Primary colors
$theme-color-primary-lighter: #d9e8f6,
$theme-color-primary-light: #73b3e7,
$theme-color-primary: #005ea2,
$theme-color-primary: #0076d6,
$theme-color-primary-vivid: #0050d8,
$theme-color-primary-dark: #1a4480,
$theme-color-primary-darker: #162e51,
Expand Down
35 changes: 35 additions & 0 deletions src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,43 @@ body {
max-width: unset;
}

.usa-banner {
background-color: #162e51;
.usa-banner__header-text,
.usa-media-block__body {
color: #fff;
}
.usa-banner__button-text {
color: #73b3e7;
}
}

.usa-header {
.usa-nav__primary > .usa-nav__primary-item > a {
color: #0076d6;
}
}

.usa-footer {
overflow: visible;
.usa-footer__primary-section {
background-color: #162e51;
.usa-footer__primary-link {
color: #fff;
}
}
.usa-footer__secondary-section {
background-color: #005ea2;
.usa-footer__contact-heading {
color: #fff !important;
}
}
.usa-footer__secondary-section a {
color: #fff !important;
}
.usa-social-link__icon {
background-color: #fff;
}
}

.usa-section {
Expand Down

0 comments on commit d086084

Please sign in to comment.