Skip to content

Commit

Permalink
fix: add new support resources (#861)
Browse files Browse the repository at this point in the history
* feat: add tutorial page

* fix: add new resources, make login clearer
  • Loading branch information
IanKrieger authored Aug 15, 2023
1 parent 87a2a67 commit c186788
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 23 deletions.
24 changes: 20 additions & 4 deletions src/auth/views/LandingPage.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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} />
Expand Down
8 changes: 2 additions & 6 deletions src/components/AppBar/LandingPageAppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -41,12 +42,7 @@ export function LandingPageAppBar() {
),
},
{
component: (
<HelpLink
label="Support"
props={{ href: "mailto:selfserve@brave.com" }}
/>
),
component: <SupportMenu usePlainLink />,
},
];

Expand Down
57 changes: 44 additions & 13 deletions src/components/Drawer/MiniSideBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down

0 comments on commit c186788

Please sign in to comment.