notification components formatting

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];
 }

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) {
@@ -48,29 +48,40 @@ export default function NotificationsPage(props) {
           <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}>
+                <Widget
+                  title="Layout Options"
+                  noWidgetShadow
+                  disableWidgetMenu
+                  noBodyPadding
+                  noHeaderPadding
+                  style={{ paddingRight: 15 }}
+                  headerClass={classes.widgetHeader}
+                >
                   <Typography>
-              There are few position options available for notifications. You
+                    There are few position options available for notifications.
-              can click any of them to change notifications position:
+                    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,
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 0
                         })}
                       />
                       <button
                         onClick={() => changeNotificationPosition(1)}
                         className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 1,
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 1
                         })}
                       />
                       <button
                         onClick={() => changeNotificationPosition(2)}
                         className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 2,
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 2
                         })}
                       />
                     </div>
@@ -81,19 +92,22 @@ export default function NotificationsPage(props) {
                       <button
                         onClick={() => changeNotificationPosition(3)}
                         className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 3,
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 3
                         })}
                       />
                       <button
                         onClick={() => changeNotificationPosition(4)}
                         className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 4,
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 4
                         })}
                       />
                       <button
                         onClick={() => changeNotificationPosition(5)}
                         className={classnames(classes.layoutButton, {
-                    [classes.layoutButtonActive]: notificationsPosition === 5,
+                          [classes.layoutButtonActive]:
+                            notificationsPosition === 5
                         })}
                       />
                     </div>
@@ -101,10 +115,18 @@ export default function NotificationsPage(props) {
                 </Widget>
               </Grid>
               <Grid item xs={4}>
-          <Widget title="Notifications Types" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
+                <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
+                    Different types of notifications for lost of use cases.
-              classes are also supported.
+                    Custom classes are also supported.
                   </Typography>
                   <div className={classes.buttonsContainer}>
                     <Button
@@ -135,7 +157,15 @@ export default function NotificationsPage(props) {
                 </Widget>
               </Grid>
               <Grid item xs={4}>
-          <Widget title="Usage" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
+                <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">
@@ -162,7 +192,8 @@ export default function NotificationsPage(props) {
   };
             `}</SyntaxHighlighter>
                     <Typography variant="caption">
-                For more API information refer to the library documentation
+                      For more API information refer to the library
+                      documentation
                     </Typography>
                   </div>
                 </Widget>
@@ -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} />;
 }

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);
     }
   })

src/pages/notifications/NotificationsView.js

@@ -1,63 +1,141 @@
-import React from 'react';
+import React from "react";
-import { Grid, withStyles } from '@material-ui/core';
+import { Grid, withStyles } from "@material-ui/core";
-import { Close as CloseIcon } from '@material-ui/icons';
+import { Close as CloseIcon } from "@material-ui/icons";
-import classnames from 'classnames';
+import classnames from "classnames";
-import { ToastContainer } from 'react-toastify';
+import { ToastContainer } from "react-toastify";
-import SyntaxHighlighter from 'react-syntax-highlighter';
+import SyntaxHighlighter from "react-syntax-highlighter";
-import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import tinycolor from 'tinycolor2';
+import tinycolor from "tinycolor2";
-import 'react-toastify/dist/ReactToastify.css';
+import "react-toastify/dist/ReactToastify.css";
 
-import Widget from '../../components/Widget';
+import Widget from "../../components/Widget";
-import PageTitle from '../../components/PageTitle';
+import PageTitle from "../../components/PageTitle";
-import NotificationCustomComponent from '../../components/Notification';
+import NotificationCustomComponent from "../../components/Notification";
-import { Typography, Button } from '../../components/Wrappers';
+import { Typography, Button } from "../../components/Wrappers";
 
 const CloseButton = ({ closeToast, className }) => (
-  <CloseIcon
+  <CloseIcon className={className} onClick={closeToast} />
-    className={className}
-    onClick={closeToast}
-  />
 );
 
 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
-              <button onClick={() => props.changeNotificationPosition(1)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 1})} />
+                onClick={() => props.changeNotificationPosition(0)}
-              <button onClick={() => props.changeNotificationPosition(2)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 2})} />
+                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
-              <button onClick={() => props.changeNotificationPosition(4)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 4})} />
+                onClick={() => props.changeNotificationPosition(3)}
-              <button onClick={() => props.changeNotificationPosition(5)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 5})} />
+                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
-            <Button variant="contained" colortheme="warning" onClick={() => props.handleNotificationCall('error')} className={classnames(classes.notificationCallButton)}>Error + Retry Message</Button>
+              variant="contained"
-            <Button variant="contained" colortheme="success" onClick={() => props.handleNotificationCall('success')} className={classnames(classes.notificationCallButton)}>Success Message</Button>
+              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
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="feedback" message="New user feedback received" variant="contained" color="primary"/>
+            className={classes.notificationItem}
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="customer" message="New customer is registered" variant="contained" color="success" />
+            shadowless
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="shipped" message="The order was shipped" variant="contained" color="warning" />
+            type="message"
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="delivered" message="The order was delivered" variant="contained" color="primary" />
+            message="Thanks for Checking out Messenger"
-          <NotificationCustomComponent className={classes.notificationItem} shadowless type="defence" message="5 Defence alerts" variant="contained" color="info" />
+            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
-          <NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" color="primary" />
+            className={classes.notificationItem}
-          <NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" color="success" />
+            type="report"
-          <NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" color="warning" />
+            message="New report has been received"
-          <NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" color="primary" />
+            color="secondary"
-          <NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" color="info" />
+          />
+          <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
-          <NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" variant="rounded" color="primary" />
+            className={classes.notificationItem}
-          <NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" variant="rounded" color="success" />
+            type="report"
-          <NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" variant="rounded" color="warning" />
+            message="New report has been received"
-          <NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" variant="rounded" color="primary" />
+            variant="rounded"
-          <NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" variant="rounded" color="info" />
+            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,63 +300,65 @@ const NotificationsPage = ({ classes, ...props}) => (
 const styles = (theme) => ({
   layoutContainer: {
     height: 200,
-    display: 'flex',
+    display: "flex",
-    flexDirection: 'column',
+    flexDirection: "column",
-    justifyContent: 'space-between',
+    justifyContent: "space-between",
-    alignItems: 'center',
+    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%',
+    width: "100%",
-    display: 'flex',
+    display: "flex",
-    justifyContent: 'space-between',
+    justifyContent: "space-between"
   },
   layoutButton: {
     backgroundColor: theme.palette.background.light,
     width: 125,
     height: 50,
-    outline: 'none',
+    outline: "none",
-    border: 'none',
+    border: "none"
   },
   layoutButtonActive: {
-    backgroundColor: tinycolor(theme.palette.background.light).darken().toHexString(),
+    backgroundColor: tinycolor(theme.palette.background.light)
+      .darken()
+      .toHexString()
   },
   buttonsContainer: {
-    display: 'flex',
+    display: "flex",
-    flexDirection: 'column',
+    flexDirection: "column",
-    alignItems: 'flex-start',
+    alignItems: "flex-start",
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing.unit * 2
   },
   notificationCallButton: {
-    color: 'white',
+    color: "white",
     marginBottom: theme.spacing.unit,
-    textTransform: 'none',
+    textTransform: "none"
   },
   codeContainer: {
-    display: 'flex',
+    display: "flex",
-    flexDirection: 'column',
+    flexDirection: "column",
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing.unit * 2
   },
   codeComponent: {
-    flexGrow: 1,
+    flexGrow: 1
   },
   notificationItem: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing.unit * 2
   },
   notificationCloseButton: {
-    position: 'absolute',
+    position: "absolute",
-    right: theme.spacing.unit * 2,
+    right: theme.spacing.unit * 2
   },
   toastsContainer: {
     width: 400,
     marginTop: theme.spacing.unit * 6,
-    right: 0,
+    right: 0
   }
 });
 

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)
+    color: tinycolor(theme.palette.background.light).darken().toHexString()
-      .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