Skip to content

Commit 358dc24

Browse files
kylecarbskylecarbs
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 parent 2e9310b commit 358dc24

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="Confirm license removal"
51+
title="Confirm License Removal"
5252
confirmLoading={isRemoving}
5353
confirmText="Remove"
54-
description="Are you sure you want to remove this license?"
54+
description="Removing this license will disable all Enterprise features. You add a new license 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-
<Box className={styles.licenseId}>
62-
<span>#{license.id}</span>
63-
</Box>
64-
<Stack className={styles.accountType}>
65-
<span>{license.claims.trial ? "Trial" : "Enterprise"}</span>
66-
</Stack>
63+
<span className={styles.licenseId}>#{license.id}</span>
64+
<span className={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-
<Stack direction="column" spacing={0} className={styles.userLimit}>
76+
<Stack direction="column" spacing={0}>
7377
<span className={styles.secondaryMaincolor}>Users</span>
74-
<div className={styles.primaryMainColor}>
75-
<span className={styles.userLimitActual}>{userLimitActual}</span>
76-
<span className={styles.userLimitLimit}>
77-
{` / ${userLimitLimit || "Unlimited"}`}
78-
</span>
79-
</div>
78+
<span className={styles.userLimit}>
79+
{userLimitActual} {` / ${userLimitLimit || "Unlimited"}`}
80+
</span>
8081
</Stack>
8182

82-
<Stack direction="column" spacing={0} alignItems="center">
83-
<span className={styles.secondaryMaincolor}>Valid until</span>
84-
<span className={styles.primaryMainColor}>
83+
<Stack direction="column" spacing={0}>
84+
<span className={styles.secondaryMaincolor}>Valid Until</span>
85+
<span className={styles.licenseExpires}>
8586
{dayjs
8687
.unix(license.claims.license_expires)
8788
.format("MMMM D, YYYY")}
8889
</span>
8990
</Stack>
90-
<div className={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
const useStyles = 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+
import KeyboardArrowLeft from "@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="Add your license"
58-
description="Enterprise licenses unlock more features on your deployment."
58+
title="Add a 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="Upload your license"
78-
description="Upload a text file containing your license key"
79+
title="Upload Your License"
80+
description="Select a text file that contains your license key."
7981
/>
8082

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

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

@@ -95,15 +97,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
9597
}}
9698
button={
9799
<Button type="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
import Button from "@material-ui/core/Button"
22
import { makeStyles, useTheme } from "@material-ui/core/styles"
3+
import AddIcon from "@material-ui/icons/AddOutlined"
34
import Skeleton from "@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 unlock more features on your deployment."
53+
description="Manage licenses to unlock Enterprise features."
5354
/>
5455

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

@@ -82,11 +84,14 @@ const LicensesSettingsPageView: FC<Props> = ({
8284
<div className={styles.root}>
8385
<Stack alignItems="center" spacing={1}>
8486
<Stack alignItems="center" spacing={0.5}>
85-
<span className={styles.title}>No licenses yet</span>
87+
<span className={styles.title}>
88+
You don{"'"}t have any licenses!
89+
</span>
8690
<span className={styles.description}>
87-
Contact <a href="mailto:sales@coder.com">sales</a> or{" "}
91+
You{"'"}re missing out on high availability, RBAC, quotas, and
92+
much more. Contact <a href="mailto:sales@coder.com">sales</a> or{" "}
8893
<a href="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)