chore: minor tweaks to license ui (#7314)

* chore: minor tweaks to license ui

* minor license ui tweaks

* rename stories

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: {

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,
 }
 

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>