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

Commit358dc24

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 commit358dc24

File tree

3 files changed

+60
-70
lines changed

3 files changed

+60
-70
lines changed

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

Lines changed: 37 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -48,55 +48,54 @@ export const LicenseCard = ({
4848
setLicenseIDMarkedForRemoval(undefined)
4949
}}
5050
onClose={()=>setLicenseIDMarkedForRemoval(undefined)}
51-
title="Confirmlicense removal"
51+
title="ConfirmLicense Removal"
5252
confirmLoading={isRemoving}
5353
confirmText="Remove"
54-
description="Are you sure you want to remove thislicense?"
54+
description="Removing this license will disable all Enterprise features. You add a newlicense at any time."
5555
/>
5656
<Stack
57-
direction="column"
57+
direction="row"
58+
spacing={2}
5859
className={styles.cardContent}
59-
justifyContent="space-between"
60+
justifyContent="left"
61+
alignItems="center"
6062
>
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>
63+
<spanclassName={styles.licenseId}>#{license.id}</span>
64+
<spanclassName={styles.accountType}>
65+
{license.claims.trial ?"Trial" :"Enterprise"}
66+
</span>
6767
<Stack
6868
direction="row"
69-
justifyContent="space-between"
69+
justifyContent="right"
70+
spacing={8}
7071
alignItems="self-end"
72+
style={{
73+
flex:1,
74+
}}
7175
>
72-
<Stackdirection="column"spacing={0}className={styles.userLimit}>
76+
<Stackdirection="column"spacing={0}>
7377
<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>
78+
<spanclassName={styles.userLimit}>
79+
{userLimitActual}{` /${userLimitLimit||"Unlimited"}`}
80+
</span>
8081
</Stack>
8182

82-
<Stackdirection="column"spacing={0}alignItems="center">
83-
<spanclassName={styles.secondaryMaincolor}>Validuntil</span>
84-
<spanclassName={styles.primaryMainColor}>
83+
<Stackdirection="column"spacing={0}>
84+
<spanclassName={styles.secondaryMaincolor}>ValidUntil</span>
85+
<spanclassName={styles.licenseExpires}>
8586
{dayjs
8687
.unix(license.claims.license_expires)
8788
.format("MMMM D, YYYY")}
8889
</span>
8990
</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>
91+
<Button
92+
className={styles.removeButton}
93+
variant="text"
94+
size="small"
95+
onClick={()=>setLicenseIDMarkedForRemoval(license.id)}
96+
>
97+
Remove
98+
</Button>
10099
</Stack>
101100
</Stack>
102101
</Paper>
@@ -105,41 +104,28 @@ export const LicenseCard = ({
105104

106105
constuseStyles=makeStyles((theme)=>({
107106
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,
107+
color:theme.palette.text.primary,
120108
},
121109
licenseCard:{
122110
padding:theme.spacing(2),
123111
},
124-
cardContent:{
125-
minHeight:100,
126-
},
112+
cardContent:{},
127113
licenseId:{
128114
color:theme.palette.secondary.main,
115+
fontSize:theme.typography.h5.fontSize,
129116
fontWeight:600,
130117
},
131118
accountType:{
132119
fontWeight:600,
133-
fontSize:theme.typography.h4.fontSize,
134-
justifyContent:"center",
120+
fontSize:theme.typography.h5.fontSize,
135121
alignItems:"center",
136122
textTransform:"capitalize",
137123
},
138-
primaryMainColor:{
139-
color:theme.palette.primary.main,
124+
licenseExpires:{
125+
color:theme.palette.text.secondary,
140126
},
141127
secondaryMaincolor:{
142-
color:theme.palette.secondary.main,
128+
color:theme.palette.text.hint,
143129
},
144130
removeButton:{
145131
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: 12 additions & 10 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"
@@ -49,15 +50,16 @@ const LicensesSettingsPageView: FC<Props> = ({
4950
>
5051
<Header
5152
title="Licenses"
52-
description="Enterprise licenses unlockmore features on your deployment."
53+
description="Manage licensestounlockEnterprise features."
5354
/>
5455

5556
<Button
5657
variant="outlined"
5758
component={Link}
5859
to="/settings/deployment/licenses/add"
60+
startIcon={<AddIcon/>}
5961
>
60-
Addnew license
62+
Adda License
6163
</Button>
6264
</Stack>
6365

@@ -82,11 +84,14 @@ const LicensesSettingsPageView: FC<Props> = ({
8284
<divclassName={styles.root}>
8385
<StackalignItems="center"spacing={1}>
8486
<StackalignItems="center"spacing={0.5}>
85-
<spanclassName={styles.title}>No licenses yet</span>
87+
<spanclassName={styles.title}>
88+
You don{"'"}t have any licenses!
89+
</span>
8690
<spanclassName={styles.description}>
87-
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{" "}
8893
<ahref="https://coder.com/trial">request a trial license</a> to
89-
learn more.
94+
get started.
9095
</span>
9196
</Stack>
9297
</Stack>
@@ -109,16 +114,13 @@ const useStyles = makeStyles((theme) => ({
109114
borderRadius:theme.shape.borderRadius,
110115
border:`1px solid${theme.palette.divider}`,
111116
padding:theme.spacing(6),
112-
113-
"&:hover":{
114-
backgroundColor:theme.palette.background.paper,
115-
},
116117
},
117118

118119
description:{
119120
color:theme.palette.text.secondary,
120121
textAlign:"center",
121-
maxWidth:theme.spacing(50),
122+
maxWidth:theme.spacing(58),
123+
marginTop:theme.spacing(1),
122124
},
123125
}))
124126

0 commit comments

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