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

libs/components/src/anon-layout/anon-layout.component.html

@@ -14,7 +14,7 @@
   </a>
 
   <div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
-    <div *ngIf="!hideIcon()" class="tw-w-24 sm:tw-w-28 md:tw-w-32 tw-mx-auto">
+    <div *ngIf="!hideIcon()" class="tw-size-20 sm:tw-size-24 tw-mx-auto tw-content-center">
       <bit-icon [icon]="icon()"></bit-icon>
     </div>
 

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

@@ -9,6 +9,7 @@ import { Icon, isIcon } from "@bitwarden/assets/svg";
     "[attr.aria-hidden]": "!ariaLabel()",
     "[attr.aria-label]": "ariaLabel()",
     "[innerHtml]": "innerHtml",
+    class: "tw-max-h-full tw-flex tw-justify-center",
   },
   template: ``,
 })

libs/components/src/icon/icon.stories.ts

@@ -37,7 +37,7 @@ export const Default = {
         <div class="tw-size-56 tw-border tw-border-secondary-300 tw-rounded-md">
           <div class="tw-text-xs tw-text-center">{{icon[0]}}</div>
           <div class="tw-size-52 tw-w-full tw-content-center">
-            <bit-icon [icon]="icon[1]" class="tw-flex tw-justify-center tw-max-h-full"></bit-icon>
+            <bit-icon [icon]="icon[1]"></bit-icon>
           </div>
         </div>
       }

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" },
+    },
+  },
 };

libs/components/src/tw-theme.css

@@ -51,10 +51,6 @@
   --color-notification-100: 255 225 247;
   --color-notification-600: 192 17 118;
 
-  /*art styles deprecated, use 'illustration' instead*/
-  --color-art-primary: 2 15 102;
-  --color-art-accent: 44 221 223;
-
   --color-text-main: 27 32 41;
   --color-text-muted: 96 109 145;
   --color-text-contrast: 255 255 255;
@@ -122,10 +118,6 @@
   --color-notification-100: 117 37 83;
   --color-notification-600: 255 143 208;
 
-  /*art styles deprecated, use 'illustration' instead*/
-  --color-art-primary: 243 246 249;
-  --color-art-accent: 44 221 233;
-
   --color-text-main: 243 246 249;
   --color-text-muted: 136 152 181;
   --color-text-contrast: 18 26 39;