chore: adjust the style and wording of the license page (#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

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."
       />
       <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>
@@ -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",

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<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>
 
@@ -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()
 
@@ -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>

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<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]}
       />
@@ -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>
 
@@ -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>
@@ -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),
   },
 }))