WIP UI Tweaks

controllers/user.js

@@ -21,6 +21,9 @@ function _requireSessionUser(req) {
 }
 
 async function resend(req, res) {
+  // Resend verification email
+  // Delete the unverified email if it appears anywhere else (under the user's id);
+  // Reset the verification clock
   return res.json("Resend the email");
 }
 
@@ -87,8 +90,6 @@ async function getDashboard(req, res) {
       unverifiedEmails.push(email);
     }
   }
-
-  // console.log(verifiedEmails);
   res.render("dashboard", {
     title: req.fluentFormat("user-dash"),
     verifiedEmails, unverifiedEmails,

public/css/app.css

@@ -325,8 +325,7 @@ ul li {
 }
 
 .bg-dark {
-  background: var(--color);
-  color: rgba(255, 255, 255, 1);
+  background: rgba(0, 0, 0, 0.04);
 }
 
 .bg-blue {

public/css/dashboard.css

@@ -1,11 +1,7 @@
 /* User breach stats */
-main.dashboard {
-  border-top: 1px dashed var(--borderColor);
-}
-
 main.dashboard .row {
   flex-wrap: wrap;
-  max-width: 1400px;
+  max-width: 800px;
 }
 
 .breach-stats.user-stats {
@@ -16,6 +12,7 @@ main.dashboard .row {
 .email-table {
   border-radius: 1rem;
   overflow: hidden;
+  cursor: pointer;
 }
 
 /* email cards */
@@ -26,6 +23,7 @@ main.dashboard .row {
   align-items: center;
   padding: var(--margin) 0;
   border-bottom: 1px solid#eee;
+  pointer-events: none;
 }
 
 .e-info { /* wraps email address info */
@@ -71,11 +69,16 @@ main.dashboard .row {
   transition: all 0.3s ease;
 }
 
+.email-card.verified {
+  cursor: pointer;
+}
+
 /* unverified emails */
 button.resend-email {
   border-width: 0;
   border-radius: 0.25rem;
   padding: 0.5rem;
+  pointer-events: all;
 }
 
 button.resend-email:hover {
@@ -91,17 +94,31 @@ button.resend-email:hover {
   justify-content: flex-end;
   flex: 1 1 50%;
   position: relative;
+  height: 100%;
   transition: all 0.1s ease;
 }
 
 svg.toggle-down {
-  width: 20px;
-  height: 20px;
+  width: 25px;
+  height: 25px;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
   right: var(--padding);
+  background-color: lightblue;
+  border-radius: 50%;
+  padding: 6px;
+  transition: all 0.2s ease;
+}
+
+svg.toggle-down path {
+  fill: rgba(255, 255, 255, 1);
+}
+
+.email-card:hover svg.toggle-down {
+  background-color: rgba(147, 194, 209, 0.767);
+  transition: all 0.2s ease;
 }
 
 .email-card.active .toggle-down {
@@ -109,7 +126,6 @@ svg.toggle-down {
   transition: all 0.1s ease;
 }
 
-/* sidebar */
 .skinny-headline.breach-summary {
   font-size: 1rem;
 }
@@ -123,10 +139,38 @@ svg.toggle-down {
   .breach-stats {
     max-width: 100%;
   }
+
+  .dash-stats,
+  .email-table {
+    margin-bottom: 3rem;
+  }
+
+  .skinny-headline.breach-summary {
+    font-size: var(--skinnyHeadline);
+  }
 }
 
 @media screen and (max-width: 600px) {
-  .row.dashboard-wrap-reverse {
-    flex-direction: column-reverse;
+  .e-address {
+    font-size: 1rem;
+  }
+
+  .dashboard .col-12 {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  .unverified.e-toggle-info-wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  button.resend-email {
+    padding: 0.5rem 0;
+  }
+
+  button.resend-email:hover {
+    background-color: transparent;
   }
 }

public/css/feature-tip-group.css

@@ -15,19 +15,17 @@
 }
 
 .feat-img {
-  height: 4rem;
-  width: 4rem;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  height: 5rem;
+  width: 5rem;
   border-radius: 50%;
   margin: var(--padding) auto;
   background-color: rgba(255, 255, 255, 0);
+  border-color: var(--borderColors);
+  border-width: 36px;
+  border-style: double;
   transition: all 0.3s ease;
 }
 
-.bg-white .feat-img {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
 .feature-tip-content-wrapper:hover .feat-img,
 .feat-img:hover {
   background-color: rgba(255, 255, 255, 0.08);

public/css/footer.css

@@ -1,5 +1,5 @@
 footer {
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--borderColor);
   width: 100%;
   margin: auto auto 0 auto;
 }

public/css/header.css

@@ -66,7 +66,6 @@ nav.mobile-menu a:hover {
 
 /* signed-in user avatar */
 .avatar-wrapper {
-  border: 1px solid rgba(255, 255, 255, 0);
   border-radius: 50%;
   box-shadow: 0 0 0 1.25px rgba(255, 255, 255, 1);
   display: inline-flex;

public/css/latest-breach.css

@@ -6,8 +6,6 @@
   box-shadow: 1px 1px 10px #8181810e;
   border-radius: var(--radius);
   padding: 0;
-
-  /* background-color: rgba(249, 249, 250, 1); */
   color: rgba(255, 255, 255, 0.8);
   background-color: var(--darkBlue);
 }
@@ -17,6 +15,7 @@
 }
 
 .latest-breach-headline {
+  font-size: 1rem;
   text-align: center;
   margin-bottom: 0;
   padding: 1.5rem;
@@ -40,12 +39,30 @@
   font-size: 0.9rem;
 }
 
-.latest-breach a {
-  font-weight: 500;
+span.fxm,
+.latest-breach .key,
+.latest-breach a.button {
+  color: rgba(255, 255, 255, 1);
+}
+
+.latest-breach a.button {
+  margin-top: 1rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgb(76, 28, 223);
+  width: 100%;
+  padding: 1.5rem 1rem;
+  border: 1px solid #ffc0cb4d;
+  border-radius: 0.5rem;
+}
+
+.latest-breach a.button:hover {
+  border: 1px solid transparent;
+  background-color: rgb(71, 25, 207);
 }
 
 .latest-breach-info {
-  padding: var(--padding) calc(var(--padding) * 2) calc(var(--padding) * 2) calc(var(--padding) * 2);
+  padding: calc(var(--padding) + 1rem) calc(var(--padding) * 2) calc(var(--padding) * 2) calc(var(--padding) * 2);
   background-color: rgba(249, 249, 250, 0.15);
   border-top: 1px solid #7cdfff0d;
 }
@@ -97,15 +114,17 @@
   .latest-breach-wrapper {
     margin: 0;
     border-radius: 0;
-    background-color: var(--color);
+
+    /* background-color: var(--color); */
     color: rgba(255, 255, 255, 1);
-    padding: 2rem !important;
+
+    /* padding: 2rem !important; */
     box-shadow: none;
   }
 
   .latest-breach-headline {
     padding: 1rem 1rem 1rem 1rem;
-    border: 1px dashed var(--borderColor);
+    border: 1px dashed rgba(255, 255, 255, 0.1);
     border-bottom: none;
     border-top-right-radius: 1rem;
     border-top-left-radius: 1rem;
@@ -114,18 +133,13 @@
   .latest-breach-info {
     border-top: none;
     padding-bottom: 2rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    border: 1px dashed var(--borderColor);
+    padding-left: 2rem;
+    padding-right: 2rem;
+    border: 1px dashed rgba(255, 255, 255, 0.1);
     border-bottom-right-radius: 1rem;
     border-bottom-left-radius: 1rem;
   }
 
-  .latest-breach-headline,
-  .latest-breach-info {
-    background-color: transparent;
-  }
-
   .latest-breach.container {
     padding: 1rem 0;
   }
@@ -134,13 +148,4 @@
     margin-bottom: 0.5rem;
     color: rgba(255, 255, 255, 0.6);
   }
-
-  .latest-breach .key {
-    color: rgba(255, 255, 255, 1);
-  }
-
-  .latest-breach a {
-    margin-top: 1rem;
-    color: rgba(255, 255, 255, 0.9);
-  }
 }

public/css/monitor.css

@@ -8,7 +8,7 @@ main.container.monitor-homepage {
 }
 
 .homepage-scan-form {
-  border: 1px solid #eee;
+  border: 1px dashed var(--borderColor);
   border-radius: var(--radius);
 }
 

public/css/sign-up-banner.css

@@ -9,6 +9,16 @@
 
 .sign-up-banner-button {
   margin-top: var(--padding);
+  background-color: rgba(255, 255, 255, 1);
+  border: 2px solid transparent;
+  color: var(--color);
+}
+
+.sign-up-banner-button:hover {
+  background-color: rgba(255, 255, 255, 0.4);
+  box-shadow: none;
+  outline: none;
+  border-color: transparent;
 }
 
 .sign-up-feature {

public/js/dashboard.js

@@ -1,18 +1,18 @@
 "use strict";
 
+
+const toggleEl = (e) => {
+  const toggleParent = e.target;
+  ["inactive", "active"].forEach(className => {
+    toggleParent.classList.toggle(className);
+  });
+};
+
 const findAncestor = (el, cls) => {
   while ((el = el.parentElement) && !el.classList.contains(cls));
   return el;
 };
 
-const toggleEl = (e) => {
-  const toggleElem = e.target;
-  const toggleParent = findAncestor(toggleElem, "toggle-parent");
-  ["inactive", "active"].forEach(className => {
-    toggleParent.classList.toggle(className);
-  });
-};
-
 const resendEmail = async(e) => {
   const resendLink = e.target;
   const parentDiv = findAncestor(resendLink, "e-toggle-info-wrapper");
@@ -30,8 +30,8 @@ const resendEmail = async(e) => {
   });
 };
 
-if (document.querySelector(".toggle")) {
-  const toggles = document.querySelectorAll(".toggle");
+if (document.querySelector(".toggle-parent")) {
+  const toggles = document.querySelectorAll(".toggle-parent");
   toggles.forEach(el => {
     el.addEventListener("click", toggleEl);
   });

views/dashboard.hbs

@@ -8,11 +8,14 @@
   <div class="row dashboard-wrap-reverse">
 
     <!-- verified emails table -->
-    <div class="flx-col">
+    <div class="col-12 dash-stats">
+      <h2 class="skinny-headline breach-summary">Breach Summary</h2>
+      {{> breach-stats addClasses="user-stats"}}
+    </div>
       <div class="col-12 email-table">
         <h2 class="skinny-headline">Email Addresses</h2>
           {{#each verifiedEmails }}
-          <div class="email-card flx flx-col toggle-parent inactive">
+          <div class="verified email-card flx flx-col toggle-parent inactive">
             <div class="e-toggle-info-wrapper">
               <div class="e-info">
                 <span class="e-address">{{ email }}</span>
@@ -50,14 +53,6 @@
           </div>
         {{/each}}
       </div>
-    </div> <!--closes flx-col -->
-
-
-    <!-- sidebar -->
-    <div class="col-4 dash-stats">
-      <h2 class="skinny-headline breach-summary">Breach Summary</h2>
-      {{> breach-stats addClasses="user-stats"}}
-    </div>
 
 
 

views/partials/email_partials/email_single_breach.hbs

@@ -1,4 +1,4 @@
-    <tr class="email-breach-listing">
+    {{!-- <tr class="email-breach-listing">
       <td class="email-breach-image" valign="top" style="padding-top: 13px; padding-bottom: 10px; width: 55px;">
         <img src="{{ SERVER_URL }}/img/logos/{{ this.LogoPath }}" width="40" style="width: 40px" />
       </td>
@@ -10,4 +10,4 @@
           <p class="body-copy medium" style="padding: 2px 0px 2px 0px; margin: 0px; color: #333333; font-weight: 400; font-size: 14px;">{{getString supportedLocales "compromised-data"}}<span class="body-copy" style="font-weight:300; padding-left: 6px; color: #333333">{{localizedBreachDataClasses supportedLocales this.DataClasses }}</span></p>
         {{/if}}
       </td>
-    </tr>
+    </tr> --}}