From 5fec1d3bce1803b7f70f5613ba2fc02e9145da65 Mon Sep 17 00:00:00 2001
From: Jake Fink <jfink@bitwarden.com>
Date: Mon, 6 Feb 2023 09:36:30 -0500
Subject: [PATCH] [EC-1040] new button styles (#4549)

* [EC-1040] update new button styles

* [EC-1040] override add/edit modal title in web

* [EC-1040] add comment about removing when all clients are updated
---
 .../vault/vault-header/vault-header.component.html    |  3 ++-
 apps/web/src/vault/app/vault/add-edit.component.ts    |  4 ++++
 .../vault/vault-header/vault-header.component.html    |  3 ++-
 .../src/vault/app/vault/vault-items.component.html    | 11 +++++++++--
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/organizations/vault/vault-header/vault-header.component.html b/apps/web/src/app/organizations/vault/vault-header/vault-header.component.html
index b01280553f7..45f80aa8561 100644
--- a/apps/web/src/app/organizations/vault/vault-header/vault-header.component.html
+++ b/apps/web/src/app/organizations/vault/vault-header/vault-header.component.html
@@ -106,7 +106,8 @@
       buttonType="primary"
       (click)="addCipher()"
     >
-      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "newItem" | i18n }}
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+      {{ "newItem" | i18n }}
     </button>
   </div>
 </div>
diff --git a/apps/web/src/vault/app/vault/add-edit.component.ts b/apps/web/src/vault/app/vault/add-edit.component.ts
index 1226a9e2f53..e9990f41cea 100644
--- a/apps/web/src/vault/app/vault/add-edit.component.ts
+++ b/apps/web/src/vault/app/vault/add-edit.component.ts
@@ -77,6 +77,10 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
   async ngOnInit() {
     await super.ngOnInit();
     await this.load();
+    // remove when all the title for all clients are updated to New Item
+    if (this.cloneMode || !this.editMode) {
+      this.title = this.i18nService.t("newItem");
+    }
     this.showRevisionDate = this.cipher.passwordRevisionDisplayDate != null;
     this.hasPasswordHistory = this.cipher.hasPasswordHistory;
     this.cleanUp();
diff --git a/apps/web/src/vault/app/vault/vault-header/vault-header.component.html b/apps/web/src/vault/app/vault/vault-header/vault-header.component.html
index c7980194787..4dd4a4bce95 100644
--- a/apps/web/src/vault/app/vault/vault-header/vault-header.component.html
+++ b/apps/web/src/vault/app/vault/vault-header/vault-header.component.html
@@ -36,7 +36,8 @@
 
   <div *ngIf="!activeFilter.isDeleted" class="tw-shrink-0">
     <button type="button" bitButton buttonType="primary" (click)="addCipher()">
-      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "newItem" | i18n }}
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+      {{ "newItem" | i18n }}
     </button>
   </div>
 </div>
diff --git a/apps/web/src/vault/app/vault/vault-items.component.html b/apps/web/src/vault/app/vault/vault-items.component.html
index 82a0f141bcc..1da0ca1aaaf 100644
--- a/apps/web/src/vault/app/vault/vault-items.component.html
+++ b/apps/web/src/vault/app/vault/vault-items.component.html
@@ -332,8 +332,15 @@
       </ng-container>
       <ng-container *ngIf="!showMissingCollectionPermissionMessage">
         <p>{{ "noItemsInList" | i18n }}</p>
-        <button (click)="addCipher()" class="btn btn-outline-primary" *ngIf="showAddNew">
-          <i class="bwi bwi-plus bwi-fw"></i>{{ "addItem" | i18n }}
+        <button
+          type="button"
+          buttonType="primary"
+          bitButton
+          (click)="addCipher()"
+          *ngIf="showAddNew"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+          {{ "newItem" | i18n }}
         </button>
       </ng-container>
     </ng-container>