Merge pull request #1338 from mozilla/update-all-breaches

Update /breaches page.

public/css/all-breaches.css

@@ -42,7 +42,7 @@ button.fuzzy-find-show-breaches {
   border-radius: 50%;
   padding: 0;
   opacity: 0;
-  transition: opacity 0.15s ease-in-out;
+  transition: opacity 0.1s ease-in-out;
 }
 
 .show-all-breaches.btn-violet-primary {
@@ -50,44 +50,21 @@ button.fuzzy-find-show-breaches {
 }
 
 #no-results-blurb {
+  font-size: 18px;
+  font-weight: 700;
+  text-align: center;
   pointer-events: none;
+  display: none;
   opacity: 0;
-  display: flex;
-  margin: auto;
-  background-color: var(--violet3);
-  color: rgba(255, 255, 255, 1);
-  padding: 8px 16px;
-  position: absolute;
-  bottom: -26px;
-  left: 16px;
-  right: 16px;
-  transform: translateY(0);
-  border-radius: 4px;
+  margin: 48px auto auto auto;
+  color: var(--purple7);
   transition: all 0.15s ease-in-out;
 }
 
 #no-results-blurb.show {
-  opacity: 1;
-  box-shadow: 2px 3px 10px -1px #3339422e, -2px -3px 10px 1px #33394205;
-  transition: all 0.15s ease-in-out;
-}
-
-#no-results-blurb.show::before {
-  height: 1rem;
-  width: 1rem;
-  transform: rotate(45deg);
-  background-color: var(--violet3);
-  position: absolute;
-  top: -4px;
-  z-index: -1;
-  content: "";
   display: inline-block;
-}
-
-#no-results-blurb.show,
-#no-results-blur.show::before {
-  transform: translateY(7px);
-  transition: all 0.15s ease-in-out;
+  opacity: 1;
+  transition: all 0.1s ease-in-out;
 }
 
 button.fuzzy-find-show-breaches.show {

views/partials/fuzzy-find.hbs

@@ -5,5 +5,4 @@
           <button id="fuzzy-find-submit" class="fuzzy-find-submit" aria-label="{{ getString "search-breaches" }}">{{> svg/search-icon }}</button>
         </form>
         <button id="fuzzy-show-all" class="fuzzy-find-show-breaches show-all-breaches" aria-label="{{ getString "see-all-breaches"}}"><span class="x-close-bg">{{> svg/x-close }}</span></button>
-        <span id="no-results-blurb" class="no-results-blurb">{{ getString "no-results-blurb" }}</span>
       </div> 

views/partials/top-level/all-breaches.hbs

@@ -15,6 +15,7 @@
       </div>
     </div>
     <div class="row flx-col">
+      <span id="no-results-blurb" class="no-results-blurb">{{ getString "no-results-blurb" }}</span>
       <!-- breach cards -->
       <div id="all-breaches" class="all-breaches flx"></div>
       <button id="show-hidden-breaches" class="btn-violet-primary show-all-breaches">{{ getString "show-all" }}</button>