New navigations buttons (#1574)

* wip * lingui extract * center and add posthog * Update .eslintrc.json * Add team feature fake door (#1587) * wip * modal and tracking * use data-posthog instead Co-authored-by: GitHub Actions <actions@github.com>
ChainSafe · Sep 28, 2021 · eb463dd · eb463dd
1 parent 5d3ac19
commit eb463dd
Show file tree

Hide file tree

Showing 11 changed files with 252 additions and 75 deletions.
diff --git a/packages/common-components/src/Button/Button.tsx b/packages/common-components/src/Button/Button.tsx
@@ -7,7 +7,6 @@ import { Typography } from "../Typography"
 const useStyles = makeStyles(
   ({ constants, typography, animation, palette, overrides }: ITheme) =>
     createStyles({
-      // JSS in CSS goes here
       root: {
         ...typography.button,
         borderRadius: `${constants.generalUnit / 4}px`,
@@ -110,6 +109,29 @@ const useStyles = makeStyles(
         },
         ...overrides?.Button?.variants?.secondary?.root
       },
+      tertiary: {
+        backgroundColor: palette.additional["gray"][3],
+        color: palette.common.black.main,
+        "& svg": {
+          fill: palette.common.white.main
+        },
+        "&:hover": {
+          backgroundColor: palette.primary.main,
+          color: palette.common.white.main,
+          ...overrides?.Button?.variants?.secondary?.hover
+        },
+        "&:focus": {
+          backgroundColor: palette.primary.main,
+          color: palette.common.white.main,
+          ...overrides?.Button?.variants?.secondary?.focus
+        },
+        "&:active": {
+          backgroundColor: palette.primary.main,
+          color: palette.common.white.main,
+          ...overrides?.Button?.variants?.secondary?.active
+        },
+        ...overrides?.Button?.variants?.secondary?.root
+      },
       outline: {
         color: palette.additional["gray"][8],
         backgroundColor: palette.common?.white.main,
@@ -271,7 +293,7 @@ interface IButtonProps extends Omit<ReactButton, "size"> {
   className?: string
   children?: ReactNode | ReactNode[]
   fullsize?: boolean
-  variant?: "link" | "primary" | "secondary" | "outline" | "dashed" | "danger"
+  variant?: "link" | "primary" | "secondary" |"tertiary" | "outline" | "dashed" | "danger"
   iconButton?: boolean
   size?: "large" | "medium" | "small"
   type?: "button" | "submit" | "reset"

diff --git a/packages/common-theme/src/Defaults/ThemeConfig.ts b/packages/common-theme/src/Defaults/ThemeConfig.ts
@@ -169,7 +169,7 @@ const DefaultThemeConfig: IThemeConfig = {
     },
     button: {
       ...defaultFontStyles,
-      fontWeight: defaultFontWeights.regular,
+      fontWeight: defaultFontWeights.semibold,
       fontSize: 14,
       lineHeight: "22px"
     },

diff --git a/packages/files-ui/src/Components/Elements/TeamModal.tsx b/packages/files-ui/src/Components/Elements/TeamModal.tsx
@@ -0,0 +1,77 @@
+import { Button, Typography } from "@chainsafe/common-components"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
+import { Trans } from "@lingui/macro"
+import React, { useCallback } from "react"
+import { CSFTheme } from "../../Themes/types"
+import { ROUTE_LINKS } from "../FilesRoutes"
+import CustomModal from "./CustomModal"
+
+const useStyles = makeStyles(
+  ({ constants }: CSFTheme) => {
+    return createStyles({
+      root: {
+        padding: `${constants.generalUnit * 6}px ${constants.generalUnit * 4}px`,
+        flexDirection: "column",
+        display: "flex",
+        alignItems: "center"
+      },
+      title: {
+        marginBottom: constants.generalUnit * 3
+      },
+      modalInner: {
+        maxWidth: "600px !important"
+      },
+      buttonContainer: {
+        width: "100%"
+      },
+      nextButton: {
+        margin: "auto",
+        marginTop: constants.generalUnit * 3
+      }
+    })
+  })
+
+interface Props {
+  onHide: () => void
+}
+
+const TeamModal = ({ onHide }: Props) => {
+  const classes = useStyles()
+
+  const onSignupTeamClick = useCallback(() => {
+    window.open(ROUTE_LINKS.TeamSignup, "_blank")
+    onHide()
+  }, [onHide])
+
+  return (
+    <CustomModal
+      injectedClass={{ inner: classes.modalInner }}
+      active={true}
+      closePosition="right"
+      maxWidth="sm"
+      onClose={onHide}
+      mobileStickyBottom={false}
+    >
+      <div className={classes.root}>
+        <Typography variant="h2"
+          className={classes.title}
+        >
+          <Trans>Teams</Trans>
+        </Typography>
+        <Typography variant="h4">
+          <Trans>A better sharing experience is coming soon.</Trans>
+        </Typography>
+        <div className={classes.buttonContainer}>
+          <Button
+            data-posthog="Sign-me-up"
+            className={classes.nextButton}
+            onClick={onSignupTeamClick}
+          >
+            <Trans>Sign me up!</Trans>
+          </Button>
+        </div>
+      </div>
+    </CustomModal>
+  )}
+
+export default TeamModal
diff --git a/packages/files-ui/src/Components/FilesRoutes.tsx b/packages/files-ui/src/Components/FilesRoutes.tsx
@@ -33,7 +33,8 @@ export const ROUTE_LINKS = {
     const adjustedRawCurrentPath = !rawCurrentPath ? "/" : rawCurrentPath
     return `/shared/${bucketId}${adjustedRawCurrentPath}`
   },
-  DiscordInvite: "https://discord.gg/zAEY37fNb2"
+  DiscordInvite: "https://discord.gg/zAEY37fNb2",
+  TeamSignup: "https://shrl.ink/cgQy"
 }
 
 export const SETTINGS_PATHS = ["profile", "plan", "security"] as const

diff --git a/packages/files-ui/src/Components/Layouts/AppHeader.tsx b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
@@ -8,7 +8,8 @@ import {
   HamburgerMenu,
   MenuDropdown,
   PowerDownSvg,
-  useHistory
+  useHistory,
+  Button
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
 import SearchModule from "../Modules/SearchModule"
@@ -17,6 +18,7 @@ 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"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
@@ -99,9 +101,7 @@ const useStyles = makeStyles(
         justifyContent: "flex-end",
         alignItems: "center",
         flexDirection: "row",
-        [breakpoints.up("md")]: {
-          marginLeft: constants.accountControlsPadding
-        },
+
         "& > *:first-child": {
           marginRight: constants.generalUnit * 2
         }
@@ -142,6 +142,19 @@ const useStyles = makeStyles(
       },
       title : {
         marginLeft: constants.generalUnit
+      },
+      buttonsSection: {
+        display: "flex",
+        alignItems: "center",
+        margin: `0 ${constants.generalUnit * 2}px`,
+
+        "& button" : {
+          height: constants.generalUnit * 4,
+
+          "&:not(:first-child)": {
+            marginLeft: constants.generalUnit * 2
+          }
+        }
       }
     })
   }
@@ -159,6 +172,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
   const { getProfileTitle, removeUser } = useUser()
   const [searchActive, setSearchActive] = useState(false)
+  const [isTeamModalOpen, setIsTeamModalOpen] = useState(false)
   const { history } = useHistory()
 
   const signOut = useCallback(async () => {
@@ -171,6 +185,14 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
 
   }, [logout, removeUser, history])
 
+  const onReportBugClick = useCallback(() => {
+    window.open(ROUTE_LINKS.DiscordInvite, "_blank")
+  }, [])
+
+  const onStartATeamClick = useCallback(() => {
+    setIsTeamModalOpen(true)
+  }, [])
+
   return (
     <header
       className={clsx(classes.root, {
@@ -197,6 +219,26 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                   setSearchActive={setSearchActive}
                 />
               </section>
+              <section className={classes.buttonsSection}>
+                <Button
+                  data-posthog="Report-a-bug"
+                  data-cy="send-feedback-nav"
+                  variant="tertiary"
+                  size="small"
+                  onClick={onReportBugClick}
+                >
+                  <Trans>Report a bug</Trans>
+                </Button>
+                <Button
+                  data-posthog="Start-a-team"
+                  data-cy="start-team-nav"
+                  variant="tertiary"
+                  size="small"
+                  onClick={onStartATeamClick}
+                >
+                  <Trans>Start a team</Trans>
+                </Button>
+              </section>
               <section className={classes.accountControls}>
                 <MenuDropdown
                   title={getProfileTitle()}
@@ -260,6 +302,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
           )}
         </>
       )}
+      {isTeamModalOpen && <TeamModal onHide={() => setIsTeamModalOpen(false)}/>}
     </header>
   )
 }

diff --git a/packages/files-ui/src/Components/Layouts/AppNav.tsx b/packages/files-ui/src/Components/Layouts/AppNav.tsx
@@ -1,9 +1,5 @@
 import { useFiles } from "../../Contexts/FilesContext"
-import {
-  createStyles,
-  makeStyles,
-  useThemeSwitcher
-} from "@chainsafe/common-theme"
+import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import React, { useCallback } from "react"
 import clsx from "clsx"
 import {
@@ -14,10 +10,10 @@ import {
   SettingSvg,
   PowerDownSvg,
   ProgressBar,
-  Button,
   formatBytes,
   DeleteSvg,
-  UserShareSvg } from "@chainsafe/common-components"
+  UserShareSvg
+} from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
 import { Trans } from "@lingui/macro"
 import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
@@ -201,9 +197,6 @@ const useStyles = makeStyles(
       },
       betaCaption: {
         marginBottom: constants.generalUnit * 0.5
-      },
-      supportButton: {
-        margin: "auto"
       }
     })
   }
@@ -214,15 +207,12 @@ interface IAppNav {
   setNavOpen: (state: boolean) => void
 }
 
-const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
+const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
   const { desktop } = useThemeSwitcher()
   const classes = useStyles()
-
   const { storageSummary } = useFiles()
-
   const { isLoggedIn, secured } = useFilesApi()
   const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
-
   const { removeUser } = useUser()
 
   const signOut = useCallback(() => {
@@ -236,19 +226,15 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
     }
   }, [desktop, navOpen, setNavOpen])
 
-  const collectFeedback = () => {
-    window.open(ROUTE_LINKS.DiscordInvite, "_blank")
-  }
-
   return (
     <section
       className={clsx(classes.root, {
         active: desktop
           ? isLoggedIn &&
-          secured &&
-          !!publicKey &&
-          !isNewDevice &&
-          !shouldInitializeAccount
+            secured &&
+            !!publicKey &&
+            !isNewDevice &&
+            !shouldInitializeAccount
           : navOpen
       })}
     >
@@ -349,37 +335,25 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
           </div>
           <section>
             {desktop && (
-              <div
-                data-cy="label-space-used"
-              >
-                {
-                  storageSummary && (
-                    <>
-                      <Typography
-                        variant="body2"
-                        className={classes.spaceUsedMargin}
-                        component="p"
-                      >{`${formatBytes(storageSummary.used_storage, 2)} of ${formatBytes(
-                          storageSummary.total_storage, 2
-                        )} used`}</Typography>
-                      <ProgressBar
-                        data-cy="progress-bar-space-used"
-                        className={classes.spaceUsedMargin}
-                        progress={(storageSummary.used_storage / storageSummary.total_storage) * 100}
-                        size="small"
-                      />
-                    </>
-                  )
+              <div data-cy="label-space-used">
+                {storageSummary && (
+                  <>
+                    <Typography
+                      variant="body2"
+                      className={classes.spaceUsedMargin}
+                      component="p"
+                    >{`${formatBytes(storageSummary.used_storage, 2)} of ${formatBytes(
+                        storageSummary.total_storage, 2
+                      )} used`}</Typography>
+                    <ProgressBar
+                      data-cy="progress-bar-space-used"
+                      className={classes.spaceUsedMargin}
+                      progress={(storageSummary.used_storage / storageSummary.total_storage) * 100}
+                      size="small"
+                    />
+                  </>
+                )
                 }
-                <Button
-                  className={classes.supportButton}
-                  data-cy="send-feedback-nav"
-                  variant="secondary"
-                  size="medium"
-                  onClick={() => collectFeedback()}
-                >
-                  <Trans>Got an issue?</Trans>
-                </Button>
               </div>
             )}
             {!desktop && (