emotion: Paywall

coder · aslilac · Oct 16, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
commit 8927e2355ba4a36a6445da84ceaf07fb19fee5dc
@@ -1,9 +1,9 @@
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
-import { makeStyles } from "@mui/styles";
 import Typography from "@mui/material/Typography";
+import { type FC, type ReactNode } from "react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
-import { FC, ReactNode } from "react";
 
 export interface PaywallProps {
   message: string;
@@ -13,17 +13,16 @@ export interface PaywallProps {
 
 export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
   const { message, description, cta } = props;
-  const styles = useStyles();
 
   return (
-    <Box className={styles.root}>
-      <div className={styles.header}>
+    <Box css={styles.root}>
+      <div css={styles.header}>
         <Stack direction="row" alignItems="center" justifyContent="center">
-          <Typography variant="h5" className={styles.title}>
+          <Typography variant="h5" css={styles.title}>
             {message}
           </Typography>
           <Chip
-            className={styles.enterpriseChip}
+            css={styles.enterpriseChip}
             label="Enterprise"
             size="small"
             color="primary"
@@ -34,7 +33,7 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
           <Typography
             variant="body2"
             color="textSecondary"
-            className={styles.description}
+            css={styles.description}
           >
             {description}
           </Typography>
@@ -45,8 +44,8 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const styles = {
+  root: (theme) => ({
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -57,24 +56,24 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadius,
-  },
-  header: {
+  }),
+  header: (theme) => ({
     marginBottom: theme.spacing(3),
-  },
+  }),
   title: {
     fontWeight: 600,
     fontFamily: "inherit",
   },
-  description: {
+  description: (theme) => ({
     marginTop: theme.spacing(1),
     fontFamily: "inherit",
     maxWidth: 420,
     lineHeight: "160%",
-  },
-  enterpriseChip: {
+  }),
+  enterpriseChip: (theme) => ({
     background: theme.palette.success.dark,
     color: theme.palette.success.contrastText,
     border: `1px solid ${theme.palette.success.light}`,
     fontSize: 13,
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;