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

2025-12-15 15:53:27 +00:00 · 2025-09-10 17:23:53 -04:00
parent c160b421fc
commit 926f587ea2
109 changed files with 798 additions and 1391 deletions
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.html
@@ -103,7 +103,7 @@
 <bit-no-items
  class="tw-text-main"
  *ngIf="!loading && tableDataSource.data.length == 0"
-  [icon]="Devices"
+  [icon]="DevicesIcon"
 >
  <ng-container slot="title">{{ "noDeviceRequests" | i18n }}</ng-container>
  <ng-container slot="description">{{ "noDeviceRequestsDesc" | i18n }}</ng-container>
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.ts
@@ -6,7 +6,7 @@ import { BehaviorSubject, Subject, switchMap, takeUntil, tap } from "rxjs";

 import { OrganizationUserApiService } from "@bitwarden/admin-console/common";
 import { SafeProvider, safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
-import { Devices } from "@bitwarden/assets/svg";
+import { DevicesIcon } from "@bitwarden/assets/svg";
 import { OrganizationAuthRequestApiService } from "@bitwarden/bit-common/admin-console/auth-requests/organization-auth-request-api.service";
 import { OrganizationAuthRequestService } from "@bitwarden/bit-common/admin-console/auth-requests/organization-auth-request.service";
 import { PendingAuthRequestWithFingerprintView } from "@bitwarden/bit-common/admin-console/auth-requests/pending-auth-request-with-fingerprint.view";
@@ -51,7 +51,7 @@ export class DeviceApprovalsComponent implements OnInit, OnDestroy {
  loading = true;
  actionInProgress = false;

-  protected readonly Devices = Devices;
+  protected readonly DevicesIcon = DevicesIcon;

  private destroy$ = new Subject<void>();
  private refresh$ = new BehaviorSubject<void>(null);
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html
@@ -103,21 +103,13 @@
      class="tw-mt-6 tw-flex tw-flex-col tw-items-center tw-justify-center"
      *ngIf="orgDomains?.length == 0"
    >
-      <img src="../../images/domain-verification/domain.svg" class="tw-mb-4" alt="" />
-
-      <div class="tw-mb-2 tw-flex tw-flex-row tw-justify-center">
-        <span class="tw-text-lg tw-font-bold">{{ "noDomains" | i18n }}</span>
-      </div>
-
-      <div class="tw-mb-4 tw-flex tw-flex-row tw-justify-center">
-        <span>
-          {{ "noDomainsSubText" | i18n }}
-        </span>
-      </div>
-
-      <button type="button" buttonType="secondary" bitButton (click)="addDomain()">
-        <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i> {{ "newDomain" | i18n }}
-      </button>
+      <bit-no-items [icon]="domainIcon">
+        <div slot="title">{{ "noDomains" | i18n }}</div>
+        <div slot="description">{{ "noDomainsSubText" | i18n }}</div>
+        <button slot="button" type="button" buttonType="secondary" bitButton (click)="addDomain()">
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i> {{ "newDomain" | i18n }}
+        </button>
+      </bit-no-items>
    </div>
  </ng-container>
 </ng-container>
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.ts
@@ -13,6 +13,7 @@ import {
  takeUntil,
 } from "rxjs";

+import { DomainIcon } from "@bitwarden/assets/svg";
 import { OrgDomainApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization-domain/org-domain-api.service.abstraction";
 import { OrgDomainServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization-domain/org-domain.service.abstraction";
 import { OrganizationDomainResponse } from "@bitwarden/common/admin-console/abstractions/organization-domain/responses/organization-domain.response";
@@ -40,6 +41,7 @@ import {
 export class DomainVerificationComponent implements OnInit, OnDestroy {
  private componentDestroyed$ = new Subject<void>();
  private singleOrgPolicyEnabled = false;
+  protected domainIcon = DomainIcon;

  loading = true;

--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/no-clients.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/no-clients.component.ts
@@ -1,26 +1,29 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";

 import { GearIcon } from "@bitwarden/assets/svg";
+import { NoItemsModule } from "@bitwarden/components";
 import { SharedOrganizationModule } from "@bitwarden/web-vault/app/admin-console/organizations/shared";

@Component({
  selector: "app-no-clients",
-  imports: [SharedOrganizationModule],
-  template: `<div class="tw-flex tw-flex-col tw-items-center tw-text-info">
-    <bit-icon [icon]="icon"></bit-icon>
-    <p class="tw-mt-4">{{ "noClients" | i18n }}</p>
-    <a
-      *ngIf="showAddOrganizationButton"
-      [disabled]="disableAddOrganizationButton"
-      type="button"
-      bitButton
-      buttonType="primary"
-      (click)="addNewOrganization()"
-    >
-      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-      {{ "addNewOrganization" | i18n }}
-    </a>
-  </div>`,
+  imports: [SharedOrganizationModule, NoItemsModule],
+  template: `
+    <bit-no-items [icon]="icon">
+      <div slot="title">{{ "noClients" | i18n }}</div>
+      <a
+        *ngIf="showAddOrganizationButton"
+        [disabled]="disableAddOrganizationButton"
+        type="button"
+        bitButton
+        buttonType="primary"
+        (click)="addNewOrganization()"
+        slot="button"
+      >
+        <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        {{ "addNewOrganization" | i18n }}
+      </a>
+    </bit-no-items>
+  `,
 })
 export class NoClientsComponent {
  icon = GearIcon;
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.html
@@ -1,7 +1,7 @@
 <app-header [title]="organizationName$ | async">
  <sm-new-menu></sm-new-menu>
 </app-header>
-<bit-no-items [icon]="NoAccess">
+<bit-no-items [icon]="DeactivatedOrg">
  <ng-container slot="title">{{ "organizationIsDisabled" | i18n }}</ng-container>
  <ng-container slot="description">{{ "secretsAccessSuspended" | i18n }}</ng-container>
 </bit-no-items>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { map, concatMap, firstValueFrom } from "rxjs";

-import { Icon, NoAccess } from "@bitwarden/assets/svg";
+import { Icon, DeactivatedOrg } from "@bitwarden/assets/svg";
 import {
  getOrganizationById,
  OrganizationService,
@@ -21,7 +21,7 @@ export class OrgSuspendedComponent {
    private route: ActivatedRoute,
  ) {}

-  protected NoAccess: Icon = NoAccess;
+  protected DeactivatedOrg: Icon = DeactivatedOrg;
  protected organizationName$ = this.route.params.pipe(
    concatMap(async (params) => {
      const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));