Remove Typography from Paywall

BrunoQuaresma · BrunoQuaresma · commit 864246cae25e · 2023-11-17T18:27:35.000Z
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
@@ -1,5 +1,4 @@
 import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
 import { type FC, type ReactNode } from "react";
 import { type Interpolation, type Theme } from "@emotion/react";
 import { EnterpriseBadge } from "components/Badges/Badges";
@@ -18,21 +17,11 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
     <Box css={styles.root}>
       <div css={styles.header}>
         <Stack direction="row" alignItems="center" justifyContent="center">
-          <Typography variant="h5" css={styles.title}>
-            {message}
-          </Typography>
+          <h5 css={styles.title}>{message}</h5>
           <EnterpriseBadge />
         </Stack>
 
-        {description && (
-          <Typography
-            variant="body2"
-            color="textSecondary"
-            css={styles.description}
-          >
-            {description}
-          </Typography>
-        )}
+        {description && <p css={styles.description}>{description}</p>}
       </div>
       {cta}
     </Box>
@@ -58,13 +47,17 @@ const styles = {
   title: {
     fontWeight: 600,
     fontFamily: "inherit",
+    fontSize: 24,
+    margin: 0,
   },
-  description: {
-    marginTop: 8,
+  description: (theme) => ({
+    marginTop: 14,
     fontFamily: "inherit",
     maxWidth: 420,
     lineHeight: "160%",
-  },
+    color: theme.palette.text.secondary,
+    fontSize: 16,
+  }),
   enterpriseChip: (theme) => ({
     background: theme.palette.success.dark,
     color: theme.palette.success.contrastText,
