From 139c21a2f112ea61761c144c378d502a2427b814 Mon Sep 17 00:00:00 2001
From: Mike Brown <mike@skylight.digital>
Date: Wed, 4 Dec 2024 14:22:55 -0500
Subject: [PATCH 1/3] Remove duplicate site-max-width sass variable

---
 frontend/src/scss/settings/_prime-variables.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/scss/settings/_prime-variables.scss b/frontend/src/scss/settings/_prime-variables.scss
index efe9c97b5e..f4f29428bb 100644
--- 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;

From 3a5297723a49b3921472115253b4c0e6c64e5ab8 Mon Sep 17 00:00:00 2001
From: Mike Brown <mike@skylight.digital>
Date: Wed, 4 Dec 2024 14:23:50 -0500
Subject: [PATCH 2/3] Remove unused style

---
 frontend/src/scss/base/_prime-styles.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/src/scss/base/_prime-styles.scss b/frontend/src/scss/base/_prime-styles.scss
index 9bf059c032..a1d6e6a2ee 100644
--- 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;
 }

From 2a900fbe1bf0a6b7bd6dbb5af13f523f4d196107 Mon Sep 17 00:00:00 2001
From: Mike Brown <mike@skylight.digital>
Date: Wed, 4 Dec 2024 14:29:01 -0500
Subject: [PATCH 3/3] Fix maintenance banner width

---
 frontend/src/app/commonComponents/Alert.tsx            |  6 +++++-
 .../src/app/commonComponents/MaintenanceBanner.scss    |  9 +++++++++
 .../src/app/commonComponents/MaintenanceBanner.tsx     | 10 ++++++++--
 3 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/commonComponents/MaintenanceBanner.scss

diff --git a/frontend/src/app/commonComponents/Alert.tsx b/frontend/src/app/commonComponents/Alert.tsx
index 2b437f7d30..b5a22e9025 100644
--- 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
new file mode 100644
index 0000000000..15613cbb57
--- /dev/null
+++ 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
index a7d5058a5b..28da58785d 100644
--- 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>