Place user dropdown in app nav (#1685)

* notifications UI ready * notifications ready * removed from header * user dropdown * Update packages/files-ui/src/Components/Elements/NotificationsDropdown.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update packages/common-components/src/MenuDropdown/MenuDropdown.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * badhe color placement * notification as dropdown * added scrollbar * transition * hashicon added * Update packages/files-ui/src/Components/Layouts/AppHeader.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * lint fix * drop down ready * padding Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · Nov 5, 2021 · da47f1d · da47f1d
1 parent 5bb4490
commit da47f1d
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 141 deletions.
diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json
@@ -8,6 +8,7 @@
     "@chainsafe/browser-storage-hooks": "^1.0.1",
     "@chainsafe/files-api-client": "^1.18.19",
     "@chainsafe/web3-context": "1.1.4",
+    "@emeraldpay/hashicon-react": "^0.5.1",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",
     "@material-ui/core": "^4.12.3",

diff --git a/packages/files-ui/src/Components/Layouts/AppHeader.tsx b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
@@ -6,9 +6,6 @@ import {
   Typography,
   ChainsafeFilesLogo,
   HamburgerMenu,
-  MenuDropdown,
-  PowerDownSvg,
-  useHistory,
   Button,
   SearchIcon
 } from "@chainsafe/common-components"
@@ -17,7 +14,6 @@ import SearchModule from "../Modules/SearchModule"
 import { Trans } from "@lingui/macro"
 import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
 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"
@@ -104,16 +100,6 @@ const useStyles = makeStyles(
           }
         }
       },
-      accountControls: {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        flexDirection: "row",
-
-        "& > *:first-child": {
-          marginRight: constants.generalUnit * 2
-        }
-      },
       searchModule: {
         [breakpoints.down("md")]: {
           height: constants.mobileHeaderHeight,
@@ -122,31 +108,6 @@ const useStyles = makeStyles(
           zIndex: zIndex?.background
         }
       },
-      options: {
-        backgroundColor: constants.header.optionsBackground,
-        color: constants.header.optionsTextColor,
-        border: `1px solid ${constants.header.optionsBorder}`,
-        minWidth: 145
-      },
-      menuItem: {
-        width: "100%",
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        color: constants.header.menuItemTextColor,
-        "& svg": {
-          width: constants.generalUnit * 2,
-          height: constants.generalUnit * 2,
-          marginRight: constants.generalUnit,
-          fill: palette.additional["gray"][7],
-          stroke: palette.additional["gray"][7]
-        }
-      },
-      icon: {
-        "& svg": {
-          fill: constants.header.iconColor
-        }
-      },
       title : {
         marginLeft: constants.generalUnit
       },
@@ -183,21 +144,9 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const { desktop } = useThemeSwitcher()
   const classes = useStyles()
   const { isLoggedIn, secured } = useFilesApi()
-  const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
-  const { getProfileTitle, removeUser } = useUser()
+  const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey()
   const [searchActive, setSearchActive] = useState(false)
   const [isTeamModalOpen, setIsTeamModalOpen] = useState(false)
-  const { history } = useHistory()
-
-  const signOut = useCallback(async () => {
-    logout()
-      .catch(console.error)
-      .finally(() => {
-        removeUser()
-        history.replace("/", {})
-      })
-
-  }, [logout, removeUser, history])
 
   const onReportBugClick = useCallback(() => {
     window.open(ROUTE_LINKS.DiscordInvite, "_blank")
@@ -258,33 +207,6 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                   notifications={[]}
                 />
               </section>
-              <section className={classes.accountControls}>
-                <MenuDropdown
-                  title={getProfileTitle()}
-                  anchor="bottom-right"
-                  classNames={{
-                    icon: classes.icon,
-                    options: classes.options
-                  }}
-                  testId="sign-out"
-                  menuItems={[
-                    {
-                      onClick: () => signOut(),
-                      contents: (
-                        <div
-                          data-cy="menu-sign-out"
-                          className={classes.menuItem}
-                        >
-                          <PowerDownSvg />
-                          <Typography>
-                            <Trans>Sign Out</Trans>
-                          </Typography>
-                        </div>
-                      )
-                    }
-                  ]}
-                />
-              </section>
             </section>
           ) : (
             <>

diff --git a/packages/files-ui/src/Components/Layouts/AppNav.tsx b/packages/files-ui/src/Components/Layouts/AppNav.tsx
@@ -5,21 +5,23 @@ import clsx from "clsx"
 import {
   Link,
   Typography,
-  ChainsafeFilesLogo,
   DatabaseSvg,
   SettingSvg,
   PowerDownSvg,
   ProgressBar,
   formatBytes,
   DeleteSvg,
-  UserShareSvg
+  UserShareSvg,
+  MenuDropdown
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
 import { Trans } from "@lingui/macro"
 import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
 import { CSFTheme } from "../../Themes/types"
 import { useUser } from "../../Contexts/UserContext"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
+import { Hashicon } from "@emeraldpay/hashicon-react"
+
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
     return createStyles({
@@ -80,30 +82,9 @@ const useStyles = makeStyles(
         }
       },
       logo: {
-        textDecoration: "none",
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-
-        [breakpoints.up("md")]: {
-          "& img": {
-            height: constants.generalUnit * 5,
-            width: "auto"
-          },
-          "& > *:first-child": {
-            marginRight: constants.generalUnit
-          }
-        },
-        [breakpoints.down("md")]: {
-          position: "absolute",
-          left: "50%",
-          top: "50%",
-          transform: "translate(-50%,-50%)",
-          "& img": {
-            height: constants.generalUnit * 3.25,
-            width: "auto"
-          }
-        }
+        width: constants.generalUnit * 2,
+        height: constants.generalUnit * 2,
+        marginRight: constants.generalUnit
       },
       navMenu: {
         display: "flex",
@@ -179,24 +160,48 @@ const useStyles = makeStyles(
         }
       },
       menuItem: {
-        width: 100,
+        width: "100%",
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
+        color: constants.header.menuItemTextColor,
         "& svg": {
           width: constants.generalUnit * 2,
           height: constants.generalUnit * 2,
-          marginRight: constants.generalUnit
+          marginRight: constants.generalUnit,
+          fill: palette.additional["gray"][7],
+          stroke: palette.additional["gray"][7]
         }
       },
       spaceUsedMargin: {
         marginBottom: constants.generalUnit
       },
-      betaCaption: {
-        marginBottom: constants.generalUnit * 0.5
+      profileButton: {
+        borderRadius: 4,
+        display: "flex",
+        alignItems: "center",
+        padding: constants.generalUnit,
+        background: palette.additional["gray"][1],
+        boxShadow: constants.nav.profileButtonShadow
+      },
+      options: {
+        backgroundColor: constants.header.optionsBackground,
+        color: constants.header.optionsTextColor,
+        border: `1px solid ${constants.header.optionsBorder}`,
+        minWidth: 145
       },
-      supportButton: {
-        margin: "auto"
+      icon: {
+        "& svg": {
+          fill: constants.header.iconColor
+        }
+      },
+      hashIconContainer: {
+        marginRight: constants.generalUnit,
+        display: "flex",
+        alignItems: "center"
+      },
+      menuTitle: {
+        padding: `${constants.generalUnit * 1.5}px 0`
       }
     })
   }
@@ -213,7 +218,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
   const { storageSummary } = useFiles()
   const { isLoggedIn, secured } = useFilesApi()
   const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
-  const { removeUser } = useUser()
+  const { removeUser, getProfileTitle, profile } = useUser()
 
   const signOut = useCallback(() => {
     logout()
@@ -226,6 +231,8 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
     }
   }, [desktop, navOpen, setNavOpen])
 
+  const profileTitle = getProfileTitle()
+
   return (
     <section
       className={clsx(classes.root, {
@@ -245,24 +252,50 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
         !shouldInitializeAccount && (
         <>
           {desktop && (
-            <div>
-              <Link
-                className={classes.logo}
-                to={ROUTE_LINKS.Drive("/")}
+            <section>
+              <MenuDropdown
+                anchor="bottom-left"
+                testId="sign-out"
+                hideIndicator={true}
+                classNames={{
+                  icon: classes.icon,
+                  options: classes.options,
+                  title: classes.menuTitle
+                }}
+                className={classes.menuItem}
+                menuItems={[
+                  {
+                    onClick: () => signOut(),
+                    contents: (
+                      <div
+                        data-cy="menu-sign-out"
+                        className={classes.menuItem}
+                      >
+                        <PowerDownSvg />
+                        <Typography>
+                          <Trans>Sign Out</Trans>
+                        </Typography>
+                      </div>
+                    )
+                  }
+                ]}
               >
-                <ChainsafeFilesLogo />
-                <Typography variant="h5">
-                  Files
-                </Typography>
-                &nbsp;
-                <Typography
-                  variant="caption"
-                  className={classes.betaCaption}
-                >
-                  beta
-                </Typography>
-              </Link>
-            </div>
+                {!!profileTitle &&
+                  <div className={classes.profileButton}>
+                    <div className={classes.hashIconContainer}>
+                      <Hashicon value={profile?.userId || ""}
+                        size={20} />
+                    </div>
+                    <Typography
+                      variant="body1"
+                      component="p"
+                    >
+                      {profileTitle}
+                    </Typography>
+                  </div>
+                }
+              </MenuDropdown>
+            </section>
           )}
           <div className={classes.linksArea}>
             <Typography className={classes.navHead}>

diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts
@@ -61,6 +61,7 @@ export interface CsfColors extends IConstants {
     itemColorHover: string
     itemIconColor: string
     itemIconColorHover: string
+    profileButtonShadow: string
   }
   createFolder: {
     backgroundColor: string

diff --git a/packages/files-ui/src/Themes/DarkTheme.ts b/packages/files-ui/src/Themes/DarkTheme.ts
@@ -379,7 +379,8 @@ export const darkTheme = createTheme<CsfColors>({
           itemColor: "var(--gray9)",
           itemColorHover: "var(--gray9)",
           itemIconColor: "var(--gray9)",
-          itemIconColorHover: "var(--gray9)"
+          itemIconColorHover: "var(--gray9)",
+          profileButtonShadow: "0px 1px 2px rgba(0, 0, 0, 0.25)"
         },
         createFolder: {
           backgroundColor: "var(--gray2)",

diff --git a/packages/files-ui/src/Themes/LightTheme.ts b/packages/files-ui/src/Themes/LightTheme.ts
@@ -66,7 +66,8 @@ export const lightTheme = createTheme<CsfColors>({
           itemColor: "inherit",
           itemColorHover: "var(--gray7)",
           itemIconColor: "inherit",
-          itemIconColorHover: "var(--gray7)"
+          itemIconColorHover: "var(--gray7)",
+          profileButtonShadow: "0px 1px 2px rgba(0, 0, 0, 0.25)"
         },
         createFolder: {
           backgroundColor: "var(--gray1)",