From 4b770daab2f6838c60154920c685e5197047eee0 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Tue, 3 Sep 2024 14:14:32 -0400
Subject: [PATCH] [CL-210] Change base font size from 14px to 16px (#10779)

---
 apps/browser/src/popup/scss/variables.scss                  | 2 +-
 .../admin-console/organizations/manage/groups.component.ts  | 4 ++--
 .../organizations/members/members.component.ts              | 4 ++--
 .../access-selector/access-selector.component.html          | 6 ------
 .../web/src/app/billing/shared/payment/payment.component.ts | 2 +-
 .../vault/components/vault-items/vault-items.component.ts   | 4 ++--
 apps/web/src/scss/base.scss                                 | 2 +-
 .../app/admin-console/providers/manage/members.component.ts | 4 ++--
 .../billing/services/payment-processors/stripe.service.ts   | 4 ++--
 libs/components/src/checkbox/checkbox.component.ts          | 2 +-
 libs/components/src/form-field/form-field.component.html    | 4 +++-
 libs/components/src/item/item.component.ts                  | 6 +++---
 libs/components/src/styles.css                              | 2 +-
 13 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index 9720ab4d2ce..cfd61cd6a2b 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -4,7 +4,7 @@ $dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
 
 $font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-size-base: 14px;
+$font-size-base: 16px;
 $font-size-large: 18px;
 $font-size-xlarge: 22px;
 $font-size-xxlarge: 28px;
diff --git a/apps/web/src/app/admin-console/organizations/manage/groups.component.ts b/apps/web/src/app/admin-console/organizations/manage/groups.component.ts
index dfb6f349ebd..03cf0a33dae 100644
--- a/apps/web/src/app/admin-console/organizations/manage/groups.component.ts
+++ b/apps/web/src/app/admin-console/organizations/manage/groups.component.ts
@@ -81,8 +81,8 @@ export class GroupsComponent {
   protected searchControl = new FormControl("");
 
   // Fixed sizes used for cdkVirtualScroll
-  protected rowHeight = 46;
-  protected rowHeightClass = `tw-h-[46px]`;
+  protected rowHeight = 52;
+  protected rowHeightClass = `tw-h-[52px]`;
 
   protected ModalTabType = GroupAddEditTabType;
   private refreshGroups$ = new BehaviorSubject<void>(null);
diff --git a/apps/web/src/app/admin-console/organizations/members/members.component.ts b/apps/web/src/app/admin-console/organizations/members/members.component.ts
index c1bc970d5df..59170ce50f9 100644
--- a/apps/web/src/app/admin-console/organizations/members/members.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/members.component.ts
@@ -97,8 +97,8 @@ export class MembersComponent extends BaseMembersComponent<OrganizationUserView>
   );
 
   // Fixed sizes used for cdkVirtualScroll
-  protected rowHeight = 62;
-  protected rowHeightClass = `tw-h-[62px]`;
+  protected rowHeight = 69;
+  protected rowHeightClass = `tw-h-[69px]`;
 
   constructor(
     apiService: ApiService,
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
index aff5d25ee08..4226862fde7 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
+++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
@@ -3,13 +3,7 @@
 <div class="tw-flex" *ngIf="!hideMultiSelect">
   <bit-form-field *ngIf="permissionMode == 'edit'" class="tw-mr-3 tw-shrink-0">
     <bit-label>{{ "permission" | i18n }}</bit-label>
-    <!--
-      Built-in select height differs between browsers, this fix makes sure we match bit-multi-select height.
-      We might want to reconsider this fix when/if we implement
-      [CL-78] [Improvement] Completely restyled selects (https://bitwarden.atlassian.net/browse/CL-78)
-    -->
     <select
-      class="tw-h-[35px]"
       bitInput
       [disabled]="disabled"
       [(ngModel)]="initialPermission"
diff --git a/apps/web/src/app/billing/shared/payment/payment.component.ts b/apps/web/src/app/billing/shared/payment/payment.component.ts
index 78e9f0a5699..c4fbde25a8b 100644
--- a/apps/web/src/app/billing/shared/payment/payment.component.ts
+++ b/apps/web/src/app/billing/shared/payment/payment.component.ts
@@ -81,7 +81,7 @@ export class PaymentComponent implements OnInit, OnDestroy {
         fontFamily:
           '"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
           '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        fontSize: "14px",
+        fontSize: "16px",
         fontSmoothing: "antialiased",
         "::placeholder": {
           color: null,
diff --git a/apps/web/src/app/vault/components/vault-items/vault-items.component.ts b/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
index 2709091b0c8..5504ad828ed 100644
--- a/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
+++ b/apps/web/src/app/vault/components/vault-items/vault-items.component.ts
@@ -13,8 +13,8 @@ import { VaultItem } from "./vault-item";
 import { VaultItemEvent } from "./vault-item-event";
 
 // Fixed manual row height required due to how cdk-virtual-scroll works
-export const RowHeight = 65;
-export const RowHeightClass = `tw-h-[65px]`;
+export const RowHeight = 74;
+export const RowHeightClass = `tw-h-[74px]`;
 
 const MaxSelectionCount = 500;
 
diff --git a/apps/web/src/scss/base.scss b/apps/web/src/scss/base.scss
index 257662fd5b2..495e7df6926 100644
--- a/apps/web/src/scss/base.scss
+++ b/apps/web/src/scss/base.scss
@@ -1,5 +1,5 @@
 html {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 body {
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
index f78bccd3548..253b777676d 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
@@ -49,8 +49,8 @@ export class MembersComponent extends BaseMembersComponent<ProviderUser> {
   dataSource = new MembersTableDataSource();
   loading = true;
   providerId: string;
-  rowHeight = 62;
-  rowHeightClass = `tw-h-[62px]`;
+  rowHeight = 69;
+  rowHeightClass = `tw-h-[69px]`;
   status: ProviderUserStatusType = null;
 
   userStatusType = ProviderUserStatusType;
diff --git a/libs/common/src/billing/services/payment-processors/stripe.service.ts b/libs/common/src/billing/services/payment-processors/stripe.service.ts
index 01082e923da..600b6886cd1 100644
--- a/libs/common/src/billing/services/payment-processors/stripe.service.ts
+++ b/libs/common/src/billing/services/payment-processors/stripe.service.ts
@@ -110,9 +110,9 @@ export class StripeService implements StripeServiceAbstraction {
         base: {
           color: null,
           fontFamily:
-            '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
+            '"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
             '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-          fontSize: "14px",
+          fontSize: "16px",
           fontSmoothing: "antialiased",
           "::placeholder": {
             color: null,
diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts
index 3dfc8426bcf..5933036cc25 100644
--- a/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -83,7 +83,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
 
   @HostBinding("style.--mask-image")
   protected maskImage =
-    `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="11" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
+    `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
 
   @HostBinding("style.--indeterminate-mask-image")
   protected indeterminateImage =
diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index 2cf4db8d772..dbd6b10f42d 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -31,7 +31,9 @@
           [attr.for]="input.labelForId"
         >
           <ng-container *ngTemplateOutlet="labelContent"></ng-container>
-          <span *ngIf="input.required" class="tw-text-[0.625rem]"> ({{ "required" | i18n }})</span>
+          <span *ngIf="input.required" class="tw-text-[0.625rem] tw-relative tw-bottom-[-1px]">
+            ({{ "required" | i18n }})</span
+          >
         </label>
       </div>
       <div
diff --git a/libs/components/src/item/item.component.ts b/libs/components/src/item/item.component.ts
index 58545a49b50..f566c8e6af3 100644
--- a/libs/components/src/item/item.component.ts
+++ b/libs/components/src/item/item.component.ts
@@ -8,16 +8,16 @@ import { ItemActionComponent } from "./item-action.component";
 /**
  * The class used to set the height of a bit item's inner content.
  */
-export const BitItemHeightClass = `tw-h-[52px]`;
+export const BitItemHeightClass = `tw-h-[60px]`;
 
 /**
  * The height of a bit item in pixels. Includes any margin, padding, or border. Used by the virtual scroll
  * to estimate how many items can be displayed at once and how large the virtual container should be.
  * Needs to be updated if the item height or spacing changes.
  *
- * 52px + 5.25px bottom margin + 1px border = 58.25px
+ * 60px + 6px bottom margin + 1px border = 67px
  */
-export const BitItemHeight = 58.25; //
+export const BitItemHeight = 67; //
 
 @Component({
   selector: "bit-item",
diff --git a/libs/components/src/styles.css b/libs/components/src/styles.css
index ba200ff3f32..4f885115c87 100644
--- a/libs/components/src/styles.css
+++ b/libs/components/src/styles.css
@@ -7,5 +7,5 @@
 @tailwind utilities;
 
 html {
-  font-size: 14px;
+  font-size: 16px;
 }