[CL-581] Update svgs to new designs and make responsive (#16219)

2025-12-26 13:13:22 +00:00 · 2025-09-10 17:23:53 -04:00
parent c160b421fc
commit 926f587ea2
109 changed files with 798 additions and 1391 deletions
--- a/apps/web/src/app/admin-console/organizations/collections/deprecated_vault.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/deprecated_vault.component.ts
@@ -34,7 +34,7 @@ import {
  Unassigned,
 } from "@bitwarden/admin-console/common";
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
-import { Search } from "@bitwarden/assets/svg";
+import { NoResults } from "@bitwarden/assets/svg";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
@@ -170,7 +170,7 @@ export class VaultComponent implements OnInit, OnDestroy {
  activeFilter: VaultFilter = new VaultFilter();

  protected showAddAccessToggle = false;
-  protected noItemIcon = Search;
+  protected noItemIcon = NoResults;
  protected performingInitialLoad = true;
  protected refreshing = false;
  protected processingEvent = false;
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
@@ -36,7 +36,7 @@ import {
  Unassigned,
 } from "@bitwarden/admin-console/common";
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
-import { Search } from "@bitwarden/assets/svg";
+import { NoResults } from "@bitwarden/assets/svg";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
@@ -183,7 +183,7 @@ export class vNextVaultComponent implements OnInit, OnDestroy {
  activeFilter: VaultFilter = new VaultFilter();

  protected showAddAccessToggle = false;
-  protected noItemIcon = Search;
+  protected noItemIcon = NoResults;
  protected loading$: Observable<boolean>;
  protected processingEvent$ = new BehaviorSubject<boolean>(false);
  protected organization$: Observable<Organization>;
--- a/apps/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.html
+++ b/apps/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.html
@@ -12,7 +12,9 @@
    >
      <div class="tw-flex tw-flex-col tw-items-center">
        <ng-container *ngIf="currentState === 'assert'">
-          <bit-icon [icon]="Icons.CreatePasskeyIcon" class="tw-my-10"></bit-icon>
+          <div class="tw-size-24 tw-content-center tw-my-10">
+            <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-icon>
+          </div>
          <p bitTypography="body1">{{ "readingPasskeyLoadingInfo" | i18n }}</p>
          <button
            type="button"
@@ -27,7 +29,9 @@
        </ng-container>

        <ng-container *ngIf="currentState === 'assertFailed'">
-          <bit-icon [icon]="Icons.CreatePasskeyFailedIcon" class="tw-my-10"></bit-icon>
+          <div class="tw-size-24 tw-content-center tw-my-10">
+            <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-icon>
+          </div>
          <p bitTypography="body1">{{ "readingPasskeyLoadingInfo" | i18n }}</p>
          <button
            type="button"
--- a/apps/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.ts
+++ b/apps/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.ts
@@ -1,7 +1,10 @@
 import { Component } from "@angular/core";

 import { BaseLoginViaWebAuthnComponent } from "@bitwarden/angular/auth/components/base-login-via-webauthn.component";
-import { CreatePasskeyIcon, CreatePasskeyFailedIcon } from "@bitwarden/assets/svg";
+import {
+  TwoFactorAuthSecurityKeyIcon,
+  TwoFactorAuthSecurityKeyFailedIcon,
+} from "@bitwarden/assets/svg";

@Component({
  selector: "app-login-via-webauthn",
@@ -10,7 +13,7 @@ import { CreatePasskeyIcon, CreatePasskeyFailedIcon } from "@bitwarden/assets/sv
 })
 export class LoginViaWebAuthnComponent extends BaseLoginViaWebAuthnComponent {
  protected readonly Icons = {
-    CreatePasskeyIcon,
-    CreatePasskeyFailedIcon,
+    TwoFactorAuthSecurityKeyIcon,
+    TwoFactorAuthSecurityKeyFailedIcon,
  };
 }
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.html
@@ -15,7 +15,9 @@
      </ng-container>

      <div *ngIf="currentStep === 'credentialCreation'" class="tw-flex tw-flex-col tw-items-center">
-        <bit-icon [icon]="Icons.CreatePasskeyIcon" class="tw-mb-6"></bit-icon>
+        <div class="tw-size-24 tw-content-center tw-mb-6">
+          <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-icon>
+        </div>
        <h3 bitTypography="h3">{{ "creatingPasskeyLoading" | i18n }}</h3>
        <p bitTypography="body1">{{ "creatingPasskeyLoadingInfo" | i18n }}</p>
      </div>
@@ -24,7 +26,9 @@
        *ngIf="currentStep === 'credentialCreationFailed'"
        class="tw-flex tw-flex-col tw-items-center"
      >
-        <bit-icon [icon]="Icons.CreatePasskeyFailedIcon" class="tw-mb-6"></bit-icon>
+        <div class="tw-size-24 tw-content-center tw-mb-6">
+          <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-icon>
+        </div>
        <h3 bitTypography="h3">{{ "errorCreatingPasskey" | i18n }}</h3>
        <p bitTypography="body1">{{ "errorCreatingPasskeyInfo" | i18n }}</p>
      </div>
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
@@ -4,7 +4,10 @@ import { Component, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { firstValueFrom, map, Observable } from "rxjs";

-import { CreatePasskeyFailedIcon, CreatePasskeyIcon } from "@bitwarden/assets/svg";
+import {
+  TwoFactorAuthSecurityKeyFailedIcon,
+  TwoFactorAuthSecurityKeyIcon,
+} from "@bitwarden/assets/svg";
 import { PrfKeySet } from "@bitwarden/auth/common";
 import { Verification } from "@bitwarden/common/auth/types/verification";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
@@ -37,8 +40,8 @@ export class CreateCredentialDialogComponent implements OnInit {
  protected readonly NameMaxCharacters = 50;
  protected readonly CreateCredentialDialogResult = CreateCredentialDialogResult;
  protected readonly Icons = {
-    CreatePasskeyIcon,
-    CreatePasskeyFailedIcon,
+    TwoFactorAuthSecurityKeyIcon,
+    TwoFactorAuthSecurityKeyFailedIcon,
  };

  protected currentStep: Step = "userVerification";
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -238,7 +238,9 @@
    </ng-container>
    <ng-template #organizationIsNotManagedByConsolidatedBillingMSP>
      <div class="tw-flex tw-flex-col tw-items-center tw-text-info">
-        <bit-icon [icon]="subscriptionHiddenIcon"></bit-icon>
+        <div class="tw-size-56 tw-content-center">
+          <bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
+        </div>
        <p class="tw-font-bold">{{ "billingManagedByProvider" | i18n: userOrg.providerName }}</p>
        <p>{{ "billingContactProviderForAssistance" | i18n }}</p>
      </div>
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
@@ -5,7 +5,7 @@ import { ActivatedRoute } from "@angular/router";
 import { firstValueFrom, lastValueFrom, Subject } from "rxjs";

 import { OrganizationUserApiService } from "@bitwarden/admin-console/common";
-import { SubscriptionHiddenIcon } from "@bitwarden/assets/svg";
+import { GearIcon } from "@bitwarden/assets/svg";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import {
@@ -66,7 +66,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
  organizationIsManagedByConsolidatedBillingMSP = false;
  resellerSeatsRemainingMessage: string;

-  protected readonly subscriptionHiddenIcon = SubscriptionHiddenIcon;
+  protected readonly gearIcon = GearIcon;
  protected readonly teamsStarter = ProductTierType.TeamsStarter;

  private destroy$ = new Subject<void>();
--- a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
+++ b/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
@@ -2,12 +2,14 @@
 // @ts-strict-ignore
 import { Component, Input } from "@angular/core";

-import { SubscriptionHiddenIcon } from "@bitwarden/assets/svg";
+import { GearIcon } from "@bitwarden/assets/svg";

@Component({
  selector: "app-org-subscription-hidden",
  template: `<div class="tw-flex tw-flex-col tw-items-center tw-text-info">
-    <bit-icon [icon]="subscriptionHiddenIcon"></bit-icon>
+    <div class="tw-size-56 tw-content-center">
+      <bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
+    </div>
    <p class="tw-font-bold">{{ "billingManagedByProvider" | i18n: providerName }}</p>
    <p>{{ "billingContactProviderForAssistance" | i18n }}</p>
  </div>`,
@@ -15,5 +17,5 @@ import { SubscriptionHiddenIcon } from "@bitwarden/assets/svg";
 })
 export class SubscriptionHiddenComponent {
  @Input() providerName: string;
-  subscriptionHiddenIcon = SubscriptionHiddenIcon;
+  gearIcon = GearIcon;
 }
--- a/apps/web/src/app/dirt/reports/reports.ts
+++ b/apps/web/src/app/dirt/reports/reports.ts
@@ -1,11 +1,11 @@
 import {
-  MemberAccess,
+  NoCredentialsIcon,
  ReportBreach,
  ReportExposedPasswords,
-  ReportInactiveTwoFactor,
-  ReportReusedPasswords,
  ReportUnsecuredWebsites,
-  ReportWeakPasswords,
+  TwoFactorAuthSecurityKeyFailedIcon,
+  UnlockedIcon,
+  UserLockIcon,
 } from "@bitwarden/assets/svg";

 import { ReportEntry } from "./shared";
@@ -35,13 +35,13 @@ export const reports: Record<ReportType, ReportWithoutVariant> = {
    title: "reusedPasswordsReport",
    description: "reusedPasswordsReportDesc",
    route: "reused-passwords-report",
-    icon: ReportReusedPasswords,
+    icon: NoCredentialsIcon,
  },
  [ReportType.WeakPasswords]: {
    title: "weakPasswordsReport",
    description: "weakPasswordsReportDesc",
    route: "weak-passwords-report",
-    icon: ReportWeakPasswords,
+    icon: UnlockedIcon,
  },
  [ReportType.UnsecuredWebsites]: {
    title: "unsecuredWebsitesReport",
@@ -53,7 +53,7 @@ export const reports: Record<ReportType, ReportWithoutVariant> = {
    title: "inactive2faReport",
    description: "inactive2faReportDesc",
    route: "inactive-two-factor-report",
-    icon: ReportInactiveTwoFactor,
+    icon: TwoFactorAuthSecurityKeyFailedIcon,
  },
  [ReportType.DataBreach]: {
    title: "dataBreachReport",
@@ -65,6 +65,6 @@ export const reports: Record<ReportType, ReportWithoutVariant> = {
    title: "memberAccessReport",
    description: "memberAccessReportDesc",
    route: "member-access-report",
-    icon: MemberAccess,
+    icon: UserLockIcon,
  },
 };
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.html
+++ b/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.html
@@ -7,7 +7,9 @@
      class="tw-flex tw-h-28 tw-bg-background-alt2 tw-text-center tw-text-primary-300"
      [ngClass]="{ 'tw-grayscale': disabled }"
    >
-      <div class="tw-m-auto"><bit-icon [icon]="icon" aria-hidden="true"></bit-icon></div>
+      <div class="tw-m-auto tw-size-20 tw-content-center">
+        <bit-icon [icon]="icon" aria-hidden="true"></bit-icon>
+      </div>
    </div>
    <div class="tw-p-5" [ngClass]="{ 'tw-grayscale': disabled }">
      <h3 class="tw-mb-4 tw-text-xl tw-font-bold">{{ title }}</h3>
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -14,13 +14,11 @@ import { ChangePasswordComponent } from "@bitwarden/angular/auth/password-manage
 import { SetInitialPasswordComponent } from "@bitwarden/angular/auth/password-management/set-initial-password/set-initial-password.component";
 import {
  DevicesIcon,
-  RegistrationLockAltIcon,
  RegistrationUserAddIcon,
  TwoFactorTimeoutIcon,
-  DeviceVerificationIcon,
+  TwoFactorAuthEmailIcon,
  UserLockIcon,
  VaultIcon,
-  RegistrationExpiredLinkIcon,
  SsoKeyIcon,
  LockIcon,
  BrowserExtensionIcon,
@@ -171,7 +169,7 @@ const routes: Routes = [
        path: "finish-signup",
        canActivate: [unauthGuardFn()],
        data: {
-          pageIcon: RegistrationLockAltIcon,
+          pageIcon: LockIcon,
          titleId: "setAStrongPassword",
        } satisfies RouteDataProperties & AnonLayoutWrapperData,
        children: [
@@ -304,7 +302,7 @@ const routes: Routes = [
        path: "signup-link-expired",
        canActivate: [unauthGuardFn()],
        data: {
-          pageIcon: RegistrationExpiredLinkIcon,
+          pageIcon: TwoFactorTimeoutIcon,
          pageTitle: {
            key: "expiredLink",
          },
@@ -435,7 +433,7 @@ const routes: Routes = [
          },
        ],
        data: {
-          pageIcon: DeviceVerificationIcon,
+          pageIcon: TwoFactorAuthEmailIcon,
          pageTitle: {
            key: "verifyYourIdentity",
          },
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/apps/web/src/app/shared/shared.module.ts
@@ -22,6 +22,7 @@ import {
  LinkModule,
  MenuModule,
  MultiSelectModule,
+  NoItemsModule,
  ProgressModule,
  RadioButtonModule,
  SectionComponent,
@@ -66,6 +67,7 @@ import {
    LinkModule,
    MenuModule,
    MultiSelectModule,
+    NoItemsModule,
    ProgressModule,
    RadioButtonModule,
    SectionComponent,
@@ -101,6 +103,7 @@ import {
    LinkModule,
    MenuModule,
    MultiSelectModule,
+    NoItemsModule,
    ProgressModule,
    RadioButtonModule,
    SectionComponent,
--- a/apps/web/src/app/tools/send/send-access/access.component.html
+++ b/apps/web/src/app/tools/send/send-access/access.component.html
@@ -11,10 +11,10 @@
      (setPasswordEvent)="setPassword($event)"
      *ngIf="passwordRequired && !error"
    ></app-send-access-password>
-    <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="unavailable">
+    <bit-no-items [icon]="sendIcon" class="tw-text-main" *ngIf="unavailable">
      <ng-container slot="description">{{ "sendAccessUnavailable" | i18n }}</ng-container>
    </bit-no-items>
-    <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="error">
+    <bit-no-items [icon]="sendIcon" class="tw-text-main" *ngIf="error">
      <ng-container slot="description">{{ "unexpectedErrorSend" | i18n }}</ng-container>
    </bit-no-items>
    <div *ngIf="!passwordRequired && send && !error && !unavailable">
--- a/apps/web/src/app/tools/send/send-access/access.component.ts
+++ b/apps/web/src/app/tools/send/send-access/access.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";

-import { ExpiredSendIcon } from "@bitwarden/assets/svg";
+import { ActiveSendIcon } from "@bitwarden/assets/svg";
 import { CryptoFunctionService } from "@bitwarden/common/key-management/crypto/abstractions/crypto-function.service";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -49,7 +49,7 @@ export class AccessComponent implements OnInit {
  protected hideEmail = false;
  protected decKey: SymmetricCryptoKey;
  protected accessRequest: SendAccessRequest;
-  protected expiredSendIcon = ExpiredSendIcon;
+  protected sendIcon = ActiveSendIcon;

  protected formGroup = this.formBuilder.group({});

--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
+++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
@@ -30,7 +30,9 @@
 </section>

 <section *ngIf="state === SetupExtensionState.Success" class="tw-flex tw-flex-col tw-items-center">
-  <bit-icon [icon]="PartyIcon"></bit-icon>
+  <div class="tw-size-[90px]">
+    <bit-icon [icon]="PartyIcon"></bit-icon>
+  </div>
  <h1 bitTypography="h2" class="tw-mb-6 tw-mt-4">{{ "bitwardenExtensionInstalled" | i18n }}</h1>
  <div
    class="tw-flex tw-flex-col tw-rounded-2xl tw-bg-background tw-border tw-border-solid tw-border-secondary-300 tw-p-8"
--- a/apps/web/src/app/vault/individual-vault/vault.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault.component.html
@@ -66,22 +66,21 @@
      ></i>
      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
    </div>
-    <div
-      *ngIf="isEmpty && !performingInitialLoad"
-      class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start"
-    >
-      <bit-icon [icon]="noItemIcon" aria-hidden="true"></bit-icon>
-      <p>{{ "noItemsInList" | i18n }}</p>
-      <button
-        type="button"
-        buttonType="primary"
-        bitButton
-        (click)="addCipher()"
-        *ngIf="filter.type !== 'trash'"
-      >
-        <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-        {{ "newItem" | i18n }}
-      </button>
+    <div class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start">
+      <bit-no-items [icon]="noItemIcon" *ngIf="isEmpty && !performingInitialLoad">
+        <div slot="title">{{ "noItemsInList" | i18n }}</div>
+        <button
+          type="button"
+          buttonType="primary"
+          bitButton
+          (click)="addCipher()"
+          *ngIf="filter.type !== 'trash'"
+          slot="button"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+          {{ "newItem" | i18n }}
+        </button>
+      </bit-no-items>
    </div>
  </div>
 </div>
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -35,7 +35,7 @@ import {
  Unassigned,
 } from "@bitwarden/admin-console/common";
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
-import { Search } from "@bitwarden/assets/svg";
+import { NoResults } from "@bitwarden/assets/svg";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
@@ -165,7 +165,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
  kdfIterations: number;
  activeFilter: VaultFilter = new VaultFilter();

-  protected noItemIcon = Search;
+  protected noItemIcon = NoResults;
  protected performingInitialLoad = true;
  protected refreshing = false;
  protected processingEvent = false;