@@ -19,15 +19,7 @@ export const Paywall: FC<PaywallProps> = ({
19
19
documentationLink,
20
20
} ) => {
21
21
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 ] } >
31
23
< div >
32
24
< Stack direction = "row" alignItems = "center" css = { { marginBottom : 24 } } >
33
25
< h5 css = { styles . title } > { message } </ h5 >
@@ -45,7 +37,7 @@ export const Paywall: FC<PaywallProps> = ({
45
37
</ Link >
46
38
</ div >
47
39
< div css = { styles . separator } />
48
- < Stack direction = "column" alignItems = "center " spacing = { 3 } >
40
+ < Stack direction = "column" alignItems = "left " spacing = { 3 } >
49
41
< ul css = { styles . featureList } >
50
42
< li css = { styles . feature } >
51
43
< FeatureIcon />
@@ -64,16 +56,18 @@ export const Paywall: FC<PaywallProps> = ({
64
56
Unlimited Git & external auth integrations
65
57
</ li >
66
58
</ ul >
67
- < Button
68
- href = { docs ( "/enterprise" ) }
69
- target = "_blank"
70
- rel = "noreferrer"
71
- startIcon = { < span css = { { fontSize : 22 } } > →</ 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 } } > →</ span > }
65
+ variant = "outlined"
66
+ color = "neutral"
67
+ >
68
+ Learn about Premium
69
+ </ Button >
70
+ </ div >
77
71
</ Stack >
78
72
</ div >
79
73
) ;
@@ -92,7 +86,7 @@ const FeatureIcon: FC = () => {
92
86
} ;
93
87
94
88
const styles = {
95
- root : ( ) => ( {
89
+ root : ( theme ) => ( {
96
90
display : "flex" ,
97
91
flexDirection : "row" ,
98
92
justifyContent : "center" ,
@@ -101,6 +95,8 @@ const styles = {
101
95
padding : 24 ,
102
96
borderRadius : 8 ,
103
97
gap : 32 ,
98
+ backgroundImage : `linear-gradient(160deg, transparent, ${ theme . branding . background } )` ,
99
+ border : `1px solid ${ theme . branding . border } ` ,
104
100
} ) ,
105
101
title : {
106
102
fontWeight : 600 ,
@@ -119,6 +115,9 @@ const styles = {
119
115
backgroundColor : theme . branding . divider ,
120
116
marginLeft : 8 ,
121
117
} ) ,
118
+ learnButton : {
119
+ padding : "0 28px" ,
120
+ } ,
122
121
featureList : {
123
122
listStyle : "none" ,
124
123
margin : 0 ,
0 commit comments