diff --git a/benefit-finder/src/App/_index.scss b/benefit-finder/src/App/_index.scss index 1a3c14592..250d089e1 100644 --- a/benefit-finder/src/App/_index.scss +++ b/benefit-finder/src/App/_index.scss @@ -1,7 +1,7 @@ @use '../shared/styles/colors/index.scss' as color; html { - background-color: color.$officer-navy; + background-color: color.$dark-blue; height: 100%; min-height: 100vh; } diff --git a/benefit-finder/src/Routes/LifeEventSection/_index.scss b/benefit-finder/src/Routes/LifeEventSection/_index.scss index af95097c2..443cbea28 100644 --- a/benefit-finder/src/Routes/LifeEventSection/_index.scss +++ b/benefit-finder/src/Routes/LifeEventSection/_index.scss @@ -5,7 +5,7 @@ @use '@styles/functions' as *; .bf-verify-selections-view { - background-color: color.$officer-navy; + background-color: color.$dark-blue; margin: 0; padding-bottom: rem(64px); @@ -69,7 +69,7 @@ } .bf-section-heading { - background-color: color.$officer-navy; + background-color: color.$dark-blue; color: color.$white; margin: 0; padding: rem(48px) 0 rem(30rem); diff --git a/benefit-finder/src/shared/components/Alert/_index.scss b/benefit-finder/src/shared/components/Alert/_index.scss index 19d5787fb..b0a4c83f2 100644 --- a/benefit-finder/src/shared/components/Alert/_index.scss +++ b/benefit-finder/src/shared/components/Alert/_index.scss @@ -11,6 +11,8 @@ h2.bf-usa-alert__heading { .bf-usa-alert { padding: rem(25px) 0; + background-color: color.$alert-background; + border-left-color: color.$alert-red; p { padding-left: rem(16px); diff --git a/benefit-finder/src/shared/components/Banner/_index.scss b/benefit-finder/src/shared/components/Banner/_index.scss index fcd7a858d..918428e98 100644 --- a/benefit-finder/src/shared/components/Banner/_index.scss +++ b/benefit-finder/src/shared/components/Banner/_index.scss @@ -9,7 +9,7 @@ h1.bf-banner-heading { .bf-banner { position: relative; - background-color: color.$officer-navy; + background-color: color.$dark-blue; padding: rem(45px) 0 rem(60px); margin: 0 auto rem(24px); color: color.$white; @@ -18,7 +18,7 @@ h1.bf-banner-heading { padding: 0 rem(20px); } - .bf-banner-heading { + .bf-banner-heading { margin: 0 0 rem(16px); } diff --git a/benefit-finder/src/shared/components/Button/_index.scss b/benefit-finder/src/shared/components/Button/_index.scss index 9e60db548..9ef5784a9 100644 --- a/benefit-finder/src/shared/components/Button/_index.scss +++ b/benefit-finder/src/shared/components/Button/_index.scss @@ -22,3 +22,7 @@ background-color: colors.$base-light-grey; } } + +.bf-usa-button--secondary { + border-color: colors.$dark-aqua; +} diff --git a/benefit-finder/src/shared/components/Card/_index.scss b/benefit-finder/src/shared/components/Card/_index.scss index 182ca497c..aeee92ec1 100644 --- a/benefit-finder/src/shared/components/Card/_index.scss +++ b/benefit-finder/src/shared/components/Card/_index.scss @@ -9,7 +9,7 @@ .bf-usa-card__container { border-radius: 0; border: rem(2px) solid color.$dark-teal; - color: color.$officer-navy; + color: color.$dark-blue; height: auto; margin: 0; } diff --git a/benefit-finder/src/shared/components/Fieldset/_index.scss b/benefit-finder/src/shared/components/Fieldset/_index.scss index 320fe8932..73972bcc1 100644 --- a/benefit-finder/src/shared/components/Fieldset/_index.scss +++ b/benefit-finder/src/shared/components/Fieldset/_index.scss @@ -29,7 +29,7 @@ // we check to see if any of the fieldsets in the wrapper have the error .bf-fieldset-wrapper:has(fieldset.usa-input--error) { - border-left: 0.25rem solid #c61f0c; + border-left: 0.25rem solid color.$alert-red; padding-left: rem(20px); } diff --git a/benefit-finder/src/shared/components/Form/_index.scss b/benefit-finder/src/shared/components/Form/_index.scss index 4854f7127..07a3b8939 100644 --- a/benefit-finder/src/shared/components/Form/_index.scss +++ b/benefit-finder/src/shared/components/Form/_index.scss @@ -7,7 +7,7 @@ form.bf-usa-form { height: 100%; min-height: 100vh; margin: 0; - background-color: color.$officer-navy; + background-color: color.$dark-blue; padding-bottom: rem(64px); .bf-grid-container.grid-container { diff --git a/benefit-finder/src/shared/components/StepIndicator/_index.scss b/benefit-finder/src/shared/components/StepIndicator/_index.scss index 7dbac3c10..3d43e8f2f 100644 --- a/benefit-finder/src/shared/components/StepIndicator/_index.scss +++ b/benefit-finder/src/shared/components/StepIndicator/_index.scss @@ -18,11 +18,11 @@ .bf-usa-step-indicator__segment--complete { .bf-usa-step-indicator__segment-label { - color: color.$officer-navy; + color: color.$dark-blue; } &::after { - background-color: color.$officer-navy; + background-color: color.$dark-blue; } } diff --git a/benefit-finder/src/shared/styles/colors/_index.scss b/benefit-finder/src/shared/styles/colors/_index.scss index 386be6c13..bfc8a2cab 100644 --- a/benefit-finder/src/shared/styles/colors/_index.scss +++ b/benefit-finder/src/shared/styles/colors/_index.scss @@ -1,4 +1,5 @@ -$officer-navy: #162e51; +$dark-blue: #112f4e; +$dark-aqua: #0081a1; $marine: #1a4480; $pop-blue: #005ea2; $sky: #d9e8f6; @@ -17,5 +18,6 @@ $electric-blue: #0050d8; $teal: #00bde3; $medium-teal: #ccecf2; $dark-teal: #0081a1; -$alert-red: #b50909; +$alert-red: #8b0a03; +$alert-background: #f4e3db; $green-check: #009831;