Skip to content

Commit 7947b1b

Browse files
mabdullahabaidmabdullahabaid
authored
Fix self-hosting pricing page design. (#19930)
Resolve: https://discord.com/channels/1130383047699738754/1496108238909739079
1 parent 2b399fc commit 7947b1b

2 files changed

Lines changed: 230 additions & 92 deletions

File tree

‎packages/twenty-website-new/src/app/enterprise/activate/EnterpriseActivateClient.tsx‎

Lines changed: 149 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
'use client';
22

3+
import {
4+
BaseButton,
5+
buttonBaseStyles,
6+
} from '@/design-system/components/Button/BaseButton';
7+
import { Body, Heading } from '@/design-system/components';
38
import { theme } from '@/theme';
9+
import { css } from '@linaria/core';
410
import { styled } from '@linaria/react';
511
import { useSearchParams } from 'next/navigation';
612
import { useEffect, useState } from 'react';
@@ -11,49 +17,38 @@ type ActivationResult = {
1117
subscriptionId: string;
1218
};
1319

14-
const PageWrap = styled.div`
15-
box-sizing: border-box;
16-
margin-left: auto;
17-
margin-right: auto;
18-
margin-top: ${theme.spacing(12)};
19-
max-width: 700px;
20-
min-height: 60vh;
21-
padding-left: ${theme.spacing(4)};
22-
padding-right: ${theme.spacing(4)};
23-
`;
24-
25-
const Title = styled.h1`
26-
font-size: ${theme.font.size(8)};
27-
font-weight: 600;
28-
margin-bottom: ${theme.spacing(4)};
20+
const ContentStack = styled.div`
21+
display: flex;
22+
flex-direction: column;
23+
gap: ${theme.spacing(6)};
2924
`;
3025

3126
const ErrorBox = styled.div`
3227
background-color: ${theme.colors.primary.border[5]};
3328
border: 1px solid ${theme.colors.accent.pink[70]};
3429
border-radius: ${theme.radius(2)};
3530
color: ${theme.colors.accent.pink[100]};
31+
font-family: ${theme.font.family.sans};
32+
font-size: ${theme.font.size(4)};
33+
line-height: 1.55;
3634
padding: ${theme.spacing(4)};
3735
`;
3836

39-
const SuccessLead = styled.p`
37+
const successLeadClassName = css`
4038
color: ${theme.colors.accent.green[100]};
41-
margin-bottom: ${theme.spacing(4)};
4239
`;
4340

4441
const LicenseeRow = styled.div`
45-
margin-bottom: ${theme.spacing(6)};
46-
`;
47-
48-
const KeyLabel = styled.div`
49-
font-weight: 600;
50-
margin-bottom: ${theme.spacing(2)};
42+
align-items: baseline;
43+
display: flex;
44+
flex-wrap: wrap;
45+
gap: ${theme.spacing(1)};
5146
`;
5247

53-
const KeyHint = styled.p`
54-
color: ${theme.colors.primary.text[60]};
55-
font-size: ${theme.font.size(3)};
56-
margin-bottom: ${theme.spacing(2)};
48+
const KeySection = styled.div`
49+
display: flex;
50+
flex-direction: column;
51+
gap: ${theme.spacing(2)};
5752
`;
5853

5954
const KeyBlock = styled.div`
@@ -69,34 +64,63 @@ const KeyBlock = styled.div`
6964
word-break: break-all;
7065
`;
7166

72-
const CopyButton = styled.button<{ $copied: boolean }>`
73-
background-color: ${({ $copied }) =>
74-
$copied ? theme.colors.accent.green[100] : theme.colors.primary.text[100]};
75-
border: none;
76-
border-radius: ${theme.radius(1)};
77-
color: ${theme.colors.primary.background[100]};
78-
cursor: pointer;
79-
font-size: ${theme.font.size(2)};
80-
padding: ${theme.spacing(2)} ${theme.spacing(3)};
67+
const CopyTrigger = styled.button<{ $copied: boolean }>`
68+
${buttonBaseStyles}
8169
position: absolute;
8270
right: ${theme.spacing(2)};
8371
top: ${theme.spacing(2)};
72+
73+
${({ $copied }) =>
74+
$copied
75+
? `
76+
& [data-slot='button-base-shape'] path,
77+
& [data-slot='button-base-shape'] rect {
78+
fill: ${theme.colors.accent.green[100]} !important;
79+
}
80+
81+
& [data-slot='button-hover-fill'] {
82+
opacity: 0 !important;
83+
pointer-events: none;
84+
}
85+
86+
& [data-slot='button-label'] {
87+
color: ${theme.colors.primary.background[100]} !important;
88+
}
89+
90+
&:is(:hover, :focus-visible) [data-slot='button-label'] {
91+
color: ${theme.colors.primary.background[100]} !important;
92+
}
93+
`
94+
: ''}
8495
`;
8596

8697
const NextStepsBox = styled.div`
8798
background-color: ${theme.colors.primary.border[5]};
88-
border: 1px solid ${theme.colors.accent.blue[70]};
99+
border: 1px solid ${theme.colors.primary.border[20]};
100+
border-left: 3px solid ${theme.colors.highlight[100]};
89101
border-radius: ${theme.radius(2)};
90-
margin-top: ${theme.spacing(8)};
102+
display: flex;
103+
flex-direction: column;
104+
gap: ${theme.spacing(2)};
91105
padding: ${theme.spacing(4)};
92106
`;
93107

94108
const NextStepsList = styled.ol`
95-
line-height: 1.75;
96-
margin-top: ${theme.spacing(2)};
109+
display: flex;
110+
flex-direction: column;
111+
gap: ${theme.spacing(2)};
112+
list-style-position: outside;
113+
margin: 0;
97114
padding-left: ${theme.spacing(5)};
98115
`;
99116

117+
const nextStepItemClassName = css`
118+
&::marker {
119+
color: ${theme.colors.primary.text[60]};
120+
font-weight: ${theme.font.weight.medium};
121+
}
122+
`;
123+
100124
export function EnterpriseActivateClient() {
101125
const searchParams = useSearchParams();
102126
const sessionId = searchParams.get('session_id');
@@ -159,53 +183,105 @@ export function EnterpriseActivateClient() {
159183
};
160184

161185
return (
162-
<PageWrap>
163-
<Title>{'Enterprise activation'}</Title>
164-
165-
{loading && <p>{'Activating your enterprise license…'}</p>}
186+
<ContentStack>
187+
{loading && (
188+
<Body
189+
body={{ text: 'Activating your enterprise license…' }}
190+
size="sm"
191+
variant="body-paragraph"
192+
/>
193+
)}
166194

167195
{error !== null && <ErrorBox>{error}</ErrorBox>}
168196

169197
{result !== null && (
170-
<div>
171-
<SuccessLead>
172-
{'Your enterprise license has been activated successfully.'}
173-
</SuccessLead>
198+
<>
199+
<Body
200+
body={{
201+
text: 'Your enterprise license has been activated successfully.',
202+
}}
203+
className={successLeadClassName}
204+
size="md"
205+
weight="medium"
206+
/>
174207

175208
<LicenseeRow>
176-
<strong>{'Licensee:'}</strong> {result.licensee}
209+
<Body
210+
as="span"
211+
body={{ text: 'Licensee: ' }}
212+
size="sm"
213+
weight="medium"
214+
/>
215+
<Body as="span" body={{ text: result.licensee }} size="sm" />
177216
</LicenseeRow>
178217

179-
<KeyLabel>{'Your enterprise key'}</KeyLabel>
180-
<KeyHint>
181-
{
182-
'Copy this key and paste it into your Twenty self-hosted instance settings.'
183-
}
184-
</KeyHint>
185-
186-
<KeyBlock>
187-
{result.enterpriseKey}
188-
<CopyButton
189-
$copied={copied}
190-
onClick={() => void handleCopy()}
191-
type="button"
192-
>
193-
{copied ? 'Copied!' : 'Copy'}
194-
</CopyButton>
195-
</KeyBlock>
218+
<KeySection>
219+
<Heading
220+
as="h2"
221+
segments={{ fontFamily: 'sans', text: 'Your enterprise key' }}
222+
size="xs"
223+
weight="medium"
224+
/>
225+
<Body
226+
body={{
227+
text: 'Copy this key and paste it into your Twenty self-hosted instance settings.',
228+
}}
229+
size="sm"
230+
variant="body-paragraph"
231+
/>
232+
233+
<KeyBlock>
234+
{result.enterpriseKey}
235+
<CopyTrigger
236+
$copied={copied}
237+
data-color="primary"
238+
data-size="small"
239+
data-variant="contained"
240+
onClick={() => void handleCopy()}
241+
type="button"
242+
>
243+
<BaseButton
244+
color="primary"
245+
label={copied ? 'Copied!' : 'Copy'}
246+
size="small"
247+
variant="contained"
248+
/>
249+
</CopyTrigger>
250+
</KeyBlock>
251+
</KeySection>
196252

197253
<NextStepsBox>
198-
<strong>{'Next steps'}</strong>
254+
<Heading
255+
as="h3"
256+
segments={{ fontFamily: 'sans', text: 'Next steps' }}
257+
size="xs"
258+
weight="medium"
259+
/>
199260
<NextStepsList>
200-
<li>{'Copy the enterprise key above.'}</li>
201-
<li>
202-
{'Open your Twenty self-hosted instance Settings → Enterprise.'}
261+
<li className={nextStepItemClassName}>
262+
<Body
263+
body={{ text: 'Copy the enterprise key above.' }}
264+
size="sm"
265+
/>
266+
</li>
267+
<li className={nextStepItemClassName}>
268+
<Body
269+
body={{
270+
text: 'Open your Twenty self-hosted instance Settings → Enterprise.',
271+
}}
272+
size="sm"
273+
/>
274+
</li>
275+
<li className={nextStepItemClassName}>
276+
<Body
277+
body={{ text: 'Paste the key and click Activate.' }}
278+
size="sm"
279+
/>
203280
</li>
204-
<li>{'Paste the key and click Activate.'}</li>
205281
</NextStepsList>
206282
</NextStepsBox>
207-
</div>
283+
</>
208284
)}
209-
</PageWrap>
285+
</ContentStack>
210286
);
211287
}

0 commit comments

Comments
 (0)