Small notification refactor

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

@@ -0,0 +1,82 @@
+import React from "react"
+import { Typography, ScrollbarWrapper } 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",
+      backgroundColor: "initial",
+      "&:hover": {
+        backgroundColor: palette.additional["gray"][3]
+      },
+      "svg": {
+        fill: palette.additional["gray"][9]
+      },
+      borderBottom: `1px solid ${palette.additional["gray"][5]}`,
+      ":last-child": {
+        border: "none"
+      }
+    },
+    notificationTitle: {
+      color: palette.additional["gray"][9],
+      paddingRight: constants.generalUnit * 1.5,
+      width: 180
+    },
+    scrollContent: {
+      minWidth: 300
+    },
+    notificationTime: {
+      color: palette.additional["blue"][6]
+    }
+  })
+)
+
+interface INotificationListProps {
+  notifications: Notification[]
+}
+
+const NotificationList = ({ notifications }: INotificationListProps) => {
+  const classes = useStyles()
+
+  return (
+    <ScrollbarWrapper
+      autoHide={true}
+      maxHeight={300}
+      className={classes.scrollContent}
+    >
+      <div>
+        {notifications.map((n, i) => (
+          <div
+            key={i}
+            className={classes.notificationBody}
+            onClick={n.onClick}
+          >
+            <Typography
+              variant="body2"
+              className={classes.notificationTitle}
+              component="p"
+            >
+              {n.title}
+            </Typography>
+            <Typography
+              variant="body2"
+              className={classes.notificationTime}
+              component="p"
+            >
+              {dayjs(n.createdAt).fromNow()}
+            </Typography>
+          </div>
+        ))}
+      </div>
+    </ScrollbarWrapper>
+  )}
+
+export default NotificationList

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

@@ -0,0 +1,66 @@
+import React from "react"
+import { Button, BellIcon, MenuDropdown } from "@chainsafe/common-components"
+import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
+import NotificationList from "./NotificationList"
+
+const useStyles = makeStyles(({ palette, constants }: ITheme) =>
+  createStyles({
+    notificationsButton: {
+      position: "relative",
+      "span": {
+        transition: "none"
+      }
+    },
+    badge: {
+      position: "absolute",
+      background: palette.additional["volcano"][6],
+      color: palette.additional["gray"][1],
+      top: "-2px",
+      left: "13px",
+      borderRadius: constants.generalUnit,
+      padding: `${constants.generalUnit * 0.25}px ${constants.generalUnit * 0.5}px`,
+      fontSize: "11px",
+      lineHeight: "11px",
+      height: "0.9rem",
+      minWidth: "1rem"
+    },
+    icon: {
+      transition: "none"
+    }
+  })
+)
+
+export interface Notification {
+  title: string
+  createdAt: Date
+  onClick?: () => void
+}
+
+interface INotificationsDropdownProps {
+  notifications: Notification[]
+}
+
+const NotificationsDropdown = ({ notifications }: INotificationsDropdownProps) => {
+  const classes = useStyles()
+
+  return (
+    <MenuDropdown
+      menuItems={[]}
+      dropdown={<NotificationList notifications={notifications}/>}
+      hideIndicator={true}
+      anchor="bottom-right"
+    >
+      <Button variant="tertiary">
+        <div className={classes.notificationsButton}>
+          <BellIcon className={classes.icon} />
+          {!!notifications.length && <div className={classes.badge}>
+            {notifications.length}
+          </div>
+          }
+        </div>
+      </Button>
+    </MenuDropdown>
+  )
+}
+
+export default NotificationsDropdown

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

@@ -16,7 +16,7 @@ import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
 import { CSFTheme } from "../../Themes/types"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
 import TeamModal from "../Elements/TeamModal"
-import NotificationsDropdown from "../Elements/NotificationsDropdown"
+import NotificationsDropdown from "../Elements/Notifications/NotificationsDropdown"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {