From a6941afdf1c966f780fe1bb21f3609aca0a05af2 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Tue, 6 Jul 2021 19:30:28 +0300
Subject: [PATCH] notification components formatting

---
 src/components/Notification/Notification.js   |  21 +-
 src/pages/notifications/Notifications.js      | 266 +++++++------
 .../notifications/NotificationsContainer.js   |  12 +-
 src/pages/notifications/NotificationsView.js  | 350 ++++++++++++++----
 src/pages/notifications/styles.js             |  34 +-
 5 files changed, 450 insertions(+), 233 deletions(-)

diff --git a/src/components/Notification/Notification.js b/src/components/Notification/Notification.js
index 8b39fe4..44dc904 100644
--- a/src/components/Notification/Notification.js
+++ b/src/components/Notification/Notification.js
@@ -13,7 +13,7 @@ import {
   Error as DefenceIcon,
   AccountBox as CustomerIcon,
   Done as ShippedIcon,
-  Publish as UploadIcon,
+  Publish as UploadIcon
 } from "@material-ui/icons";
 import { useTheme } from "@material-ui/styles";
 import classnames from "classnames";
@@ -38,7 +38,7 @@ const typesIcons = {
   defence: <DefenceIcon />,
   report: <ReportIcon />,
   upload: <UploadIcon />,
-  disc: <DiscIcon />,
+  disc: <DiscIcon />
 };
 
 export default function Notification({ variant, ...props }) {
@@ -48,33 +48,33 @@ export default function Notification({ variant, ...props }) {
   const icon = getIconByType(props.type);
   const iconWithStyles = React.cloneElement(icon, {
     classes: {
-      root: classes.notificationIcon,
+      root: classes.notificationIcon
     },
     style: {
       color:
         variant !== "contained" &&
         theme.palette[props.color] &&
-        theme.palette[props.color].main,
-    },
+        theme.palette[props.color].main
+    }
   });
 
   return (
     <div
       className={classnames(classes.notificationContainer, props.className, {
         [classes.notificationContained]: variant === "contained",
-        [classes.notificationContainedShadowless]: props.shadowless,
+        [classes.notificationContainedShadowless]: props.shadowless
       })}
       style={{
         backgroundColor:
           variant === "contained" &&
           theme.palette[props.color] &&
-          theme.palette[props.color].main,
+          theme.palette[props.color].main
       }}
     >
       <div
         className={classnames(classes.notificationIconContainer, {
           [classes.notificationIconContainerContained]: variant === "contained",
-          [classes.notificationIconContainerRounded]: variant === "rounded",
+          [classes.notificationIconContainerRounded]: variant === "rounded"
         })}
         style={{
           backgroundColor:
@@ -82,7 +82,7 @@ export default function Notification({ variant, ...props }) {
             theme.palette[props.color] &&
             tinycolor(theme.palette[props.color].main)
               .setAlpha(0.15)
-              .toRgbString(),
+              .toRgbString()
         }}
       >
         {iconWithStyles}
@@ -90,7 +90,7 @@ export default function Notification({ variant, ...props }) {
       <div className={classes.messageContainer}>
         <Typography
           className={classnames({
-            [classes.containedTypography]: variant === "contained",
+            [classes.containedTypography]: variant === "contained"
           })}
           variant={props.typographyVariant}
           size={variant !== "contained" && !props.typographyVariant && "md"}
@@ -111,7 +111,6 @@ export default function Notification({ variant, ...props }) {
   );
 }
 
-// ####################################################################
 function getIconByType(type = "offer") {
   return typesIcons[type];
 }
diff --git a/src/pages/notifications/Notifications.js b/src/pages/notifications/Notifications.js
index 54df53a..f455119 100644
--- a/src/pages/notifications/Notifications.js
+++ b/src/pages/notifications/Notifications.js
@@ -22,7 +22,7 @@ const positions = [
   toast.POSITION.TOP_RIGHT,
   toast.POSITION.BOTTOM_LEFT,
   toast.POSITION.BOTTOM_CENTER,
-  toast.POSITION.BOTTOM_RIGHT,
+  toast.POSITION.BOTTOM_RIGHT
 ];
 
 export default function NotificationsPage(props) {
@@ -45,109 +45,139 @@ export default function NotificationsPage(props) {
           progressClassName={classes.notificationProgress}
         />
         <Grid item xs={12}>
-        <Widget disableWidgetMenu>
-          <Grid container item xs={12}>
-          <Grid item xs={4}>
-          <Widget title="Layout Options" noWidgetShadow disableWidgetMenu noBodyPadding noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
-            <Typography>
-              There are few position options available for notifications. You
-              can click any of them to change notifications position:
-            </Typography>
-            <div className={classes.layoutContainer}>
-              <div className={classes.layoutButtonsRow}>
-                <button
-                  onClick={() => changeNotificationPosition(0)}
-                  className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 0,
-                  })}
-                />
-                <button
-                  onClick={() => changeNotificationPosition(1)}
-                  className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 1,
-                  })}
-                />
-                <button
-                  onClick={() => changeNotificationPosition(2)}
-                  className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 2,
-                  })}
-                />
-              </div>
-              <Typography className={classes.layoutText} size="md">
-                Click any position
-              </Typography>
-              <div className={classes.layoutButtonsRow}>
-                <button
-                  onClick={() => changeNotificationPosition(3)}
-                  className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 3,
-                  })}
-                />
-                <button
-                  onClick={() => changeNotificationPosition(4)}
-                  className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 4,
-                  })}
-                />
-                <button
-                  onClick={() => changeNotificationPosition(5)}
-                  className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 5,
-                  })}
-                />
-              </div>
-            </div>
-          </Widget>
-            </Grid>
-            <Grid item xs={4}>
-          <Widget title="Notifications Types" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
-            <Typography>
-              Different types of notifications for lost of use cases. Custom
-              classes are also supported.
-            </Typography>
-            <div className={classes.buttonsContainer}>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => handleNotificationCall("info")}
-                className={classnames(classes.notificationCallButton)}
-              >
-                Info Message
-              </Button>
-              <Button
-                variant="contained"
-                color="secondary"
-                onClick={() => handleNotificationCall("error")}
-                className={classnames(classes.notificationCallButton)}
-              >
-                Error + Retry Message
-              </Button>
-              <Button
-                variant="contained"
-                color="success"
-                onClick={() => handleNotificationCall("success")}
-                className={classnames(classes.notificationCallButton)}
-              >
-                Success Message
-              </Button>
-            </div>
-          </Widget>
-            </Grid>
-            <Grid item xs={4}>
-          <Widget title="Usage" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
-            <Typography>
-              Notifications are created with the help of{" "}
-              <a href="https://github.com/fkhadra/react-toastify">
-                react-toastify
-              </a>
-            </Typography>
-            <div className={classes.codeContainer}>
-              <SyntaxHighlighter
-                className={classes.codeComponent}
-                language="javascript"
-                style={docco}
-              >{`
+          <Widget disableWidgetMenu>
+            <Grid container item xs={12}>
+              <Grid item xs={4}>
+                <Widget
+                  title="Layout Options"
+                  noWidgetShadow
+                  disableWidgetMenu
+                  noBodyPadding
+                  noHeaderPadding
+                  style={{ paddingRight: 15 }}
+                  headerClass={classes.widgetHeader}
+                >
+                  <Typography>
+                    There are few position options available for notifications.
+                    You can click any of them to change notifications position:
+                  </Typography>
+                  <div className={classes.layoutContainer}>
+                    <div className={classes.layoutButtonsRow}>
+                      <button
+                        onClick={() => changeNotificationPosition(0)}
+                        className={classnames(classes.layoutButton, {
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 0
+                        })}
+                      />
+                      <button
+                        onClick={() => changeNotificationPosition(1)}
+                        className={classnames(classes.layoutButton, {
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 1
+                        })}
+                      />
+                      <button
+                        onClick={() => changeNotificationPosition(2)}
+                        className={classnames(classes.layoutButton, {
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 2
+                        })}
+                      />
+                    </div>
+                    <Typography className={classes.layoutText} size="md">
+                      Click any position
+                    </Typography>
+                    <div className={classes.layoutButtonsRow}>
+                      <button
+                        onClick={() => changeNotificationPosition(3)}
+                        className={classnames(classes.layoutButton, {
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 3
+                        })}
+                      />
+                      <button
+                        onClick={() => changeNotificationPosition(4)}
+                        className={classnames(classes.layoutButton, {
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 4
+                        })}
+                      />
+                      <button
+                        onClick={() => changeNotificationPosition(5)}
+                        className={classnames(classes.layoutButton, {
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 5
+                        })}
+                      />
+                    </div>
+                  </div>
+                </Widget>
+              </Grid>
+              <Grid item xs={4}>
+                <Widget
+                  title="Notifications Types"
+                  disableWidgetMenu
+                  noBodyPadding
+                  noWidgetShadow
+                  noHeaderPadding
+                  style={{ paddingRight: 15 }}
+                  headerClass={classes.widgetHeader}
+                >
+                  <Typography>
+                    Different types of notifications for lost of use cases.
+                    Custom classes are also supported.
+                  </Typography>
+                  <div className={classes.buttonsContainer}>
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      onClick={() => handleNotificationCall("info")}
+                      className={classnames(classes.notificationCallButton)}
+                    >
+                      Info Message
+                    </Button>
+                    <Button
+                      variant="contained"
+                      color="secondary"
+                      onClick={() => handleNotificationCall("error")}
+                      className={classnames(classes.notificationCallButton)}
+                    >
+                      Error + Retry Message
+                    </Button>
+                    <Button
+                      variant="contained"
+                      color="success"
+                      onClick={() => handleNotificationCall("success")}
+                      className={classnames(classes.notificationCallButton)}
+                    >
+                      Success Message
+                    </Button>
+                  </div>
+                </Widget>
+              </Grid>
+              <Grid item xs={4}>
+                <Widget
+                  title="Usage"
+                  disableWidgetMenu
+                  noBodyPadding
+                  noWidgetShadow
+                  noHeaderPadding
+                  style={{ paddingRight: 15 }}
+                  headerClass={classes.widgetHeader}
+                >
+                  <Typography>
+                    Notifications are created with the help of{" "}
+                    <a href="https://github.com/fkhadra/react-toastify">
+                      react-toastify
+                    </a>
+                  </Typography>
+                  <div className={classes.codeContainer}>
+                    <SyntaxHighlighter
+                      className={classes.codeComponent}
+                      language="javascript"
+                      style={docco}
+                    >{`
   // import needed components, functions and styles
   import { ToastContainer, toast } from 'react-toastify';
   import 'react-toastify/dist/ReactToastify.css';
@@ -161,13 +191,14 @@ export default function NotificationsPage(props) {
     </div>
   };
             `}</SyntaxHighlighter>
-              <Typography variant="caption">
-                For more API information refer to the library documentation
-              </Typography>
-            </div>
-          </Widget>
+                    <Typography variant="caption">
+                      For more API information refer to the library
+                      documentation
+                    </Typography>
+                  </div>
+                </Widget>
+              </Grid>
             </Grid>
-          </Grid>
           </Widget>
         </Grid>
         <Grid item xs={12} md={6} lg={4}>
@@ -319,7 +350,7 @@ export default function NotificationsPage(props) {
         {...componentProps}
         className={classes.notificationComponent}
       />,
-      options,
+      options
     );
   }
 
@@ -328,11 +359,11 @@ export default function NotificationsPage(props) {
       type: "message",
       message: "Message was sent successfully!",
       variant: "contained",
-      color: "success",
+      color: "success"
     };
     toast.update(errorToastId, {
       render: <Notification {...componentProps} />,
-      type: "success",
+      type: "success"
     });
     setErrorToastId(null);
   }
@@ -348,7 +379,7 @@ export default function NotificationsPage(props) {
           type: "feedback",
           message: "New user feedback received",
           variant: "contained",
-          color: "primary",
+          color: "primary"
         };
         break;
       case "error":
@@ -358,7 +389,7 @@ export default function NotificationsPage(props) {
           variant: "contained",
           color: "secondary",
           extraButton: "Resend",
-          extraButtonClick: retryErrorNotification,
+          extraButtonClick: retryErrorNotification
         };
         break;
       default:
@@ -366,7 +397,7 @@ export default function NotificationsPage(props) {
           type: "shipped",
           message: "The item was shipped",
           variant: "contained",
-          color: "success",
+          color: "success"
         };
     }
 
@@ -375,7 +406,7 @@ export default function NotificationsPage(props) {
       position: positions[notificationsPosition],
       progressClassName: classes.progress,
       onClose: notificationType === "error" && (() => setErrorToastId(null)),
-      className: classes.notification,
+      className: classes.notification
     });
 
     if (notificationType === "error") setErrorToastId(toastId);
@@ -386,7 +417,6 @@ export default function NotificationsPage(props) {
   }
 }
 
-// #############################################################
 function CloseButton({ closeToast, className }) {
   return <CloseIcon className={className} onClick={closeToast} />;
 }
diff --git a/src/pages/notifications/NotificationsContainer.js b/src/pages/notifications/NotificationsContainer.js
index 44de4c2..7c666a6 100644
--- a/src/pages/notifications/NotificationsContainer.js
+++ b/src/pages/notifications/NotificationsContainer.js
@@ -16,7 +16,7 @@ const positions = [
 ];
 
 export default compose(
-  withStyles(theme => ({
+  withStyles((theme) => ({
     /*progress: {
       visibility: "hidden"
     },
@@ -34,7 +34,7 @@ export default compose(
   withState("notificationsPosition", "setNotificationPosition", 2),
   withState("errorToastId", "setErrorToastId", null),
   withHandlers({
-    sendNotification: props => (componentProps, options) => {
+    sendNotification: (props) => (componentProps, options) => {
       return toast(
         <Notification
           {...componentProps}
@@ -45,12 +45,12 @@ export default compose(
     }
   }),
   withHandlers({
-    retryErrorNotification: props => () => {
+    retryErrorNotification: (props) => () => {
       const componentProps = {
         type: "message",
         message: "Message was sent successfully!",
         variant: "contained",
-        color: "success",
+        color: "success"
       };
 
       toast.update(props.errorToastId, {
@@ -61,7 +61,7 @@ export default compose(
     }
   }),
   withHandlers({
-    handleNotificationCall: props => notificationType => {
+    handleNotificationCall: (props) => (notificationType) => {
       let componentProps;
 
       if (props.errorToastId && notificationType === "error") return;
@@ -105,7 +105,7 @@ export default compose(
 
       if (notificationType === "error") props.setErrorToastId(toastId);
     },
-    changeNotificationPosition: props => positionId => {
+    changeNotificationPosition: (props) => (positionId) => {
       props.setNotificationPosition(positionId);
     }
   })
diff --git a/src/pages/notifications/NotificationsView.js b/src/pages/notifications/NotificationsView.js
index cce42e6..df844b3 100644
--- a/src/pages/notifications/NotificationsView.js
+++ b/src/pages/notifications/NotificationsView.js
@@ -1,63 +1,141 @@
-import React from 'react';
-import { Grid, withStyles } from '@material-ui/core';
-import { Close as CloseIcon } from '@material-ui/icons';
-import classnames from 'classnames';
-import { ToastContainer } from 'react-toastify';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import tinycolor from 'tinycolor2';
-import 'react-toastify/dist/ReactToastify.css';
+import React from "react";
+import { Grid, withStyles } from "@material-ui/core";
+import { Close as CloseIcon } from "@material-ui/icons";
+import classnames from "classnames";
+import { ToastContainer } from "react-toastify";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import tinycolor from "tinycolor2";
+import "react-toastify/dist/ReactToastify.css";
 
-import Widget from '../../components/Widget';
-import PageTitle from '../../components/PageTitle';
-import NotificationCustomComponent from '../../components/Notification';
-import { Typography, Button } from '../../components/Wrappers';
+import Widget from "../../components/Widget";
+import PageTitle from "../../components/PageTitle";
+import NotificationCustomComponent from "../../components/Notification";
+import { Typography, Button } from "../../components/Wrappers";
 
 const CloseButton = ({ closeToast, className }) => (
-  <CloseIcon
-    className={className}
-    onClick={closeToast}
-  />
+  <CloseIcon className={className} onClick={closeToast} />
 );
 
-const NotificationsPage = ({ classes, ...props}) => (
+const NotificationsPage = ({ classes, ...props }) => (
   <React.Fragment>
     <PageTitle title="Notifications" />
     <Grid container spacing={32}>
-      <ToastContainer className={classes.toastsContainer} closeButton={<CloseButton className={classes.notificationCloseButton} />} closeOnClick={false} progressClassName={classes.notificationProgress} />
+      <ToastContainer
+        className={classes.toastsContainer}
+        closeButton={
+          <CloseButton className={classes.notificationCloseButton} />
+        }
+        closeOnClick={false}
+        progressClassName={classes.notificationProgress}
+      />
       <Grid item xs={12} md={6} lg={4}>
         <Widget title="Layout Options" disableWidgetMenu>
-          <Typography>There are few position options available for notifications. You can click any of them to change notifications position:</Typography>
+          <Typography>
+            There are few position options available for notifications. You can
+            click any of them to change notifications position:
+          </Typography>
           <div className={classes.layoutContainer}>
             <div className={classes.layoutButtonsRow}>
-              <button onClick={() => props.changeNotificationPosition(0)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 0})} />
-              <button onClick={() => props.changeNotificationPosition(1)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 1})} />
-              <button onClick={() => props.changeNotificationPosition(2)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 2})} />
+              <button
+                onClick={() => props.changeNotificationPosition(0)}
+                className={classnames(classes.layoutButton, {
+                  [classes.layoutButtonActive]:
+                    props.notificationsPosition === 0
+                })}
+              />
+              <button
+                onClick={() => props.changeNotificationPosition(1)}
+                className={classnames(classes.layoutButton, {
+                  [classes.layoutButtonActive]:
+                    props.notificationsPosition === 1
+                })}
+              />
+              <button
+                onClick={() => props.changeNotificationPosition(2)}
+                className={classnames(classes.layoutButton, {
+                  [classes.layoutButtonActive]:
+                    props.notificationsPosition === 2
+                })}
+              />
             </div>
-            <Typography className={classes.layoutText} size="md">Click any position</Typography>
+            <Typography className={classes.layoutText} size="md">
+              Click any position
+            </Typography>
             <div className={classes.layoutButtonsRow}>
-              <button onClick={() => props.changeNotificationPosition(3)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 3})} />
-              <button onClick={() => props.changeNotificationPosition(4)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 4})} />
-              <button onClick={() => props.changeNotificationPosition(5)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 5})} />
+              <button
+                onClick={() => props.changeNotificationPosition(3)}
+                className={classnames(classes.layoutButton, {
+                  [classes.layoutButtonActive]:
+                    props.notificationsPosition === 3
+                })}
+              />
+              <button
+                onClick={() => props.changeNotificationPosition(4)}
+                className={classnames(classes.layoutButton, {
+                  [classes.layoutButtonActive]:
+                    props.notificationsPosition === 4
+                })}
+              />
+              <button
+                onClick={() => props.changeNotificationPosition(5)}
+                className={classnames(classes.layoutButton, {
+                  [classes.layoutButtonActive]:
+                    props.notificationsPosition === 5
+                })}
+              />
             </div>
           </div>
         </Widget>
       </Grid>
       <Grid item xs={12} md={6} lg={4}>
         <Widget title="Notifications Types" disableWidgetMenu>
-          <Typography>Different types of notifications for lost of use cases. Custom classes are also supported.</Typography>
+          <Typography>
+            Different types of notifications for lost of use cases. Custom
+            classes are also supported.
+          </Typography>
           <div className={classes.buttonsContainer}>
-            <Button variant="contained" colortheme="primary" onClick={() => props.handleNotificationCall('info')} className={classnames(classes.notificationCallButton)}>Info Message</Button>
-            <Button variant="contained" colortheme="warning" onClick={() => props.handleNotificationCall('error')} className={classnames(classes.notificationCallButton)}>Error + Retry Message</Button>
-            <Button variant="contained" colortheme="success" onClick={() => props.handleNotificationCall('success')} className={classnames(classes.notificationCallButton)}>Success Message</Button>
+            <Button
+              variant="contained"
+              colortheme="primary"
+              onClick={() => props.handleNotificationCall("info")}
+              className={classnames(classes.notificationCallButton)}
+            >
+              Info Message
+            </Button>
+            <Button
+              variant="contained"
+              colortheme="warning"
+              onClick={() => props.handleNotificationCall("error")}
+              className={classnames(classes.notificationCallButton)}
+            >
+              Error + Retry Message
+            </Button>
+            <Button
+              variant="contained"
+              colortheme="success"
+              onClick={() => props.handleNotificationCall("success")}
+              className={classnames(classes.notificationCallButton)}
+            >
+              Success Message
+            </Button>
           </div>
         </Widget>
       </Grid>
       <Grid item xs={12} md={6} lg={4}>
         <Widget title="Usage" disableWidgetMenu>
-          <Typography>Notifications are created with the help of <a href="https://github.com/fkhadra/react-toastify">react-toastify</a></Typography>
+          <Typography>
+            Notifications are created with the help of{" "}
+            <a href="https://github.com/fkhadra/react-toastify">
+              react-toastify
+            </a>
+          </Typography>
           <div className={classes.codeContainer}>
-            <SyntaxHighlighter className={classes.codeComponent} language='javascript' style={docco}>{`
+            <SyntaxHighlighter
+              className={classes.codeComponent}
+              language="javascript"
+              style={docco}
+            >{`
   // import needed components, functions and styles
   import { ToastContainer, toast } from 'react-toastify';
   import 'react-toastify/dist/ReactToastify.css';
@@ -71,38 +149,148 @@ const NotificationsPage = ({ classes, ...props}) => (
     </div>
   };
             `}</SyntaxHighlighter>
-            <Typography variant="caption">For more API information refer to the library documentation</Typography>
+            <Typography variant="caption">
+              For more API information refer to the library documentation
+            </Typography>
           </div>
         </Widget>
       </Grid>
       <Grid item xs={12} md={6} lg={4}>
         <Widget title="Notification Types Examples" disableWidgetMenu>
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="message" message="Thanks for Checking out Messenger" variant="contained" color="secondary"/>
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="feedback" message="New user feedback received" variant="contained" color="primary"/>
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="customer" message="New customer is registered" variant="contained" color="success" />
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="shipped" message="The order was shipped" variant="contained" color="warning" />
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="delivered" message="The order was delivered" variant="contained" color="primary" />
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="defence" message="5 Defence alerts" variant="contained" color="info" />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            shadowless
+            type="message"
+            message="Thanks for Checking out Messenger"
+            variant="contained"
+            color="secondary"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            shadowless
+            type="feedback"
+            message="New user feedback received"
+            variant="contained"
+            color="primary"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            shadowless
+            type="customer"
+            message="New customer is registered"
+            variant="contained"
+            color="success"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            shadowless
+            type="shipped"
+            message="The order was shipped"
+            variant="contained"
+            color="warning"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            shadowless
+            type="delivered"
+            message="The order was delivered"
+            variant="contained"
+            color="primary"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            shadowless
+            type="defence"
+            message="5 Defence alerts"
+            variant="contained"
+            color="info"
+          />
         </Widget>
       </Grid>
       <Grid item xs={12} md={6} lg={4}>
         <Widget title="Notification Types Examples" disableWidgetMenu>
-          <NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" color="secondary" />
-          <NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" color="primary" />
-          <NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" color="success" />
-          <NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" color="warning" />
-          <NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" color="primary" />
-          <NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" color="info" />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="report"
+            message="New report has been received"
+            color="secondary"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="feedback"
+            message="New user feedback received"
+            color="primary"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="shipped"
+            message="The item was shipped"
+            color="success"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="message"
+            message="The new message from user @nahawaii"
+            color="warning"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="upload"
+            message="Your file is ready to upload"
+            color="primary"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="disc"
+            message="The disc is full"
+            color="info"
+          />
         </Widget>
       </Grid>
       <Grid item xs={12} md={6} lg={4}>
         <Widget title="Notification Types Examples" disableWidgetMenu>
-          <NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" variant="rounded" color="secondary" />
-          <NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" variant="rounded" color="primary" />
-          <NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" variant="rounded" color="success" />
-          <NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" variant="rounded" color="warning" />
-          <NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" variant="rounded" color="primary" />
-          <NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" variant="rounded" color="info" />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="report"
+            message="New report has been received"
+            variant="rounded"
+            color="secondary"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="feedback"
+            message="New user feedback received"
+            variant="rounded"
+            color="primary"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="shipped"
+            message="The item was shipped"
+            variant="rounded"
+            color="success"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="message"
+            message="The new message from user @nahawaii"
+            variant="rounded"
+            color="warning"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="upload"
+            message="Your file is ready to upload"
+            variant="rounded"
+            color="primary"
+          />
+          <NotificationCustomComponent
+            className={classes.notificationItem}
+            type="disc"
+            message="The disc is full"
+            variant="rounded"
+            color="info"
+          />
         </Widget>
       </Grid>
     </Grid>
@@ -112,64 +300,66 @@ const NotificationsPage = ({ classes, ...props}) => (
 const styles = (theme) => ({
   layoutContainer: {
     height: 200,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
     marginTop: theme.spacing.unit * 2,
-    border: '1px dashed',
+    border: "1px dashed",
     borderColor: theme.palette.primary.main,
-    position: 'relative',
+    position: "relative"
   },
   layoutText: {
-    color: tinycolor(theme.palette.background.light).darken().toHexString(),
+    color: tinycolor(theme.palette.background.light).darken().toHexString()
   },
   layoutButtonsRow: {
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'space-between',
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between"
   },
   layoutButton: {
     backgroundColor: theme.palette.background.light,
     width: 125,
     height: 50,
-    outline: 'none',
-    border: 'none',
+    outline: "none",
+    border: "none"
   },
   layoutButtonActive: {
-    backgroundColor: tinycolor(theme.palette.background.light).darken().toHexString(),
+    backgroundColor: tinycolor(theme.palette.background.light)
+      .darken()
+      .toHexString()
   },
   buttonsContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    marginTop: theme.spacing.unit * 2,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    marginTop: theme.spacing.unit * 2
   },
   notificationCallButton: {
-    color: 'white',
+    color: "white",
     marginBottom: theme.spacing.unit,
-    textTransform: 'none',
+    textTransform: "none"
   },
   codeContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    marginTop: theme.spacing.unit * 2,
+    display: "flex",
+    flexDirection: "column",
+    marginTop: theme.spacing.unit * 2
   },
   codeComponent: {
-    flexGrow: 1,
+    flexGrow: 1
   },
   notificationItem: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing.unit * 2
   },
   notificationCloseButton: {
-    position: 'absolute',
-    right: theme.spacing.unit * 2,
+    position: "absolute",
+    right: theme.spacing.unit * 2
   },
   toastsContainer: {
     width: 400,
     marginTop: theme.spacing.unit * 6,
-    right: 0,
+    right: 0
   }
 });
 
-export default withStyles(styles, { withTheme: true})(NotificationsPage);
+export default withStyles(styles, { withTheme: true })(NotificationsPage);
diff --git a/src/pages/notifications/styles.js b/src/pages/notifications/styles.js
index 9bde828..9d47b8a 100644
--- a/src/pages/notifications/styles.js
+++ b/src/pages/notifications/styles.js
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/styles";
 import tinycolor from "tinycolor2";
 
-export default makeStyles(theme => ({
+export default makeStyles((theme) => ({
   layoutContainer: {
     height: 200,
     display: "flex",
@@ -11,73 +11,71 @@ export default makeStyles(theme => ({
     marginTop: theme.spacing(2),
     border: "1px dashed",
     borderColor: theme.palette.primary.main,
-    position: "relative",
+    position: "relative"
   },
   layoutText: {
-    color: tinycolor(theme.palette.background.light)
-      .darken()
-      .toHexString(),
+    color: tinycolor(theme.palette.background.light).darken().toHexString()
   },
   layoutButtonsRow: {
     width: "100%",
     display: "flex",
-    justifyContent: "space-between",
+    justifyContent: "space-between"
   },
   layoutButton: {
     backgroundColor: theme.palette.background.light,
     width: 125,
     height: 50,
     outline: "none",
-    border: "none",
+    border: "none"
   },
   layoutButtonActive: {
     backgroundColor: tinycolor(theme.palette.background.light)
       .darken()
-      .toHexString(),
+      .toHexString()
   },
   buttonsContainer: {
     display: "flex",
     flexDirection: "column",
     alignItems: "flex-start",
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(2)
   },
   notificationCallButton: {
     color: "white",
     marginBottom: theme.spacing(1),
-    textTransform: "none",
+    textTransform: "none"
   },
   codeContainer: {
     display: "flex",
     flexDirection: "column",
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(2)
   },
   codeComponent: {
-    flexGrow: 1,
+    flexGrow: 1
   },
   notificationItem: {
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(2)
   },
   notificationCloseButton: {
     position: "absolute",
-    right: theme.spacing(2),
+    right: theme.spacing(2)
   },
   toastsContainer: {
     width: 400,
     marginTop: theme.spacing(6),
-    right: 0,
+    right: 0
   },
   progress: {
-    visibility: "hidden",
+    visibility: "hidden"
   },
   notification: {
     display: "flex",
     alignItems: "center",
     background: "transparent",
     boxShadow: "none",
-    overflow: "visible",
+    overflow: "visible"
   },
   notificationComponent: {
-    paddingRight: theme.spacing(4),
+    paddingRight: theme.spacing(4)
   },
   widgetHeader: {
     paddingBottom: 8