Dashboard & Preferences UI Updates

public/css/app.css

@@ -106,6 +106,11 @@ p,
   font-weight: 700;
 }
 
+.overflow-break {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
 .desc {
   max-width: 320px;
 }
@@ -153,17 +158,12 @@ h3,
   max-width: 550px;
 }
 
-.mw-750 {
-  width: 100%;
-  padding: var(--padding);
-  max-width: 750px;
-}
-
 .mw-860 {
   width: 100%;
   max-width: 860px;
-  padding-left: var(--padding);
-  padding-right: var(--padding);
+  padding-left: 36px;
+  padding-right: 36px;
+  margin: auto;
 }
 
 .headline {
@@ -669,6 +669,10 @@ div.sprite {
     margin: auto;
   }
 
+  .mw-860 {
+    max-width: 600px;
+  }
+
   .row {
     flex-direction: column;
   }
@@ -692,6 +696,11 @@ div.sprite {
     padding: 20px 24px;
   }
 
+  .mw-860 {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
   .arrow-head-right {
     margin-left: 0.15rem;
   }

public/css/breach-cards.css

@@ -3,7 +3,7 @@
   --logoMargin: 20px;
   --breachInfoPadding: calc(var(--logoMargin) * 2 + var(--logoDmns));
 
-  padding: 1.5rem  3.25rem 1.5rem 1.5rem;
+  padding: 20px;
   border-radius: 8px;
   display: flex;
   flex-direction: row;
@@ -37,10 +37,6 @@ a.breach-card:hover {
   line-height: 1.5;
 }
 
-/* .more-about-this-breach {
-  font-size: 14px;
-} */
-
 .breach-card:hover {
   transform: scale(1.01);
   transition: all 0.15s ease-in-out;
@@ -112,12 +108,6 @@ a.breach-card:hover {
     flex: 1 1 48%;
   }
 
-  .breach-card.ec.two-up {
-    flex: 1 1 100%;
-    display: none;
-    max-width: 100%;
-  }
-
   .email-card.active .breach-card.ec.two-up {
     display: flex;
   }

public/css/breach-stats.css

@@ -1,4 +1,3 @@
-
 .monitoredEmails {
   background-color: var(--violet3);
 }
@@ -19,19 +18,13 @@
 }
 
 .breach-stat-number {
-  font-size: 50px;
+  font-size: 56px;
+  line-height: 1.14;
   min-width: 2rem;
 }
 
-.breach-stats {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: stretch;
-}
-
 .breach-stat-row {
   padding: 32px var(--padding);
-  flex-direction: column;
   max-width: 31.25%;
   border-radius: 8px;
 }
@@ -46,25 +39,26 @@
 .stat-headline {
   font-weight: 400;
   font-size: 16px;
-  line-height: 1;
+  line-height: 1.33;
   text-align: center;
 }
 
 .dash-stats {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  margin-bottom: calc(var(--padding) * 4);
 }
 
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 800px) {
   .dash-stats {
     flex-direction: column;
   }
 
   .breach-stat-row {
     max-width: 100%;
-    padding: 1rem;
-    margin-bottom: 1rem;
+    padding: 16px;
+    margin-bottom: 16px;
   }
 
   .stat-row-title-wrap {
@@ -93,6 +87,6 @@
   }
 
   .breach-stat-number {
-    min-width: 5rem;
+    min-width: 60px;
   }
 }

public/css/dashboard.css

@@ -1,8 +1,12 @@
 .welcome-back {
-  font-size: 1.1rem;
-  font-family: "Metropolis", sans-serif;
-  display: inline-block;
-  line-height: 130%;
+  font-size: 18px;
+  line-height: 1.5;
+  color: var(--grey8);
+  margin: auto;
+}
+
+.dashboard.clear-header {
+  padding-top: 116px;
 }
 
 h2.pref-headline {
@@ -19,28 +23,30 @@ h3.pref-section-headline.remove {
 }
 
 h2.pref-headline.breach-summary {
-  margin-bottom: var(--padding);
+  margin-top: calc(var(--padding) * 5);
+  margin-bottom: 24px;
 }
 
 .pref {
   width: 100%;
-  max-width: 620px;
+  max-width: 600px;
   display: flex;
   flex-direction: column;
   align-self: center;
-  justify-self: center;
-  padding: 0;
 }
 
-.pref.remove {
+.pref .email-add {
+  margin-bottom: 0;
+}
+
+.pref-remove {
   margin-bottom: 60px;
-  display: block;
 }
 
-.container.preferences {
+.preferences {
   background-size: auto;
   padding-top: 16rem;
-  padding-bottom: 60px;
+  padding-bottom: 40px;
 }
 
 .email-pref {
@@ -50,10 +56,6 @@ h2.pref-headline.breach-summary {
   color: #686869;
 }
 
-.email-pref.add-new {
-  margin-top: 60px;
-}
-
 .email-pref.fxa-primary-email {
   margin-top: 0;
 }
@@ -75,10 +77,6 @@ h2.pref-headline.breach-summary {
   display: inline-block;
 }
 
-.radio-label span.bold {
-  color: var(--ink);
-}
-
 .trash-can {
   position: absolute;
   top: 0;
@@ -90,11 +88,12 @@ h2.pref-headline.breach-summary {
 }
 
 .link-header-wrapper {
-  margin: var(--padding) 0;
+  margin: 80px 0 60px 0;
 }
 
 .email-cards {
   width: 100%;
+  margin-bottom: 80px;
 }
 
 span.dashboard-email-sent {
@@ -130,59 +129,50 @@ span.email-confirmed {
   padding: 60px 0;
 }
 
-@media screen and (max-width: 1100px) {
-  .email-cards .e-info {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
 @media screen and (max-width: 900px) {
   .pref {
-    padding: 0 var(--padding);
+    padding: 0 24px;
   }
 }
 
 @media screen and (max-width: 800px) {
-  .email-cards,
-  .mw-750.no-vertical-padding {
-    padding: 1rem;
+  .email-cards {
+    margin-bottom: 40px;
   }
-}
 
-@media screen and (max-width: 600px) {
-  h2.pref-headline {
-    font-size: 2rem;
+  .link-header-wrapper {
+    margin-bottom: 24px;
   }
 
-  h2.pref-headline.breach-summary {
-    margin-bottom: var(--padding);
+  .email-cards .e-info {
+    flex-direction: column;
+    align-items: flex-start;
   }
 
-  .link-header-wrapper {
-    margin-bottom: 0;
+  .dashboard.clear-header {
+    padding-top: 156px;
   }
 
-  .welcome-back,
-  .section-headline.dash {
-    font-size: 1.1rem;
-    text-align: left;
+  .pref .email-add {
+    margin-bottom: 8px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  h2.pref-headline {
+    font-size: 2rem;
   }
 
   .welcome-back {
-    padding-top: 0;
+    font-size: 14px;
   }
 
   .pref {
-    padding: 0 0.5rem;
+    padding-left: 24px;
+    padding-right: 24px;
   }
 
-  h3.pref-section-headline {
+  /* h3.pref-section-headline {
     margin: 3rem 0 2rem 0;
-  }
-
-  .email-cards,
-  .mw-750.no-vertical-padding {
-    padding: 0.5rem;
-  }
+  } */
 }