Scan results page updates

public/js/monitor.js

@@ -301,7 +301,7 @@ const toggleClasses = (classesToToggle, el) => {
 };
 
 const showAdditionalBreaches = () => {
-  const showBreachesButton = document.getElementById("show-additional-breaches-wrapper");
+  const showBreachesButton = document.getElementById("show-all-breaches-wrapper");
   const additionalBreaches = document.getElementById("additional-breaches");
   [showBreachesButton, additionalBreaches].forEach(el => {
     toggleClasses(["show", "hide"], el);
@@ -421,7 +421,7 @@ async function doButtonRouting(event) {
       return;
     }
   }
-  if (event.target.id === "show-additional-breaches") {
+  if (event.target.id === "show-all-breaches") {
     ga_sendLegacyPing("ShowAdditional", false);
     return showAdditionalBreaches();
   }

views/partials/scan-another-email.hbs

@@ -0,0 +1,8 @@
+<section id="scan-another-email" class="scan-another-email container bg-white">
+  <div class="row jst-cntr">
+    <div class="col-6">
+      <span class="skinny-headline txt-cntr">{{getString "fxa-scan-another-email"}}</span>
+      {{> scan-form }}
+    </div>
+  </div>
+</section>

views/partials/scan_another_email.hbs

@@ -1,10 +0,0 @@
-{{#unless fullReport}}
-  <section id="scan-another-email" class="scan-another-email">
-    <div class="section-wrapper">
-      <div class="half">
-        <span class="section-headline">{{fluentFxa "scan-another-email"}}</span>
-        {{> scan_form}}
-      </div>
-    </div>
-  </section>
-{{/unless}}

views/partials/sign-up-button.hbs

@@ -0,0 +1,3 @@
+<button class="open-oauth sign-up" id="sign-up" data-event-category="Sign Up Button" {{>analytics/fxa id="fx-monitor-sign-up-button"}}>
+  {{getString "sign-up-for-alerts"}}
+</button>

views/partials/sign_up_button.hbs

@@ -1,11 +0,0 @@
-<button class="button sign-up-button {{#if FXA_ENABLED}} open-oauth {{/if}}" id="sign-up" data-event-category="Sign Up Button" {{>analytics/fxa id="fx-monitor-sign-up-button"}}>
-  {{#if FXA_ENABLED}}
-    {{#ifCompare foundBreaches.length "===" 0}}
-      {{getString "sign-up-for-alerts"}}
-    {{else}}
-      {{getString "sign-up"}}
-    {{/ifCompare}}
-  {{else}}
-    {{getString "get-your-report"}}
-  {{/if}}
-</button>

views/scan.hbs

@@ -4,12 +4,12 @@
       {{#if scannedEmailId }}
         <p id="scanned-email-address">Results for <span id="scannedEmail" data-scanned-email-id={{ scannedEmailId }} class="bold"></span></p>
       {{/if}}
-      <h2 id="scan-result-headline">{{{fluentNestedBold "guest-scan-results-headline" breachCount=foundBreaches.length}}}</h2>
       {{> breach-stats }}
+      <h2 class="headline scan-results-headline">{{{fluentNestedBold "guest-scan-results-headline" breachCount=foundBreaches.length}}}</h2>
     </div>
   </div>
-</main>
-<section class="container bg-white">
+
+
   <div class="row found-breaches">
     {{#eachFromTo foundBreaches 0 4}}
       <div class="breach-listing">
@@ -17,8 +17,9 @@
       </div>
     {{/eachFromTo}}
     {{#ifCompare foundBreaches.length ">" 4}}
-    <div id="show-additional-breaches-wrapper" class="col-12 show">
-      <button id="show-additional-breaches" class="utility-button" data-event-category="Show All Breaches Button">{{getString "show-all"}}</button>
+    <div id="show-all-breaches-wrapper" class="col-12 show">
+      <p class="txt-cntr">Currently showing <span class="bold">4</span> of <span class="bold">{{ foundBreaches.length }}</span> breaches.</p>
+      <button id="show-all-breaches" class="utility-button" data-event-category="Show All Breaches">{{getString "show-all-breaches"}}</button>
     </div>
     <div id="additional-breaches" class="show-additional-breaches hide flx">
       {{#eachFromTo foundBreaches 4 foundBreaches.length}}
@@ -29,4 +30,7 @@
     </div>
     {{/ifCompare}}
   </div>
-</section>
+</main>
+
+
+{{> scan-another-email }}