Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit619bdd1

Browse files
authored
refactor: redesignPaywall component (#11907)
1 parent20dcefa commit619bdd1

File tree

7 files changed

+120
-108
lines changed

7 files changed

+120
-108
lines changed
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{Paywall}from"./Paywall";
3+
4+
constmeta:Meta<typeofPaywall>={
5+
title:"components/Paywall",
6+
component:Paywall,
7+
};
8+
9+
exportdefaultmeta;
10+
typeStory=StoryObj<typeofPaywall>;
11+
12+
constExample: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{ExampleasPaywall};
Lines changed: 83 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,95 @@
1-
import{typeFC,typeReactNode}from"react";
21
import{typeInterpolation,typeTheme}from"@emotion/react";
2+
importButtonfrom"@mui/material/Button";
3+
importLinkfrom"@mui/material/Link";
4+
importTaskAltIconfrom"@mui/icons-material/TaskAlt";
5+
import{typeFC,typeReactNode}from"react";
36
import{EnterpriseBadge}from"components/Badges/Badges";
47
import{Stack}from"components/Stack/Stack";
8+
import{docs}from"utils/docs";
59

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

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

2229
{description&&<pcss={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+
<divcss={styles.separator}></div>
40+
<Stackdirection="column"alignItems="center"spacing={3}>
41+
<ulcss={styles.featureList}>
42+
<licss={styles.feature}>
43+
<FeatureIcon/> Template access control
44+
</li>
45+
<licss={styles.feature}>
46+
<FeatureIcon/> User groups
47+
</li>
48+
<licss={styles.feature}>
49+
<FeatureIcon/> 24 hour support
50+
</li>
51+
<licss={styles.feature}>
52+
<FeatureIcon/> Audit logs
53+
</li>
54+
</ul>
55+
<Button
56+
href={docs("/enterprise")}
57+
target="_blank"
58+
rel="noreferrer"
59+
startIcon={<spancss={{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+
constFeatureIcon:FC=()=>{
71+
return<TaskAltIconcss={styles.featureIcon}/>;
72+
};
73+
2974
conststyles={
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
}satisfiesRecord<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
importTableCellfrom"@mui/material/TableCell";
44
importTableContainerfrom"@mui/material/TableContainer";
55
importTableRowfrom"@mui/material/TableRow";
6-
import{AuditLog}from"api/typesGenerated";
7-
import{AuditLogRow}from"./AuditLogRow/AuditLogRow";
6+
import{typeComponentProps,typeFC}from"react";
7+
importtype{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
typePaginationResult,
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
exportconstLanguage={
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{typeInterpolation,typeTheme}from"@emotion/react";
22
importButtonfrom"@mui/material/Button";
3-
importLinkfrom"@mui/material/Link";
43
importTablefrom"@mui/material/Table";
54
importTableBodyfrom"@mui/material/TableBody";
65
importTableCellfrom"@mui/material/TableCell";
76
importTableContainerfrom"@mui/material/TableContainer";
87
importTableHeadfrom"@mui/material/TableHead";
98
importTableRowfrom"@mui/material/TableRow";
10-
importArrowRightAltOutlinedfrom"@mui/icons-material/ArrowRightAltOutlined";
9+
importSkeletonfrom"@mui/material/Skeleton";
1110
importAddOutlinedfrom"@mui/icons-material/AddOutlined";
1211
importKeyboardArrowRightfrom"@mui/icons-material/KeyboardArrowRight";
1312
importAvatarGroupfrom"@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
importtype{Group}from"api/typesGenerated";
2725
import{GroupAvatar}from"components/GroupAvatar/GroupAvatar";
2826
import{docs}from"utils/docs";
29-
importSkeletonfrom"@mui/material/Skeleton";
3027
import{AvatarDataSkeleton}from"components/AvatarData/AvatarDataSkeleton";
3128

3229
exporttypeGroupsPageViewProps={
@@ -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-
<Stackdirection="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-
importButtonfrom"@mui/material/Button";
2-
importLinkfrom"@mui/material/Link";
3-
importArrowRightAltOutlinedfrom"@mui/icons-material/ArrowRightAltOutlined";
41
import{typeFC}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-
<Stackdirection="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-
<Linkhref={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)
[8]ページ先頭
©2009-2025 Movatter.jp