Skip to content

chore: adjust the style and wording of the license page #7396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 14, 2023
Merged

chore: adjust the style and wording of the license page #7396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20c3d7e
chore: adjust the style and wording of the license page
kylecarbs May 3, 2023
da0ddda
Merge branch 'main' into licensestyle
kylecarbs May 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 37 additions & 52 deletions site/src/components/LicenseCard/LicenseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Box from "@mui/material/Box"
import Button from "@mui/material/Button"
import Paper from "@mui/material/Paper"
import { makeStyles } from "@mui/styles"
Expand Down Expand Up @@ -43,55 +42,54 @@ export const LicenseCard = ({
setLicenseIDMarkedForRemoval(undefined)
}}
onClose={() => setLicenseIDMarkedForRemoval(undefined)}
title="Confirm license removal"
title="Confirm License Removal"
confirmLoading={isRemoving}
confirmText="Remove"
description="Are you sure you want to remove this license?"
description="Removing this license will disable all Enterprise features. You add a new license at any time."
/>
<Stack
direction="column"
direction="row"
spacing={2}
className={styles.cardContent}
justifyContent="space-between"
justifyContent="left"
alignItems="center"
>
<Box className={styles.licenseId}>
<span>#{license.id}</span>
</Box>
<Stack className={styles.accountType}>
<span>{license.claims.trial ? "Trial" : "Enterprise"}</span>
</Stack>
<span className={styles.licenseId}>#{license.id}</span>
<span className={styles.accountType}>
{license.claims.trial ? "Trial" : "Enterprise"}
</span>
<Stack
direction="row"
justifyContent="space-between"
justifyContent="right"
spacing={8}
alignItems="self-end"
style={{
flex: 1,
}}
>
<Stack direction="column" spacing={0} className={styles.userLimit}>
<Stack direction="column" spacing={0}>
<span className={styles.secondaryMaincolor}>Users</span>
<div className={styles.primaryMainColor}>
<span className={styles.userLimitActual}>{userLimitActual}</span>
<span className={styles.userLimitLimit}>
{` / ${userLimitLimit || "Unlimited"}`}
</span>
</div>
<span className={styles.userLimit}>
{userLimitActual} {` / ${userLimitLimit || "Unlimited"}`}
</span>
</Stack>

<Stack direction="column" spacing={0} alignItems="center">
<span className={styles.secondaryMaincolor}>Valid until</span>
<span className={styles.primaryMainColor}>
<Stack direction="column" spacing={0}>
<span className={styles.secondaryMaincolor}>Valid Until</span>
<span className={styles.licenseExpires}>
{dayjs
.unix(license.claims.license_expires)
.format("MMMM D, YYYY")}
</span>
</Stack>
<div className={styles.actions}>
<Button
className={styles.removeButton}
variant="text"
size="small"
onClick={() => setLicenseIDMarkedForRemoval(license.id)}
>
Remove
</Button>
</div>
<Button
className={styles.removeButton}
variant="text"
size="small"
onClick={() => setLicenseIDMarkedForRemoval(license.id)}
>
Remove
</Button>
</Stack>
</Stack>
</Paper>
Expand All @@ -100,42 +98,29 @@ export const LicenseCard = ({

const useStyles = makeStyles((theme) => ({
userLimit: {
width: "33%",
},
actions: {
width: "33%",
textAlign: "right",
},
userLimitActual: {
color: theme.palette.primary.main,
},
userLimitLimit: {
color: theme.palette.secondary.main,
fontWeight: 600,
color: theme.palette.text.primary,
},
licenseCard: {
...theme.typography.body2,
padding: theme.spacing(2),
},
cardContent: {
minHeight: 100,
},
cardContent: {},
licenseId: {
color: theme.palette.secondary.main,
fontSize: 18,
fontWeight: 600,
},
accountType: {
fontWeight: 600,
fontSize: 24,
justifyContent: "center",
fontSize: 18,
alignItems: "center",
textTransform: "capitalize",
},
primaryMainColor: {
color: theme.palette.primary.main,
licenseExpires: {
color: theme.palette.text.secondary,
},
secondaryMaincolor: {
color: theme.palette.secondary.main,
color: theme.palette.text.secondary,
},
removeButton: {
height: "17px",
Expand Down
25 changes: 15 additions & 10 deletions site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { AlertBanner } from "components/AlertBanner/AlertBanner"
import { Fieldset } from "components/DeploySettingsLayout/Fieldset"
import { Header } from "components/DeploySettingsLayout/Header"
import { FileUpload } from "components/FileUpload/FileUpload"
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft"
import { displayError } from "components/GlobalSnackbar/utils"
import { Stack } from "components/Stack/Stack"
import { DividerWithText } from "pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText"
Expand Down Expand Up @@ -53,11 +54,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
justifyContent="space-between"
>
<Header
title="Add your license"
description="Enterprise licenses unlock more features on your deployment."
title="Add a License"
description="Get access to high availability, RBAC, quotas, and more."
/>
<Button component={RouterLink} to="/settings/deployment/licenses">
Back to licenses
<Button
component={RouterLink}
startIcon={<KeyboardArrowLeft />}
to="/settings/deployment/licenses"
>
All Licenses
</Button>
</Stack>

Expand All @@ -69,15 +74,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
isUploading={isUploading}
onUpload={onUpload}
removeLabel="Remove File"
title="Upload your license"
description="Upload a text file containing your license key"
title="Upload Your License"
description="Select a text file that contains your license key."
/>

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

<Fieldset
title="Paste your license key"
title="Paste Your License"
onSubmit={(e) => {
e.preventDefault()

Expand All @@ -90,15 +95,15 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
}}
button={
<Button type="submit" disabled={isSavingLicense}>
Add license
Upload License
</Button>
}
>
<TextField
name="licenseKey"
placeholder="Paste your license key here"
placeholder="Enter your license..."
multiline
rows={4}
rows={1}
fullWidth
/>
</Fieldset>
Expand Down
32 changes: 19 additions & 13 deletions site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Button from "@mui/material/Button"
import { makeStyles, useTheme } from "@mui/styles"
import Skeleton from "@mui/material/Skeleton"
import AddIcon from "@mui/icons-material/AddOutlined"
import { GetLicensesResponse } from "api/api"
import { Header } from "components/DeploySettingsLayout/Header"
import { LicenseCard } from "components/LicenseCard/LicenseCard"
Expand Down Expand Up @@ -37,8 +38,9 @@ const LicensesSettingsPageView: FC<Props> = ({
return (
<>
<Confetti
width={width}
height={height}
// For some reason this overflows the window and adds scrollbars if we don't subtract here.
width={width - 1}
height={height - 1}
numberOfPieces={showConfetti ? 200 : 0}
colors={[theme.palette.primary.main, theme.palette.secondary.main]}
/>
Expand All @@ -49,11 +51,15 @@ const LicensesSettingsPageView: FC<Props> = ({
>
<Header
title="Licenses"
description="Enterprise licenses unlock more features on your deployment."
description="Manage licenses to unlock Enterprise features."
/>

<Button component={Link} to="/settings/deployment/licenses/add">
Add new license
<Button
component={Link}
to="/settings/deployment/licenses/add"
startIcon={<AddIcon />}
>
Add a License
</Button>
</Stack>

Expand All @@ -78,11 +84,14 @@ const LicensesSettingsPageView: FC<Props> = ({
<div className={styles.root}>
<Stack alignItems="center" spacing={1}>
<Stack alignItems="center" spacing={0.5}>
<span className={styles.title}>No licenses yet</span>
<span className={styles.title}>
You don{"'"}t have any licenses!
</span>
<span className={styles.description}>
Contact <a href="mailto:sales@coder.com">sales</a> or{" "}
You{"'"}re missing out on high availability, RBAC, quotas, and
much more. Contact <a href="mailto:sales@coder.com">sales</a> or{" "}
<a href="https://coder.com/trial">request a trial license</a> to
learn more.
get started.
</span>
</Stack>
</Stack>
Expand All @@ -105,16 +114,13 @@ const useStyles = makeStyles((theme) => ({
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.divider}`,
padding: theme.spacing(6),

"&:hover": {
backgroundColor: theme.palette.background.paper,
},
},

description: {
color: theme.palette.text.secondary,
textAlign: "center",
maxWidth: theme.spacing(50),
maxWidth: theme.spacing(58),
marginTop: theme.spacing(1),
},
}))

Expand Down