Fix maintenance banner width bug (#8342)

* Remove duplicate site-max-width sass variable * Remove unused style * Fix maintenance banner width
CDCgov · Dec 5, 2024 · 56975a0 · 56975a0
1 parent a6fa1a9
commit 56975a0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git a/frontend/src/app/commonComponents/Alert.tsx b/frontend/src/app/commonComponents/Alert.tsx
@@ -34,6 +34,7 @@ interface Props {
   children?: React.ReactNode;
   slim?: boolean;
   className?: string;
+  bodyClassName?: string;
 }
 const Alert = ({
   type,
@@ -43,6 +44,7 @@ const Alert = ({
   children,
   slim,
   className,
+  bodyClassName,
 }: Props) => {
   const classes = classnames(
     "usa-alert",
@@ -51,6 +53,8 @@ const Alert = ({
     className
   );
 
+  const bodyClasses = classnames("usa-alert__body", bodyClassName);
+
   // Decides element's role base on passed props
   const getIdentifiedRole = () => {
     if (role) {
@@ -73,7 +77,7 @@ const Alert = ({
       role={getIdentifiedRole()}
       aria-label={title ? `Alert: ${title}` : undefined}
     >
-      <div className="usa-alert__body">
+      <div className={bodyClasses}>
         {title && <div className="usa-alert__heading text-bold">{title}</div>}
         <div id={bodyId} className="usa-alert__text">
           {body || children}

diff --git a/frontend/src/app/commonComponents/MaintenanceBanner.scss b/frontend/src/app/commonComponents/MaintenanceBanner.scss
@@ -0,0 +1,9 @@
+@use "../../scss/settings";
+
+.maintenance-alert-background {
+  background-color: #9c3d10;
+}
+
+.maintenance-alert-body {
+  max-width: settings.$site-max-width !important;
+}
diff --git a/frontend/src/app/commonComponents/MaintenanceBanner.tsx b/frontend/src/app/commonComponents/MaintenanceBanner.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
 import Alert from "./Alert";
+import "./MaintenanceBanner.scss";
 
 interface MaintenanceMode {
   active: boolean;
@@ -33,8 +34,13 @@ export const MaintenanceBanner: React.FC = () => {
   return (
     <>
       {maintenanceMode.active ? (
-        <div className="usa-site-alert usa-site-alert--emergency usa-site-alert--no-heading border-top border-base-lighter">
-          <Alert type="emergency" role="alert">
+        <div className="maintenance-alert-background border-top border-base-lighter">
+          <Alert
+            type="emergency"
+            role="alert"
+            className={"margin-left-auto margin-right-auto"}
+            bodyClassName={"maintenance-alert-body"}
+          >
             <strong>{maintenanceMode.header || "SimpleReport alert:"}</strong>{" "}
             {maintenanceMode.message}
           </Alert>

diff --git a/frontend/src/scss/base/_prime-styles.scss b/frontend/src/scss/base/_prime-styles.scss
@@ -1148,12 +1148,6 @@ $results-dropdown-spacing: #{units(4)} - #{units(2)} - 22px - #{units(4)}; // he
   box-shadow: inset 0 0 0 2px #c9c9c9 !important;
 }
 
-.usa-site-alert {
-  .usa-alert--emergency {
-    max-width: $site-max-width;
-  }
-}
-
 abbr.usa-hint.usa-hint--required {
   text-decoration: none;
 }

diff --git a/frontend/src/scss/settings/_prime-variables.scss b/frontend/src/scss/settings/_prime-variables.scss
@@ -25,5 +25,3 @@ $theme-color-prime-gray-light: color("gray-10");
 $theme-color-prime-gray: color("gray-30");
 $theme-color-prime-gray-dark: color("gray-60");
 $theme-color-prime-gray-darkest: color("gray-70");
-
-$site-max-width: 1200px;