notifications for billing

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

@@ -168,7 +168,7 @@ interface IMenuDropdownProps {
   | "bottom-left"
   | "bottom-center"
   | "bottom-right"
-  menuItems: IMenuItem[]
+  menuItems?: IMenuItem[]
   title?: string
   classNames?: {
     icon?: string
@@ -177,7 +177,10 @@ interface IMenuDropdownProps {
     title?: string
     titleText?: string
   }
+  hideIndicator?: boolean
   testId?: string
+  children?: React.ReactNode
+  dropdown?: React.ReactNode
 }
 
 const MenuDropdown = ({
@@ -189,7 +192,10 @@ const MenuDropdown = ({
   animation = "flip",
   title,
   classNames,
-  testId
+  testId,
+  children,
+  hideIndicator,
+  dropdown
 }: IMenuDropdownProps) => {
   const Icon = indicator
   const classes = useStyles()
@@ -201,6 +207,7 @@ const MenuDropdown = ({
       setOpen(false)
     }
   })
+
   return (
     <div
       ref={ref}
@@ -222,19 +229,21 @@ const MenuDropdown = ({
             {title}
           </Typography>
         )}
-        <Icon
+        {children}
+        {!hideIndicator && <Icon
           className={clsx(classes.icon, animation, classNames?.icon, {
             ["open"]: open
           })}
         />
+        }
       </section>
       <Paper
         shadow="shadow2"
         className={clsx(classes.options, classNames?.options, anchor, {
           ["open"]: open
         })}
       >
-        {menuItems.map((item: IMenuItem, index: number) => (
+        {menuItems && menuItems.map((item: IMenuItem, index: number) => (
           <div
             data-testid={`dropdown-item-${testId}`}
             key={`menu-${index}`}
@@ -247,6 +256,7 @@ const MenuDropdown = ({
             {item.contents}
           </div>
         ))}
+        {dropdown}
       </Paper>
     </div>
   )

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

@@ -0,0 +1,122 @@
+import React from "react"
+import { Button, BellIcon, MenuDropdown, Typography, ScrollbarWrapper } 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",
+      "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"
+    },
+    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]
+    },
+    icon: {
+      transition: "none"
+    }
+  })
+)
+
+interface INotificationsDropdownProps {
+  notifications: {
+    title: string
+    createdAt: Date
+    onClick?: () => void
+  }[]
+}
+
+const NotificationsDropdown: React.FC<INotificationsDropdownProps> = ({ notifications }) => {
+  const classes = useStyles()
+
+  return (
+    <MenuDropdown
+      dropdown={
+        <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>
+      }
+      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

@@ -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,11 @@ 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 +279,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                   ]}
                 />
               </section>
-            </>
+            </section>
           ) : (
             <>
               {!searchActive && (