diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx index dd7379b99490f..c887abe396a8d 100644 --- a/site/src/components/LicenseCard/LicenseCard.tsx +++ b/site/src/components/LicenseCard/LicenseCard.tsx @@ -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" @@ -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." /> - - #{license.id} - - - {license.claims.trial ? "Trial" : "Enterprise"} - + #{license.id} + + {license.claims.trial ? "Trial" : "Enterprise"} + - + Users -
- {userLimitActual} - - {` / ${userLimitLimit || "Unlimited"}`} - -
+ + {userLimitActual} {` / ${userLimitLimit || "Unlimited"}`} +
- - Valid until - + + Valid Until + {dayjs .unix(license.claims.license_expires) .format("MMMM D, YYYY")} -
- -
+
@@ -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", diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx index 46c3def116afd..5611c63f84300 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx @@ -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" @@ -53,11 +54,15 @@ export const AddNewLicensePageView: FC = ({ justifyContent="space-between" >
- @@ -69,15 +74,15 @@ export const AddNewLicensePageView: FC = ({ 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." /> or
{ e.preventDefault() @@ -90,15 +95,15 @@ export const AddNewLicensePageView: FC = ({ }} button={ } >
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 6d5bdb94f4ce4..f91060667801a 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -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" @@ -37,8 +38,9 @@ const LicensesSettingsPageView: FC = ({ return ( <> @@ -49,11 +51,15 @@ const LicensesSettingsPageView: FC = ({ >
- @@ -78,11 +84,14 @@ const LicensesSettingsPageView: FC = ({
- No licenses yet + + You don{"'"}t have any licenses! + - Contact sales or{" "} + You{"'"}re missing out on high availability, RBAC, quotas, and + much more. Contact sales or{" "} request a trial license to - learn more. + get started. @@ -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), }, }))