feat: mobile styling for landing and registration pages

src/auth/registration/AddressField.tsx

@@ -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"
@@ -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

src/auth/registration/AdvertiserRegistered.tsx

@@ -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
@@ -21,7 +25,7 @@ export function AdvertiserRegistered({ error }: Props) {
           </Typography>
 
           <Link
-            variant="h5"
+            variant={variant}
             sx={{ textAlign: "center" }}
             underline="none"
             href=""
@@ -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{" "}

src/auth/registration/MarginedDivider.tsx

@@ -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 }}
+    />
+  );
+}

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.
       </Typography>
 
-      <Divider sx={{ marginTop: 5, marginBottom: 5 }} />
+      <MarginedDivider />
 
       <FormikTextField
         name="fullName"

src/auth/registration/Register.tsx

@@ -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 (
@@ -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>

src/auth/registration/types.ts

@@ -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",
+};

src/auth/views/LandingPage.tsx

@@ -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>
@@ -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"}
@@ -69,7 +71,7 @@ export function LandingPage() {
             )}
           </Box>
         </Stack>
-        <img src={goals} />
+        {!isMobile && <img src={goals} />}
       </Stack>
     </Background>
   );

src/auth/views/MobileAdsBenefits.tsx

@@ -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",
+      }}
+    />
+  );
+};

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 (
     <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>