diff --git a/all_sizes_frame.svg b/all_sizes_frame.svg new file mode 100644 index 00000000..054ee9ea --- /dev/null +++ b/all_sizes_frame.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/powerful_format_frame.svg b/powerful_format_frame.svg new file mode 100644 index 00000000..fcc9b62f --- /dev/null +++ b/powerful_format_frame.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/privacy_focused_frame.svg b/privacy_focused_frame.svg new file mode 100644 index 00000000..72a362a4 --- /dev/null +++ b/privacy_focused_frame.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/auth/hooks/mutations/useGetLink.ts b/src/auth/hooks/mutations/useGetLink.ts index 46039b7f..3e043260 100644 --- a/src/auth/hooks/mutations/useGetLink.ts +++ b/src/auth/hooks/mutations/useGetLink.ts @@ -11,6 +11,12 @@ export function useGetLink({ onError, onSuccess }: Options = {}) { const [error, setError] = useState(); const requestLink = useCallback(async (email: string) => { + if (email.trim() === "") { + setError("Please enter an email."); + return; + } + + setError(undefined); setLoading(true); await getLink({ email }) .then(() => { diff --git a/src/auth/registration/AddressField.tsx b/src/auth/registration/AddressField.tsx index 6bea8c2b..a128996f 100644 --- a/src/auth/registration/AddressField.tsx +++ b/src/auth/registration/AddressField.tsx @@ -1,6 +1,7 @@ -import { Box, Divider, Stack, Typography } from "@mui/material"; +import { Box, Stack, Typography } from "@mui/material"; import { FormikTextField } from "form/FormikHelpers"; import { CountryPicker } from "components/Country/CountryPicker"; +import { MarginedDivider } from "auth/registration/MarginedDivider"; export function AddressField() { return ( @@ -10,7 +11,7 @@ export function AddressField() { finished here, your account setup is complete. - + - + In the meantime, check out our{" "} - + advertiser resources . If you have any questions, please reach out to{" "} diff --git a/src/auth/registration/MarginedDivider.tsx b/src/auth/registration/MarginedDivider.tsx new file mode 100644 index 00000000..522f46b7 --- /dev/null +++ b/src/auth/registration/MarginedDivider.tsx @@ -0,0 +1,9 @@ +import { Divider } from "@mui/material"; + +export function MarginedDivider() { + return ( + + ); +} diff --git a/src/auth/registration/NameField.tsx b/src/auth/registration/NameField.tsx index b500af85..bce9d986 100644 --- a/src/auth/registration/NameField.tsx +++ b/src/auth/registration/NameField.tsx @@ -1,5 +1,6 @@ -import { Box, Divider, Typography } from "@mui/material"; +import { Box, Typography } from "@mui/material"; import { FormikTextField } from "form/FormikHelpers"; +import { MarginedDivider } from "auth/registration/MarginedDivider"; export function NameField() { return ( @@ -9,7 +10,7 @@ export function NameField() { setup with your account. First, we’ll need your info. - + }, - { label: "Your business’s information", component: }, + { label: "Your business's information", component: }, ]; return ( - - + + {steps[activeStep].label} diff --git a/src/auth/views/LandingPage.tsx b/src/auth/views/LandingPage.tsx index 5a9850e6..67c6a8a1 100644 --- a/src/auth/views/LandingPage.tsx +++ b/src/auth/views/LandingPage.tsx @@ -1,9 +1,11 @@ import { Background } from "components/Background/Background"; import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar"; -import { Box, Button, Link, Stack, Typography } from "@mui/material"; +import { Box, Button, Link, Stack, Toolbar, Typography } from "@mui/material"; import goals from "../../../images.svg"; import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated"; import { Link as RouterLink } from "react-router-dom"; +import { useIsMobile } from "hooks/useIsMobile"; +import { MobileAdsBenefits } from "auth/views/MobileAdsBenefits"; const GradientText = { backgroundImage: @@ -14,19 +16,21 @@ const GradientText = { export function LandingPage() { const isAuthenticated = useIsAuthenticated(); + const isMobile = useIsMobile(); return ( + - - - + + + Privacy-forward {" "} advertising made simple @@ -42,17 +46,16 @@ export function LandingPage() { variant="contained" component={RouterLink} sx={{ - maxWidth: "165px", - height: "60px", - padding: "18px 24px 18px 24px", + maxWidth: { md: "165px" }, + maxHeight: { xs: "40px", md: "60px" }, + padding: { xs: 2, md: "18px 24px 18px 24px" }, mb: 1, }} - size="large" to={isAuthenticated ? "/user/main" : "/register"} > {isAuthenticated ? "Dashboard" : "Get Started"} - {!isAuthenticated && ( + {!isMobile && !isAuthenticated && ( Already have an account? )} + + {isMobile && } - + {!isMobile && } ); diff --git a/src/auth/views/MagicLink.tsx b/src/auth/views/MagicLink.tsx index c8cabdb3..784d7ae5 100644 --- a/src/auth/views/MagicLink.tsx +++ b/src/auth/views/MagicLink.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; -import { Link, Stack, TextField, Typography } from "@mui/material"; +import { Link, TextField, Typography } from "@mui/material"; import { Link as RouterLink } from "react-router-dom"; import { useGetLink } from "auth/hooks/mutations/useGetLink"; import { LoadingButton } from "@mui/lab"; @@ -26,20 +26,18 @@ export function MagicLink() { Click on the secure login link in the email to access your Brave Ads account. - - - Don’t see the email? Check your spam folder or - + + Don’t see the email? Check your spam folder or{" "} { setRequested(false); }} > try again. - + ); } diff --git a/src/auth/views/MobileAdsBenefits.tsx b/src/auth/views/MobileAdsBenefits.tsx new file mode 100644 index 00000000..8c1763fc --- /dev/null +++ b/src/auth/views/MobileAdsBenefits.tsx @@ -0,0 +1,66 @@ +import { Card, CardMedia, List, ListItem, Typography } from "@mui/material"; + +import allSizes from "../../../all_sizes_frame.svg"; +import powerfulFormats from "../../../powerful_format_frame.svg"; +import privacyFocused from "../../../privacy_focused_frame.svg"; + +export function MobileAdsBenefits() { + return ( + + + + + + + + + + + + ); +} + +const ItemCard = (props: { + primary: string; + secondary: string; + image: string; +}) => { + return ( + + + + {props.primary} + + + {props.secondary} + + + ); +}; diff --git a/src/auth/views/components/AuthContainer.tsx b/src/auth/views/components/AuthContainer.tsx index 07167df9..e865e50d 100644 --- a/src/auth/views/components/AuthContainer.tsx +++ b/src/auth/views/components/AuthContainer.tsx @@ -1,7 +1,8 @@ -import { Box, Card, CardContent } from "@mui/material"; +import { Box } from "@mui/material"; import { Background } from "components/Background/Background"; import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar"; import { ReactNode } from "react"; +import { PaddedCardContainer } from "components/Card/PaddedCardContainer"; interface Props { children?: ReactNode; @@ -13,25 +14,9 @@ export function AuthContainer({ children, belowCard, aboveCard }: Props) { return ( - + {aboveCard} - - - {children} - - + {children} {belowCard} diff --git a/src/components/AppBar/LandingPageAppBar.tsx b/src/components/AppBar/LandingPageAppBar.tsx index 99436d56..f5a8abfe 100644 --- a/src/components/AppBar/LandingPageAppBar.tsx +++ b/src/components/AppBar/LandingPageAppBar.tsx @@ -2,7 +2,6 @@ import { AppBar, Box, Button, - CssBaseline, Divider, Link, LinkProps, @@ -15,20 +14,23 @@ 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"; +import { useIsMobile } from "hooks/useIsMobile"; export function LandingPageAppBar() { const match = useRouteMatch(); const isAuthenticated = useIsAuthenticated(); + const isMobile = useIsMobile(); const links = [ { - component: isAuthenticated ? null : ( - - - Get started - - - ), + component: + isMobile || isAuthenticated ? null : ( + + + Get started + + + ), }, { component: ( @@ -48,26 +50,47 @@ export function LandingPageAppBar() { return ( - - - + + - Ads + Ads - + + {links.map((l) => l.component)} + {isMobile && !match.url.includes("auth") && ( + + Log in + + )}
- {!match.url.includes("auth") && ( + {!isMobile && !match.url.includes("auth") && ( )} diff --git a/src/components/Card/PaddedCardContainer.tsx b/src/components/Card/PaddedCardContainer.tsx index 811943ac..715b825d 100644 --- a/src/components/Card/PaddedCardContainer.tsx +++ b/src/components/Card/PaddedCardContainer.tsx @@ -6,7 +6,7 @@ export function PaddedCardContainer({ children }: PropsWithChildren) { diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts new file mode 100644 index 00000000..dc674c0c --- /dev/null +++ b/src/hooks/useIsMobile.ts @@ -0,0 +1,6 @@ +import { useMediaQuery, useTheme } from "@mui/material"; + +export const useIsMobile = () => { + const muiTheme = useTheme(); + return useMediaQuery(muiTheme.breakpoints.down("sm")); +}; diff --git a/src/theme.tsx b/src/theme.tsx index c313239e..5cbe0424 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -1,6 +1,6 @@ -import { createTheme } from "@mui/material"; +import { createTheme, responsiveFontSizes } from "@mui/material"; -export const theme = createTheme({ +const appTheme = createTheme({ typography: { fontFamily: "Poppins", h1: { @@ -54,3 +54,5 @@ export const theme = createTheme({ }, }, }); + +export const theme = responsiveFontSizes(appTheme);