Skip to content

Commit 619bdd1

Browse files
aslilacaslilac
authored
refactor: redesign Paywall component (#11907)
1 parent 20dcefa commit 619bdd1

File tree

7 files changed

+120
-108
lines changed

7 files changed

+120
-108
lines changed

‎site/src/components/Paywall/Paywall.stories.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { Paywall } from "./Paywall";
3+
4+
const meta: Meta<typeof Paywall> = {
5+
title: "components/Paywall",
6+
component: Paywall,
7+
};
8+
9+
export default meta;
10+
type Story = StoryObj<typeof Paywall>;
11+
12+
const Example: Story = {
13+
args: {
14+
message: "Black Lotus",
15+
description:
16+
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
17+
},
18+
};
19+
20+
export { Example as Paywall };

‎site/src/components/Paywall/Paywall.tsx

Lines changed: 83 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,95 @@
1-
import { type FC, type ReactNode } from "react";
21
import { type Interpolation, type Theme } from "@emotion/react";
2+
import Button from "@mui/material/Button";
3+
import Link from "@mui/material/Link";
4+
import TaskAltIcon from "@mui/icons-material/TaskAlt";
5+
import { type FC, type ReactNode } from "react";
36
import { EnterpriseBadge } from "components/Badges/Badges";
47
import { Stack } from "components/Stack/Stack";
8+
import { docs } from "utils/docs";
59

610
export interface PaywallProps {
7-
children?: ReactNode;
811
message: string;
9-
description?: string | ReactNode;
10-
cta?: ReactNode;
12+
description?: ReactNode;
13+
documentationLink?: string;
1114
}
1215

13-
export const Paywall: FC<PaywallProps> = ({ message, description, cta }) => {
16+
export const Paywall: FC<PaywallProps> = ({
17+
message,
18+
description,
19+
documentationLink,
20+
}) => {
1421
return (
1522
<div css={styles.root}>
16-
<div css={{ marginBottom: 24 }}>
17-
<Stack direction="row" alignItems="center" justifyContent="center">
23+
<div>
24+
<Stack direction="row" alignItems="center" css={{ marginBottom: 24 }}>
1825
<h5 css={styles.title}>{message}</h5>
1926
<EnterpriseBadge />
2027
</Stack>
2128

2229
{description && <p css={styles.description}>{description}</p>}
30+
<Link
31+
href={documentationLink}
32+
target="_blank"
33+
rel="noreferrer"
34+
css={{ fontWeight: 600 }}
35+
>
36+
Read the documentation
37+
</Link>
2338
</div>
24-
{cta}
39+
<div css={styles.separator}></div>
40+
<Stack direction="column" alignItems="center" spacing={3}>
41+
<ul css={styles.featureList}>
42+
<li css={styles.feature}>
43+
<FeatureIcon /> Template access control
44+
</li>
45+
<li css={styles.feature}>
46+
<FeatureIcon /> User groups
47+
</li>
48+
<li css={styles.feature}>
49+
<FeatureIcon /> 24 hour support
50+
</li>
51+
<li css={styles.feature}>
52+
<FeatureIcon /> Audit logs
53+
</li>
54+
</ul>
55+
<Button
56+
href={docs("/enterprise")}
57+
target="_blank"
58+
rel="noreferrer"
59+
startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
60+
variant="outlined"
61+
color="neutral"
62+
>
63+
Learn about Enterprise
64+
</Button>
65+
</Stack>
2566
</div>
2667
);
2768
};
2869

70+
const FeatureIcon: FC = () => {
71+
return <TaskAltIcon css={styles.featureIcon} />;
72+
};
73+
2974
const styles = {
3075
root: (theme) => ({
3176
display: "flex",
32-
flexDirection: "column",
77+
flexDirection: "row",
3378
justifyContent: "center",
3479
alignItems: "center",
35-
textAlign: "center",
3680
minHeight: 300,
81+
maxWidth: 920,
82+
margin: "auto",
3783
padding: 24,
38-
backgroundColor: theme.palette.background.paper,
39-
border: `1px solid ${theme.palette.divider}`,
84+
backgroundImage: `linear-gradient(160deg, transparent, ${theme.experimental.roles.active.background})`,
85+
border: `1px solid ${theme.experimental.roles.active.fill.outline}`,
4086
borderRadius: 8,
87+
gap: 32,
4188
}),
4289
title: {
4390
fontWeight: 600,
4491
fontFamily: "inherit",
45-
fontSize: 24,
92+
fontSize: 22,
4693
margin: 0,
4794
},
4895
description: (theme) => ({
@@ -51,6 +98,29 @@ const styles = {
5198
maxWidth: 420,
5299
lineHeight: "160%",
53100
color: theme.palette.text.secondary,
101+
fontSize: 16,
102+
}),
103+
separator: (theme) => ({
104+
width: 1,
105+
height: 220,
106+
backgroundColor: theme.palette.divider,
107+
marginLeft: 8,
108+
}),
109+
featureList: {
110+
listStyle: "none",
111+
margin: 0,
112+
marginRight: 8,
113+
padding: "0 12px",
54114
fontSize: 14,
115+
fontWeight: 500,
116+
},
117+
featureIcon: (theme) => ({
118+
color: theme.experimental.roles.active.fill.outline,
55119
}),
120+
feature: {
121+
display: "flex",
122+
alignItems: "center",
123+
padding: 3,
124+
gap: 8,
125+
},
56126
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/AuditPage/AuditPageView.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import TableBody from "@mui/material/TableBody";
33
import TableCell from "@mui/material/TableCell";
44
import TableContainer from "@mui/material/TableContainer";
55
import TableRow from "@mui/material/TableRow";
6-
import { AuditLog } from "api/typesGenerated";
7-
import { AuditLogRow } from "./AuditLogRow/AuditLogRow";
6+
import { type ComponentProps, type FC } from "react";
7+
import type { AuditLog } from "api/typesGenerated";
88
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
99
import { EmptyState } from "components/EmptyState/EmptyState";
1010
import { Margins } from "components/Margins/Margins";
@@ -16,15 +16,15 @@ import {
1616
import { Stack } from "components/Stack/Stack";
1717
import { TableLoader } from "components/TableLoader/TableLoader";
1818
import { Timeline } from "components/Timeline/Timeline";
19-
import { AuditHelpTooltip } from "./AuditHelpTooltip";
20-
import { ComponentProps, FC } from "react";
21-
import { AuditPaywall } from "./AuditPaywall";
22-
import { AuditFilter } from "./AuditFilter";
23-
19+
import { Paywall } from "components/Paywall/Paywall";
2420
import {
2521
type PaginationResult,
2622
PaginationContainer,
2723
} from "components/PaginationWidget/PaginationContainer";
24+
import { docs } from "utils/docs";
25+
import { AuditHelpTooltip } from "./AuditHelpTooltip";
26+
import { AuditFilter } from "./AuditFilter";
27+
import { AuditLogRow } from "./AuditLogRow/AuditLogRow";
2828

2929
export const Language = {
3030
title: "Audit",
@@ -130,7 +130,11 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
130130
</Cond>
131131

132132
<Cond>
133-
<AuditPaywall />
133+
<Paywall
134+
message="Audit logs"
135+
description="Audit logs allow you to monitor user operations on your deployment. You need an Enterprise license to use this feature."
136+
documentationLink={docs("/admin/audit-logs")}
137+
/>
134138
</Cond>
135139
</ChooseOne>
136140
</Margins>

‎site/src/pages/AuditPage/AuditPaywall.tsx

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎site/src/pages/GroupsPage/GroupsPageView.tsx

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import { type Interpolation, type Theme } from "@emotion/react";
22
import Button from "@mui/material/Button";
3-
import Link from "@mui/material/Link";
43
import Table from "@mui/material/Table";
54
import TableBody from "@mui/material/TableBody";
65
import TableCell from "@mui/material/TableCell";
76
import TableContainer from "@mui/material/TableContainer";
87
import TableHead from "@mui/material/TableHead";
98
import TableRow from "@mui/material/TableRow";
10-
import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined";
9+
import Skeleton from "@mui/material/Skeleton";
1110
import AddOutlined from "@mui/icons-material/AddOutlined";
1211
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
1312
import AvatarGroup from "@mui/material/AvatarGroup";
1413
import { AvatarData } from "components/AvatarData/AvatarData";
1514
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
1615
import { EmptyState } from "components/EmptyState/EmptyState";
17-
import { Stack } from "components/Stack/Stack";
1816
import {
1917
TableLoaderSkeleton,
2018
TableRowSkeleton,
@@ -26,7 +24,6 @@ import { Paywall } from "components/Paywall/Paywall";
2624
import type { Group } from "api/typesGenerated";
2725
import { GroupAvatar } from "components/GroupAvatar/GroupAvatar";
2826
import { docs } from "utils/docs";
29-
import Skeleton from "@mui/material/Skeleton";
3027
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
3128

3229
export type GroupsPageViewProps = {
@@ -51,28 +48,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
5148
<Paywall
5249
message="Groups"
5350
description="Organize users into groups with restricted access to templates. You need an Enterprise license to use this feature."
54-
cta={
55-
<Stack direction="row" alignItems="center">
56-
<Button
57-
href={docs("/enterprise")}
58-
target="_blank"
59-
rel="noreferrer"
60-
startIcon={<ArrowRightAltOutlined />}
61-
variant="contained"
62-
color="primary"
63-
>
64-
Learn about Enterprise
65-
</Button>
66-
67-
<Link
68-
href={docs("/admin/groups")}
69-
target="_blank"
70-
rel="noreferrer"
71-
>
72-
Read the documentation
73-
</Link>
74-
</Stack>
75-
}
51+
documentationLink={docs("/admin/groups")}
7652
/>
7753
</Cond>
7854
<Cond>

‎site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import Button from "@mui/material/Button";
2-
import Link from "@mui/material/Link";
3-
import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined";
41
import { type FC } from "react";
52
import { Helmet } from "react-helmet-async";
63
import { useMutation, useQuery, useQueryClient } from "react-query";
74
import { setGroupRole, setUserRole, templateACL } from "api/queries/templates";
85
import { Paywall } from "components/Paywall/Paywall";
9-
import { Stack } from "components/Stack/Stack";
106
import { displaySuccess } from "components/GlobalSnackbar/utils";
117
import { useOrganizationId } from "contexts/auth/useOrganizationId";
128
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
@@ -38,26 +34,8 @@ export const TemplatePermissionsPage: FC = () => {
3834
{!isTemplateRBACEnabled ? (
3935
<Paywall
4036
message="Template permissions"
41-
description="Manage your template permissions to allow users or groups to view or admin the template. To use this feature, you have to upgrade your account."
42-
cta={
43-
<Stack direction="row" alignItems="center">
44-
<Link
45-
href={docs("/admin/upgrade")}
46-
target="_blank"
47-
rel="noreferrer"
48-
>
49-
<Button
50-
startIcon={<ArrowRightAltOutlined />}
51-
variant="contained"
52-
>
53-
See how to upgrade
54-
</Button>
55-
</Link>
56-
<Link href={docs("/admin/rbac")} target="_blank" rel="noreferrer">
57-
Read the documentation
58-
</Link>
59-
</Stack>
60-
}
37+
description="Control access of templates for users and groups to templates. You need an Enterprise license to use this feature."
38+
documentationLink={docs("/admin/rbac")}
6139
/>
6240
) : (
6341
<TemplatePermissionsPageView

‎site/src/theme/dark/experimental.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export default {
151151
text: colors.sky[50],
152152
fill: {
153153
solid: colors.sky[600],
154-
outline: colors.sky[600],
154+
outline: colors.sky[400],
155155
text: colors.white,
156156
},
157157
disabled: {

0 commit comments

Comments
 (0)