Merge pull request #386 from USEPA/feature/update-site-alert-styles

Feature/update site alert styles
USEPA · Feb 26, 2024 · 2753e79 · 2753e79
2 parents 15f39f7 + 5492f59
commit 2753e79
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/app/client/src/components/app.tsx b/app/client/src/components/app.tsx
@@ -58,16 +58,19 @@ function useSiteAlertBanner() {
 
     render(
       <div className="usa-alert">
-        <MarkdownContent
-          className="usa-alert__body"
-          children={content.siteAlert}
-          components={{
-            h1: (props) => <h3 className="usa-alert__heading">{props.children}</h3>, // prettier-ignore
-            h2: (props) => <h3 className="usa-alert__heading">{props.children}</h3>, // prettier-ignore
-            h3: (props) => <h3 className="usa-alert__heading">{props.children}</h3>, // prettier-ignore
-            p: (props) => <p className="usa-alert__text">{props.children}</p>,
-          }}
-        />
+        <div className="usa-alert__body">
+          <div className="usa-alert__content">
+            <MarkdownContent
+              className="usa-alert__text"
+              children={content.siteAlert}
+              components={{
+                h1: (props) => <h3 className="usa-alert__heading">{props.children}</h3>, // prettier-ignore
+                h2: (props) => <h3 className="usa-alert__heading">{props.children}</h3>, // prettier-ignore
+                h3: (props) => <h3 className="usa-alert__heading">{props.children}</h3>, // prettier-ignore
+              }}
+            />
+          </div>
+        </div>
       </div>,
       container,
     );

diff --git a/app/client/src/styles.css b/app/client/src/styles.css
@@ -8,11 +8,7 @@
 }
 
 .usa-site-alert .usa-alert {
-  max-width: 1400px;
-}
-
-.usa-site-alert .usa-alert__body {
-  display: block;
+  margin-top: 0;
 }
 
 .usa-checkbox__label,