Add mobile notifications and adapt its design

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,44 @@
 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`,
+    noNotificationBody: {
+      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,6 +49,8 @@ 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
@@ -67,35 +60,50 @@ const NotificationList = ({ notifications }: INotificationListProps) => {
     >
       <div>
         {notifications.length === 0 && (
-          <div className={clsx(classes.notificationBody, "empty")}>
+          <div className={classes.noNotificationBody}>
             <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>
   )}

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

@@ -1,10 +1,11 @@
 import React from "react"
 import { Button, BellIcon, MenuDropdown } from "@chainsafe/common-components"
-import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
+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(({ palette, constants, breakpoints }: CSFTheme) =>
   createStyles({
     notificationsButton: {
       position: "relative"
@@ -26,7 +27,17 @@ const useStyles = makeStyles(({ palette, constants }: ITheme) =>
       transition: "none"
     },
     button: {
-      height: constants.generalUnit * 4
+      height: constants.generalUnit * 4,
+      [breakpoints.down("md")]: {
+        padding: `0 ${constants.generalUnit}px !important`,
+        backgroundColor: palette.additional["gray"][3]
+      }
+    },
+    optionsOpen : {
+      [breakpoints.down("md")]: {
+        minWidth: "100vw",
+        backgroundColor: palette.additional["gray"][3]
+      }
     }
   })
 )
@@ -49,6 +60,7 @@ const NotificationsDropdown = () => {
       hideIndicator={true}
       anchor="bottom-right"
       autoclose
+      classNames={{ options: classes.optionsOpen }}
     >
       <Button
         variant="tertiary"

packages/files-ui/src/Components/Layouts/AppHeader.tsx

@@ -1,14 +1,7 @@
 import React, { useCallback, useState } from "react"
 import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import clsx from "clsx"
-import {
-  Link,
-  Typography,
-  ChainsafeFilesLogo,
-  HamburgerMenu,
-  Button,
-  SearchIcon
-} from "@chainsafe/common-components"
+import { Link, Typography, ChainsafeFilesLogo, HamburgerMenu, Button, SearchIcon } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
 import SearchModule from "../Modules/SearchModule"
 import { Trans } from "@lingui/macro"
@@ -55,7 +48,7 @@ const useStyles = makeStyles(
           justifyContent: "space-between",
           alignItems: "center",
           position: "fixed",
-          backgroundColor: palette.additional["gray"][3],
+          backgroundColor: palette.additional["gray"][1],
           "&.active": {
             opacity: 1,
             visibility: "visible",
@@ -71,8 +64,7 @@ const useStyles = makeStyles(
         }
       },
       searchIcon: {
-        position: "absolute",
-        right: "10px",
+        marginRight: "10px",
         cursor: "pointer",
         "& > svg": {
           fill: constants.header.hamburger
@@ -130,6 +122,12 @@ const useStyles = makeStyles(
       },
       searchBox: {
         flex: 1
+      },
+      rightSection: {
+        display: "flex",
+        alignItems: "center",
+        position: "absolute",
+        right: 0
       }
     })
   }
@@ -173,8 +171,8 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
         !isNewDevice &&
         !shouldInitializeAccount && (
         <>
-          {desktop ? (
-            <section className={classes.headerSection}>
+          {desktop
+            ? <section className={classes.headerSection}>
               <section className={classes.searchBox}>
                 <SearchModule
                   className={classes.searchModule}
@@ -206,36 +204,40 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                 <NotificationsDropdown />
               </section>
             </section>
-          ) : (
-            <>
-              {!searchActive && (
-                <>
-                  <HamburgerMenu
-                    onClick={() => setNavOpen(!navOpen)}
-                    variant={navOpen ? "active" : "default"}
-                    className={classes.hamburgerMenu}
-                    testId="icon-hamburger-menu"
-                  />
-                  <Link
-                    className={classes.logo}
-                    to={ROUTE_LINKS.Drive("/")}
-                  >
-                    <ChainsafeFilesLogo />
-                    <Typography
-                      variant="h5"
-                      className={classes.title}
+            : <>
+              <>
+                <HamburgerMenu
+                  onClick={() => setNavOpen(!navOpen)}
+                  variant={navOpen ? "active" : "default"}
+                  className={classes.hamburgerMenu}
+                  testId="icon-hamburger-menu"
+                />
+                {!searchActive && (
+                  <>
+                    <Link
+                      className={classes.logo}
+                      to={ROUTE_LINKS.Drive("/")}
                     >
-                      Files
-                    </Typography>
-                    &nbsp;
-                    <Typography variant="caption">beta</Typography>
-                  </Link>
-                  <SearchIcon
-                    className={classes.searchIcon}
-                    onClick={() => setSearchActive(true)}
-                  />
-                </>
-              )}
+                      <ChainsafeFilesLogo />
+                      <Typography
+                        variant="h5"
+                        className={classes.title}
+                      >
+                        Files
+                      </Typography>
+                      &nbsp;
+                      <Typography variant="caption">beta</Typography>
+                    </Link>
+                    <section className={classes.rightSection}>
+                      <SearchIcon
+                        className={classes.searchIcon}
+                        onClick={() => setSearchActive(true)}
+                      />
+                      <NotificationsDropdown />
+                    </section>
+                  </>
+                )}
+              </>
               {searchActive && (
                 <SearchModule
                   className={clsx(classes.searchModule)}
@@ -244,7 +246,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                 />
               )}
             </>
-          )}
+          }
         </>
       )}
       {isTeamModalOpen && <TeamModal onHide={() => setIsTeamModalOpen(false)}/>}