notifications UI ready

packages/common-components/src/Icons/icons/Bell.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as BellSvg } from "../svgs/bell.svg"
+
+export { BellSvg }
+
+export default createSvgIcon(<BellSvg />)

packages/common-components/src/Icons/index.ts

@@ -5,6 +5,7 @@ export { default as AppleLogoIcon, AppleLogoSvg } from "./icons/AppleLogo.icon"
 export { default as AmexCardIcon, AmexCardSvg } from "./icons/AmexCard.icon"
 export { default as ArrowLeftIcon, ArrowLeftSvg } from "./icons/ArrowLeft.icon"
 export { default as ArrowRightIcon, ArrowRightSvg } from "./icons/ArrowRight.icon"
+export { default as BellIcon, BellSvg } from "./icons/Bell.icon"
 export { default as BulbIcon, BulbSvg } from "./icons/Bulb.icon"
 export { default as CaretDownIcon, CaretDownSvg } from "./icons/CaretDown.icon"
 export { default as CaretUpIcon, CaretUpSvg } from "./icons/CaretUp.icon"

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

@@ -177,7 +177,9 @@ interface IMenuDropdownProps {
     title?: string
     titleText?: string
   }
+  hideIndicator?: boolean
   testId?: string
+  children?: React.ReactNode
 }
 
 const MenuDropdown = ({
@@ -189,7 +191,9 @@ const MenuDropdown = ({
   animation = "flip",
   title,
   classNames,
-  testId
+  testId,
+  children,
+  hideIndicator
 }: IMenuDropdownProps) => {
   const Icon = indicator
   const classes = useStyles()
@@ -201,6 +205,7 @@ const MenuDropdown = ({
       setOpen(false)
     }
   })
+
   return (
     <div
       ref={ref}
@@ -222,11 +227,13 @@ const MenuDropdown = ({
             {title}
           </Typography>
         )}
-        <Icon
+        {children && children}
+        {!hideIndicator && <Icon
           className={clsx(classes.icon, animation, classNames?.icon, {
             ["open"]: open
           })}
         />
+        }
       </section>
       <Paper
         shadow="shadow2"

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

@@ -0,0 +1,99 @@
+import React from "react"
+import { Button, BellIcon, MenuDropdown, Typography } from "@chainsafe/common-components"
+import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+dayjs.extend(relativeTime)
+
+const useStyles = makeStyles(({ palette, constants }: ITheme) =>
+  createStyles({
+    notificationsButton: {
+      position: "relative"
+    },
+    badge: {
+      position: "absolute",
+      background: palette.additional["red"][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: "12px",
+      lineHeight: "12px"
+    },
+    notificationBody: {
+      margin: `0 ${constants.generalUnit * 1.5}px`,
+      padding: constants.generalUnit,
+      display: "flex",
+      alignItems: "center"
+    },
+    notificationItem: {
+      padding: 0,
+      borderBottom: `1px solid ${palette.additional["gray"][5]}`,
+      ":last-child": {
+        border: "none"
+      }
+    },
+    notificationTitle: {
+      color: palette.additional["gray"][9],
+      paddingRight: constants.generalUnit * 1.5,
+      width: 180
+    },
+    notificationTime: {
+      color: palette.primary.main
+    }
+  })
+)
+
+interface INotificationsDropdownProps {
+  notifications: {
+    title: string
+    subtitle?: string
+    createdAt: Date
+    onClick?: () => void
+  }[]
+}
+
+const NotificationsDropdown: React.FC<INotificationsDropdownProps> = ({ notifications }) => {
+  const classes = useStyles()
+
+  return (
+    <MenuDropdown
+      menuItems={notifications.map((n) => ({
+        contents: <div className={classes.notificationBody}>
+          <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>,
+        onClick: n.onClick
+      }))}
+      hideIndicator={true}
+      anchor="bottom-right"
+      classNames={{
+        item: classes.notificationItem
+      }}
+    >
+      <Button variant="outline">
+        <div className={classes.notificationsButton}>
+          <BellIcon />
+          {!!notifications.length && <div className={classes.badge}>
+            {notifications.length}
+          </div>
+          }
+        </div>
+      </Button>
+    </MenuDropdown>
+  )
+}
+
+export default NotificationsDropdown

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

@@ -19,6 +19,7 @@ import { CSFTheme } from "../../Themes/types"
 import { useUser } from "../../Contexts/UserContext"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
 import TeamModal from "../Elements/TeamModal"
+import NotificationsDropdown from "../Elements/NotificationsDropdown"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
@@ -155,6 +156,13 @@ const useStyles = makeStyles(
             marginLeft: constants.generalUnit * 2
           }
         }
+      },
+      headerSection: {
+        display: "flex",
+        alignItems: "center"
+      },
+      searchBox: {
+        flex: 1
       }
     })
   }
@@ -211,8 +219,8 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
         !shouldInitializeAccount && (
         <>
           {desktop ? (
-            <>
-              <section>
+            <section className={classes.headerSection}>
+              <section className={classes.searchBox}>
                 <SearchModule
                   className={classes.searchModule}
                   searchActive={searchActive}
@@ -239,6 +247,9 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                   <Trans>Start a team</Trans>
                 </Button>
               </section>
+              <section>
+                <NotificationsDropdown notifications={[]} />
+              </section>
               <section className={classes.accountControls}>
                 <MenuDropdown
                   title={getProfileTitle()}
@@ -266,7 +277,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                   ]}
                 />
               </section>
-            </>
+            </section>
           ) : (
             <>
               {!searchActive && (