Add mobile notifications and adapt its design

packages/common-components/src/MenuDropdown/MenuDropdown.tsx

@@ -9,7 +9,6 @@ import { useOnScroll } from "../Scroll/useOnScroll.hook"
 const useStyles = makeStyles(
   ({ constants, animation, typography, palette, overrides }: ITheme) =>
     createStyles({
-      // JSS in CSS goes here
       root: {
         display: "inline-block",
         position: "relative",
@@ -160,9 +159,7 @@ const useStyles = makeStyles(
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
-        padding: `${constants.generalUnit * 1.5}px ${
-          constants.generalUnit * 2
-        }px`,
+        padding: `${constants.generalUnit * 1.5}px ${constants.generalUnit * 2}px`,
         color: palette.additional["gray"][7],
         transitionDuration: `${animation.transform}ms`,
         backgroundColor: "initial",

packages/files-ui/src/Components/Elements/Notifications/NotificationLine.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import { Typography } from "@chainsafe/common-components"
+import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+import { Notification } from "./NotificationsDropdown"
+dayjs.extend(relativeTime)
+
+const useStyles = makeStyles(({ palette, constants }: ITheme) =>
+  createStyles({
+    notificationBody: {
+      padding: `${constants.generalUnit}px ${constants.generalUnit * 1.5}px`,
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: palette.additional["gray"][4]
+      }
+    },
+    notificationTitle: {
+      color: palette.additional["gray"][9],
+      paddingRight: constants.generalUnit * 1.5,
+      width: 180
+    },
+    notificationTime: {
+      color: palette.additional["blue"][6]
+    }
+  })
+)
+
+interface Props {
+  notification: Notification
+}
+const NotificationLine = ({ notification }: Props) => {
+  const classes = useStyles()
+
+  return <div
+    className={classes.notificationBody}
+    onClick={notification.onClick}
+  >
+    <Typography
+      variant="body2"
+      className={classes.notificationTitle}
+      component="p"
+    >
+      {notification.title}
+    </Typography>
+    <Typography
+      variant="body2"
+      className={classes.notificationTime}
+      component="p"
+    >
+      {dayjs.unix(notification.createdAt).fromNow()}
+    </Typography>
+  </div>
+}
+
+export default NotificationLine

packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx

@@ -1,53 +1,47 @@
 import React from "react"
-import { Typography, ScrollbarWrapper } from "@chainsafe/common-components"
+import { Typography, ScrollbarWrapper, Divider } from "@chainsafe/common-components"
 import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
 import dayjs from "dayjs"
-import relativeTime from "dayjs/plugin/relativeTime"
 import { Notification } from "./NotificationsDropdown"
 import { Trans } from "@lingui/macro"
 import { MoonStarIcon } from "@chainsafe/common-components"
-import clsx from "clsx"
-dayjs.extend(relativeTime)
+import NotificationLine from "./NotificationLine"
 
 const useStyles = makeStyles(({ palette, constants }: ITheme) =>
   createStyles({
-    notificationBody: {
-      padding: `${constants.generalUnit}px ${constants.generalUnit * 1.5}px`,
+    notificationsBody: {
+      backgroundColor: palette.additional["gray"][2]
+    },
+    emptyBody: {
+      cursor: "pointer",
       display: "flex",
       alignItems: "center",
-      cursor: "pointer",
-      backgroundColor: palette.additional["gray"][2],
-      "&.empty": {
-        display: "flex",
-        flexDirection: "column",
-        padding: `${constants.generalUnit * 3 }px ${constants.generalUnit * 1.5}px`,
-        color: palette.additional["gray"][7]
-      },
-      "&:hover": {
-        backgroundColor: palette.additional["gray"][3]
-      },
+      flexDirection: "column",
+      padding: `${constants.generalUnit * 3}px ${constants.generalUnit * 1.5}px`,
+      color: palette.additional["gray"][7],
       "& svg>path": {
         stroke: palette.additional["gray"][7]
-      },
-      borderBottom: `1px solid ${palette.additional["gray"][5]}`,
-      "&:last-child": {
-        border: "none"
       }
     },
     icon: {
       transition: "none",
       marginBottom: 2 * constants.generalUnit
     },
+    scrollContent: {
+      minWidth: 300
+    },
+    header: {
+      padding: `${constants.generalUnit * 3}px ${constants.generalUnit * 3}px`,
+      paddingBottom: 0
+    },
     notificationTitle: {
       color: palette.additional["gray"][9],
       paddingRight: constants.generalUnit * 1.5,
       width: 180
     },
-    scrollContent: {
-      minWidth: 300
-    },
-    notificationTime: {
-      color: palette.additional["blue"][6]
+    notifs: {
+      padding: `${constants.generalUnit * 3}px ${constants.generalUnit * 3}px`,
+      paddingTop: 0
     }
   })
 )
@@ -58,46 +52,64 @@ interface INotificationListProps {
 
 const NotificationList = ({ notifications }: INotificationListProps) => {
   const classes = useStyles()
+  const thisWeeksNotifications = notifications.filter(n => dayjs(Date.now()).diff(dayjs.unix(n.createdAt), "day") <= 7)
+  const olderNotifications = notifications.filter(n => dayjs(Date.now()).diff(dayjs.unix(n.createdAt), "day") > 7)
 
   return (
     <ScrollbarWrapper
       autoHide={true}
       maxHeight={300}
       className={classes.scrollContent}
     >
-      <div>
+      <div className={classes.notificationsBody}>
         {notifications.length === 0 && (
-          <div className={clsx(classes.notificationBody, "empty")}>
+          <div className={classes.emptyBody}>
             <MoonStarIcon className={classes.icon} />
             <Typography variant="h4" >
               <Trans>There are no notifications!</Trans>
             </Typography>
           </div>
         )}
-        {notifications.map((n, i) => (
-          <div
-            key={i}
-            className={classes.notificationBody}
-            onClick={n.onClick}
-          >
+        {notifications.length !== 0 && <>
+          <section className={classes.header}>
             <Typography
-              variant="body2"
-              className={classes.notificationTitle}
+              variant="h3"
               component="p"
             >
-              {n.title}
+              <Trans>Notifications</Trans>
             </Typography>
+            <Divider />
+          </section>
+          {!!thisWeeksNotifications.length && <section className={classes.notifs}>
             <Typography
-              variant="body2"
-              className={classes.notificationTime}
+              variant="h5"
               component="p"
             >
-              {dayjs.unix(n.createdAt).fromNow()}
+              <Trans>This week</Trans>
             </Typography>
-          </div>
-        ))}
+            {thisWeeksNotifications.map((n, i) => <NotificationLine
+              key={`${i}-thisWeek`}
+              notification={n}
+            />)}
+          </section>
+          }
+          {!!olderNotifications.length && <section className={classes.notifs}>
+            <Typography
+              variant="h5"
+              component="p"
+            >
+              <Trans>Older notifications</Trans>
+            </Typography>
+            {olderNotifications.map((n, i) => <NotificationLine
+              key={`${i}-olderNotifications`}
+              notification={n}
+            />)}
+          </section>
+          }
+        </>}
       </div>
     </ScrollbarWrapper>
-  )}
+  )
+}
 
 export default NotificationList

packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx

@@ -1,32 +1,72 @@
 import React from "react"
-import { Button, BellIcon, MenuDropdown } from "@chainsafe/common-components"
-import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
+import { BellIcon, MenuDropdown } from "@chainsafe/common-components"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import NotificationList from "./NotificationList"
 import { useNotifications } from "../../../Contexts/NotificationsContext"
+import { CSFTheme } from "../../../Themes/types"
 
-const useStyles = makeStyles(({ palette, constants }: ITheme) =>
+const useStyles = makeStyles(({ animation, palette, constants, breakpoints, overrides }: CSFTheme) =>
   createStyles({
     notificationsButton: {
-      position: "relative"
+      position: "relative",
+      transition: "none",
+      height: constants.generalUnit * 4,
+      padding: `0 ${constants.generalUnit}px !important`,
+      backgroundColor: palette.additional["gray"][3],
+      color: palette.common.black.main,
+      borderRadius: `${constants.generalUnit / 4}px`,
+      display: "flex",
+      justifyContent: "center",
+      textAlign: "center",
+      alignItems: "center",
+      textDecoration: "none",
+      cursor: "pointer",
+      transitionDuration: `${animation.transform}ms`,
+      border: "none",
+      outline: "none",
+      ...overrides?.Button?.variants?.tertiary?.root,
+      "& svg": {
+        transitionDuration: `${animation.transform}ms`,
+        margin: `${0}px ${constants.generalUnit / 2}px 0`,
+        fill: palette.common.white.main
+      },
+      "&:hover": {
+        backgroundColor: palette.primary.main,
+        color: palette.common.white.main,
+        ...overrides?.Button?.variants?.tertiary?.hover
+      },
+      "&:focus": {
+        backgroundColor: palette.primary.main,
+        color: palette.common.white.main,
+        ...overrides?.Button?.variants?.tertiary?.focus
+      },
+      "&:active": {
+        backgroundColor: palette.primary.main,
+        color: palette.common.white.main,
+        ...overrides?.Button?.variants?.tertiary?.active
+      },
+      [breakpoints.down("md")]: {
+        backgroundColor: palette.additional["gray"][3]
+      }
     },
     badge: {
       position: "absolute",
       background: palette.additional["volcano"][6],
       color: palette.additional["gray"][1],
-      top: "-2px",
-      left: "13px",
+      top: "0px",
+      right: "5px",
       borderRadius: constants.generalUnit,
       padding: `${constants.generalUnit * 0.25}px ${constants.generalUnit * 0.5}px`,
       fontSize: "10px",
       lineHeight: "11px",
       height: "0.92rem",
       minWidth: "1rem"
     },
-    icon: {
-      transition: "none"
-    },
-    button: {
-      height: constants.generalUnit * 4
+    optionsOpen: {
+      [breakpoints.down("md")]: {
+        minWidth: "100vw",
+        backgroundColor: palette.additional["gray"][3]
+      }
     }
   })
 )
@@ -45,23 +85,19 @@ const NotificationsDropdown = () => {
   return (
     <MenuDropdown
       menuItems={[]}
-      dropdown={<NotificationList notifications={notifications}/>}
+      dropdown={<NotificationList notifications={notifications} />}
       hideIndicator={true}
       anchor="bottom-right"
       autoclose
+      classNames={{ options: classes.optionsOpen }}
     >
-      <Button
-        variant="tertiary"
-        className={classes.button}
-      >
-        <div className={classes.notificationsButton}>
-          <BellIcon className={classes.icon} />
-          {!!notifications.length && <div className={classes.badge}>
-            {notifications.length}
-          </div>
-          }
+      <div className={classes.notificationsButton}>
+        <BellIcon />
+        {!!notifications.length && <div className={classes.badge}>
+          {notifications.length}
         </div>
-      </Button>
+        }
+      </div>
     </MenuDropdown>
   )
 }