Merge branch 'auth/pm-19877/notification-processing' into auth/pm-23620/auth-request-answering-service

libs/angular/src/services/jslib-services.module.ts

@@ -204,22 +204,20 @@ import { SubjectMessageSender } from "@bitwarden/common/platform/messaging/inter
 import { devFlagEnabled } from "@bitwarden/common/platform/misc/flags";
 import { Account } from "@bitwarden/common/platform/models/domain/account";
 import { GlobalState } from "@bitwarden/common/platform/models/domain/global-state";
-import { ServerNotificationsService } from "@bitwarden/common/platform/notifications";
-// eslint-disable-next-line no-restricted-imports -- Needed for service creation
-import {
-  DefaultServerNotificationsService,
-  UnsupportedServerNotificationsService,
-  SignalRConnectionService,
-  UnsupportedWebPushConnectionService,
-  WebPushConnectionService,
-  WebPushNotificationsApiService,
-} from "@bitwarden/common/platform/notifications/internal";
-import { SystemNotificationsService } from "@bitwarden/common/platform/notifications/system-notifications.service";
-import { UnsupportedSystemNotificationsService } from "@bitwarden/common/platform/notifications/unsupported-system-notifications.service";
 import {
   DefaultTaskSchedulerService,
   TaskSchedulerService,
 } from "@bitwarden/common/platform/scheduling";
+import { ServerNotificationsService } from "@bitwarden/common/platform/server-notifications";
+// eslint-disable-next-line no-restricted-imports -- Needed for service creation
+import {
+  DefaultServerNotificationsService,
+  NoopServerNotificationsService,
+  SignalRConnectionService,
+  UnsupportedWebPushConnectionService,
+  WebPushConnectionService,
+  WebPushNotificationsApiService,
+} from "@bitwarden/common/platform/server-notifications/internal";
 import { AppIdService } from "@bitwarden/common/platform/services/app-id.service";
 import { ConfigApiService } from "@bitwarden/common/platform/services/config/config-api.service";
 import { DefaultConfigService } from "@bitwarden/common/platform/services/config/default-config.service";
@@ -256,6 +254,8 @@ import { StateEventRunnerService } from "@bitwarden/common/platform/state/state-
 import { SyncService } from "@bitwarden/common/platform/sync";
 // eslint-disable-next-line no-restricted-imports -- Needed for DI
 import { DefaultSyncService } from "@bitwarden/common/platform/sync/internal";
+import { SystemNotificationsService } from "@bitwarden/common/platform/system-notifications/system-notifications.service";
+import { UnsupportedSystemNotificationsService } from "@bitwarden/common/platform/system-notifications/unsupported-system-notifications.service";
 import {
   DefaultThemeStateService,
   ThemeStateService,
@@ -978,7 +978,7 @@ const safeProviders: SafeProvider[] = [
   safeProvider({
     provide: ServerNotificationsService,
     useClass: devFlagEnabled("noopNotifications")
-      ? UnsupportedServerNotificationsService
+      ? NoopServerNotificationsService
       : DefaultServerNotificationsService,
     deps: [
       LogService,

libs/angular/src/vault/components/icon.component.html

@@ -1,19 +1,44 @@
-<div class="tw-flex tw-justify-center tw-items-center" aria-hidden="true">
+<!-- Applying width and height styles directly to synchronize icon sizing between web/browser/desktop -->
+<div
+  class="tw-flex tw-justify-center tw-items-center"
+  [ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
+  aria-hidden="true"
+>
   <ng-container *ngIf="data$ | async as data">
-    <img
-      [src]="data.image"
-      *ngIf="data.imageEnabled && data.image"
-      class="tw-size-6 tw-rounded-md"
-      alt=""
-      decoding="async"
-      loading="lazy"
-      [ngClass]="{ 'tw-invisible tw-absolute': !imageLoaded() }"
-      (load)="imageLoaded.set(true)"
-      (error)="imageLoaded.set(false)"
-    />
-    <i
-      class="tw-w-6 tw-text-muted bwi bwi-lg {{ data.icon }}"
-      *ngIf="!data.imageEnabled || !data.image || !imageLoaded()"
-    ></i>
+    @if (data.imageEnabled && data.image) {
+      <img
+        [src]="data.image"
+        class="tw-rounded-md"
+        alt=""
+        decoding="async"
+        loading="lazy"
+        [ngClass]="{
+          'tw-invisible tw-absolute': !imageLoaded(),
+          'tw-size-6': !coloredIcon(),
+        }"
+        [ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
+        (load)="imageLoaded.set(true)"
+        (error)="imageLoaded.set(false)"
+      />
+    }
+    @if (!data.imageEnabled || !data.image || !imageLoaded()) {
+      <div
+        [ngClass]="{
+          'tw-flex tw-items-center tw-justify-center': coloredIcon(),
+          'tw-bg-illustration-bg-primary tw-rounded-full':
+            data.icon?.startsWith('bwi-') && coloredIcon(),
+        }"
+        [ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
+      >
+        <i
+          class="tw-text-muted bwi bwi-lg {{ data.icon }}"
+          [ngStyle]="{
+            color: coloredIcon() ? 'rgb(var(--color-illustration-outline))' : null,
+            width: data.icon?.startsWith('credit-card') && coloredIcon() ? '36px' : null,
+            height: data.icon?.startsWith('credit-card') && coloredIcon() ? '30px' : null,
+          }"
+        ></i>
+      </div>
+    }
   </ng-container>
 </div>

libs/angular/src/vault/components/icon.component.ts

@@ -27,6 +27,11 @@ export class IconComponent {
    */
   cipher = input.required<CipherViewLike>();
 
+  /**
+   * coloredIcon will adjust the size of favicons and the colors of the text icon when user is in the item details view.
+   */
+  coloredIcon = input<boolean>(false);
+
   imageLoaded = signal(false);
 
   protected data$: Observable<CipherIconDetails>;