Add team feature fake door

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

@@ -0,0 +1,79 @@
+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 { usePosthog } from "../../Contexts/PosthogContext"
+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 posthog = usePosthog()
+
+  const onSignupTeamClick = useCallback(() => {
+    posthog && posthog.capture("Team signup button click")
+    window.open(ROUTE_LINKS.TeamSignup, "_blank")
+    onHide()
+  }, [onHide, posthog])
+
+  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
+            className={classes.nextButton}
+            onClick={onSignupTeamClick}
+          >
+            <Trans>Sign me up!</Trans>
+          </Button>
+        </div>
+      </div>
+    </CustomModal>
+  )}
+
+export default TeamModal

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

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 { usePosthog } from "../../Contexts/PosthogContext"
+import TeamModal from "../Elements/TeamModal"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
@@ -149,7 +150,11 @@ const useStyles = makeStyles(
         margin: `0 ${constants.generalUnit * 2}px`,
 
         "& button" : {
-          height: constants.generalUnit * 4
+          height: constants.generalUnit * 4,
+
+          "&:not(:first-child)": {
+            marginLeft: constants.generalUnit * 2
+          }
         }
       }
     })
@@ -168,6 +173,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 posthog = usePosthog()
 
@@ -186,6 +192,11 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
     window.open(ROUTE_LINKS.DiscordInvite, "_blank")
   }, [posthog])
 
+  const onStartATeamClick = useCallback(() => {
+    posthog && posthog.capture("Team start button click")
+    setIsTeamModalOpen(true)
+  }, [posthog])
+
   return (
     <header
       className={clsx(classes.root, {
@@ -221,6 +232,14 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                 >
                   <Trans>Report a bug</Trans>
                 </Button>
+                <Button
+                  data-cy="start-team-nav"
+                  variant="tertiary"
+                  size="small"
+                  onClick={onStartATeamClick}
+                >
+                  <Trans>Start a team</Trans>
+                </Button>
               </section>
               <section className={classes.accountControls}>
                 <MenuDropdown
@@ -285,6 +304,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
           )}
         </>
       )}
+      {isTeamModalOpen && <TeamModal onHide={() => setIsTeamModalOpen(false)}/>}
     </header>
   )
 }