Skip to content

Commit

Permalink
feat: mobile styling for landing and registration pages
Browse files Browse the repository at this point in the history
  • Loading branch information
IanKrieger committed Aug 28, 2023
1 parent 46eeb37 commit 97ca820
Show file tree
Hide file tree
Showing 16 changed files with 196 additions and 61 deletions.
4 changes: 4 additions & 0 deletions One.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions Three.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions Two.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 7 additions & 3 deletions src/auth/registration/AddressField.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
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";
import { useIsMobile } from "hooks/useIsMobile";

export function AddressField() {
const isMobile = useIsMobile();

return (
<Box flexGrow={1}>
<Typography variant="subtitle1" gutterBottom width="100%">
Second (and last!) we&rsquo;ll need info on your business. Once you are
finished here, your account setup is complete.
</Typography>

<Divider sx={{ marginTop: 5, marginBottom: 5 }} />
<MarginedDivider />

<FormikTextField
name="address.street1"
Expand Down Expand Up @@ -44,7 +48,7 @@ export function AddressField() {
useTopLabel
/>

<Stack direction="row" spacing={1}>
<Stack direction={isMobile ? "column" : "row"} spacing={isMobile ? 2 : 1}>
<CountryPicker name="address.country" />

<FormikTextField
Expand Down
22 changes: 15 additions & 7 deletions src/auth/registration/AdvertiserRegistered.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
import { Link, Stack, Typography } from "@mui/material";
import { useIsMobile } from "hooks/useIsMobile";

interface Props {
error?: string;
}

export function AdvertiserRegistered({ error }: Props) {
const isMobile = useIsMobile();
const variant = isMobile ? "h6" : "h5";

return (
<>
{error ? (
<Stack direction="column" alignItems="center" sx={{ mt: 5 }}>
<Typography variant="h5" sx={{ textAlign: "left", mb: 5 }}>
<Typography variant={variant} sx={{ textAlign: "left", mb: 5 }}>
We encountered a problem creating your account.
</Typography>
<Typography variant="h5" sx={{ textAlign: "left", mb: 5 }}>
<Typography variant={variant} sx={{ textAlign: "left", mb: 5 }}>
Please reach out to
<Link sx={{ ml: 1 }} href="mailto:selfserve@brave.com">
selfserve@brave.com
Expand All @@ -21,7 +25,7 @@ export function AdvertiserRegistered({ error }: Props) {
</Typography>

<Link
variant="h5"
variant={variant}
sx={{ textAlign: "center" }}
underline="none"
href=""
Expand All @@ -31,17 +35,21 @@ export function AdvertiserRegistered({ error }: Props) {
</Stack>
) : (
<Stack direction="column" alignItems="center">
<Typography variant="h5" sx={{ mb: 3 }}>
<Typography variant={variant} sx={{ mb: 3 }}>
Thanks for your interest in Brave Ads! Our team will now carefully
review the provided information.
</Typography>
<Typography variant="h5" sx={{ mb: 3 }}>
<Typography variant={variant} sx={{ mb: 3 }}>
Once the review process is complete, we will send you an email to
notify you of the approval status and any further steps required.
</Typography>
<Typography variant="h5" sx={{ textAlign: "left" }}>
<Typography variant={variant} sx={{ textAlign: "left" }}>
In the meantime, check out our{" "}
<Link href="https://brave.com/brave-ads" target="_blank">
<Link
href="https://brave.com/brave-ads"
variant={variant}
target="_blank"
>
advertiser resources
</Link>
. If you have any questions, please reach out to{" "}
Expand Down
11 changes: 11 additions & 0 deletions src/auth/registration/MarginedDivider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { useIsMobile } from "hooks/useIsMobile";
import { Divider } from "@mui/material";

export function MarginedDivider() {
const isMobile = useIsMobile();
return (
<Divider
sx={{ marginTop: isMobile ? 2 : 5, marginBottom: isMobile ? 2 : 5 }}
/>
);
}
5 changes: 3 additions & 2 deletions src/auth/registration/NameField.tsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -9,7 +10,7 @@ export function NameField() {
setup with your account. First, we&rsquo;ll need your info.
</Typography>

<Divider sx={{ marginTop: 5, marginBottom: 5 }} />
<MarginedDivider />

<FormikTextField
name="fullName"
Expand Down
8 changes: 5 additions & 3 deletions src/auth/registration/Register.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@ import { Background } from "components/Background/Background";
import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar";
import { PaddedCardContainer } from "components/Card/PaddedCardContainer";
import { PersistRegistrationValues } from "form/PersistRegistrationValues";
import { useIsMobile } from "hooks/useIsMobile";

export function Register() {
const [activeStep, setActiveStep] = useState(0);
const { register, hasRegistered, error } = useRegister();
const isMobile = useIsMobile();

if (hasRegistered || error) {
return (
Expand All @@ -29,14 +31,14 @@ export function Register() {

const steps = [
{ label: "Your information", component: <NameField /> },
{ label: "Your business&rsquo;s information", component: <AddressField /> },
{ label: `Your business's information`, component: <AddressField /> },
];

return (
<Background>
<LandingPageAppBar />
<Toolbar sx={{ mb: 1.5 }} />
<Box display="flex" width="725px" flexDirection="column" mb={3}>
<Toolbar sx={{ mb: isMobile ? undefined : 1.5, mt: 3 }} />
<Box display="flex" maxWidth="725px" flexDirection="column" mb={3}>
<Typography textAlign="center" variant="h4" sx={{ mb: 3 }}>
{steps[activeStep].label}
</Typography>
Expand Down
7 changes: 7 additions & 0 deletions src/auth/registration/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,10 @@ export const initialValues: RegistrationForm = {
zipcode: "",
},
};

export const GradientText = {
backgroundImage:
"linear-gradient(96.46deg, #FF2869 -4.13%, #930BFE 82.88%), linear-gradient(0deg, #111317, #111317);",
backgroundClip: "text",
color: "transparent",
};
34 changes: 18 additions & 16 deletions src/auth/views/LandingPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,13 @@ 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";

const GradientText = {
backgroundImage:
"linear-gradient(96.46deg, #FF2869 -4.13%, #930BFE 82.88%), linear-gradient(0deg, #111317, #111317);",
backgroundClip: "text",
color: "transparent",
};
import { useIsMobile } from "hooks/useIsMobile";
import { GradientText } from "auth/registration/types";
import { MobileAdsBenefits } from "auth/views/MobileAdsBenefits";

export function LandingPage() {
const isAuthenticated = useIsAuthenticated();
const isMobile = useIsMobile();

return (
<Background>
Expand All @@ -24,30 +21,35 @@ export function LandingPage() {
spacing={10}
justifyContent="center"
>
<Stack sx={{ maxWidth: "430px" }} spacing={6}>
<Typography variant="h3">
<Typography variant="h3" sx={GradientText}>
<Stack sx={{ maxWidth: "430px" }} spacing={isMobile ? 3 : 6}>
<Typography variant={isMobile ? "h5" : "h3"}>
<Typography variant={isMobile ? "h5" : "h3"} sx={GradientText}>
Privacy-forward
</Typography>{" "}
advertising made simple
</Typography>

<Typography variant="h6">
<Typography
variant={isMobile ? "subtitle1" : "h6"}
fontWeight={isMobile ? 500 : undefined}
>
Reach and convert new customers through premium advertising on the
Brave browser and search engine.
</Typography>

<Box display="flex" flexDirection="column">
{isMobile && <MobileAdsBenefits />}

<Box display="flex" flexDirection="column" justifyContent="center">
<Button
variant="contained"
component={RouterLink}
sx={{
maxWidth: "165px",
height: "60px",
padding: "18px 24px 18px 24px",
maxHeight: "60px",
padding: !isMobile ? "18px 24px 18px 24px" : 2,
mb: 1,
}}
size="large"
size={isMobile ? "medium" : "large"}
to={isAuthenticated ? "/user/main" : "/register"}
>
{isAuthenticated ? "Dashboard" : "Get Started"}
Expand All @@ -69,7 +71,7 @@ export function LandingPage() {
)}
</Box>
</Stack>
<img src={goals} />
{!isMobile && <img src={goals} />}
</Stack>
</Background>
);
Expand Down
73 changes: 73 additions & 0 deletions src/auth/views/MobileAdsBenefits.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import {
Avatar,
Box,
List,
ListItem,
ListItemAvatar,
ListItemText,
Typography,
} from "@mui/material";

export function MobileAdsBenefits() {
return (
<Box>
<Typography variant="h6">Why Brave Ads?</Typography>
<List>
<ListItem
alignItems="center"
disableGutters
sx={{ flexDirection: "row" }}
>
<ListItemAvatar>
<Avatar alt="One" src="/One.svg" />
</ListItemAvatar>
<ItemText
primary="For all business sizes"
secondary="Start a Brave Ads campaign with as little as $100."
/>
</ListItem>
<ListItem
alignItems="center"
disableGutters
sx={{ flexDirection: "row" }}
>
<ListItemAvatar>
<Avatar alt="Two" src="/Two.svg" />
</ListItemAvatar>
<ItemText
primary="Powerful Ad Formats"
secondary="Browser-based delivery offers a new way to reach audiences on the Web."
/>
</ListItem>
<ListItem
alignItems="center"
disableGutters
sx={{ flexDirection: "row" }}
>
<ListItemAvatar>
<Avatar alt="Three" src="/Three.svg" />
</ListItemAvatar>
<ItemText
primary="Unparalleled privacy"
secondary="All targeting and reporting is strictly designed to be anonymous and privacy-preserving."
/>
</ListItem>
</List>
</Box>
);
}

const ItemText = (props: { primary: string; secondary: string }) => {
return (
<ListItemText
primary={props.primary}
secondary={props.secondary}
primaryTypographyProps={{
fontWeight: 600,
}}
secondaryTypographyProps={{
color: "text.primary",
}}
/>
);
};
23 changes: 4 additions & 19 deletions src/auth/views/components/AuthContainer.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -13,25 +14,9 @@ export function AuthContainer({ children, belowCard, aboveCard }: Props) {
return (
<Background>
<LandingPageAppBar />
<Box display="flex" width="725px" flexDirection="column">
<Box display="flex" maxWidth="725px" flexDirection="column">
{aboveCard}
<Card
sx={{
width: "100%",
padding: "48px",
gap: "32px",
}}
>
<CardContent
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
{children}
</CardContent>
</Card>
<PaddedCardContainer>{children}</PaddedCardContainer>
{belowCard}
</Box>
</Background>
Expand Down
Loading

0 comments on commit 97ca820

Please sign in to comment.