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

libs/components/src/no-items/no-items.component.html

@@ -1,6 +1,8 @@
 <div class="tw-mx-auto tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-6">
   <div class="tw-max-w-sm tw-flex tw-flex-col tw-items-center">
-    <bit-icon [icon]="icon()" aria-hidden="true"></bit-icon>
+    <div class="tw-size-24 tw-content-center">
+      <bit-icon [icon]="icon()" aria-hidden="true"></bit-icon>
+    </div>
     <h3 class="tw-font-semibold tw-text-center tw-mt-4">
       <ng-content select="[slot=title]"></ng-content>
     </h3>

libs/components/src/no-items/no-items.component.ts

@@ -1,6 +1,6 @@
 import { Component, input } from "@angular/core";
 
-import { Search } from "@bitwarden/assets/svg";
+import { NoResults } from "@bitwarden/assets/svg";
 
 import { BitIconComponent } from "../icon/icon.component";
 
@@ -13,5 +13,5 @@ import { BitIconComponent } from "../icon/icon.component";
   imports: [BitIconComponent],
 })
 export class NoItemsComponent {
-  readonly icon = input(Search);
+  readonly icon = input(NoResults);
 }

libs/components/src/no-items/no-items.stories.ts

@@ -1,5 +1,21 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
+import {
+  ActiveSendIcon,
+  DeactivatedOrg,
+  DevicesIcon,
+  DomainIcon,
+  EmptyTrash,
+  GearIcon,
+  NoCredentialsIcon,
+  NoFolders,
+  NoResults,
+  NoSendsIcon,
+  RestrictedView,
+  Security,
+  VaultOpen,
+} from "@bitwarden/assets/svg";
+
 import { ButtonModule } from "../button";
 
 import { NoItemsComponent } from "./no-items.component";
@@ -23,11 +39,27 @@ export default {
 
 type Story = StoryObj<NoItemsComponent>;
 
+const Icons = {
+  EmptyTrash,
+  NoFolders,
+  NoResults,
+  NoSendsIcon,
+  VaultOpen,
+  DeactivatedOrg,
+  ActiveSendIcon,
+  DevicesIcon,
+  Security,
+  NoCredentialsIcon,
+  RestrictedView,
+  DomainIcon,
+  GearIcon,
+};
+
 export const Default: Story = {
   render: (args) => ({
     props: args,
-    template: `
-    <bit-no-items class="tw-text-main">
+    template: /*html*/ `
+    <bit-no-items class="tw-text-main" [icon]="icon">
       <ng-container slot="title">No items found</ng-container>
       <ng-container slot="description">Your description here.</ng-container>
       <button
@@ -42,4 +74,14 @@ export const Default: Story = {
     </bit-no-items>
     `,
   }),
+  args: {
+    icon: NoResults,
+  },
+  argTypes: {
+    icon: {
+      options: Object.keys(Icons),
+      mapping: Icons,
+      control: { type: "select" },
+    },
+  },
 };