diff --git a/frontend/src/app/commonComponents/Header.scss b/frontend/src/app/commonComponents/Header.scss index c3b33a0f0b..101ffa6525 100644 --- a/frontend/src/app/commonComponents/Header.scss +++ b/frontend/src/app/commonComponents/Header.scss @@ -1,5 +1,7 @@ +@use "../../scss/utilities"; + .usa-nav-container.prime-header { - max-width: 1200px; + max-width: utilities.$site-max-width; .prime-nav-link { font-size: 1.2rem; diff --git a/frontend/src/app/commonComponents/USAGovBanner.scss b/frontend/src/app/commonComponents/USAGovBanner.scss index 648f76df57..b49c8f5f72 100644 --- a/frontend/src/app/commonComponents/USAGovBanner.scss +++ b/frontend/src/app/commonComponents/USAGovBanner.scss @@ -1,3 +1,5 @@ +@use "../../scss/utilities"; + @media print { .usa-banner { display: none; @@ -6,6 +8,6 @@ .usa-banner { .usa-banner__inner { - max-width: 1200px; + max-width: utilities.$site-max-width; } } diff --git a/frontend/src/app/testQueue/TestQueue.scss b/frontend/src/app/testQueue/TestQueue.scss index 64b0cb348e..998ddaddd6 100644 --- a/frontend/src/app/testQueue/TestQueue.scss +++ b/frontend/src/app/testQueue/TestQueue.scss @@ -1,5 +1,7 @@ +@use "../../scss/utilities"; + .grid-container.queue-container-wide { - max-width: 1200px; + max-width: utilities.$site-max-width; } .prime-test-result { diff --git a/frontend/src/app/testResults/TestResultsList.scss b/frontend/src/app/testResults/TestResultsList.scss index 8feec8d569..f4f579cf90 100644 --- a/frontend/src/app/testResults/TestResultsList.scss +++ b/frontend/src/app/testResults/TestResultsList.scss @@ -1,4 +1,5 @@ -@import "../../scss/settings/app-settings.scss"; +@use "../../scss/utilities"; +@use "../../scss/settings/app-settings.scss"; .sr-test-results-list { .sticky-heading { @@ -144,5 +145,5 @@ } .grid-container.results-wide-container { - max-width: 1200px; + max-width: utilities.$site-max-width; } diff --git a/frontend/src/scss/PrimeStyles.scss b/frontend/src/scss/PrimeStyles.scss index b1804a10bb..8043d3835a 100644 --- a/frontend/src/scss/PrimeStyles.scss +++ b/frontend/src/scss/PrimeStyles.scss @@ -1,3 +1,5 @@ +@use "utilities"; + .prime-home { background-color: color("base-lightest"); padding-top: units(2); @@ -1178,6 +1180,6 @@ $results-dropdown-spacing: #{units(4)} - #{units(2)} - 22px - #{units(4)}; // he .usa-site-alert { .usa-alert--emergency { - max-width: 1200px; + max-width: utilities.$site-max-width; } } diff --git a/frontend/src/scss/_utilities.scss b/frontend/src/scss/_utilities.scss index b3c96f3f11..6ff8a0e9b5 100644 --- a/frontend/src/scss/_utilities.scss +++ b/frontend/src/scss/_utilities.scss @@ -27,3 +27,5 @@ .bg-error { background-color: color("error"); } + +$site-max-width: 1200px;