align maintenance alerts (#6120)

* align maintenance alerts * pull max width into variable (#6121) --------- Co-authored-by: fzhao99 <bob@skylight.digital>
CDCgov · Jul 13, 2023 · 8cc88d7 · 8cc88d7
1 parent 45bab44
commit 8cc88d7
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,5 @@
+@use "utilities";
+
 .prime-home {
   background-color: color("base-lightest");
   padding-top: units(2);
@@ -1175,3 +1177,9 @@ $results-dropdown-spacing: #{units(4)} - #{units(2)} - 22px - #{units(4)}; // he
 .no-hover-state-when-disabled:hover {
   box-shadow: inset 0 0 0 2px #c9c9c9 !important;
 }
+
+.usa-site-alert {
+  .usa-alert--emergency {
+    max-width: utilities.$site-max-width;
+  }
+}
diff --git 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;