From a717854251f773baae2c161d909f766be5813587 Mon Sep 17 00:00:00 2001 From: Scarlett Perry Date: Fri, 11 Dec 2020 22:12:35 -0500 Subject: [PATCH 1/6] update styling, add interface --- .../stories/user-information.stories.tsx | 23 ++-- frontend/packages/core/src/AppLayout/user.tsx | 123 ++++++++++++------ 2 files changed, 99 insertions(+), 47 deletions(-) diff --git a/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx b/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx index 5136d1b226..8c3d90868e 100644 --- a/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx +++ b/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx @@ -1,23 +1,28 @@ import * as React from "react"; -import { Grid } from "@material-ui/core"; +import styled from "@emotion/styled"; +import { Grid as MuiGrid } from "@material-ui/core"; import type { Meta } from "@storybook/react"; +import type { UserInformationProps } from "../user"; 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 = () => ( +const Grid = styled(MuiGrid)({ + height: "64px", + backgroundColor: "#131C5F", +}); + +const Template = (props: UserInformationProps) => ( - + ); export const Primary = Template.bind({}); +Primary.args = { + data: [{ value: "Dashboard" }, { value: "Settings" }], + user: "fooBar@gmail.com", +}; diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx index 0b87b6f91d..3edd240b03 100644 --- a/frontend/packages/core/src/AppLayout/user.tsx +++ b/frontend/packages/core/src/AppLayout/user.tsx @@ -4,10 +4,11 @@ import { Avatar as MuiAvatar, Box, ClickAwayListener, + Divider as MuiDivider, Grow as MuiGrow, IconButton, ListItemIcon, - ListItemText, + ListItemText as MuiListItemText, MenuItem as MuiMenuItem, MenuList, Paper as MuiPaper, @@ -25,51 +26,79 @@ const UserPhoto = styled(IconButton)({ "&:active": { background: "#2938a5", }, + ".avatar-header .MuiAvatar-root": { + height: "32px", + width: "32px", + }, }); const Avatar = styled(MuiAvatar)({ - backgroundColor: "#dce7f4", - height: "28px", - width: "28px", - border: "2px solid #f6faff", - borderRadius: "50%", + backgroundColor: "#727FE1", }); const Initials = styled(Typography)({ - color: "#0d1030", - opacity: 0.6, + color: "#FFFFFF", fontSize: "14px", fontWeight: 500, + lineHeight: "18px", }); const Paper = styled(MuiPaper)({ - width: "266px", - border: "1px solid #e2e2e6", + width: "242px", + border: "1px solid #E7E7EA", boxShadow: "0px 5px 15px rgba(53, 72, 212, 0.2)", }); const Popper = styled(MuiPopper)({ padding: "0 12px", marginLeft: "12px", + zIndex: 1101, }); -const UserProfileMenuItem = styled(MuiMenuItem)({ - "&:focus": { - background: "transparent", - }, +const MenuItem = styled(MuiMenuItem)({ "&:hover": { - background: "transparent", + backgroundColor: "#E7E7EA", + }, + "&.MuiListItem-root.Mui-focusVisible": { + backgroundColor: "#DBDBE0", + }, + "&:active": { + backgroundColor: "#EBEDFB", }, }); +const Divider = styled(MuiDivider)({ + backgroundColor: "#E7E7EA", +}); + const AvatarListItemIcon = styled(ListItemIcon)({ - marginLeft: "8px", + minWidth: "inherit", + width: "48px", + ".avatar-menu .MuiAvatar-root": { + height: "48px", + width: "48px", + }, + ".avatar-menu .MuiTypography-root": { + fontSize: "20px", + lineHeight: "24px", + }, }); -const AvatarListItemText = styled(Typography)({ - color: "#0d1030", - fontSize: "14px", - opacity: "0.6", +const AvatarListItemText = styled(MuiListItemText)({ + paddingLeft: "16px", + ".MuiTypography-root": { + color: "rgba(13, 16, 48, 0.6)", + fontSize: "14px", + lineHeight: "24px", + }, +}); + +const ListItemText = styled(MuiListItemText)({ + ".MuiTypography-root": { + color: "#0D1030", + fontSize: "14px", + lineHeight: "24px", + }, }); const Grow = styled(MuiGrow)((props: { placement: string }) => ({ @@ -96,17 +125,31 @@ const userId = (): string => { return subject; }; -const UserAvatar: React.FC = () => { +export interface UserAvatarProps { + initials: string; +} + +const UserAvatar: React.FC = ({ initials }) => { return ( - {userId().slice(0, 2).toUpperCase()} + {initials} ); }; -// TODO (sperry): add interface to render menu items +interface UserData { + value: string; + user: string; +} + +export interface UserInformationProps { + data?: UserData[]; + user?: string; +} + // TODO (sperry): investigate using popover instead of popper -const UserInformation: React.FC = () => { +const UserInformation: React.FC = ({ data, user = userId() }) => { + const userInitials = user.slice(0, 2).toUpperCase(); const [open, setOpen] = React.useState(false); const anchorRef = React.useRef(null); @@ -137,15 +180,11 @@ const UserInformation: React.FC = () => { aria-haspopup="true" onClick={handleToggle} > - +
+ +
- + {({ TransitionProps, placement }) => ( { - + - +
+ +
- - {userId()} - - + {user} + + + {data?.map(d => { + return ( + + {d.value} + + ); + })} From 27e652e51247e608f4e802cff7e7e37886bd0e2d Mon Sep 17 00:00:00 2001 From: Scarlett Perry Date: Sat, 12 Dec 2020 14:18:21 -0500 Subject: [PATCH 2/6] cleanup, add more styling --- frontend/packages/core/src/AppLayout/user.tsx | 47 ++++++++++++------- 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx index 3edd240b03..fee8224c56 100644 --- a/frontend/packages/core/src/AppLayout/user.tsx +++ b/frontend/packages/core/src/AppLayout/user.tsx @@ -10,7 +10,7 @@ import { ListItemIcon, ListItemText as MuiListItemText, MenuItem as MuiMenuItem, - MenuList, + MenuList as MuiMenuList, Paper as MuiPaper, Popper as MuiPopper, Typography, @@ -26,7 +26,7 @@ const UserPhoto = styled(IconButton)({ "&:active": { background: "#2938a5", }, - ".avatar-header .MuiAvatar-root": { + ".MuiAvatar-root": { height: "32px", width: "32px", }, @@ -55,7 +55,21 @@ const Popper = styled(MuiPopper)({ zIndex: 1101, }); +const MenuList = styled(MuiMenuList)({ + padding: "0px", + borderRadius: "4px", + ".avatar-menu-item": { + padding: "16px 0 16px 0", + }, + ".avatar-menu-item .MuiMenuItem-root": { + height: "52px", + padding: "0 16px 0 16px", + }, +}); + const MenuItem = styled(MuiMenuItem)({ + height: "48px", + padding: "12px", "&:hover": { backgroundColor: "#E7E7EA", }, @@ -74,11 +88,11 @@ const Divider = styled(MuiDivider)({ const AvatarListItemIcon = styled(ListItemIcon)({ minWidth: "inherit", width: "48px", - ".avatar-menu .MuiAvatar-root": { + ".MuiAvatar-root": { height: "48px", width: "48px", }, - ".avatar-menu .MuiTypography-root": { + ".MuiTypography-root": { fontSize: "20px", lineHeight: "24px", }, @@ -86,6 +100,7 @@ const AvatarListItemIcon = styled(ListItemIcon)({ const AvatarListItemText = styled(MuiListItemText)({ paddingLeft: "16px", + margin: "0px", ".MuiTypography-root": { color: "rgba(13, 16, 48, 0.6)", fontSize: "14px", @@ -94,6 +109,7 @@ const AvatarListItemText = styled(MuiListItemText)({ }); const ListItemText = styled(MuiListItemText)({ + margin: "0px", ".MuiTypography-root": { color: "#0D1030", fontSize: "14px", @@ -139,7 +155,6 @@ const UserAvatar: React.FC = ({ initials }) => { interface UserData { value: string; - user: string; } export interface UserInformationProps { @@ -180,9 +195,7 @@ const UserInformation: React.FC = ({ data, user = userId() aria-haspopup="true" onClick={handleToggle} > -
- -
+ {({ TransitionProps, placement }) => ( @@ -193,15 +206,17 @@ const UserInformation: React.FC = ({ data, user = userId() - - -
+
+ + -
- - {user} - - + + {user} + +
+ { + data?.length > 0 ? : null + } {data?.map(d => { return ( From f1176e282804ee688e2488d72f53ea72b23d9427 Mon Sep 17 00:00:00 2001 From: Scarlett Perry Date: Sat, 12 Dec 2020 18:31:47 -0500 Subject: [PATCH 3/6] remove typography component, simplify conditional logic --- frontend/packages/core/src/AppLayout/user.tsx | 30 +++++-------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx index fee8224c56..f975f2589b 100644 --- a/frontend/packages/core/src/AppLayout/user.tsx +++ b/frontend/packages/core/src/AppLayout/user.tsx @@ -13,7 +13,6 @@ import { MenuList as MuiMenuList, Paper as MuiPaper, Popper as MuiPopper, - Typography, } from "@material-ui/core"; import Cookies from "js-cookie"; import jwtDecode from "jwt-decode"; @@ -34,9 +33,6 @@ const UserPhoto = styled(IconButton)({ const Avatar = styled(MuiAvatar)({ backgroundColor: "#727FE1", -}); - -const Initials = styled(Typography)({ color: "#FFFFFF", fontSize: "14px", fontWeight: 500, @@ -91,8 +87,6 @@ const AvatarListItemIcon = styled(ListItemIcon)({ ".MuiAvatar-root": { height: "48px", width: "48px", - }, - ".MuiTypography-root": { fontSize: "20px", lineHeight: "24px", }, @@ -141,16 +135,12 @@ const userId = (): string => { return subject; }; -export interface UserAvatarProps { +interface UserAvatarProps { initials: string; } const UserAvatar: React.FC = ({ initials }) => { - return ( - - {initials} - - ); + return {initials}; }; interface UserData { @@ -214,16 +204,12 @@ const UserInformation: React.FC = ({ data, user = userId() {user} - { - data?.length > 0 ? : null - } - {data?.map(d => { - return ( - - {d.value} - - ); - })} + {data?.length === 0 ? null : } + {data?.map(d => ( + + {d.value} + + ))} From f7730f6980b8eb6094aaac5f9d34680f60fb3dcc Mon Sep 17 00:00:00 2001 From: Scarlett Perry Date: Mon, 14 Dec 2020 11:35:04 -0500 Subject: [PATCH 4/6] clean up css, fix popper alignment --- frontend/packages/core/src/AppLayout/user.tsx | 75 ++++++++++--------- 1 file changed, 38 insertions(+), 37 deletions(-) diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx index f975f2589b..1d5f64ee94 100644 --- a/frontend/packages/core/src/AppLayout/user.tsx +++ b/frontend/packages/core/src/AppLayout/user.tsx @@ -2,7 +2,6 @@ import React from "react"; import styled from "@emotion/styled"; import { Avatar as MuiAvatar, - Box, ClickAwayListener, Divider as MuiDivider, Grow as MuiGrow, @@ -25,18 +24,20 @@ const UserPhoto = styled(IconButton)({ "&:active": { background: "#2938a5", }, + // avatar on header ".MuiAvatar-root": { height: "32px", width: "32px", + fontSize: "14px", + lineHeight: "18px", }, }); +// css for both header and menu avatar const Avatar = styled(MuiAvatar)({ backgroundColor: "#727FE1", color: "#FFFFFF", - fontSize: "14px", fontWeight: 500, - lineHeight: "18px", }); const Paper = styled(MuiPaper)({ @@ -46,44 +47,37 @@ const Paper = styled(MuiPaper)({ }); const Popper = styled(MuiPopper)({ - padding: "0 12px", - marginLeft: "12px", + padding: "0 6px", + marginLeft: "6px", zIndex: 1101, }); const MenuList = styled(MuiMenuList)({ padding: "0px", borderRadius: "4px", - ".avatar-menu-item": { - padding: "16px 0 16px 0", - }, - ".avatar-menu-item .MuiMenuItem-root": { - height: "52px", - padding: "0 16px 0 16px", + ".MuiMenuItem-root": { + "&:hover": { + backgroundColor: "#E7E7EA", + }, + "&.MuiListItem-root.Mui-focusVisible": { + backgroundColor: "#DBDBE0", + }, + "&:active": { + backgroundColor: "#EBEDFB", + }, }, }); -const MenuItem = styled(MuiMenuItem)({ - height: "48px", - padding: "12px", - "&:hover": { - backgroundColor: "#E7E7EA", - }, - "&.MuiListItem-root.Mui-focusVisible": { - backgroundColor: "#DBDBE0", - }, - "&:active": { - backgroundColor: "#EBEDFB", - }, -}); - -const Divider = styled(MuiDivider)({ - backgroundColor: "#E7E7EA", +const AvatarMenuItem = styled(MuiMenuItem)({ + height: "52px", + margin: "16px 0 16px 0", + padding: "0 16px 0 16px", }); const AvatarListItemIcon = styled(ListItemIcon)({ minWidth: "inherit", width: "48px", + // avatar on menu ".MuiAvatar-root": { height: "48px", width: "48px", @@ -102,6 +96,11 @@ const AvatarListItemText = styled(MuiListItemText)({ }, }); +const MenuItem = styled(MuiMenuItem)({ + height: "48px", + padding: "12px", +}); + const ListItemText = styled(MuiListItemText)({ margin: "0px", ".MuiTypography-root": { @@ -111,6 +110,10 @@ const ListItemText = styled(MuiListItemText)({ }, }); +const Divider = styled(MuiDivider)({ + backgroundColor: "#E7E7EA", +}); + const Grow = styled(MuiGrow)((props: { placement: string }) => ({ transformOrigin: props.placement, })); @@ -177,7 +180,7 @@ const UserInformation: React.FC = ({ data, user = userId() } return ( - + <> = ({ data, user = userId() -
- - - - - {user} - -
+ + + + + {user} + {data?.length === 0 ? null : } {data?.map(d => ( @@ -216,7 +217,7 @@ const UserInformation: React.FC = ({ data, user = userId() )} - + ); }; From 2cdf30ef2fa818ac4707ffcb64e00b270bc34353 Mon Sep 17 00:00:00 2001 From: Scarlett Perry Date: Mon, 14 Dec 2020 11:41:53 -0500 Subject: [PATCH 5/6] add more comments --- frontend/packages/core/src/AppLayout/user.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx index 1d5f64ee94..138be67170 100644 --- a/frontend/packages/core/src/AppLayout/user.tsx +++ b/frontend/packages/core/src/AppLayout/user.tsx @@ -33,7 +33,7 @@ const UserPhoto = styled(IconButton)({ }, }); -// css for both header and menu avatar +// header and menu avatar const Avatar = styled(MuiAvatar)({ backgroundColor: "#727FE1", color: "#FFFFFF", @@ -59,15 +59,13 @@ const MenuList = styled(MuiMenuList)({ "&:hover": { backgroundColor: "#E7E7EA", }, - "&.MuiListItem-root.Mui-focusVisible": { - backgroundColor: "#DBDBE0", - }, "&:active": { backgroundColor: "#EBEDFB", }, }, }); +// user details menu item const AvatarMenuItem = styled(MuiMenuItem)({ height: "52px", margin: "16px 0 16px 0", @@ -96,6 +94,7 @@ const AvatarListItemText = styled(MuiListItemText)({ }, }); +// default menu items const MenuItem = styled(MuiMenuItem)({ height: "48px", padding: "12px", From dcd413d4b422f2eb2e585661d5723baf721de0fe Mon Sep 17 00:00:00 2001 From: Scarlett Perry Date: Mon, 14 Dec 2020 18:15:40 -0500 Subject: [PATCH 6/6] change email, keep padding the same --- .../core/src/AppLayout/stories/user-information.stories.tsx | 2 +- frontend/packages/core/src/AppLayout/user.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx b/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx index 8c3d90868e..b93bddedcb 100644 --- a/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx +++ b/frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx @@ -24,5 +24,5 @@ const Template = (props: UserInformationProps) => ( export const Primary = Template.bind({}); Primary.args = { data: [{ value: "Dashboard" }, { value: "Settings" }], - user: "fooBar@gmail.com", + user: "fooBar@example.com", }; diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx index 138be67170..6a4f6cd431 100644 --- a/frontend/packages/core/src/AppLayout/user.tsx +++ b/frontend/packages/core/src/AppLayout/user.tsx @@ -47,8 +47,8 @@ const Paper = styled(MuiPaper)({ }); const Popper = styled(MuiPopper)({ - padding: "0 6px", - marginLeft: "6px", + padding: "0 12px", + marginLeft: "12px", zIndex: 1101, });