diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx index 87e2b9fdffbf6..3d1f393b865b8 100644 --- a/site/src/components/Paywall/Paywall.tsx +++ b/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> = (props) => { return (
- - {message} - + + + {message} + + + + {description && ( > = (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, + }, +}))