[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"
   },
@@ -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": {