From 97ca82077f0a9aa9dc4ec41d6419c90d6e5c1dea Mon Sep 17 00:00:00 2001
From: Ian Krieger <iandkrieger@gmail.com>
Date: Mon, 28 Aug 2023 11:22:29 -0400
Subject: [PATCH] feat: mobile styling for landing and registration pages

---
 One.svg                                       |  4 +
 Three.svg                                     |  4 +
 Two.svg                                       |  4 +
 src/auth/registration/AddressField.tsx        | 10 ++-
 .../registration/AdvertiserRegistered.tsx     | 22 ++++--
 src/auth/registration/MarginedDivider.tsx     | 11 +++
 src/auth/registration/NameField.tsx           |  5 +-
 src/auth/registration/Register.tsx            |  8 +-
 src/auth/registration/types.ts                |  7 ++
 src/auth/views/LandingPage.tsx                | 34 +++++----
 src/auth/views/MobileAdsBenefits.tsx          | 73 +++++++++++++++++++
 src/auth/views/components/AuthContainer.tsx   | 23 +-----
 src/components/AppBar/LandingPageAppBar.tsx   | 38 +++++++---
 src/components/Card/PaddedCardContainer.tsx   |  4 +-
 src/components/Drawer/MiniSideBar.tsx         |  4 +-
 src/hooks/useIsMobile.ts                      |  6 ++
 16 files changed, 196 insertions(+), 61 deletions(-)
 create mode 100644 One.svg
 create mode 100644 Three.svg
 create mode 100644 Two.svg
 create mode 100644 src/auth/registration/MarginedDivider.tsx
 create mode 100644 src/auth/views/MobileAdsBenefits.tsx
 create mode 100644 src/hooks/useIsMobile.ts

diff --git a/One.svg b/One.svg
new file mode 100644
index 00000000..5f6023b5
--- /dev/null
+++ b/One.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.2188 40H26.3906V26.7812C26.3906 26.4167 26.3958 25.9688 26.4062 25.4375C26.4167 24.8958 26.4323 24.3438 26.4531 23.7812C26.474 23.2083 26.4948 22.6927 26.5156 22.2344C26.401 22.3698 26.1667 22.6042 25.8125 22.9375C25.4688 23.2604 25.1458 23.5521 24.8438 23.8125L22.2188 25.9219L19.8906 23.0156L27.25 17.1562H31.2188V40Z" fill="#583FBC"/>
+<circle cx="28" cy="28" r="27" stroke="#583FBC" stroke-width="2"/>
+</svg>
diff --git a/Three.svg b/Three.svg
new file mode 100644
index 00000000..d7b09603
--- /dev/null
+++ b/Three.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.3594 22.2656C35.3594 23.3177 35.1406 24.2292 34.7031 25C34.2656 25.7708 33.6719 26.401 32.9219 26.8906C32.1823 27.3802 31.349 27.7396 30.4219 27.9688V28.0625C32.2552 28.2917 33.6458 28.8542 34.5938 29.75C35.5521 30.6458 36.0312 31.8438 36.0312 33.3438C36.0312 34.6771 35.7031 35.8698 35.0469 36.9219C34.401 37.974 33.401 38.8021 32.0469 39.4062C30.6927 40.0104 28.9479 40.3125 26.8125 40.3125C25.5521 40.3125 24.375 40.2083 23.2812 40C22.1979 39.8021 21.1771 39.4948 20.2188 39.0781V34.9688C21.1979 35.4688 22.224 35.849 23.2969 36.1094C24.3698 36.3594 25.3698 36.4844 26.2969 36.4844C28.026 36.4844 29.2344 36.1875 29.9219 35.5938C30.6198 34.9896 30.9688 34.1458 30.9688 33.0625C30.9688 32.4271 30.8073 31.8906 30.4844 31.4531C30.1615 31.0156 29.599 30.6823 28.7969 30.4531C28.0052 30.224 26.8958 30.1094 25.4688 30.1094H23.7344V26.4062H25.5C26.9062 26.4062 27.974 26.276 28.7031 26.0156C29.4427 25.7448 29.9427 25.3802 30.2031 24.9219C30.474 24.4531 30.6094 23.9219 30.6094 23.3281C30.6094 22.5156 30.3594 21.8802 29.8594 21.4219C29.3594 20.9635 28.526 20.7344 27.3594 20.7344C26.6302 20.7344 25.9635 20.8281 25.3594 21.0156C24.7656 21.1927 24.2292 21.4115 23.75 21.6719C23.2708 21.9219 22.849 22.1667 22.4844 22.4062L20.25 19.0781C21.1458 18.4323 22.1927 17.8958 23.3906 17.4688C24.599 17.0417 26.0365 16.8281 27.7031 16.8281C30.0573 16.8281 31.9219 17.3021 33.2969 18.25C34.6719 19.1979 35.3594 20.5365 35.3594 22.2656Z" fill="#FFFF"/>
+<circle cx="28" cy="28" r="27" stroke="#FFFF" stroke-width="2"/>
+</svg>
diff --git a/Two.svg b/Two.svg
new file mode 100644
index 00000000..06831c1c
--- /dev/null
+++ b/Two.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.25 40H19.2812V36.6406L25.0156 30.8438C26.1719 29.6562 27.099 28.6667 27.7969 27.875C28.5052 27.0729 29.0156 26.3438 29.3281 25.6875C29.651 25.0312 29.8125 24.3281 29.8125 23.5781C29.8125 22.6719 29.5573 21.9948 29.0469 21.5469C28.5469 21.0885 27.875 20.8594 27.0312 20.8594C26.1458 20.8594 25.2865 21.0625 24.4531 21.4688C23.6198 21.875 22.75 22.4531 21.8438 23.2031L19.2188 20.0938C19.875 19.5312 20.5677 19 21.2969 18.5C22.0365 18 22.8906 17.599 23.8594 17.2969C24.8385 16.9844 26.0104 16.8281 27.375 16.8281C28.875 16.8281 30.1615 17.099 31.2344 17.6406C32.3177 18.1823 33.151 18.9219 33.7344 19.8594C34.3177 20.7865 34.6094 21.8385 34.6094 23.0156C34.6094 24.276 34.3594 25.4271 33.8594 26.4688C33.3594 27.5104 32.6302 28.5417 31.6719 29.5625C30.724 30.5833 29.5781 31.7135 28.2344 32.9531L25.2969 35.7188V35.9375H35.25V40Z" fill="#583FBC"/>
+<circle cx="28" cy="28" r="27" stroke="#583FBC" stroke-width="2"/>
+</svg>
diff --git a/src/auth/registration/AddressField.tsx b/src/auth/registration/AddressField.tsx
index 6bea8c2b..d2adca8c 100644
--- a/src/auth/registration/AddressField.tsx
+++ b/src/auth/registration/AddressField.tsx
@@ -1,8 +1,12 @@
-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%">
@@ -10,7 +14,7 @@ export function AddressField() {
         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
diff --git a/src/auth/registration/AdvertiserRegistered.tsx b/src/auth/registration/AdvertiserRegistered.tsx
index 634e6736..0984799b 100644
--- a/src/auth/registration/AdvertiserRegistered.tsx
+++ b/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{" "}
diff --git a/src/auth/registration/MarginedDivider.tsx b/src/auth/registration/MarginedDivider.tsx
new file mode 100644
index 00000000..4ca9c921
--- /dev/null
+++ b/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 }}
+    />
+  );
+}
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&rsquo;ll need your info.
       </Typography>
 
-      <Divider sx={{ marginTop: 5, marginBottom: 5 }} />
+      <MarginedDivider />
 
       <FormikTextField
         name="fullName"
diff --git a/src/auth/registration/Register.tsx b/src/auth/registration/Register.tsx
index 03c0fc71..6c0c5cdb 100644
--- a/src/auth/registration/Register.tsx
+++ b/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>
diff --git a/src/auth/registration/types.ts b/src/auth/registration/types.ts
index ec887b50..7eac0e34 100644
--- a/src/auth/registration/types.ts
+++ b/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",
+};
diff --git a/src/auth/views/LandingPage.tsx b/src/auth/views/LandingPage.tsx
index 5a9850e6..0b0605ce 100644
--- a/src/auth/views/LandingPage.tsx
+++ b/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>
   );
diff --git a/src/auth/views/MobileAdsBenefits.tsx b/src/auth/views/MobileAdsBenefits.tsx
new file mode 100644
index 00000000..3415cb46
--- /dev/null
+++ b/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",
+      }}
+    />
+  );
+};
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 (
     <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>
diff --git a/src/components/AppBar/LandingPageAppBar.tsx b/src/components/AppBar/LandingPageAppBar.tsx
index 99436d56..5555e2cd 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,16 +14,21 @@ 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 : (
         <RouterLink to={"/register"} style={{ textDecoration: "none" }}>
-          <Typography variant="subtitle1" color="text.primary">
+          <Typography
+            variant={isMobile ? "body2" : "subtitle1"}
+            color="text.primary"
+          >
             Get started
           </Typography>
         </RouterLink>
@@ -48,7 +52,6 @@ export function LandingPageAppBar() {
 
   return (
     <Box sx={{ display: "flex" }}>
-      <CssBaseline />
       <AppBar
         position="fixed"
         sx={{
@@ -58,16 +61,27 @@ export function LandingPageAppBar() {
           justifyContent: "center",
         }}
       >
-        <Toolbar>
-          <Stack direction="row" alignItems="center" spacing={3}>
+        <Toolbar sx={{ justifyContent: "space-between", flexGrow: 1 }}>
+          <Stack
+            direction="row"
+            alignItems="center"
+            spacing={isMobile ? 2 : 3}
+            justifyContent="space-between"
+          >
             <RouterLink to="/" style={{ marginTop: 5 }}>
-              <img src={ads} alt="Ads" height="31px" width="180px" />
+              <img
+                src={ads}
+                alt="Ads"
+                height={isMobile ? undefined : "31px"}
+                width={isMobile ? undefined : "180px"}
+              />
             </RouterLink>
-            <Divider orientation="vertical" flexItem sx={{ marginRight: 3 }} />
+
+            <Divider orientation="vertical" flexItem />
             {links.map((l) => l.component)}
           </Stack>
           <div style={{ flexGrow: 1 }} />
-          {!match.url.includes("auth") && (
+          {!isMobile && !match.url.includes("auth") && (
             <AuthedButton isAuthenticated={isAuthenticated} />
           )}
         </Toolbar>
@@ -82,8 +96,14 @@ interface HelpProps {
 }
 
 function HelpLink({ label, props }: HelpProps) {
+  const isMobile = useIsMobile();
   return (
-    <Link variant="subtitle1" underline="none" color="text.primary" {...props}>
+    <Link
+      variant={isMobile ? "body2" : "subtitle1"}
+      underline="none"
+      color="text.primary"
+      {...props}
+    >
       {label}
     </Link>
   );
diff --git a/src/components/Card/PaddedCardContainer.tsx b/src/components/Card/PaddedCardContainer.tsx
index 811943ac..93d4566d 100644
--- a/src/components/Card/PaddedCardContainer.tsx
+++ b/src/components/Card/PaddedCardContainer.tsx
@@ -1,12 +1,14 @@
 import { Card, CardContent } from "@mui/material";
+import { useIsMobile } from "hooks/useIsMobile";
 import { PropsWithChildren } from "react";
 
 export function PaddedCardContainer({ children }: PropsWithChildren) {
+  const isMobile = useIsMobile();
   return (
     <Card
       sx={{
         width: "100%",
-        padding: "38px",
+        padding: isMobile ? "2px" : "38px",
         gap: "22px",
       }}
     >
diff --git a/src/components/Drawer/MiniSideBar.tsx b/src/components/Drawer/MiniSideBar.tsx
index 01335fc1..dca5a68a 100644
--- a/src/components/Drawer/MiniSideBar.tsx
+++ b/src/components/Drawer/MiniSideBar.tsx
@@ -21,6 +21,7 @@ import HeadsetMicOutlinedIcon from "@mui/icons-material/HeadsetMicOutlined";
 import InsertPhotoOutlinedIcon from "@mui/icons-material/InsertPhotoOutlined";
 import LightbulbOutlinedIcon from "@mui/icons-material/LightbulbOutlined";
 import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined";
+import { useIsMobile } from "hooks/useIsMobile";
 
 type RouteOption = {
   label: string;
@@ -172,6 +173,7 @@ interface SupportProps {
 export function SupportMenu({ usePlainLink }: SupportProps) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  const isMobile = useIsMobile();
 
   const handleClick = (
     event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
@@ -196,7 +198,7 @@ export function SupportMenu({ usePlainLink }: SupportProps) {
       )}
       {usePlainLink && (
         <Link
-          variant="subtitle1"
+          variant={isMobile ? "body2" : "subtitle1"}
           underline="none"
           color="text.primary"
           sx={{ cursor: "pointer" }}
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"));
+};