From 73cc79dfff8ae6704ac991fc6f518c4d77fa6f3a Mon Sep 17 00:00:00 2001
From: Scarlett Perry <39421794+scarlettperry@users.noreply.github.com>
Date: Thu, 3 Dec 2020 14:27:40 -0500
Subject: [PATCH] ui v2: header (#696)

---
 .../packages/core/src/AppLayout/header.tsx    |  61 ++++----
 frontend/packages/core/src/AppLayout/logo.tsx |  19 +--
 .../core/src/AppLayout/notifications.tsx      |  86 ++++++++++++
 .../src/AppLayout/stories/header.stories.tsx  |  27 ++++
 .../stories/notifications.stories.tsx         |  17 +++
 .../stories/user-information.stories.tsx      |  23 +++
 frontend/packages/core/src/AppLayout/user.tsx | 131 +++++++++++++-----
 7 files changed, 287 insertions(+), 77 deletions(-)
 create mode 100644 frontend/packages/core/src/AppLayout/notifications.tsx
 create mode 100644 frontend/packages/core/src/AppLayout/stories/header.stories.tsx
 create mode 100644 frontend/packages/core/src/AppLayout/stories/notifications.stories.tsx
 create mode 100644 frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx

diff --git a/frontend/packages/core/src/AppLayout/header.tsx b/frontend/packages/core/src/AppLayout/header.tsx
index a9da4a4f87..95c15f553e 100644
--- a/frontend/packages/core/src/AppLayout/header.tsx
+++ b/frontend/packages/core/src/AppLayout/header.tsx
@@ -1,46 +1,33 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import {
-  AppBar as MuiAppBar,
-  Box,
-  Divider as MuiDivider,
-  IconButton,
-  Toolbar,
-  Typography,
-} from "@material-ui/core";
+import styled from "@emotion/styled";
+import { AppBar as MuiAppBar, Box, Grid, IconButton, Toolbar, Typography } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";
-import styled from "styled-components";
 
 import Drawer from "./drawer";
 import Logo from "./logo";
+import Notifications from "./notifications";
 import SearchField from "./search";
 import { UserInformation } from "./user";
 
-const AppBar = styled(MuiAppBar)`
-  ${({ theme }) => `
-  min-width: fit-content;
-  background-color: ${theme.palette.secondary.main};
-  color: ${theme.palette.primary.main};
-  min-width: fit-content;
-  `}
-`;
+// TODO (sperry): make header responsive for small devices
+const AppBar = styled(MuiAppBar)({
+  minWidth: "fit-content",
+  background: "linear-gradient(90deg, #38106b 4.58%, #131c5f 89.31%)",
+});
 
-const MenuButton = styled(IconButton)`
-  padding: 12px;
-  margin-left: -12px;
-`;
+const MenuButton = styled(IconButton)({
+  padding: "12px",
+  marginLeft: "-12px",
+});
 
-const Title = styled(Typography)`
-  margin-right: 25px;
-  font-weight: bolder;
-`;
-
-const Divider = styled(MuiDivider)`
-  ${({ theme }) => `
-  background-color: ${theme.palette.primary.main};
-  margin: 16px 8px;
-  `}
-`;
+// TODO (sperry): remove marginRight in new search bar design
+const Title = styled(Typography)({
+  margin: "12px 25px 12px 8px",
+  fontWeight: "bold",
+  fontSize: "20px",
+  color: "rgba(255, 255, 255, 0.87)",
+});
 
 const Header: React.FC = () => {
   const [drawerOpen, setDrawerOpen] = React.useState(false);
@@ -68,7 +55,7 @@ const Header: React.FC = () => {
 
   return (
     <>
-      <AppBar position="static" color="secondary">
+      <AppBar position="static" elevation={0}>
         <Toolbar>
           <MenuButton onClick={openDrawer} edge="start" color="primary" data-qa="menuBtn">
             <MenuIcon />
@@ -76,12 +63,14 @@ const Header: React.FC = () => {
           <Link to="/">
             <Logo />
           </Link>
-          <Divider orientation="vertical" flexItem />
-          <Title variant="h5">clutch</Title>
+          <Title>clutch</Title>
           <Box />
           <SearchField />
           <Box />
-          <UserInformation />
+          <Grid container alignItems="center" justify="flex-end">
+            <Notifications />
+            <UserInformation />
+          </Grid>
         </Toolbar>
       </AppBar>
       <Drawer open={drawerOpen} onClose={onDrawerClose} />
diff --git a/frontend/packages/core/src/AppLayout/logo.tsx b/frontend/packages/core/src/AppLayout/logo.tsx
index 8fe6a34b3b..1587498402 100644
--- a/frontend/packages/core/src/AppLayout/logo.tsx
+++ b/frontend/packages/core/src/AppLayout/logo.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import styled, { keyframes } from "styled-components";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
 
 const rotate = keyframes`
   from {
@@ -10,13 +11,15 @@ const rotate = keyframes`
   }
 `;
 
-const StyledSvg = styled.svg`
-  height: 40px;
-  width: 40px;
-  &:hover {
-    animation: ${rotate} 5s linear;
-  }
-`;
+const StyledSvg = styled.svg({
+  height: "48px",
+  width: "48px",
+  padding: "8px",
+  "&:hover": {
+    animation: `${rotate} 5s linear`,
+  },
+  verticalAlign: "middle",
+});
 
 const Logo: React.FC = () => (
   <StyledSvg id="logo" viewBox="0 0 250 250">
diff --git a/frontend/packages/core/src/AppLayout/notifications.tsx b/frontend/packages/core/src/AppLayout/notifications.tsx
new file mode 100644
index 0000000000..33dadea4e6
--- /dev/null
+++ b/frontend/packages/core/src/AppLayout/notifications.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import styled from "@emotion/styled";
+import {
+  Box,
+  ClickAwayListener,
+  Grow as MuiGrow,
+  IconButton,
+  MenuList,
+  Paper,
+  Popper,
+} from "@material-ui/core";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+
+const StyledNotificationsIcon = styled(IconButton)({
+  color: "#ffffff",
+  margin: "8px",
+  padding: "12px",
+  "&:hover": {
+    background: "#2d3db4",
+  },
+  "&:active": {
+    background: "#2938a5",
+  },
+});
+
+const Grow = styled(MuiGrow)((props: { placement: string }) => ({
+  transformOrigin: props.placement,
+}));
+
+// TODO (sperry): add interface to render menu items
+const Notifications: React.FC = () => {
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+
+  const handleToggle = () => {
+    setOpen(!open);
+  };
+
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  function handleListKeyDown(event) {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  return (
+    <Box>
+      <StyledNotificationsIcon
+        ref={anchorRef}
+        edge="end"
+        aria-controls={open ? "notification-options" : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <NotificationsIcon />
+      </StyledNotificationsIcon>
+      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            placement={placement === "bottom" ? "center top" : "center bottom"}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList
+                  autoFocusItem={open}
+                  id="notification-options"
+                  onKeyDown={handleListKeyDown}
+                />
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </Box>
+  );
+};
+
+export default Notifications;
diff --git a/frontend/packages/core/src/AppLayout/stories/header.stories.tsx b/frontend/packages/core/src/AppLayout/stories/header.stories.tsx
new file mode 100644
index 0000000000..dba49e0dc6
--- /dev/null
+++ b/frontend/packages/core/src/AppLayout/stories/header.stories.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { MemoryRouter } from "react-router";
+import type { Meta } from "@storybook/react";
+
+import { ApplicationContext } from "../../Contexts/app-context";
+import Header from "../header";
+
+export default {
+  title: "Core/AppLayout/Header",
+  component: Header,
+  decorators: [
+    () => (
+      <MemoryRouter>
+        <Header />
+      </MemoryRouter>
+    ),
+    StoryFn => {
+      return (
+        <ApplicationContext.Provider value={{ workflows: [] }}>
+          <StoryFn />
+        </ApplicationContext.Provider>
+      );
+    },
+  ],
+} as Meta;
+
+export const Primary: React.FC<{}> = () => <Header />;
diff --git a/frontend/packages/core/src/AppLayout/stories/notifications.stories.tsx b/frontend/packages/core/src/AppLayout/stories/notifications.stories.tsx
new file mode 100644
index 0000000000..0a704847a8
--- /dev/null
+++ b/frontend/packages/core/src/AppLayout/stories/notifications.stories.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { Meta } from "@storybook/react";
+
+import Notifications from "../notifications";
+
+export default {
+  title: "Core/AppLayout/Notifications",
+  component: Notifications,
+  parameters: {
+    backgrounds: {
+      default: "header blue",
+      values: [{ name: "header blue", value: "#131C5F" }],
+    },
+  },
+} as Meta;
+
+export const Primary: React.FC<{}> = () => <Notifications />;
diff --git a/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx b/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx
new file mode 100644
index 0000000000..91a70fe3e7
--- /dev/null
+++ b/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Grid } from "@material-ui/core";
+import type { Meta } from "@storybook/react";
+
+import { UserInformation } from "../user";
+
+export default {
+  title: "Core/AppLayout/User Information",
+  component: UserInformation,
+  parameters: {
+    backgrounds: {
+      default: "header blue",
+      values: [{ name: "header blue", value: "#131C5F" }],
+    },
+  },
+} as Meta;
+
+const Template = () => (
+  <Grid container alignItems="center" justify="flex-end">
+    <UserInformation />
+  </Grid>
+);
+export const Primary = Template.bind({});
diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx
index 01a5dd0f88..0b87b6f91d 100644
--- a/frontend/packages/core/src/AppLayout/user.tsx
+++ b/frontend/packages/core/src/AppLayout/user.tsx
@@ -1,37 +1,80 @@
 import React from "react";
+import styled from "@emotion/styled";
 import {
   Avatar as MuiAvatar,
+  Box,
   ClickAwayListener,
-  Grid,
-  Grow,
+  Grow as MuiGrow,
   IconButton,
+  ListItemIcon,
+  ListItemText,
+  MenuItem as MuiMenuItem,
   MenuList,
-  Paper,
-  Popper,
+  Paper as MuiPaper,
+  Popper as MuiPopper,
   Typography,
 } from "@material-ui/core";
 import Cookies from "js-cookie";
 import jwtDecode from "jwt-decode";
-import styled from "styled-components";
-
-const UserPhoto = styled(IconButton)`
-  ${({ theme }) => `
-  padding: 1px 0 ${theme.spacing(0.5)}px 12px;
-  margin-right: ${theme.spacing(0.5)}px;
-  `}
-`;
-
-const Avatar = styled(MuiAvatar)`
-  ${({ theme }) => `
-  background-color: ${theme.palette.text.secondary}
-  `}
-`;
-
-const Initials = styled(Typography)`
-  ${({ theme }) => `
-  color: ${theme.palette.accent.main}
-  `}
-`;
+
+const UserPhoto = styled(IconButton)({
+  padding: "12px",
+  "&:hover": {
+    background: "#2d3db4",
+  },
+  "&:active": {
+    background: "#2938a5",
+  },
+});
+
+const Avatar = styled(MuiAvatar)({
+  backgroundColor: "#dce7f4",
+  height: "28px",
+  width: "28px",
+  border: "2px solid #f6faff",
+  borderRadius: "50%",
+});
+
+const Initials = styled(Typography)({
+  color: "#0d1030",
+  opacity: 0.6,
+  fontSize: "14px",
+  fontWeight: 500,
+});
+
+const Paper = styled(MuiPaper)({
+  width: "266px",
+  border: "1px solid #e2e2e6",
+  boxShadow: "0px 5px 15px rgba(53, 72, 212, 0.2)",
+});
+
+const Popper = styled(MuiPopper)({
+  padding: "0 12px",
+  marginLeft: "12px",
+});
+
+const UserProfileMenuItem = styled(MuiMenuItem)({
+  "&:focus": {
+    background: "transparent",
+  },
+  "&:hover": {
+    background: "transparent",
+  },
+});
+
+const AvatarListItemIcon = styled(ListItemIcon)({
+  marginLeft: "8px",
+});
+
+const AvatarListItemText = styled(Typography)({
+  color: "#0d1030",
+  fontSize: "14px",
+  opacity: "0.6",
+});
+
+const Grow = styled(MuiGrow)((props: { placement: string }) => ({
+  transformOrigin: props.placement,
+}));
 
 interface JwtToken {
   sub: string;
@@ -53,6 +96,16 @@ const userId = (): string => {
   return subject;
 };
 
+const UserAvatar: React.FC = () => {
+  return (
+    <Avatar>
+      <Initials>{userId().slice(0, 2).toUpperCase()}</Initials>
+    </Avatar>
+  );
+};
+
+// TODO (sperry): add interface to render menu items
+// TODO (sperry): investigate using popover instead of popper
 const UserInformation: React.FC = () => {
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
@@ -76,8 +129,7 @@ const UserInformation: React.FC = () => {
   }
 
   return (
-    <Grid container alignItems="center" justify="flex-end">
-      <div>{userId()}</div>
+    <Box>
       <UserPhoto
         ref={anchorRef}
         edge="end"
@@ -85,25 +137,38 @@ const UserInformation: React.FC = () => {
         aria-haspopup="true"
         onClick={handleToggle}
       >
-        <Avatar>
-          <Initials variant="h6">{userId().slice(0, 2).toUpperCase()}</Initials>
-        </Avatar>
+        <UserAvatar />
       </UserPhoto>
-      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        placement="bottom-end"
+      >
         {({ TransitionProps, placement }) => (
           <Grow
             {...TransitionProps}
-            style={{ transformOrigin: placement === "bottom" ? "center top" : "center bottom" }}
+            placement={placement === "bottom" ? "center top" : "center bottom"}
           >
             <Paper>
               <ClickAwayListener onClickAway={handleClose}>
-                <MenuList autoFocusItem={open} id="account-options" onKeyDown={handleListKeyDown} />
+                <MenuList autoFocusItem={open} id="account-options" onKeyDown={handleListKeyDown}>
+                  <UserProfileMenuItem>
+                    <AvatarListItemIcon>
+                      <UserAvatar />
+                    </AvatarListItemIcon>
+                    <ListItemText>
+                      <AvatarListItemText>{userId()}</AvatarListItemText>
+                    </ListItemText>
+                  </UserProfileMenuItem>
+                </MenuList>
               </ClickAwayListener>
             </Paper>
           </Grow>
         )}
       </Popper>
-    </Grid>
+    </Box>
   );
 };