[BannerView] load + show existing banners at the top

services/frontend/src/components/App/index.tsx

@@ -10,6 +10,7 @@ import { useEffect } from 'react'
 import { initShibbolethPinger } from 'unfuck-spa-shibboleth-session'
 
 import { AccessDenied } from '@/components/AccessDenied'
+import { BannerView } from '@/components/Banner'
 import { Footer } from '@/components/Footer'
 import { LanguageProvider } from '@/components/LanguagePicker/useLanguage'
 import { NavigationBar } from '@/components/NavigationBar'
@@ -59,6 +60,7 @@ export const App = () => {
   return (
     <>
       <NavigationBar />
+      <BannerView />
       <Routes />
       <Footer />
     </>

services/frontend/src/components/Banner/Banner.tsx

@@ -0,0 +1,75 @@
+import Grid from '@mui/material/Grid2'
+import IconButton from '@mui/material/IconButton'
+import Paper from '@mui/material/Paper'
+import Stack from '@mui/material/Stack'
+import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
+import { theme, ClearIcon, EditIcon, DeleteIcon } from '@/theme'
+
+const getHexColor = (hue, lightness) => {
+  const h = theme.palette[hue]
+  if (!h) return theme.palette.common.white
+  const hex = h[lightness]
+  if (!hex) return theme.palette.common.white
+  return hex
+}
+
+const mockFun = (_: any) => {
+  return
+}
+
+export const Banner = ({ banner, clearBanner = mockFun, deleteBanner = mockFun, adminView = false }) => {
+  const { id, color, lightness, text } = banner
+
+  const acualColor = getHexColor(color, lightness)
+  const contrastColor = theme.palette.getContrastText(acualColor)
+  return (
+    <Paper
+      elevation={5}
+      sx={{
+        width: '100%',
+        textAlign: 'center',
+        mt: 0,
+        background: acualColor,
+        color: contrastColor,
+        padding: '0.3rem',
+        borderRadius: 0,
+        zIndex: 67,
+      }}
+      variant="elevation"
+    >
+      <Grid container spacing={2}>
+        <Grid size={1} />
+
+        <Grid size={10} sx={{ alignContent: 'center' }}>
+          <Typography fontSize="1.1rem" variant="h6">
+            {text}
+          </Typography>
+        </Grid>
+
+        <Grid size={1}>
+          {adminView ? (
+            <Stack direction="row">
+              <Tooltip arrow title="Modify">
+                <IconButton onClick={_ => clearBanner(id)}>
+                  <EditIcon htmlColor={contrastColor} />
+                </IconButton>
+              </Tooltip>
+              <Tooltip arrow title="End visibility period immediately">
+                <IconButton onClick={_ => deleteBanner(id)}>
+                  <DeleteIcon htmlColor={contrastColor} />
+                </IconButton>
+              </Tooltip>
+            </Stack>
+          ) : (
+            <Tooltip arrow title="Close and don't show again">
+              <IconButton onClick={_ => clearBanner(id)}>
+                <ClearIcon htmlColor={contrastColor} />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Grid>
+      </Grid>
+    </Paper>
+  )
+}

services/frontend/src/components/Banner/index.tsx

@@ -0,0 +1,24 @@
+import { useLocalStorage } from '@/hooks/localStorage'
+import { useGetActiveBannersQuery } from '@/redux/banners'
+import { Banner } from './Banner'
+
+export const BannerView = () => {
+  const [clearedBanners, setClearedBanners] = useLocalStorage<number[]>(`cleared-banners`, [])
+
+  const { data: activeBanners } = useGetActiveBannersQuery()
+  const clearBanner = (id: number) => {
+    setClearedBanners(clearedBanners.includes(id) ? clearedBanners : [id, ...clearedBanners])
+  }
+
+  const visibleBanners = activeBanners?.filter(item => !clearedBanners.includes(item.id))
+
+  if (!visibleBanners?.length) return null
+
+  return (
+    <>
+      {visibleBanners.map(banner => (
+        <Banner banner={banner} clearBanner={clearBanner} key={banner.id} />
+      ))}
+    </>
+  )
+}