Skip to content

Commit 7a9c0e1

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 7a9c0e1

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-
import Box from "@material-ui/core/Box"
21
import Button from "@material-ui/core/Button"
32
import Paper from "@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="Confirm license removal"
50+
title="Confirm License Removal"
5251
confirmLoading={isRemoving}
5352
confirmText="Remove"
54-
description="Are you sure you want to remove this license?"
53+
description="Removing this license will disable all Enterprise features. You add a new license 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-
<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>
62+
<span className={styles.licenseId}>#{license.id}</span>
63+
<span className={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-
<Stack direction="column" spacing={0} className={styles.userLimit}>
75+
<Stack direction="column" spacing={0}>
7376
<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>
77+
<span className={styles.userLimit}>
78+
{userLimitActual} {` / ${userLimitLimit || "Unlimited"}`}
79+
</span>
8080
</Stack>
8181

82-
<Stack direction="column" spacing={0} alignItems="center">
83-
<span className={styles.secondaryMaincolor}>Valid until</span>
84-
<span className={styles.primaryMainColor}>
82+
<Stack direction="column" spacing={0}>
83+
<span className={styles.secondaryMaincolor}>Valid Until</span>
84+
<span className={styles.licenseExpires}>
8585
{dayjs
8686
.unix(license.claims.license_expires)
8787
.format("MMMM D, YYYY")}
8888
</span>
8989
</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>
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
const useStyles = 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: theme.typography.h5.fontSize,
129115
fontWeight: 600,
130116
},
131117
accountType: {
132118
fontWeight: 600,
133-
fontSize: theme.typography.h4.fontSize,
134-
justifyContent: "center",
119+
fontSize: theme.typography.h5.fontSize,
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+
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: 15 additions & 12 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"
@@ -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 unlock more features on your deployment."
54+
description="Manage licenses to unlock Enterprise features."
5355
/>
5456

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

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