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

Commit778cb74

Browse files
authored
chore: adjust the style and wording of the license page (#7396)
- 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 parent8e1da5e commit778cb74

File tree

3 files changed

+71
-75
lines changed

3 files changed

+71
-75
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"@mui/material/Box"
21
importButtonfrom"@mui/material/Button"
32
importPaperfrom"@mui/material/Paper"
43
import{makeStyles}from"@mui/styles"
@@ -43,55 +42,54 @@ export const LicenseCard = ({
4342
setLicenseIDMarkedForRemoval(undefined)
4443
}}
4544
onClose={()=>setLicenseIDMarkedForRemoval(undefined)}
46-
title="Confirmlicense removal"
45+
title="ConfirmLicense Removal"
4746
confirmLoading={isRemoving}
4847
confirmText="Remove"
49-
description="Are you sure you want to remove thislicense?"
48+
description="Removing this license will disable all Enterprise features. You add a newlicense at any time."
5049
/>
5150
<Stack
52-
direction="column"
51+
direction="row"
52+
spacing={2}
5353
className={styles.cardContent}
54-
justifyContent="space-between"
54+
justifyContent="left"
55+
alignItems="center"
5556
>
56-
<BoxclassName={styles.licenseId}>
57-
<span>#{license.id}</span>
58-
</Box>
59-
<StackclassName={styles.accountType}>
60-
<span>{license.claims.trial ?"Trial" :"Enterprise"}</span>
61-
</Stack>
57+
<spanclassName={styles.licenseId}>#{license.id}</span>
58+
<spanclassName={styles.accountType}>
59+
{license.claims.trial ?"Trial" :"Enterprise"}
60+
</span>
6261
<Stack
6362
direction="row"
64-
justifyContent="space-between"
63+
justifyContent="right"
64+
spacing={8}
6565
alignItems="self-end"
66+
style={{
67+
flex:1,
68+
}}
6669
>
67-
<Stackdirection="column"spacing={0}className={styles.userLimit}>
70+
<Stackdirection="column"spacing={0}>
6871
<spanclassName={styles.secondaryMaincolor}>Users</span>
69-
<divclassName={styles.primaryMainColor}>
70-
<spanclassName={styles.userLimitActual}>{userLimitActual}</span>
71-
<spanclassName={styles.userLimitLimit}>
72-
{` /${userLimitLimit||"Unlimited"}`}
73-
</span>
74-
</div>
72+
<spanclassName={styles.userLimit}>
73+
{userLimitActual}{` /${userLimitLimit||"Unlimited"}`}
74+
</span>
7575
</Stack>
7676

77-
<Stackdirection="column"spacing={0}alignItems="center">
78-
<spanclassName={styles.secondaryMaincolor}>Validuntil</span>
79-
<spanclassName={styles.primaryMainColor}>
77+
<Stackdirection="column"spacing={0}>
78+
<spanclassName={styles.secondaryMaincolor}>ValidUntil</span>
79+
<spanclassName={styles.licenseExpires}>
8080
{dayjs
8181
.unix(license.claims.license_expires)
8282
.format("MMMM D, YYYY")}
8383
</span>
8484
</Stack>
85-
<divclassName={styles.actions}>
86-
<Button
87-
className={styles.removeButton}
88-
variant="text"
89-
size="small"
90-
onClick={()=>setLicenseIDMarkedForRemoval(license.id)}
91-
>
92-
Remove
93-
</Button>
94-
</div>
85+
<Button
86+
className={styles.removeButton}
87+
variant="text"
88+
size="small"
89+
onClick={()=>setLicenseIDMarkedForRemoval(license.id)}
90+
>
91+
Remove
92+
</Button>
9593
</Stack>
9694
</Stack>
9795
</Paper>
@@ -100,42 +98,29 @@ export const LicenseCard = ({
10098

10199
constuseStyles=makeStyles((theme)=>({
102100
userLimit:{
103-
width:"33%",
104-
},
105-
actions:{
106-
width:"33%",
107-
textAlign:"right",
108-
},
109-
userLimitActual:{
110-
color:theme.palette.primary.main,
111-
},
112-
userLimitLimit:{
113-
color:theme.palette.secondary.main,
114-
fontWeight:600,
101+
color:theme.palette.text.primary,
115102
},
116103
licenseCard:{
117104
...theme.typography.body2,
118105
padding:theme.spacing(2),
119106
},
120-
cardContent:{
121-
minHeight:100,
122-
},
107+
cardContent:{},
123108
licenseId:{
124109
color:theme.palette.secondary.main,
110+
fontSize:18,
125111
fontWeight:600,
126112
},
127113
accountType:{
128114
fontWeight:600,
129-
fontSize:24,
130-
justifyContent:"center",
115+
fontSize:18,
131116
alignItems:"center",
132117
textTransform:"capitalize",
133118
},
134-
primaryMainColor:{
135-
color:theme.palette.primary.main,
119+
licenseExpires:{
120+
color:theme.palette.text.secondary,
136121
},
137122
secondaryMaincolor:{
138-
color:theme.palette.secondary.main,
123+
color:theme.palette.text.secondary,
139124
},
140125
removeButton:{
141126
height:"17px",

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { AlertBanner } from "components/AlertBanner/AlertBanner"
55
import{Fieldset}from"components/DeploySettingsLayout/Fieldset"
66
import{Header}from"components/DeploySettingsLayout/Header"
77
import{FileUpload}from"components/FileUpload/FileUpload"
8+
importKeyboardArrowLeftfrom"@mui/icons-material/KeyboardArrowLeft"
89
import{displayError}from"components/GlobalSnackbar/utils"
910
import{Stack}from"components/Stack/Stack"
1011
import{DividerWithText}from"pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText"
@@ -53,11 +54,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
5354
justifyContent="space-between"
5455
>
5556
<Header
56-
title="Addyour license"
57-
description="Enterprise licenses unlock more features on your deployment."
57+
title="Adda License"
58+
description="Get access to high availability, RBAC, quotas, and more."
5859
/>
59-
<Buttoncomponent={RouterLink}to="/settings/deployment/licenses">
60-
Back to licenses
60+
<Button
61+
component={RouterLink}
62+
startIcon={<KeyboardArrowLeft/>}
63+
to="/settings/deployment/licenses"
64+
>
65+
All Licenses
6166
</Button>
6267
</Stack>
6368

@@ -69,15 +74,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
6974
isUploading={isUploading}
7075
onUpload={onUpload}
7176
removeLabel="Remove File"
72-
title="Uploadyour license"
73-
description="Upload a text filecontainingyour license key"
77+
title="UploadYour License"
78+
description="Select a text filethat containsyour license key."
7479
/>
7580

7681
<StackclassName={styles.main}>
7782
<DividerWithText>or</DividerWithText>
7883

7984
<Fieldset
80-
title="Pasteyour license key"
85+
title="PasteYour License"
8186
onSubmit={(e)=>{
8287
e.preventDefault()
8388

@@ -90,15 +95,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
9095
}}
9196
button={
9297
<Buttontype="submit"disabled={isSavingLicense}>
93-
Add license
98+
Upload License
9499
</Button>
95100
}
96101
>
97102
<TextField
98103
name="licenseKey"
99-
placeholder="Paste your license key here"
104+
placeholder="Enter your license..."
100105
multiline
101-
rows={4}
106+
rows={1}
102107
fullWidth
103108
/>
104109
</Fieldset>

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

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
importButtonfrom"@mui/material/Button"
22
import{makeStyles,useTheme}from"@mui/styles"
33
importSkeletonfrom"@mui/material/Skeleton"
4+
importAddIconfrom"@mui/icons-material/AddOutlined"
45
import{GetLicensesResponse}from"api/api"
56
import{Header}from"components/DeploySettingsLayout/Header"
67
import{LicenseCard}from"components/LicenseCard/LicenseCard"
@@ -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,11 +51,15 @@ 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

55-
<Buttoncomponent={Link}to="/settings/deployment/licenses/add">
56-
Add new license
57+
<Button
58+
component={Link}
59+
to="/settings/deployment/licenses/add"
60+
startIcon={<AddIcon/>}
61+
>
62+
Add a License
5763
</Button>
5864
</Stack>
5965

@@ -78,11 +84,14 @@ const LicensesSettingsPageView: FC<Props> = ({
7884
<divclassName={styles.root}>
7985
<StackalignItems="center"spacing={1}>
8086
<StackalignItems="center"spacing={0.5}>
81-
<spanclassName={styles.title}>No licenses yet</span>
87+
<spanclassName={styles.title}>
88+
You don{"'"}t have any licenses!
89+
</span>
8290
<spanclassName={styles.description}>
83-
Contact<ahref="mailto:sales@coder.com">sales</a> or{" "}
91+
You{"'"}re missing out on high availability, RBAC, quotas, and
92+
much more. Contact<ahref="mailto:sales@coder.com">sales</a> or{" "}
8493
<ahref="https://coder.com/trial">request a trial license</a> to
85-
learn more.
94+
get started.
8695
</span>
8796
</Stack>
8897
</Stack>
@@ -105,16 +114,13 @@ const useStyles = makeStyles((theme) => ({
105114
borderRadius:theme.shape.borderRadius,
106115
border:`1px solid${theme.palette.divider}`,
107116
padding:theme.spacing(6),
108-
109-
"&:hover":{
110-
backgroundColor:theme.palette.background.paper,
111-
},
112117
},
113118

114119
description:{
115120
color:theme.palette.text.secondary,
116121
textAlign:"center",
117-
maxWidth:theme.spacing(50),
122+
maxWidth:theme.spacing(58),
123+
marginTop:theme.spacing(1),
118124
},
119125
}))
120126

0 commit comments

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