Skip to content

Commit 164b65e

Browse files
committed
chore: paywall improvements
1 parent 791d88d commit 164b65e

File tree

1 file changed

+20
-21
lines changed

1 file changed

+20
-21
lines changed

site/src/components/Paywall/Paywall.tsx

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,7 @@ export const Paywall: FC<PaywallProps> = ({
1919
documentationLink,
2020
}) => {
2121
return (
22-
<div
23-
css={[
24-
styles.root,
25-
(theme) => ({
26-
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
27-
border: `1px solid ${theme.branding.border}`,
28-
}),
29-
]}
30-
>
22+
<div css={[styles.root]}>
3123
<div>
3224
<Stack direction="row" alignItems="center" css={{ marginBottom: 24 }}>
3325
<h5 css={styles.title}>{message}</h5>
@@ -45,7 +37,7 @@ export const Paywall: FC<PaywallProps> = ({
4537
</Link>
4638
</div>
4739
<div css={styles.separator} />
48-
<Stack direction="column" alignItems="center" spacing={3}>
40+
<Stack direction="column" alignItems="left" spacing={3}>
4941
<ul css={styles.featureList}>
5042
<li css={styles.feature}>
5143
<FeatureIcon />
@@ -64,16 +56,18 @@ export const Paywall: FC<PaywallProps> = ({
6456
Unlimited Git & external auth integrations
6557
</li>
6658
</ul>
67-
<Button
68-
href={docs("/enterprise")}
69-
target="_blank"
70-
rel="noreferrer"
71-
startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
72-
variant="outlined"
73-
color="neutral"
74-
>
75-
Learn about Premium
76-
</Button>
59+
<div css={styles.learnButton}>
60+
<Button
61+
href={docs("/enterprise")}
62+
target="_blank"
63+
rel="noreferrer"
64+
startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
65+
variant="outlined"
66+
color="neutral"
67+
>
68+
Learn about Premium
69+
</Button>
70+
</div>
7771
</Stack>
7872
</div>
7973
);
@@ -92,7 +86,7 @@ const FeatureIcon: FC = () => {
9286
};
9387

9488
const styles = {
95-
root: () => ({
89+
root: (theme) => ({
9690
display: "flex",
9791
flexDirection: "row",
9892
justifyContent: "center",
@@ -101,6 +95,8 @@ const styles = {
10195
padding: 24,
10296
borderRadius: 8,
10397
gap: 32,
98+
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
99+
border: `1px solid ${theme.branding.border}`,
104100
}),
105101
title: {
106102
fontWeight: 600,
@@ -119,6 +115,9 @@ const styles = {
119115
backgroundColor: theme.branding.divider,
120116
marginLeft: 8,
121117
}),
118+
learnButton: {
119+
padding: "0 28px",
120+
},
122121
featureList: {
123122
listStyle: "none",
124123
margin: 0,

0 commit comments

Comments
 (0)