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.