diff --git a/frontend/src/pages/Notifications/Notifications.tsx b/frontend/src/pages/Notifications/Notifications.tsx index 9e041e03..26b09b99 100644 --- a/frontend/src/pages/Notifications/Notifications.tsx +++ b/frontend/src/pages/Notifications/Notifications.tsx @@ -19,7 +19,8 @@ import { CheckCircleOutline, Delete, Edit, - ErrorOutline + ErrorOutline, + InfoOutlined } from '@mui/icons-material'; import { DataGrid, @@ -65,7 +66,13 @@ const initialFormErrorValues = { }; const initialInfoDialogValues = { - icon: , + icon: ( + + ), title: 'Success', content: 'The notification was updated successfully.' }; @@ -165,6 +172,7 @@ export const Notifications: React.FC = () => { return ( { cellValues.row.startDatetime = formReadableDate( toEST(cellValues.row.startDatetime) @@ -195,6 +203,7 @@ export const Notifications: React.FC = () => { return ( { setDeleteDialogToggle(true); setRowToDelete(cellValues.row); @@ -262,7 +271,13 @@ export const Notifications: React.FC = () => { } catch (e: any) { console.error(e); setInfoDialogValues({ - icon: , + icon: ( + + ), title: 'Error', content: `${errorMessage} ${e.message}. Check the console log for more details.` }); @@ -628,7 +643,17 @@ export const Notifications: React.FC = () => { ) : ( - + + } + severity="info" + role="alert" + aria-label="an information alert banner to display an information alert icon and text" + > There is no active maintenance notification at this time. To make a notification active, add a new one or update an inactive one. @@ -641,7 +666,17 @@ export const Notifications: React.FC = () => { Inactive Notifications {inactiveNotifications.length === 0 ? ( - + + } + severity="info" + role="alert" + aria-label="an information alert banner to display an information alert icon and text" + > There are no inactive maintenance notifications at this time. The unused inactive notifications will be shown here.