notifications changes

src/components/Notification/Notification.js

@@ -90,7 +90,8 @@ export default function Notification({ variant, ...props }) {
       <div className={classes.messageContainer}>
         <Typography
           className={classnames({
-            [classes.containedTypography]: variant === "contained"
+            [classes.containedTypography]: variant === "contained",
+            [classes.roundedTypography]: variant === "rounded"
           })}
           variant={props.typographyVariant}
           size={variant !== "contained" && !props.typographyVariant && "md"}

src/components/Notification/styles.js

@@ -1,17 +1,17 @@
 import { makeStyles } from "@material-ui/styles";
 
-export default makeStyles(theme => ({
+export default makeStyles((theme) => ({
   notificationContainer: {
     display: "flex",
-    alignItems: "center",
+    alignItems: "center"
   },
   notificationContained: {
     borderRadius: 45,
     height: 45,
-    boxShadow: theme.customShadows.widgetDark,
+    boxShadow: theme.customShadows.widgetDark
   },
   notificationContainedShadowless: {
-    boxShadow: "none",
+    boxShadow: "none"
   },
   notificationIconContainer: {
     minWidth: 45,
@@ -20,28 +20,31 @@ export default makeStyles(theme => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: 24,
+    fontSize: 24
   },
   notificationIconContainerContained: {
     fontSize: 18,
-    color: "#FFFFFF80",
+    color: "#FFFFFF80"
   },
   notificationIconContainerRounded: {
-    marginRight: theme.spacing(2),
+    marginRight: theme.spacing(2)
   },
   containedTypography: {
-    color: "white",
+    color: "white"
+  },
+  roundedTypography: {
+    color: "#4A4A4A"
   },
   messageContainer: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    flexGrow: 1,
+    flexGrow: 1
   },
   extraButton: {
     color: "white",
     "&:hover, &:focus": {
-      background: "transparent",
-    },
-  },
+      background: "transparent"
+    }
+  }
 }));

src/context/ToastContext.js

@@ -33,7 +33,6 @@ export const toastDispatchActions = (dispatch) => ({
 });
 
 const ToastProvider = ({ children }) => {
-  // var [errorToastId, setErrorToastId] = useState(null);
   const [state, dispatch] = useReducer(toastReducer, toastInitialState);
   const dispatchActions = useMemo(() => toastDispatchActions(dispatch), [
     dispatch
@@ -56,8 +55,6 @@ const ToastProvider = ({ children }) => {
 
   const notify = useCallback(
     (message, type, extraButtonClick) => {
-      //     if (errorToastId && type === "error") return;
-
       let componentProps;
 
       switch (type) {
@@ -79,6 +76,22 @@ const ToastProvider = ({ children }) => {
             extraButtonClick
           };
           break;
+        case "defence":
+          componentProps = {
+            type: "defence",
+            message,
+            variant: "contained",
+            color: "info"
+          };
+          break;
+        case "disk":
+          componentProps = {
+            type: "disc",
+            message,
+            variant: "rounded",
+            color: "info"
+          };
+          break;
         default:
           componentProps = {
             type: "shipped",
@@ -92,12 +105,9 @@ const ToastProvider = ({ children }) => {
         type,
         position: positions[state.position],
         progressClassName: classes.progress,
-        //  onClose: type === "error" && (() => setErrorToastId(null)),
         className: classes.notification
       });
 
-      //     if (type === "error") setErrorToastId(toastId);
-
       return toastId;
     },
     [sendNotification, classes, state.position]
@@ -107,6 +117,9 @@ const ToastProvider = ({ children }) => {
     () => ({
       ...dispatchActions,
       info: (message) => notify(message, "info"),
+      error: (message) => notify(message, "error"),
+      success: (message) => notify(message, "success"),
+      defence: (message) => notify(message, "defence"),
       notify
     }),
     [dispatchActions, notify]

src/pages/notifications/Notifications.js

@@ -146,6 +146,22 @@ export default function NotificationsPage(props) {
                     >
                       Success Message
                     </Button>
+                    <Button
+                      variant="contained"
+                      color="info"
+                      onClick={() => notify("Defence message", "defence")}
+                      className={classnames(classes.notificationCallButton)}
+                    >
+                      Defence Message
+                    </Button>
+                    <Button
+                      variant="contained"
+                      color="info"
+                      onClick={() => notify("The disk is full", "disk")}
+                      className={classnames(classes.notificationCallButton)}
+                    >
+                      Full disk message
+                    </Button>
                   </div>
                 </Widget>
               </Grid>