chore: minor tweaks to license ui (coder#7314)

rodrimaia · web-flow · commit d3a9d7c49728 · 2023-04-28T21:49:54.000Z
* chore: minor tweaks to license ui

* minor license ui tweaks

* rename stories
diff --git 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
@@ -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
@@ -57,7 +57,7 @@ const LicensesSettingsPageView: FC<Props> = ({
           component={Link}
           to="/settings/deployment/licenses/add"
         >
-          Add new License
+          Add new license
         </Button>
       </Stack>
 

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { GetLicensesResponse } from "api/api"`
`2`	`2`	`import LicensesSettingsPageView from "./LicensesSettingsPageView"`
`3`	`3`
`4`	`4`	`export default {`
`5`		`- title: "pages/LicensesSettingsPage",`
	`5`	`+ title: "pages/LicensesSettingsPageView",`
`6`	`6`	`component: LicensesSettingsPageView,`
`7`	`7`	`}`
`8`	`8`
Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ const LicensesSettingsPageView: FC<Props> = ({`
`57`	`57`	`component={Link}`
`58`	`58`	`to="/settings/deployment/licenses/add"`
`59`	`59`	`>`
`60`		`- Add new License`
	`60`	`+ Add new license`
`61`	`61`	`</Button>`
`62`	`62`	`</Stack>`
`63`	`63`