feat: Add banner to the Urban dashboard (#258)

Author: sanzog03

urban-dashboard/src/components/banner/index.css

@@ -0,0 +1,28 @@
+.uswds-banner {
+  width: 100%;
+  background-color: #22229B;
+  padding: 10px 0;
+  z-index: 9999;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  flex-shrink: 0;
+}
+
+.uswds-banner-inner {
+  max-width: 1040px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.uswds-banner-flag {
+  height: 16px;
+  width: auto;
+  margin-right: 0.75rem;
+}
+
+.uswds-banner-text {
+  font-size: 0.875rem; /* 14px */
+  color: #ffffff;
+  margin: 0;
+}

urban-dashboard/src/components/banner/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.css';
+
+export function Banner({ text }) {
+  return (
+    <div className="uswds-banner">
+      <div className="uswds-banner-inner">
+        <p className="uswds-banner-text">{text}</p>
+      </div>
+    </div>
+  );
+}

urban-dashboard/src/components/dashboard/index.jsx

@@ -3,6 +3,9 @@ import Box from '@mui/material/Box';
 
 import { MapBoxViewer } from '../mapboxViewer';
 import { InfoSidebar } from '../infoSidebar';
+import { Banner } from '../banner';
+
+const BANNER_TEXT = "Due to the lapse in federal government funding, the U.S. Greenhouse Gas Center is not updating this website. We sincerely regret this inconvenience.";
 
 export function Dashboard({ dataset, urbanRegions }) {
   const [urbanRegion, setUrbanRegion] = useState("");
@@ -14,21 +17,25 @@ export function Dashboard({ dataset, urbanRegions }) {
 
   return (
     <Box
-      className="fullSize">
-      <InfoSidebar
-        urbanRegions={urbanRegions}
-        selection={urbanRegion}
-        setSelection={setUrbanRegion}
-        handleZoomOut={handleZoomOut}
-        dataset={dataset}
-      />
-      <MapBoxViewer
-        urbanRegions={urbanRegions}
-        urbanRegion={urbanRegion}
-        setSelection={setUrbanRegion}
-        zoomOut={zoomOut}
-        dataset={dataset}
-      />
+      className="fullSize"
+      sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Banner text={BANNER_TEXT} />
+      <Box sx={{ flex: 1, position: 'relative', minHeight: 0 }}>
+        <InfoSidebar
+          urbanRegions={urbanRegions}
+          selection={urbanRegion}
+          setSelection={setUrbanRegion}
+          handleZoomOut={handleZoomOut}
+          dataset={dataset}
+        />
+        <MapBoxViewer
+          urbanRegions={urbanRegions}
+          urbanRegion={urbanRegion}
+          setSelection={setUrbanRegion}
+          zoomOut={zoomOut}
+          dataset={dataset}
+        />
+      </Box>
     </Box>
   );
 }