From 9a80c06f840c6bb05b3996df11f16f3265d85d66 Mon Sep 17 00:00:00 2001
From: Rodrigo Maia <rodrigo@coder.com>
Date: Thu, 27 Apr 2023 20:10:52 +0000
Subject: [PATCH 1/3] chore: minor tweaks to license ui

---
 site/src/components/LicenseCard/LicenseCard.tsx           | 8 +++++---
 .../LicensesSettingsPage/LicensesSettingsPageView.tsx     | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx
index bb484121d532c..d4fe4d3960f2a 100644
--- a/site/src/components/LicenseCard/LicenseCard.tsx
+++ b/site/src/components/LicenseCard/LicenseCard.tsx
@@ -70,19 +70,21 @@ export const LicenseCard = ({
           alignItems="self-end"
         >
           <div className={styles.userLimit}>
-            <span className={styles.userLimitActual}>{userLimitActual}</span>
+            <span className={styles.userLimitActual}>
+              {userLimitActual} users
+            </span>
             <span className={styles.userLimitLimit}>
-              / {userLimitLimit || "Unlimited"} users
+              / {userLimitLimit || "Unlimited"}
             </span>
           </div>
 
           <Stack direction="column" spacing={0} alignItems="center">
+            <span className={styles.expirationDateLabel}>Valid until</span>
             <span className={styles.expirationDate}>
               {dayjs
                 .unix(license.claims.license_expires)
                 .format("MMMM D, YYYY")}
             </span>
-            <span className={styles.expirationDateLabel}>Valid until</span>
           </Stack>
           <div className={styles.actions}>
             <Button
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
index 70f625513443e..631e6dc6565f7 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>
 

From b4f44b40e162140f06f1362f44344f2bd14781c0 Mon Sep 17 00:00:00 2001
From: Rodrigo Maia <rodrigo@coder.com>
Date: Fri, 28 Apr 2023 13:39:46 +0000
Subject: [PATCH 2/3] minor license ui tweaks

---
 .../components/LicenseCard/LicenseCard.tsx    | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx
index d4fe4d3960f2a..4a7420fcd267a 100644
--- a/site/src/components/LicenseCard/LicenseCard.tsx
+++ b/site/src/components/LicenseCard/LicenseCard.tsx
@@ -69,18 +69,19 @@ export const LicenseCard = ({
           justifyContent="space-between"
           alignItems="self-end"
         >
-          <div className={styles.userLimit}>
-            <span className={styles.userLimitActual}>
-              {userLimitActual} users
-            </span>
-            <span className={styles.userLimitLimit}>
-              / {userLimitLimit || "Unlimited"}
-            </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.expirationDateLabel}>Valid until</span>
-            <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")}
@@ -111,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: {
@@ -129,7 +127,6 @@ const useStyles = makeStyles((theme) => ({
   licenseId: {
     color: theme.palette.secondary.main,
     fontWeight: 600,
-    // fontSize: theme.typography.h5.fontSize,
   },
   accountType: {
     fontWeight: 600,
@@ -138,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: {

From e9a54caf7dddc17119d23750475bfeeb7f407894 Mon Sep 17 00:00:00 2001
From: Rodrigo Maia <rodrigo@coder.com>
Date: Fri, 28 Apr 2023 13:55:55 +0000
Subject: [PATCH 3/3] rename stories

---
 .../LicensesSettingsPage/LicensesSettingsPageView.stories.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx
index 1a43ab5b03613..05871aa11cf3f 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,
 }