Skip to content

Commit 778cb74

Browse files
kylecarbskylecarbs
authored
chore: adjust the style and wording of the license page (coder#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 parent 8e1da5e commit 778cb74

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-
import Box from "@mui/material/Box"
21
import Button from "@mui/material/Button"
32
import Paper from "@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="Confirm license removal"
45+
title="Confirm License Removal"
4746
confirmLoading={isRemoving}
4847
confirmText="Remove"
49-
description="Are you sure you want to remove this license?"
48+
description="Removing this license will disable all Enterprise features. You add a new license 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-
<Box className={styles.licenseId}>
57-
<span>#{license.id}</span>
58-
</Box>
59-
<Stack className={styles.accountType}>
60-
<span>{license.claims.trial ? "Trial" : "Enterprise"}</span>
61-
</Stack>
57+
<span className={styles.licenseId}>#{license.id}</span>
58+
<span className={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-
<Stack direction="column" spacing={0} className={styles.userLimit}>
70+
<Stack direction="column" spacing={0}>
6871
<span className={styles.secondaryMaincolor}>Users</span>
69-
<div className={styles.primaryMainColor}>
70-
<span className={styles.userLimitActual}>{userLimitActual}</span>
71-
<span className={styles.userLimitLimit}>
72-
{` / ${userLimitLimit || "Unlimited"}`}
73-
</span>
74-
</div>
72+
<span className={styles.userLimit}>
73+
{userLimitActual} {` / ${userLimitLimit || "Unlimited"}`}
74+
</span>
7575
</Stack>
7676

77-
<Stack direction="column" spacing={0} alignItems="center">
78-
<span className={styles.secondaryMaincolor}>Valid until</span>
79-
<span className={styles.primaryMainColor}>
77+
<Stack direction="column" spacing={0}>
78+
<span className={styles.secondaryMaincolor}>Valid Until</span>
79+
<span className={styles.licenseExpires}>
8080
{dayjs
8181
.unix(license.claims.license_expires)
8282
.format("MMMM D, YYYY")}
8383
</span>
8484
</Stack>
85-
<div className={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
const useStyles = 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+
import KeyboardArrowLeft from "@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="Add your license"
57-
description="Enterprise licenses unlock more features on your deployment."
57+
title="Add a License"
58+
description="Get access to high availability, RBAC, quotas, and more."
5859
/>
59-
<Button component={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="Upload your license"
73-
description="Upload a text file containing your license key"
77+
title="Upload Your License"
78+
description="Select a text file that contains your license key."
7479
/>
7580

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

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

@@ -90,15 +95,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
9095
}}
9196
button={
9297
<Button type="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
import Button from "@mui/material/Button"
22
import { makeStyles, useTheme } from "@mui/styles"
33
import Skeleton from "@mui/material/Skeleton"
4+
import AddIcon from "@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 unlock more features on your deployment."
54+
description="Manage licenses to unlock Enterprise features."
5355
/>
5456

55-
<Button component={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
<div className={styles.root}>
7985
<Stack alignItems="center" spacing={1}>
8086
<Stack alignItems="center" spacing={0.5}>
81-
<span className={styles.title}>No licenses yet</span>
87+
<span className={styles.title}>
88+
You don{"'"}t have any licenses!
89+
</span>
8290
<span className={styles.description}>
83-
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{" "}
8493
<a href="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)