From ecd6863abef92453fd3a2885ddabe15cbdfe1c92 Mon Sep 17 00:00:00 2001
From: dgoodman-bw <109169446+dgoodman-bw@users.noreply.github.com>
Date: Tue, 9 Aug 2022 09:23:57 -0700
Subject: [PATCH] PS-725 - add empty state image to Vault and Send pages in web
 and to the Vault page in the bowser extension (#3263)

---
 .../src/popup/vault/ciphers.component.html    |  1 +
 apps/web/src/app/send/send.component.html     |  1 +
 apps/web/src/app/vault/ciphers.component.html |  1 +
 apps/web/src/images/search-web-dark.svg       | 34 +++++++++++++++++++
 apps/web/src/images/search-web-light.svg      | 34 +++++++++++++++++++
 apps/web/src/scss/base.scss                   | 15 ++++++++
 apps/web/src/scss/variables.scss              |  2 ++
 7 files changed, 88 insertions(+)
 create mode 100644 apps/web/src/images/search-web-dark.svg
 create mode 100644 apps/web/src/images/search-web-light.svg

diff --git a/apps/browser/src/popup/vault/ciphers.component.html b/apps/browser/src/popup/vault/ciphers.component.html
index 340e7db8dd4..d4a535885e7 100644
--- a/apps/browser/src/popup/vault/ciphers.component.html
+++ b/apps/browser/src/popup/vault/ciphers.component.html
@@ -84,6 +84,7 @@
       <div class="no-items">
         <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
         <ng-container *ngIf="loaded">
+          <img class="no-items-image" aria-hidden="true" />
           <p>{{ "noItemsInList" | i18n }}</p>
           <button type="button" (click)="addCipher()" class="btn block primary link">
             {{ "addItem" | i18n }}
diff --git a/apps/web/src/app/send/send.component.html b/apps/web/src/app/send/send.component.html
index eed3cdfa568..ddf7e63d79e 100644
--- a/apps/web/src/app/send/send.component.html
+++ b/apps/web/src/app/send/send.component.html
@@ -189,6 +189,7 @@
           <span class="sr-only">{{ "loading" | i18n }}</span>
         </ng-container>
         <ng-container *ngIf="loaded">
+          <img class="no-items-image" aria-hidden="true" />
           <p>{{ "noSendsInList" | i18n }}</p>
           <button (click)="addSend()" class="btn btn-outline-primary" [disabled]="disableSend">
             <i class="bwi bwi-plus bwi-fw"></i>{{ "createSend" | i18n }}
diff --git a/apps/web/src/app/vault/ciphers.component.html b/apps/web/src/app/vault/ciphers.component.html
index c9c58327b94..afd6deabab1 100644
--- a/apps/web/src/app/vault/ciphers.component.html
+++ b/apps/web/src/app/vault/ciphers.component.html
@@ -142,6 +142,7 @@
       <span class="sr-only">{{ "loading" | i18n }}</span>
     </ng-container>
     <ng-container *ngIf="loaded">
+      <img class="no-items-image" aria-hidden="true" />
       <p>{{ "noItemsInList" | i18n }}</p>
       <button (click)="addCipher()" class="btn btn-outline-primary" *ngIf="showAddNew">
         <i class="bwi bwi-plus bwi-fw"></i>{{ "addItem" | i18n }}
diff --git a/apps/web/src/images/search-web-dark.svg b/apps/web/src/images/search-web-dark.svg
new file mode 100644
index 00000000000..b3e6cd59330
--- /dev/null
+++ b/apps/web/src/images/search-web-dark.svg
@@ -0,0 +1,34 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<g opacity="0.7">
+<g clip-path="url(#clip0_44_9647)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3599 73.2564C43.579 74.4366 47.0654 75.0822 50.7059 75.0822C66.9882 75.0822 80.1876 62.1696 80.1876 46.2411C80.1876 45.8578 80.1804 45.4762 80.1648 45.0966H108.891V84.6672H40.3599V73.2564Z" fill="#6e7689"/>
+<path d="M21.5461 46.241C21.5461 62.1696 34.7456 75.0822 51.028 75.0822C67.3104 75.0822 80.5098 62.1696 80.5098 46.241C80.5098 30.3125 67.3104 17.4 51.028 17.4C34.7456 17.4 21.5461 30.3125 21.5461 46.241Z" stroke="#bac0ce" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.3603 70.5954C35.3603 69.933 34.823 69.3954 34.1603 69.3954C33.4976 69.3954 32.9603 69.933 32.9603 70.5954H35.3603ZM112.835 40.2387C114.169 40.2387 115.2 41.3027 115.2 42.5698H117.6C117.6 39.9762 115.493 37.8387 112.835 37.8387V40.2387ZM115.2 42.5698V88.6158H117.6V42.5698H115.2ZM115.2 88.6158C115.2 89.9094 114.142 90.9468 112.835 90.9468V93.3468C115.425 93.3468 117.6 91.2774 117.6 88.6158H115.2ZM112.835 90.9468H37.7256V93.3468H112.835V90.9468ZM37.7256 90.9468C36.3913 90.9468 35.3603 89.883 35.3603 88.6158H32.9603C32.9603 91.2096 35.0667 93.3468 37.7256 93.3468V90.9468ZM35.3603 88.6158V70.5954H32.9603V88.6158H35.3603ZM79.8684 40.2387H112.835V37.8387H79.8684V40.2387Z" fill="#bac0ce"/>
+<path d="M79.9068 45.2867H109.021V84.8574H40.4873V73.0512" stroke="#bac0ce" stroke-width="2" stroke-linejoin="round"/>
+<path d="M57.3565 102.56H93.2046" stroke="#bac0ce" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M68.9544 92.1468V102.56" stroke="#bac0ce" stroke-width="4" stroke-linejoin="round"/>
+<path d="M80.553 92.1468V102.56" stroke="#bac0ce" stroke-width="4" stroke-linejoin="round"/>
+<path d="M27.4398 64.9452L22.9296 69.4554L5.72134 86.6634C4.54976 87.8352 4.54976 89.7342 5.72133 90.906L6.95929 92.1438C8.13085 93.3156 10.0304 93.3156 11.202 92.1438L28.4102 74.9358L32.9204 70.4256" stroke="#bac0ce" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M101.293 53.1537H85.1784" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M101.293 59.1966H90.2142" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M85.1784 59.1966H77.625" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M101.293 65.2392H94.2426" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M88.7034 65.2392H73.0926" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M101.293 71.2824H85.1784" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M79.6392 71.2824H71.0784" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M101.293 77.325H78.6318" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M73.0926 77.325H59.9997" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M54.4604 77.325H46.4032" stroke="#bac0ce" stroke-width="2" stroke-linecap="round"/>
+<path d="M29.1638 33.0108H70.6926C72.0181 33.0108 73.0926 34.0853 73.0926 35.4108V41.6894C73.0926 43.0149 72.0181 44.0894 70.6926 44.0894H29.1638C27.8383 44.0894 26.7638 43.0149 26.7638 41.6894V35.4108C26.7638 34.0853 27.8383 33.0108 29.1638 33.0108Z" stroke="#bac0ce" stroke-width="4"/>
+<path d="M22.7354 54.1609H57.0962C58.4217 54.1609 59.4962 55.2354 59.4962 56.5609V62.8392C59.4962 64.1652 58.4217 65.2392 57.0962 65.2392H28.7783" stroke="#bac0ce" stroke-width="4" stroke-linecap="round"/>
+<path d="M79.1358 54.1609H72.975C71.6496 54.1609 70.575 55.2354 70.575 56.5609V62.9736C70.575 64.2252 71.5896 65.2392 72.8406 65.2392" stroke="#bac0ce" stroke-width="4" stroke-linecap="round"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_44_9647">
+<rect width="120" height="120" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/web/src/images/search-web-light.svg b/apps/web/src/images/search-web-light.svg
new file mode 100644
index 00000000000..41431204fea
--- /dev/null
+++ b/apps/web/src/images/search-web-light.svg
@@ -0,0 +1,34 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<g opacity="0.7">
+<g clip-path="url(#clip0_44_9647)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3599 73.2564C43.579 74.4366 47.0654 75.0822 50.7059 75.0822C66.9882 75.0822 80.1876 62.1696 80.1876 46.2411C80.1876 45.8578 80.1804 45.4762 80.1648 45.0966H108.891V84.6672H40.3599V73.2564Z" fill="#ced4dc"/>
+<path d="M21.5461 46.241C21.5461 62.1696 34.7456 75.0822 51.028 75.0822C67.3104 75.0822 80.5098 62.1696 80.5098 46.241C80.5098 30.3125 67.3104 17.4 51.028 17.4C34.7456 17.4 21.5461 30.3125 21.5461 46.241Z" stroke="#6d757e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.3603 70.5954C35.3603 69.933 34.823 69.3954 34.1603 69.3954C33.4976 69.3954 32.9603 69.933 32.9603 70.5954H35.3603ZM112.835 40.2387C114.169 40.2387 115.2 41.3027 115.2 42.5698H117.6C117.6 39.9762 115.493 37.8387 112.835 37.8387V40.2387ZM115.2 42.5698V88.6158H117.6V42.5698H115.2ZM115.2 88.6158C115.2 89.9094 114.142 90.9468 112.835 90.9468V93.3468C115.425 93.3468 117.6 91.2774 117.6 88.6158H115.2ZM112.835 90.9468H37.7256V93.3468H112.835V90.9468ZM37.7256 90.9468C36.3913 90.9468 35.3603 89.883 35.3603 88.6158H32.9603C32.9603 91.2096 35.0667 93.3468 37.7256 93.3468V90.9468ZM35.3603 88.6158V70.5954H32.9603V88.6158H35.3603ZM79.8684 40.2387H112.835V37.8387H79.8684V40.2387Z" fill="#6d757e"/>
+<path d="M79.9068 45.2867H109.021V84.8574H40.4873V73.0512" stroke="#6d757e" stroke-width="2" stroke-linejoin="round"/>
+<path d="M57.3565 102.56H93.2046" stroke="#6d757e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M68.9544 92.1468V102.56" stroke="#6d757e" stroke-width="4" stroke-linejoin="round"/>
+<path d="M80.553 92.1468V102.56" stroke="#6d757e" stroke-width="4" stroke-linejoin="round"/>
+<path d="M27.4398 64.9452L22.9296 69.4554L5.72134 86.6634C4.54976 87.8352 4.54976 89.7342 5.72133 90.906L6.95929 92.1438C8.13085 93.3156 10.0304 93.3156 11.202 92.1438L28.4102 74.9358L32.9204 70.4256" stroke="#6d757e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M101.293 53.1537H85.1784" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M101.293 59.1966H90.2142" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M85.1784 59.1966H77.625" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M101.293 65.2392H94.2426" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M88.7034 65.2392H73.0926" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M101.293 71.2824H85.1784" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M79.6392 71.2824H71.0784" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M101.293 77.325H78.6318" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M73.0926 77.325H59.9997" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M54.4604 77.325H46.4032" stroke="#6d757e" stroke-width="2" stroke-linecap="round"/>
+<path d="M29.1638 33.0108H70.6926C72.0181 33.0108 73.0926 34.0853 73.0926 35.4108V41.6894C73.0926 43.0149 72.0181 44.0894 70.6926 44.0894H29.1638C27.8383 44.0894 26.7638 43.0149 26.7638 41.6894V35.4108C26.7638 34.0853 27.8383 33.0108 29.1638 33.0108Z" stroke="#6d757e" stroke-width="4"/>
+<path d="M22.7354 54.1609H57.0962C58.4217 54.1609 59.4962 55.2354 59.4962 56.5609V62.8392C59.4962 64.1652 58.4217 65.2392 57.0962 65.2392H28.7783" stroke="#6d757e" stroke-width="4" stroke-linecap="round"/>
+<path d="M79.1358 54.1609H72.975C71.6496 54.1609 70.575 55.2354 70.575 56.5609V62.9736C70.575 64.2252 71.5896 65.2392 72.8406 65.2392" stroke="#6d757e" stroke-width="4" stroke-linecap="round"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_44_9647">
+<rect width="120" height="120" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/web/src/scss/base.scss b/apps/web/src/scss/base.scss
index 5e32df78ec6..28e393387f2 100644
--- a/apps/web/src/scss/base.scss
+++ b/apps/web/src/scss/base.scss
@@ -306,3 +306,18 @@ button i.bwi,
 a i.bwi {
   margin-right: 0.25rem;
 }
+
+.no-items {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  .no-items-image {
+    @include themify($themes) {
+      content: url("../images/search-web" + themed("svgSuffix"));
+    }
+  }
+}
diff --git a/apps/web/src/scss/variables.scss b/apps/web/src/scss/variables.scss
index a0bc2d88526..01bb9b80cc4 100644
--- a/apps/web/src/scss/variables.scss
+++ b/apps/web/src/scss/variables.scss
@@ -219,6 +219,7 @@ $themes: (
     textMuted: #6c757d,
     textSuccessColor: $white,
     textWarningColor: $white,
+    svgSuffix: "-light.svg",
   ),
   dark: (
     primary: $darkPrimary,
@@ -330,6 +331,7 @@ $themes: (
     textMuted: $darkGrey1,
     textSuccessColor: $darkDarkBlue2,
     textWarningColor: $darkDarkBlue2,
+    svgSuffix: "-dark.svg",
   ),
 );