Notifications page design & notification component

Author: kulgavy

package.json

@@ -23,7 +23,8 @@
     "recharts": "^1.5.0",
     "recompose": "^0.30.0",
     "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "tinycolor2": "^1.4.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Header/HeaderView.js

@@ -234,7 +234,7 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
             onClick={props.closeNotificationsMenu}
             className={classes.headerMenuItem}
           >
-            <Notification {...notification} />
+            <Notification {...notification} typographyVariant="inherit" />
           </MenuItem>
         ))}
       </Menu>

src/components/Notification/Notification.js

@@ -1,36 +1,91 @@
 import React from "react";
-import { Typography, withStyles } from "@material-ui/core";
+import { Button, withStyles } from "@material-ui/core";
 import {
   NotificationsNone as NotificationsIcon,
   ThumbUp as ThumbUpIcon,
   ShoppingCart as ShoppingCartIcon,
-  LocalOffer as TicketIcon
+  LocalOffer as TicketIcon,
+  BusinessCenter as DeliveredIcon,
+  SmsFailed as FeedbackIcon,
+  DiscFull as DiscIcon,
+  Email as MessageIcon,
+  Report as ReportIcon,
+  Error as DefenceIcon,
+  AccountBox as CustomerIcon,
+  Done as ShippedIcon,
+  Publish as UploadIcon,
 } from "@material-ui/icons";
+import classnames from "classnames";
+import tinycolor from 'tinycolor2';
+
+import { Typography } from "../Wrappers";
 
 const typesIcons = {
   "e-commerce": <ShoppingCartIcon />,
   notification: <NotificationsIcon />,
   offer: <TicketIcon />,
-  info: <ThumbUpIcon />
+  info: <ThumbUpIcon />,
+  message: <MessageIcon />,
+  feedback: <FeedbackIcon />,
+  customer: <CustomerIcon />,
+  shipped: <ShippedIcon />,
+  delivered: <DeliveredIcon />,
+  defence: <DefenceIcon />,
+  report: <ReportIcon />,
+  upload: <UploadIcon />,
+  disc: <DiscIcon />,
 };
 
 const getIconByType = (type = "offer") => typesIcons[type];
 
-const Notification = ({ classes, theme, ...props }) => {
+const Notification = ({ classes, theme, variant, ...props }) => {
   const icon = getIconByType(props.type);
   const iconWithStyles = React.cloneElement(icon, {
     classes: {
       root: classes.notificationIcon
     },
     style: {
-      color: theme.palette[props.color] && theme.palette[props.color].main,
+      color: variant !== "contained" && theme.palette[props.color] && theme.palette[props.color].main
     }
   });
 
   return (
-    <div className={classes.notificationContainer}>
-      {iconWithStyles}
-      <Typography variant="inherit">{props.message}</Typography>
+    <div
+      className={classnames(classes.notificationContainer, props.className, {
+        [classes.notificationContained]: variant === "contained",
+        [classes.notificationContainedShadowless]: props.shadowless,
+      })}
+      style={{
+        backgroundColor:
+          variant === "contained" &&
+          theme.palette[props.color] &&
+          theme.palette[props.color].main
+      }}
+    >
+      <div
+        className={classnames(classes.notificationIconContainer, {
+          [classes.notificationIconContainerContained]: variant === "contained",
+          [classes.notificationIconContainerRounded]: variant === "rounded",
+        }
+        )}
+        style={{
+          backgroundColor: variant === "rounded" &&
+          theme.palette[props.color] &&
+          tinycolor(theme.palette[props.color].main).setAlpha(0.15).toRgbString()
+        }}
+      >{iconWithStyles}</div>
+      <div className={classes.messageContainer}>
+        <Typography
+          className={classnames({
+            [classes.containedTypography]: variant === "contained"
+          })}
+          variant={props.typographyVariant}
+          size={variant !== "contained" && !props.typographyVariant && "md"}
+        >
+          {props.message}
+        </Typography>
+        {props.extraButton && props.extraButtonClick && (<Button onClick={props.extraButtonClick} disableRipple className={classes.extraButton}>{props.extraButton}</Button>)}
+      </div>
     </div>
   );
 };
@@ -40,10 +95,45 @@ const styles = theme => ({
     display: "flex",
     alignItems: "center"
   },
-  notificationIcon: {
+  notificationContained: {
+    borderRadius: 45,
+    height: 45,
+    boxShadow: theme.customShadows.widgetDark
+  },
+  notificationContainedShadowless: {
+    boxShadow: 'none',
+  },
+  notificationIconContainer: {
+    width: 45,
+    height: 45,
+    borderRadius: 45,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 24,
+  },
+  notificationIconContainerContained: {
     fontSize: 18,
-    marginRight: theme.spacing.unit * 2
-  }
+    color: '#FFFFFF80',
+  },
+  notificationIconContainerRounded: {
+    marginRight: theme.spacing.unit * 2,
+  },
+  containedTypography: {
+    color: "white"
+  },
+  messageContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexGrow: 1,
+  },
+  extraButton: {
+    color: 'white',
+    '&:hover, &:focus': {
+      background: 'transparent',
+    }
+  },
 });
 
 export default withStyles(styles, { withTheme: true })(Notification);

src/components/Wrappers/Wrappers.js

@@ -1,99 +1,140 @@
 import React from "react";
-import { withStyles, withTheme, Badge as BadgeBase, Typography as TypographyBase } from "@material-ui/core";
+import {
+  withStyles,
+  withTheme,
+  Badge as BadgeBase,
+  Typography as TypographyBase,
+  Button as ButtonBase
+} from "@material-ui/core";
 import classnames from "classnames";
 
-const getColor = (color, theme, brigtness = 'main') => {
+const getColor = (color, theme, brigtness = "main") => {
   if (color && theme.palette[color] && theme.palette[color][brigtness]) {
-   return theme.palette[color][brigtness];
+    return theme.palette[color][brigtness];
   }
 };
 
-const getFontWeight = (style) => {
+const getFontWeight = style => {
   switch (style) {
-    case 'light':
+    case "light":
       return 300;
-    case 'medium':
+    case "medium":
       return 500;
-    case 'bold':
+    case "bold":
       return 600;
     default:
       return 400;
   }
 };
 
-const getFontSize = (size, variant = '', theme) => {
+const getFontSize = (size, variant = "", theme) => {
   let multiplier;
 
   switch (size) {
-    case 'sm':
-      multiplier = .8;
+    case "sm":
+      multiplier = 0.8;
       break;
-    case 'md':
+    case "md":
       multiplier = 1.5;
       break;
-    case 'xl':
+    case "xl":
       multiplier = 2;
       break;
-    case 'xxl':
+    case "xxl":
       multiplier = 3;
       break;
     default:
       multiplier = 1;
       break;
   }
 
-  const defaultSize = variant && theme.typography[variant] ? theme.typography[variant].fontSize : theme.typography.fontSize + 'px';
+  const defaultSize =
+    variant && theme.typography[variant]
+      ? theme.typography[variant].fontSize
+      : theme.typography.fontSize + "px";
 
   return `calc(${defaultSize} * ${multiplier})`;
-} 
+};
 
 const createStyled = (styles, options) => {
   const Styled = props => {
     const { children, ...other } = props;
     return children(other);
-  }
-  
+  };
+
   return withStyles(styles, options)(Styled);
-}
+};
 
 const BadgeExtended = ({ classes, theme, children, ...props }) => {
   const Styled = createStyled({
     badge: {
-      backgroundColor: getColor(props.color, theme, props.colorBrightness) 
-    },
+      backgroundColor: getColor(props.color, theme, props.colorBrightness)
+    }
   });
 
   return (
     <Styled>
-      {(styledProps) => <BadgeBase
-        classes={{ badge: classnames(classes.badge, styledProps.classes.badge) }}
-        {...props}
-      >
-        {children}
-      </BadgeBase>}
+      {styledProps => (
+        <BadgeBase
+          classes={{
+            badge: classnames(classes.badge, styledProps.classes.badge)
+          }}
+          {...props}
+        >
+          {children}
+        </BadgeBase>
+      )}
     </Styled>
   );
-}
+};
 
-export const Badge = withStyles(theme => ({
-  badge: {
-    fontWeight: 600,
-    height: 16,
-    minWidth: 16, 
-  },
-}), { withTheme: true })(BadgeExtended);
+export const Badge = withStyles(
+  theme => ({
+    badge: {
+      fontWeight: 600,
+      height: 16,
+      minWidth: 16
+    }
+  }),
+  { withTheme: true }
+)(BadgeExtended);
 
 const TypographyExtended = ({ theme, children, weight, size, ...props }) => (
   <TypographyBase
     style={{
       color: getColor(props.color, theme, props.colorBrightness),
       fontWeight: getFontWeight(weight),
-      fontSize: getFontSize(size, props.variant, theme),
+      fontSize: getFontSize(size, props.variant, theme)
     }}
     {...props}
   >
     {children}
   </TypographyBase>
 );
 
-export const Typography = withTheme()(TypographyExtended);
+export const Typography = withTheme()(TypographyExtended);
+
+const ButtonExtended = ({ theme, children, ...props }) => {
+  const Styled = createStyled({
+    button: {
+      backgroundColor: getColor(props.color, theme),
+      boxShadow: theme.customShadows.widget,
+      '&:hover': {
+        backgroundColor: getColor(props.color, theme, 'light'),
+        boxShadow: theme.customShadows.widgetWide,
+      }
+    }
+  });
+
+  return (
+    <Styled>
+      {({ classes }) => (
+        <ButtonBase classes={{ root: classes.button }} {...props}>
+          {children}
+        </ButtonBase>
+      )}
+    </Styled>
+  );
+};
+
+export const Button = withTheme()(ButtonExtended);

src/pages/login/LoginState.js

@@ -1,6 +1,6 @@
 export const initialState = {
   isLoading: false,
-  isAuthenticated: false,
+  isAuthenticated: !!localStorage.getItem("id_token"),
   error: null
 };