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

Commit20c3d7e

Browse files
committed
chore: adjust the style and wording of the license page
- Reduce the size of the card to improve the use of space- Adjust the language of the add page to remove word redundancy- Change from using background colors to text colors
1 parent2e9310b commit20c3d7e

File tree

3 files changed

+63
-73
lines changed

3 files changed

+63
-73
lines changed

‎site/src/components/LicenseCard/LicenseCard.tsx‎

Lines changed: 37 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
importBoxfrom"@material-ui/core/Box"
21
importButtonfrom"@material-ui/core/Button"
32
importPaperfrom"@material-ui/core/Paper"
43
import{makeStyles}from"@material-ui/core/styles"
@@ -48,55 +47,54 @@ export const LicenseCard = ({
4847
setLicenseIDMarkedForRemoval(undefined)
4948
}}
5049
onClose={()=>setLicenseIDMarkedForRemoval(undefined)}
51-
title="Confirmlicense removal"
50+
title="ConfirmLicense Removal"
5251
confirmLoading={isRemoving}
5352
confirmText="Remove"
54-
description="Are you sure you want to remove thislicense?"
53+
description="Removing this license will disable all Enterprise features. You add a newlicense at any time."
5554
/>
5655
<Stack
57-
direction="column"
56+
direction="row"
57+
spacing={2}
5858
className={styles.cardContent}
59-
justifyContent="space-between"
59+
justifyContent="left"
60+
alignItems="center"
6061
>
61-
<BoxclassName={styles.licenseId}>
62-
<span>#{license.id}</span>
63-
</Box>
64-
<StackclassName={styles.accountType}>
65-
<span>{license.claims.trial ?"Trial" :"Enterprise"}</span>
66-
</Stack>
62+
<spanclassName={styles.licenseId}>#{license.id}</span>
63+
<spanclassName={styles.accountType}>
64+
{license.claims.trial ?"Trial" :"Enterprise"}
65+
</span>
6766
<Stack
6867
direction="row"
69-
justifyContent="space-between"
68+
justifyContent="right"
69+
spacing={8}
7070
alignItems="self-end"
71+
style={{
72+
flex:1,
73+
}}
7174
>
72-
<Stackdirection="column"spacing={0}className={styles.userLimit}>
75+
<Stackdirection="column"spacing={0}>
7376
<spanclassName={styles.secondaryMaincolor}>Users</span>
74-
<divclassName={styles.primaryMainColor}>
75-
<spanclassName={styles.userLimitActual}>{userLimitActual}</span>
76-
<spanclassName={styles.userLimitLimit}>
77-
{` /${userLimitLimit||"Unlimited"}`}
78-
</span>
79-
</div>
77+
<spanclassName={styles.userLimit}>
78+
{userLimitActual}{` /${userLimitLimit||"Unlimited"}`}
79+
</span>
8080
</Stack>
8181

82-
<Stackdirection="column"spacing={0}alignItems="center">
83-
<spanclassName={styles.secondaryMaincolor}>Validuntil</span>
84-
<spanclassName={styles.primaryMainColor}>
82+
<Stackdirection="column"spacing={0}>
83+
<spanclassName={styles.secondaryMaincolor}>ValidUntil</span>
84+
<spanclassName={styles.licenseExpires}>
8585
{dayjs
8686
.unix(license.claims.license_expires)
8787
.format("MMMM D, YYYY")}
8888
</span>
8989
</Stack>
90-
<divclassName={styles.actions}>
91-
<Button
92-
className={styles.removeButton}
93-
variant="text"
94-
size="small"
95-
onClick={()=>setLicenseIDMarkedForRemoval(license.id)}
96-
>
97-
Remove
98-
</Button>
99-
</div>
90+
<Button
91+
className={styles.removeButton}
92+
variant="text"
93+
size="small"
94+
onClick={()=>setLicenseIDMarkedForRemoval(license.id)}
95+
>
96+
Remove
97+
</Button>
10098
</Stack>
10199
</Stack>
102100
</Paper>
@@ -105,41 +103,28 @@ export const LicenseCard = ({
105103

106104
constuseStyles=makeStyles((theme)=>({
107105
userLimit:{
108-
width:"33%",
109-
},
110-
actions:{
111-
width:"33%",
112-
textAlign:"right",
113-
},
114-
userLimitActual:{
115-
color:theme.palette.primary.main,
116-
},
117-
userLimitLimit:{
118-
color:theme.palette.secondary.main,
119-
fontWeight:600,
106+
color:theme.palette.text.primary,
120107
},
121108
licenseCard:{
122109
padding:theme.spacing(2),
123110
},
124-
cardContent:{
125-
minHeight:100,
126-
},
111+
cardContent:{},
127112
licenseId:{
128113
color:theme.palette.secondary.main,
114+
fontSize:18,
129115
fontWeight:600,
130116
},
131117
accountType:{
132118
fontWeight:600,
133-
fontSize:theme.typography.h4.fontSize,
134-
justifyContent:"center",
119+
fontSize:18,
135120
alignItems:"center",
136121
textTransform:"capitalize",
137122
},
138-
primaryMainColor:{
139-
color:theme.palette.primary.main,
123+
licenseExpires:{
124+
color:theme.palette.text.secondary,
140125
},
141126
secondaryMaincolor:{
142-
color:theme.palette.secondary.main,
127+
color:theme.palette.text.hint,
143128
},
144129
removeButton:{
145130
height:"17px",

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { AlertBanner } from "components/AlertBanner/AlertBanner"
66
import{Fieldset}from"components/DeploySettingsLayout/Fieldset"
77
import{Header}from"components/DeploySettingsLayout/Header"
88
import{FileUpload}from"components/FileUpload/FileUpload"
9+
importKeyboardArrowLeftfrom"@material-ui/icons/KeyboardArrowLeft"
910
import{displayError}from"components/GlobalSnackbar/utils"
1011
import{Stack}from"components/Stack/Stack"
1112
import{DividerWithText}from"pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText"
@@ -54,15 +55,16 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
5455
justifyContent="space-between"
5556
>
5657
<Header
57-
title="Addyour license"
58-
description="Enterprise licenses unlock more features on your deployment."
58+
title="Adda License"
59+
description="Get access to high availability, RBAC, quotas, and more."
5960
/>
6061
<Button
6162
component={RouterLink}
6263
to="/settings/deployment/licenses"
6364
variant="outlined"
65+
startIcon={<KeyboardArrowLeft/>}
6466
>
65-
Back to licenses
67+
All Licenses
6668
</Button>
6769
</Stack>
6870

@@ -74,15 +76,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
7476
isUploading={isUploading}
7577
onUpload={onUpload}
7678
removeLabel="Remove File"
77-
title="Uploadyour license"
78-
description="Upload a text filecontainingyour license key"
79+
title="UploadYour License"
80+
description="Select a text filethat containsyour license key."
7981
/>
8082

8183
<StackclassName={styles.main}>
8284
<DividerWithText>or</DividerWithText>
8385

8486
<Fieldset
85-
title="Pasteyour license key"
87+
title="PasteYour License"
8688
onSubmit={(e)=>{
8789
e.preventDefault()
8890

@@ -95,15 +97,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
9597
}}
9698
button={
9799
<Buttontype="submit"disabled={isSavingLicense}>
98-
Add license
100+
Upload License
99101
</Button>
100102
}
101103
>
102104
<TextField
103105
name="licenseKey"
104-
placeholder="Paste your license key here"
106+
placeholder="Enter your license..."
105107
multiline
106-
rows={4}
108+
rows={1}
107109
fullWidth
108110
/>
109111
</Fieldset>

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
importButtonfrom"@material-ui/core/Button"
22
import{makeStyles,useTheme}from"@material-ui/core/styles"
3+
importAddIconfrom"@material-ui/icons/AddOutlined"
34
importSkeletonfrom"@material-ui/lab/Skeleton"
45
import{GetLicensesResponse}from"api/api"
56
import{Header}from"components/DeploySettingsLayout/Header"
@@ -37,8 +38,9 @@ const LicensesSettingsPageView: FC<Props> = ({
3738
return(
3839
<>
3940
<Confetti
40-
width={width}
41-
height={height}
41+
// For some reason this overflows the window and adds scrollbars if we don't subtract here.
42+
width={width-1}
43+
height={height-1}
4244
numberOfPieces={showConfetti ?200 :0}
4345
colors={[theme.palette.primary.main,theme.palette.secondary.main]}
4446
/>
@@ -49,15 +51,16 @@ const LicensesSettingsPageView: FC<Props> = ({
4951
>
5052
<Header
5153
title="Licenses"
52-
description="Enterprise licenses unlockmore features on your deployment."
54+
description="Manage licensestounlockEnterprise features."
5355
/>
5456

5557
<Button
5658
variant="outlined"
5759
component={Link}
5860
to="/settings/deployment/licenses/add"
61+
startIcon={<AddIcon/>}
5962
>
60-
Addnew license
63+
Adda License
6164
</Button>
6265
</Stack>
6366

@@ -82,11 +85,14 @@ const LicensesSettingsPageView: FC<Props> = ({
8285
<divclassName={styles.root}>
8386
<StackalignItems="center"spacing={1}>
8487
<StackalignItems="center"spacing={0.5}>
85-
<spanclassName={styles.title}>No licenses yet</span>
88+
<spanclassName={styles.title}>
89+
You don{"'"}t have any licenses!
90+
</span>
8691
<spanclassName={styles.description}>
87-
Contact<ahref="mailto:sales@coder.com">sales</a> or{" "}
92+
You{"'"}re missing out on high availability, RBAC, quotas, and
93+
much more. Contact<ahref="mailto:sales@coder.com">sales</a> or{" "}
8894
<ahref="https://coder.com/trial">request a trial license</a> to
89-
learn more.
95+
get started.
9096
</span>
9197
</Stack>
9298
</Stack>
@@ -109,16 +115,13 @@ const useStyles = makeStyles((theme) => ({
109115
borderRadius:theme.shape.borderRadius,
110116
border:`1px solid${theme.palette.divider}`,
111117
padding:theme.spacing(6),
112-
113-
"&:hover":{
114-
backgroundColor:theme.palette.background.paper,
115-
},
116118
},
117119

118120
description:{
119121
color:theme.palette.text.secondary,
120122
textAlign:"center",
121-
maxWidth:theme.spacing(50),
123+
maxWidth:theme.spacing(58),
124+
marginTop:theme.spacing(1),
122125
},
123126
}))
124127

0 commit comments

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