Breach Dashboard Updates

- Uses correct `email-addresses-title` string for Email Adresses headline.
- Fixes some UI nits related to the "X New Breaches Found" message and alignment on window resize.

public/css/breach-stats.css

@@ -21,7 +21,6 @@
 .breach-stat-number {
   font-size: 50px;
   min-width: 2rem;
-  margin-top: 0.25rem;
 }
 
 .breach-stats {
@@ -54,8 +53,6 @@
 .dash-stats {
   display: flex;
   flex-direction: row;
-  overflow: hidden;
-  font-size: 1rem;
   justify-content: space-between;
 }
 
@@ -83,7 +80,6 @@
     width: auto;
     font-size: 30px;
     min-width: 6rem;
-    margin-top: 0;
   }
 }
 

public/css/dashboard.css

@@ -21,6 +21,10 @@ h3.pref-section-headline.remove {
   margin-bottom: 1rem;
 }
 
+h2.pref-headline.breach-summary {
+  margin-bottom: calc(var(--padding) + var(--margin));
+}
+
 .pref {
   width: 100%;
   max-width: 60%;
@@ -105,15 +109,21 @@ button.resend-email {
   margin: auto;
 }
 
-.dashboard h2.section-headline {
-  font-size: 32px;
-  letter-spacing: 0.03em;
-}
-
 .link-header-wrapper {
   margin: var(--padding) 0;
 }
 
+.email-cards {
+  width: 100%;
+}
+
+@media screen and (max-width: 1100px) {
+  .email-cards .e-info {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
 @media screen and (max-width: 900px) {
   .pref {
     max-width: 100%;
@@ -121,6 +131,13 @@ button.resend-email {
   }
 }
 
+@media screen and (max-width: 800px) {
+  .email-cards,
+  .col-9.no-vertical-padding {
+    padding: 1rem;
+  }
+}
+
 @media screen and (max-width: 700px) {
   .link-header-wrapper {
     margin-top: var(--padding);
@@ -144,4 +161,9 @@ button.resend-email {
   h3.pref-section-headline {
     margin: 3rem 0 2rem 0;
   }
+
+  .email-cards,
+  .col-9.no-vertical-padding {
+    padding: 0.5rem;
+  }
 }

public/css/email-card.css

@@ -6,12 +6,6 @@
   width: auto;
 }
 
-.email-card.preferences,
-.email-card.preferences.zero-breaches {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .email-card.preferences {
   background-color: rgba(255, 255, 255, 1);
   border: 1px solid #e8e8e8;
@@ -20,12 +14,21 @@
 
 .e-info { /* email address info */
   display: inline-flex;
+  align-items: center;
   flex-direction: row;
   border-bottom: 2px solid #e8e8e8;
   padding-bottom: 10px;
   width: 100%;
 }
 
+.preferences .e-info {
+  align-items: flex-start;
+}
+
+.preferences .e-num-breaches {
+  margin-top: 0.25rem;
+}
+
 .e-address {
   font-size: 1.1rem;
   margin-right: 0.5rem;
@@ -43,7 +46,6 @@
 .e-num-breaches {
   font-weight: 400;
   font-size: 0.9rem;
-  margin-top: 0.25rem;
   display: block;
   color: var(--grey6);
   font-family: "FirefoxSharpSans", Arial, Helvetica, sans-serif;
@@ -123,8 +125,13 @@
   justify-content: flex-end;
 }
 
+.preferences .new-breach-message-wrapper {
+  display: none;
+}
+
 .new-breach-message-wrapper.hide-mobile {
-  margin-right: var(--margin);
+  position: absolute;
+  right: 0;
 }
 
 .new-breach-icon {
@@ -316,32 +323,18 @@ input.remove-email-submit {
     margin: 0.5rem 0;
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
-  }
-
-  .dashboard .email-card {
-    border-bottom: 1px solid #eee;
-    border-radius: 0;
+    background-color: rgba(255, 255, 255, 1);
+    border: 1px solid #e8e8e8;
   }
 
   .e-info {
     border-bottom: none;
     padding-bottom: 0;
-    flex-direction: column;
-  }
-
-  .email-card.new-breaches {
-    border: 1px solid #ff4f5e99;
-    transition: border 0.25s ease-in-out;
-  }
-
-  .email-card.active.new-breaches {
-    border: 1px solid var(--borderColor);
-    transition: border 0.25s ease-in-out;
   }
 
   .e-num-breaches {
     margin-top: 0.5rem;
-    font-size: 0.8rem;
+    font-size: 0.85rem;
     font-style: italic;
     font-weight: 300;
   }
@@ -369,6 +362,10 @@ input.remove-email-submit {
     margin: 1rem 1rem 0 auto;
   }
 
+  .pref .new-breach-message-wrapper.show-mobile {
+    display: none !important;
+  }
+
   .e-breach-list {
     padding: 0 1rem;
   }
@@ -389,15 +386,7 @@ input.remove-email-submit {
   }
 
   .email-card {
-    padding: 0.5rem 0 1.25rem 0;
-    border-bottom: 1px solid var(--grey3);
-    border-radius: 0;
-  }
-
-  .email-card.preferences.zero-breaches,
-  .email-card.preferences {
     padding: 1rem 0;
-    border-radius: 4px;
   }
 
   .email-pref {
@@ -416,10 +405,6 @@ input.remove-email-submit {
   }
 
   .e-toggle-info-wrapper {
-    padding: 0.5rem var(--padding);
-  }
-
-  .preferences .e-toggle-info-wrapper {
     padding: 0 1rem;
   }
 

public/css/forms.css

@@ -176,7 +176,7 @@ form.invalid input[type="submit"]:focus {
 
 input.email-add {
   color: var(--color);
-  border-color: var(--grey3);
+  border-color: #e8e8e8;
   background-color: rgba(255, 255, 255, 1);
 }
 

views/partials/breach-stats.hbs

@@ -1,6 +1,6 @@
 
         {{#each (getBreachStats)}}
-          <div class="breach-stat-row flx {{ @key }} toggle-parent inactive">
+          <div class="breach-stat-row {{ @key }}">
             <div class="stat-row-title-wrap">
               <div class="breach-stat-number flx bold {{ @key }}">
                 {{ this.count }}

views/partials/dashboards/breaches-dash.hbs

@@ -1,7 +1,7 @@
 <div class="ab-br sr">
   <main id="dashboard" class="dashboard clear-header" data-page-label="User Dashboard">
     <div class="row jst-cntr">
-      <div class="col-9 txt-cntr">
+      <div class="col-9 txt-cntr padding-top-zero">
         {{#if req.session.newUser}}
           <span class="welcome-user">{{{fluentNestedBold "welcome-user" userName=req.session.user.fxa_profile_json.email }}}</span>
         {{else}}
@@ -12,7 +12,7 @@
     <div class="container">
       <div class="row jst-cntr flx-col">
         <div class="col-9 no-vertical-padding">
-          <h2 class="section-headline breach-summary dash">{{ getString "breach-summary" }}</h2>
+          <h2 class="pref-headline breach-summary">{{ getString "breach-summary" }}</h2>
         </div>
         <div class="col-9 card dash-stats no-vertical-padding">
           {{> breach-stats addClasses="user-stats"}}
@@ -25,16 +25,18 @@
   <div class="row jst-cntr flx-col dash-row">
     <div class="col-9 no-vertical-padding">
       <div class="flx space-between cntr link-header-wrapper">
-        <h2 class="section-headline margin-zero dash">{{ getString "email-addresses" }}</h2>
+        <h2 class="pref-headline">{{ getString "email-addresses-title" }}</h2>
         {{> dashboards/manage-email-link variableClass="hide-mobile"}}
       </div>
     </div>
-    {{#getBreachesForEachEmail}}
-      {{#each this.verifiedEmails}}
-        {{> email-card }}
-      {{/each}}
-    {{/getBreachesForEachEmail}}
-    {{> dashboards/manage-email-link variableClass="show-mobile"}}
+    <div class="email-cards flx flx-col jst-cntr">
+      {{#getBreachesForEachEmail}}
+        {{#each this.verifiedEmails}}
+          {{> email-card }}
+        {{/each}}
+      {{/getBreachesForEachEmail}}
+      {{> dashboards/manage-email-link variableClass="show-mobile"}}
+    </div>
   </div>
 </section>
 <section class="container cool-gradient">