feat: add banner and styling

src/components/AppBar/AppBar.tsx

@@ -36,6 +36,9 @@ import styles from './style.module.scss'
 import { setUserRobotImage } from '../../store/userRobotImage/action'
 import { Container } from '../Container'
 import { ButtonIcon } from '../ButtonIcon'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faClose } from '@fortawesome/free-solid-svg-icons'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 const metadataController = MetadataController.getInstance()
 
@@ -118,9 +121,33 @@ export const AppBar = () => {
   }
   const isAuthenticated = authState?.loggedIn === true
 
+  const matches = useMediaQuery('(max-width:767px)')
+  const [isBannerVisible, setIsBannerVisible] = useState(true)
+  const handleBannerHide = () => {
+    setIsBannerVisible(false)
+  }
+
   return (
+    <>
+      {isAuthenticated && isBannerVisible && (
+        <div className={styles.banner}>
+          <Container>
+            <div className={styles.bannerInner}>
+              SIGit is currently Alpha software (available for internal
+              testing), use at your own risk!
+              <Button
+                aria-label={`close banner`}
+                variant="text"
+                onClick={handleBannerHide}
+              >
+                <FontAwesomeIcon icon={faClose} />
+              </Button>
+            </div>
+          </Container>
+        </div>
+      )}
       <AppBarMui
-      position="fixed"
+        position={matches ? 'sticky' : 'static'}
         className={styles.AppBar}
         sx={{
           boxShadow: 'none'
@@ -238,5 +265,6 @@ export const AppBar = () => {
           </Toolbar>
         </Container>
       </AppBarMui>
+    </>
   )
 }

src/components/AppBar/style.module.scss

@@ -34,3 +34,36 @@
     justify-content: flex-end;
   }
 }
+
+.banner {
+  color: #ffffff;
+  background-color: $primary-main;
+}
+
+.bannerInner {
+  display: flex;
+  gap: 10px;
+  padding-block: 10px;
+  z-index: 1;
+
+  width: 100%;
+
+  justify-content: space-between;
+  flex-direction: row;
+
+  button {
+    min-width: 44px;
+    color: inherit;
+  }
+
+  &:hover,
+  &.active,
+  &:focus-within {
+    background: $primary-main;
+    color: inherit;
+
+    button {
+      color: inherit;
+    }
+  }
+}