From c186788e1674320ca5fa9da5562a928f9d2e32e1 Mon Sep 17 00:00:00 2001
From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com>
Date: Tue, 15 Aug 2023 13:20:58 -0400
Subject: [PATCH] fix: add new support resources (#861)

* feat: add tutorial page

* fix: add new resources, make login clearer
---
 src/auth/views/LandingPage.tsx              | 24 +++++++--
 src/components/AppBar/LandingPageAppBar.tsx |  8 +--
 src/components/Drawer/MiniSideBar.tsx       | 57 ++++++++++++++++-----
 3 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/src/auth/views/LandingPage.tsx b/src/auth/views/LandingPage.tsx
index dee3e3bf..5a9850e6 100644
--- a/src/auth/views/LandingPage.tsx
+++ b/src/auth/views/LandingPage.tsx
@@ -1,6 +1,6 @@
 import { Background } from "components/Background/Background";
 import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar";
-import { Box, Button, Stack, Typography } from "@mui/material";
+import { Box, Button, Link, Stack, Typography } from "@mui/material";
 import goals from "../../../images.svg";
 import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated";
 import { Link as RouterLink } from "react-router-dom";
@@ -37,20 +37,36 @@ export function LandingPage() {
             Brave browser and search engine.
           </Typography>
 
-          <Box>
+          <Box display="flex" flexDirection="column">
             <Button
               variant="contained"
               component={RouterLink}
               sx={{
-                width: "Hug (165px)",
-                height: "Fixed (60px)",
+                maxWidth: "165px",
+                height: "60px",
                 padding: "18px 24px 18px 24px",
+                mb: 1,
               }}
               size="large"
               to={isAuthenticated ? "/user/main" : "/register"}
             >
               {isAuthenticated ? "Dashboard" : "Get Started"}
             </Button>
+            {!isAuthenticated && (
+              <Typography variant="subtitle1">
+                Already have an account?
+                <Link
+                  variant="subtitle1"
+                  underline="none"
+                  color="secondary"
+                  component={RouterLink}
+                  to="/auth/link"
+                  sx={{ ml: 1 }}
+                >
+                  Log in
+                </Link>
+              </Typography>
+            )}
           </Box>
         </Stack>
         <img src={goals} />
diff --git a/src/components/AppBar/LandingPageAppBar.tsx b/src/components/AppBar/LandingPageAppBar.tsx
index 207919ad..99436d56 100644
--- a/src/components/AppBar/LandingPageAppBar.tsx
+++ b/src/components/AppBar/LandingPageAppBar.tsx
@@ -14,6 +14,7 @@ import ads from "../../../branding.svg";
 import { Link as RouterLink, useRouteMatch } from "react-router-dom";
 import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated";
 import { useSignOut } from "auth/hooks/mutations/useSignOut";
+import { SupportMenu } from "components/Drawer/MiniSideBar";
 
 export function LandingPageAppBar() {
   const match = useRouteMatch();
@@ -41,12 +42,7 @@ export function LandingPageAppBar() {
       ),
     },
     {
-      component: (
-        <HelpLink
-          label="Support"
-          props={{ href: "mailto:selfserve@brave.com" }}
-        />
-      ),
+      component: <SupportMenu usePlainLink />,
     },
   ];
 
diff --git a/src/components/Drawer/MiniSideBar.tsx b/src/components/Drawer/MiniSideBar.tsx
index a344573d..01335fc1 100644
--- a/src/components/Drawer/MiniSideBar.tsx
+++ b/src/components/Drawer/MiniSideBar.tsx
@@ -165,28 +165,59 @@ const ItemBox = (props: RouteOption) => {
   );
 };
 
-export function SupportMenu() {
+interface SupportProps {
+  usePlainLink?: boolean;
+}
+
+export function SupportMenu({ usePlainLink }: SupportProps) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (
+    event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+  ) => {
     setAnchorEl(event.currentTarget);
   };
 
   return (
     <>
-      <ItemBox
-        label="Support"
-        href="#"
-        icon={
-          <HeadsetMicOutlinedIcon
-            fontSize="large"
-            sx={{ color: "text.secondary" }}
-          />
-        }
-        onClick={handleClick}
-      />
+      {!usePlainLink && (
+        <ItemBox
+          label="Support"
+          href="#"
+          icon={
+            <HeadsetMicOutlinedIcon
+              fontSize="large"
+              sx={{ color: "text.secondary" }}
+            />
+          }
+          onClick={handleClick}
+        />
+      )}
+      {usePlainLink && (
+        <Link
+          variant="subtitle1"
+          underline="none"
+          color="text.primary"
+          sx={{ cursor: "pointer" }}
+          onClick={handleClick}
+        >
+          Support
+        </Link>
+      )}
       <Menu open={open} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}>
+        <MenuItem
+          onClick={() => {
+            window.open(
+              "https://support.brave.com/hc/en-us/articles/14354133537421-How-do-I-use-Brave-Ads-Self-Serve-Beta-",
+              "_blank",
+              "noopener",
+            );
+            setAnchorEl(null);
+          }}
+        >
+          Brave Ads Tutorial
+        </MenuItem>
         <MenuItem
           onClick={() => {
             window.open("https://brave.com/brave-ads", "_blank", "noopener");