From d3a9d7c49728acc95be8594969c0896bccbdfb7a Mon Sep 17 00:00:00 2001
From: Rodrigo Maia <rodrigo@coder.com>
Date: Fri, 28 Apr 2023 18:49:54 -0300
Subject: [PATCH] chore: minor tweaks to license ui (#7314)

* chore: minor tweaks to license ui

* minor license ui tweaks

* rename stories
---
 .../components/LicenseCard/LicenseCard.tsx    | 28 +++++++++----------
 .../LicensesSettingsPageView.stories.tsx      |  2 +-
 .../LicensesSettingsPageView.tsx              |  2 +-
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx
index bb484121d5..4a7420fcd2 100644
--- a/site/src/components/LicenseCard/LicenseCard.tsx
+++ b/site/src/components/LicenseCard/LicenseCard.tsx
@@ -69,20 +69,23 @@ export const LicenseCard = ({
           justifyContent="space-between"
           alignItems="self-end"
         >
-          <div className={styles.userLimit}>
-            <span className={styles.userLimitActual}>{userLimitActual}</span>
-            <span className={styles.userLimitLimit}>
-              / {userLimitLimit || "Unlimited"} users
-            </span>
-          </div>
+          <Stack direction="column" spacing={0} className={styles.userLimit}>
+            <span className={styles.secondaryMaincolor}>Users</span>
+            <div className={styles.primaryMainColor}>
+              <span className={styles.userLimitActual}>{userLimitActual}</span>
+              <span className={styles.userLimitLimit}>
+                {` / ${userLimitLimit || "Unlimited"}`}
+              </span>
+            </div>
+          </Stack>
 
           <Stack direction="column" spacing={0} alignItems="center">
-            <span className={styles.expirationDate}>
+            <span className={styles.secondaryMaincolor}>Valid until</span>
+            <span className={styles.primaryMainColor}>
               {dayjs
                 .unix(license.claims.license_expires)
                 .format("MMMM D, YYYY")}
             </span>
-            <span className={styles.expirationDateLabel}>Valid until</span>
           </Stack>
           <div className={styles.actions}>
             <Button
@@ -109,13 +112,10 @@ const useStyles = makeStyles((theme) => ({
     textAlign: "right",
   },
   userLimitActual: {
-    // fontWeight: 600,
-    paddingRight: "5px",
     color: theme.palette.primary.main,
   },
   userLimitLimit: {
     color: theme.palette.secondary.main,
-    // fontSize: theme.typography.h5.fontSize,
     fontWeight: 600,
   },
   licenseCard: {
@@ -127,7 +127,6 @@ const useStyles = makeStyles((theme) => ({
   licenseId: {
     color: theme.palette.secondary.main,
     fontWeight: 600,
-    // fontSize: theme.typography.h5.fontSize,
   },
   accountType: {
     fontWeight: 600,
@@ -136,11 +135,10 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     textTransform: "capitalize",
   },
-  expirationDate: {
-    // fontWeight: 600,
+  primaryMainColor: {
     color: theme.palette.primary.main,
   },
-  expirationDateLabel: {
+  secondaryMaincolor: {
     color: theme.palette.secondary.main,
   },
   removeButton: {
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx
index 1a43ab5b03..05871aa11c 100644
--- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx
+++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx
@@ -2,7 +2,7 @@ import { GetLicensesResponse } from "api/api"
 import LicensesSettingsPageView from "./LicensesSettingsPageView"
 
 export default {
-  title: "pages/LicensesSettingsPage",
+  title: "pages/LicensesSettingsPageView",
   component: LicensesSettingsPageView,
 }
 
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
index 70f6255134..631e6dc656 100644
--- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -57,7 +57,7 @@ const LicensesSettingsPageView: FC<Props> = ({
           component={Link}
           to="/settings/deployment/licenses/add"
         >
-          Add new License
+          Add new license
         </Button>
       </Stack>