[Banners] cleanup

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

@@ -1,3 +1,5 @@
+/* eslint-disable no-alert */
+
 import Grid from '@mui/material/Grid2'
 import IconButton from '@mui/material/IconButton'
 import Paper from '@mui/material/Paper'
@@ -6,12 +8,10 @@ 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 getHexColor = (hue: string, lightness: string): string => {
+  if (hue === 'white') return theme.palette.common.white
+  if (hue === 'black') return theme.palette.common.black
+  return theme.palette[hue][lightness]
 }
 
 const mockFun = (_: any) => {
@@ -56,7 +56,11 @@ export const Banner = ({ banner, clearBanner = mockFun, deleteBanner = mockFun,
                 </IconButton>
               </Tooltip>
               <Tooltip arrow title="End visibility period immediately">
-                <IconButton onClick={_ => deleteBanner(id)}>
+                <IconButton
+                  onClick={_ => {
+                    if (window.confirm('Delete banner?')) deleteBanner(id)
+                  }}
+                >
                   <DeleteIcon htmlColor={contrastColor} />
                 </IconButton>
               </Tooltip>

services/frontend/src/pages/Banners/EditForm.tsx

@@ -56,7 +56,7 @@ export const BannerEditForm = ({ initialValues, onSave }) => {
         />
       </Box>
 
-      <Section title="DKN-BE (Oodikone Banner Editor)">
+      <Section title={`${isNew ? 'Create' : 'Edit'} banner`}>
         <Stack spacing={2}>
           <TextField
             fullWidth
@@ -81,7 +81,7 @@ export const BannerEditForm = ({ initialValues, onSave }) => {
                   value={values.color}
                 >
                   <MenuItem value={'white'}>White</MenuItem>
-                  <MenuItem value={'dark'}>Black</MenuItem>
+                  <MenuItem value={'black'}>Black</MenuItem>
                   <MenuItem value={'info'}>Blue</MenuItem>
                   <MenuItem value={'success'}>Green</MenuItem>
                   <MenuItem value={'warning'}>Orange</MenuItem>
@@ -110,6 +110,7 @@ export const BannerEditForm = ({ initialValues, onSave }) => {
           <Grid2 container>
             <Grid2 size={6} sx={{ pr: 1 }}>
               <DateTimePicker
+                ampm={false}
                 format="L HH:mm"
                 label="Start date"
                 name="startDate"
@@ -122,6 +123,7 @@ export const BannerEditForm = ({ initialValues, onSave }) => {
             </Grid2>
             <Grid2 size={6} sx={{ pl: 1 }}>
               <DateTimePicker
+                ampm={false}
                 format="L HH:mm"
                 label="End date"
                 name="endDate"
@@ -134,7 +136,7 @@ export const BannerEditForm = ({ initialValues, onSave }) => {
             </Grid2>
           </Grid2>
           <Button onClick={() => onSave(values, false, isNew)} type="submit" variant="contained">
-            {isNew ? 'Create' : 'Save'}
+            {isNew ? 'Create' : 'Save changes'}
           </Button>
         </Stack>
       </Section>

services/frontend/src/theme/base.ts

@@ -26,8 +26,6 @@ const baseTheme = {
     text: { primary: grey[900], secondary: grey[600] },
     info: { main: blue[700], light: blue[500], dark: blue[900] },
 
-    dark: { main: grey[800], light: grey[700], dark: grey[900] },
-
     success: { main: green[600] },
     disabled: { main: grey[500] },