[AC-1418] Adjust labels and appearance to better match design

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html

@@ -151,7 +151,7 @@
     >
       {{ "removeSponsorship" | i18n }}
     </button>
-    <h4 bitTypography="h4" class="tw-mt-9">{{ "storage" | i18n }}</h4>
+    <h4 bitTypography="h4" class="tw-mt-7">{{ "storage" | i18n }}</h4>
     <p bitTypography="body1">
       {{ "subscriptionStorage" | i18n : sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
     </p>
@@ -178,7 +178,7 @@
       </div>
     </ng-container>
     <ng-container *ngIf="showAdjustSecretsManager">
-      <h3 bitTypography="h3" class="tw-mt-7">{{ "secretsManager" | i18n }}</h3>
+      <h3 bitTypography="h3" class="tw-mt-9">{{ "secretsManager" | i18n }}</h3>
       <app-sm-adjust-subscription
         [organizationId]="organizationId"
         [options]="smOptions"

apps/web/src/app/billing/organizations/secrets-manager/sm-adjust-subscription.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-form-field class="tw-w-1/2">
+  <bit-form-field class="tw-w-2/3">
     <bit-label>{{ "subscriptionSeats" | i18n }}</bit-label>
     <input bitInput id="smSeatCount" formControlName="seatCount" type="number" step="1" min="0" />
     <bit-hint>
@@ -15,7 +15,7 @@
       {{ "limitSmSubscriptionDesc" | i18n }}
     </bit-hint>
   </bit-form-control>
-  <bit-form-field class="tw-w-1/2" *ngIf="formGroup.value.limitSeats">
+  <bit-form-field class="tw-w-2/3" *ngIf="formGroup.value.limitSeats">
     <bit-label>{{ "maxSeatLimit" | i18n }}</bit-label>
     <input
       bitInput
@@ -26,12 +26,12 @@
       [min]="formGroup.value.seatCount"
     />
     <bit-hint>
-      <strong>{{ "total" | i18n }}:</strong>
+      <strong>{{ "maxSeatCost" | i18n }}:</strong>
       {{ formGroup.value.seatLimit || 0 }} &times; {{ options.seatPrice | currency }} =
       {{ maxSeatTotal | currency }} / {{ options.interval | i18n }}
     </bit-hint>
   </bit-form-field>
-  <bit-form-field class="tw-w-1/2">
+  <bit-form-field class="tw-w-2/3">
     <bit-label>{{ "additionalServiceAccounts" | i18n }}</bit-label>
     <input
       bitInput
@@ -68,7 +68,7 @@
       {{ "limitServiceAccountsDesc" | i18n }}
     </bit-hint>
   </bit-form-control>
-  <bit-form-field class="tw-w-1/2" *ngIf="formGroup.value.limitServiceAccounts">
+  <bit-form-field class="tw-w-2/3" *ngIf="formGroup.value.limitServiceAccounts">
     <bit-label>{{ "serviceAccountLimit" | i18n }}</bit-label>
     <input
       bitInput
@@ -79,7 +79,7 @@
       [min]="formGroup.value.serviceAccountCount"
     />
     <bit-hint>
-      <strong>{{ "total" | i18n }}:</strong>
+      <strong>{{ "maxServiceAccountCost" | i18n }}:</strong>
       {{ formGroup.value.serviceAccountLimit || 0 }} &times;
       {{ options.additionalServiceAccountPrice | currency }} =
       {{ maxServiceAccountTotal | currency }} / {{ options.interval | i18n }}

apps/web/src/locales/en/messages.json

@@ -404,8 +404,7 @@
   "viewItem": {
     "message": "View item"
   },
-  "new":
-  {
+  "new": {
     "message": "New",
     "description": "for adding new items"
   },
@@ -5843,10 +5842,10 @@
     "message": "Delete secrets",
     "description": "The action to delete multiple secrets from the system."
   },
-  "hardDeleteSecret":{
+  "hardDeleteSecret": {
     "message": "Permanently delete secret"
   },
-  "hardDeleteSecrets":{
+  "hardDeleteSecrets": {
     "message": "Permanently delete secrets"
   },
   "secretProjectAssociationDescription": {
@@ -5925,14 +5924,14 @@
     "message": "To get started, add a new secret or import secrets.",
     "description": "Message to encourage the user to start adding secrets."
   },
-  "secretsTrashNoItemsMessage":{
+  "secretsTrashNoItemsMessage": {
     "message": "There are no secrets in the trash."
   },
   "serviceAccountsNoItemsMessage": {
     "message": "Create a new service account to get started automating secret access.",
     "description": "Message to encourage the user to start creating service accounts."
   },
-   "serviceAccountsNoItemsTitle": {
+  "serviceAccountsNoItemsTitle": {
     "message": "Nothing to show yet",
     "description": "Title to indicate that there are no service accounts to display."
   },
@@ -5953,7 +5952,7 @@
     "description": "Action to view the details of a service account."
   },
   "deleteServiceAccountDialogMessage": {
-    "message":  "Deleting service account $SERVICE_ACCOUNT$ is permanent and irreversible.",
+    "message": "Deleting service account $SERVICE_ACCOUNT$ is permanent and irreversible.",
     "placeholders": {
       "service_account": {
         "content": "$1",
@@ -5961,11 +5960,11 @@
       }
     }
   },
-  "deleteServiceAccountsDialogMessage":{
+  "deleteServiceAccountsDialogMessage": {
     "message": "Deleting service accounts is permanent and irreversible."
   },
-  "deleteServiceAccountsConfirmMessage":{
-    "message":  "Delete $COUNT$ service accounts",
+  "deleteServiceAccountsConfirmMessage": {
+    "message": "Delete $COUNT$ service accounts",
     "placeholders": {
       "count": {
         "content": "$1",
@@ -5973,19 +5972,19 @@
       }
     }
   },
-  "deleteServiceAccountToast":{
+  "deleteServiceAccountToast": {
     "message": "Service account deleted"
   },
-  "deleteServiceAccountsToast":{
+  "deleteServiceAccountsToast": {
     "message": "Service accounts deleted"
   },
   "searchServiceAccounts": {
     "message": "Search service accounts",
     "description": "Placeholder text for searching service accounts."
   },
-  "editServiceAccount":{
-    "message":"Edit service account",
-    "description" : "Title for editing a service account."
+  "editServiceAccount": {
+    "message": "Edit service account",
+    "description": "Title for editing a service account."
   },
   "addProject": {
     "message": "Add project",
@@ -6025,8 +6024,8 @@
   "hardDeleteSecretsConfirmation": {
     "message": "Are you sure you want to permanently delete these secrets?"
   },
-  "hardDeletesSuccessToast":{
-    "message":"Secrets permanently deleted"
+  "hardDeletesSuccessToast": {
+    "message": "Secrets permanently deleted"
   },
   "smAccess": {
     "message": "Access",
@@ -6040,7 +6039,7 @@
     "message": "Service account name",
     "description": "Label for the name of a service account"
   },
-   "serviceAccountCreated": {
+  "serviceAccountCreated": {
     "message": "Service account created",
     "description": "Notifies that a new service account has been created"
   },
@@ -6128,8 +6127,8 @@
     "message": "Secret sent to trash",
     "description": "Notification to be displayed when a secret is successfully sent to the trash."
   },
-  "hardDeleteSuccessToast":{
-    "message":"Secret permanently deleted"
+  "hardDeleteSuccessToast": {
+    "message": "Secret permanently deleted"
   },
   "accessTokens": {
     "message": "Access tokens",
@@ -6836,8 +6835,8 @@
     "message": "with automatic enrollment will turn on when this option is used.",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Once authenticated, members will decrypt vault data using a key stored on their device. The master password reset policy with automatic enrollment will turn on when this option is used.'"
   },
-  "notFound":{
-    "message":  "$RESOURCE$ not found",
+  "notFound": {
+    "message": "$RESOURCE$ not found",
     "placeholders": {
       "resource": {
         "content": "$1",
@@ -6927,6 +6926,9 @@
   "serviceAccountLimit": {
     "message": "Service account limit (optional)"
   },
+  "maxServiceAccountCost": {
+    "message": "Max potential service account cost"
+  },
   "additionalServiceAccountsDesc": {
     "message": "Your plan comes with $COUNT$ service accounts. You can add additional service accounts for $COST$ per month.",
     "placeholders": {