refactor: Add enterprise badge to paywalls (#4477)

site/src/components/Paywall/Paywall.tsx

@@ -1,8 +1,9 @@
 import Box from "@material-ui/core/Box"
+import Chip from "@material-ui/core/Chip"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
+import { Stack } from "components/Stack/Stack"
 import { FC, ReactNode } from "react"
-import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 
 export interface PaywallProps {
   message: string
@@ -17,9 +18,18 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
   return (
     <Box className={styles.root}>
       <div className={styles.header}>
-        <Typography variant="h5" className={styles.title}>
-          {message}
-        </Typography>
+        <Stack direction="row" alignItems="center" justifyContent="center">
+          <Typography variant="h5" className={styles.title}>
+            {message}
+          </Typography>
+          <Chip
+            className={styles.enterpriseChip}
+            label="Enterprise"
+            size="small"
+            color="primary"
+          />
+        </Stack>
+
         {description && (
           <Typography
             variant="body2"
@@ -35,33 +45,36 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
   )
 }
 
-const useStyles = makeStyles(
-  (theme) => ({
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      textAlign: "center",
-      minHeight: 300,
-      padding: theme.spacing(3),
-      fontFamily: MONOSPACE_FONT_FAMILY,
-      backgroundColor: theme.palette.background.paper,
-      border: `1px solid ${theme.palette.divider}`,
-      borderRadius: theme.shape.borderRadius,
-    },
-    header: {
-      marginBottom: theme.spacing(3),
-    },
-    title: {
-      fontWeight: 600,
-      fontFamily: "inherit",
-    },
-    description: {
-      marginTop: theme.spacing(1),
-      fontFamily: "inherit",
-      maxWidth: 420,
-    },
-  }),
-  { name: "Paywall" },
-)
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    minHeight: 300,
+    padding: theme.spacing(3),
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+  },
+  header: {
+    marginBottom: theme.spacing(3),
+  },
+  title: {
+    fontWeight: 600,
+    fontFamily: "inherit",
+  },
+  description: {
+    marginTop: theme.spacing(1),
+    fontFamily: "inherit",
+    maxWidth: 420,
+    lineHeight: "160%",
+  },
+  enterpriseChip: {
+    background: theme.palette.success.dark,
+    color: theme.palette.success.contrastText,
+    border: `1px solid ${theme.palette.success.light}`,
+    fontSize: 13,
+  },
+}))