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

Commit7d63dc2

Browse files
refactor(site): add minor design improvements on the setup page (#10511)
1 parentbb4ce87 commit7d63dc2

File tree

2 files changed

+88
-33
lines changed

2 files changed

+88
-33
lines changed

‎site/src/components/Welcome/Welcome.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const Welcome: FC<
3737
font-size:${theme.spacing(4)};
3838
font-weight:400;
3939
margin:0;
40-
margin-bottom:${theme.spacing(2)};
40+
margin-bottom:${theme.spacing(4)};
4141
margin-top:${theme.spacing(2)};
4242
line-height:1.25;
4343

‎site/src/pages/SetupPage/SetupPageView.tsx

Lines changed: 87 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
importBoxfrom"@mui/material/Box";
21
importCheckboxfrom"@mui/material/Checkbox";
32
importTextFieldfrom"@mui/material/TextField";
4-
importTypographyfrom"@mui/material/Typography";
53
import{SignInLayout}from"components/SignInLayout/SignInLayout";
6-
import{Stack}from"components/Stack/Stack";
7-
import{Welcome}from"components/Welcome/Welcome";
84
import{typeFormikContextType,useFormik}from"formik";
95
import{
106
getFormHelpers,
@@ -14,6 +10,10 @@ import {
1410
import*asYupfrom"yup";
1511
importtype*asTypesGenfrom"api/typesGenerated";
1612
importLoadingButtonfrom"@mui/lab/LoadingButton";
13+
import{FormFields,VerticalForm}from"components/Form/Form";
14+
import{CoderIcon}from"components/Icons/CoderIcon";
15+
importLinkfrom"@mui/material/Link";
16+
import{docs}from"utils/docs";
1717

1818
exportconstLanguage={
1919
emailLabel:"Email",
@@ -64,10 +64,40 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
6464

6565
return(
6666
<SignInLayout>
67-
<Welcomemessage={Language.welcomeMessage}/>
68-
<formonSubmit={form.handleSubmit}>
69-
<Stack>
67+
<header
68+
css={(theme)=>({
69+
textAlign:"center",
70+
marginBottom:theme.spacing(4),
71+
})}
72+
>
73+
<CoderIcon
74+
css={(theme)=>({
75+
color:theme.palette.text.primary,
76+
fontSize:theme.spacing(8),
77+
})}
78+
/>
79+
<h1
80+
css={(theme)=>({
81+
fontWeight:400,
82+
margin:0,
83+
marginTop:theme.spacing(2),
84+
})}
85+
>
86+
Welcome to<strong>Coder</strong>
87+
</h1>
88+
<div
89+
css={(theme)=>({
90+
marginTop:theme.spacing(1.5),
91+
color:theme.palette.text.secondary,
92+
})}
93+
>
94+
Let&lsquo;s create your first admin user account
95+
</div>
96+
</header>
97+
<VerticalFormonSubmit={form.handleSubmit}>
98+
<FormFields>
7099
<TextField
100+
autoFocus
71101
{...getFieldHelpers("username")}
72102
onChange={onChangeTrimmed(form)}
73103
autoComplete="username"
@@ -89,40 +119,65 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
89119
label={Language.passwordLabel}
90120
type="password"
91121
/>
92-
<divcss={{borderRadius:16}}>
93-
<Boxdisplay="flex">
94-
<div>
95-
<Checkbox
96-
id="trial"
97-
name="trial"
98-
defaultChecked
99-
value={form.values.trial}
100-
onChange={form.handleChange}
101-
data-testid="trial"
102-
/>
103-
</div>
104122

105-
<Box>
106-
<Typographyvariant="h6"style={{fontSize:14}}>
107-
Start a 30-day free trial of Enterprise
108-
</Typography>
109-
<Typographyvariant="caption"color="textSecondary">
110-
Get access to high availability, template RBAC, audit logging,
111-
quotas, and more.
112-
</Typography>
113-
</Box>
114-
</Box>
115-
</div>
123+
<label
124+
htmlFor="trial"
125+
css={{
126+
display:"flex",
127+
cursor:"pointer",
128+
alignItems:"flex-start",
129+
gap:4,
130+
marginTop:-4,
131+
marginBottom:8,
132+
}}
133+
>
134+
<Checkbox
135+
id="trial"
136+
name="trial"
137+
value={form.values.trial}
138+
onChange={form.handleChange}
139+
data-testid="trial"
140+
size="small"
141+
/>
142+
143+
<divcss={{fontSize:14,paddingTop:4}}>
144+
<spancss={{display:"block",fontWeight:600}}>
145+
Start a 30-day free trial of Enterprise
146+
</span>
147+
<span
148+
css={(theme)=>({
149+
display:"block",
150+
fontSize:13,
151+
color:theme.palette.text.secondary,
152+
lineHeight:"1.6",
153+
})}
154+
>
155+
Get access to high availability, template RBAC, audit logging,
156+
quotas, and more.
157+
</span>
158+
<Link
159+
href={docs("/enterprise")}
160+
target="_blank"
161+
css={{marginTop:4,display:"inline-block",fontSize:13}}
162+
>
163+
Read more
164+
</Link>
165+
</div>
166+
</label>
167+
116168
<LoadingButton
117169
fullWidth
118170
loading={isLoading}
119171
type="submit"
120172
data-testid="create"
173+
size="large"
174+
variant="contained"
175+
color="primary"
121176
>
122177
{Language.create}
123178
</LoadingButton>
124-
</Stack>
125-
</form>
179+
</FormFields>
180+
</VerticalForm>
126181
</SignInLayout>
127182
);
128183
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp