From c7e15bd9c9bfefb765e5711cc65985a68f4c3072 Mon Sep 17 00:00:00 2001 From: Johnny Bouder Date: Wed, 31 Jul 2024 12:27:52 -0400 Subject: [PATCH] Update for nsf branding. --- public/img/logo--white.svg | 1 + src/components/footer/footer.tsx | 157 +++++++++++++----------- src/providers/uswds/uswds-settings.scss | 2 +- src/styles.scss | 35 ++++++ 4 files changed, 124 insertions(+), 71 deletions(-) create mode 100644 public/img/logo--white.svg diff --git a/public/img/logo--white.svg b/public/img/logo--white.svg new file mode 100644 index 0000000..eba084e --- /dev/null +++ b/public/img/logo--white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx index 172dbe8..855c52e 100644 --- a/src/components/footer/footer.tsx +++ b/src/components/footer/footer.tsx @@ -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): void => { @@ -24,72 +24,6 @@ export const Footer = (): React.ReactElement => { Return to top -
- -
-
@@ -162,16 +96,16 @@ export const Footer = (): React.ReactElement => {

- <Agency Contact Center> + Contact Information

@@ -180,6 +114,89 @@ export const Footer = (): React.ReactElement => {
+
+ +
); }; diff --git a/src/providers/uswds/uswds-settings.scss b/src/providers/uswds/uswds-settings.scss index 191f45d..bc453a6 100644 --- a/src/providers/uswds/uswds-settings.scss +++ b/src/providers/uswds/uswds-settings.scss @@ -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, diff --git a/src/styles.scss b/src/styles.scss index 0d9e5ca..90bb7d0 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -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 {