Bug 1641047 - Update styling in the monitor card body in protections dashboard. r=ewright, a=jcristau
authorprathiksha <prathikshaprasadsuman@gmail.com>
Wed, 03 Jun 2020 10:59:07 +0000
changeset 596952 f0f45c8a7bb214fbd3cb3d051224216f3de5417c
parent 596951 5e90387e27ce98ed50002c177045e19785a8711e
child 596953 dfa0b3855b9fad60a7fda4374db86c8bb5b623aa
push id13215
push userjcristau@mozilla.com
push dateThu, 04 Jun 2020 13:33:19 +0000
treeherdermozilla-beta@d6fc47eb7f3b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersewright, jcristau
bugs1641047
milestone78.0
Bug 1641047 - Update styling in the monitor card body in protections dashboard. r=ewright, a=jcristau Differential Revision: https://phabricator.services.mozilla.com/D76923
browser/components/protections/content/protections.css
browser/components/protections/content/protections.html
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@@ -686,24 +686,25 @@ label[for="tab-cryptominer"]:hover ~ #hi
   margin-block-start: 24px;
   font-size: 0.85em;
   display: block;
 }
 
 .monitor-breaches-wrapper {
   display: grid;
   grid-area: 2 / 1 / 2 / 7;
-  grid: 1fr 80px auto / repeat(6, 1fr);
+  grid: 1fr auto / repeat(6, 1fr);
+  margin-bottom: 24px;
 }
 
 .monitor-partial-breaches-wrapper {
   display: grid;
   grid-area: 2 / 1 / 2 / 8;
   grid-template-columns: repeat(7, 1fr);
-  margin-block: 30px;
+  margin-block: 24px;
 }
 
 .monitor-partial-breaches-header {
   grid-area: 1 / 1 / 1 / 7;
   margin-inline-end: 15px;
   margin-block: 6px;
 }
 
@@ -714,54 +715,59 @@ label[for="tab-cryptominer"]:hover ~ #hi
   float: inline-end;
 }
 
 .progress-bar {
   grid-area: 2 / 1 / 2 / 7;
   margin-inline-start: 15px;
   border-radius: 4px;
   height: 25px;
-  box-shadow: 0 0 0 1px #cdcdd4;
+  box-shadow: 0 0 0 1px rgba(202, 201, 213, 0.5);
   border: none;
-  background: linear-gradient(-90deg, #ff9100 0%, #f10366 50%, #6173ff 100%);
+  background: linear-gradient(-45deg, #0250BB 0%, #9059FF 100%);
   direction: rtl;
 }
 
 .progress-bar:dir(rtl) {
   direction: ltr;
-  background: linear-gradient(-90deg, #6173ff 0%, #f10366 50%, #ff9100 100%);
+  background: linear-gradient(-45deg, #0250BB 0%, #9059FF 100%);
 }
 
 .progress-bar::-moz-progress-bar {
   background: #FFFFFF;
+  border-radius: 0 4px 4px 0;
 }
 
 .monitor-partial-breaches-motivation-text {
   grid-template-columns: repeat(7, 1fr);
   grid-area: 3 / 1 / 3 / 8;
   margin-top: 25px;
   display: grid;
 }
 
 .monitor-partial-breaches-motivation-wrapper {
-  grid-area: 1 / 1 / 1 / 5;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-area: 2 / 1 / 2 / 8;
 }
 
 #monitor-partial-breaches-link {
-  margin-top: 3px;
+  margin-block: auto;
   grid-area: 1 / 5 / 1 / 7;
 }
 
 #monitor-partial-breaches-motivation-title {
-  display: block;
   font-weight: 700;
+  grid-area: 1 / 1 / 1 / 7;
+  margin-inline-end: 15px;
 }
 
 #monitor-partial-breaches-motivation-desc {
-  display: block;
+  grid-area: 1 / 1 / 1 / 5;
+  margin-block: auto;
 }
 
 .monitor-breaches-header {
   margin-top: 30px;
   grid-area: 1 / 1 / 1 / 7;
 }
 
 #monitor-partial-breaches-icon,
@@ -811,16 +817,21 @@ label[for="tab-cryptominer"]:hover ~ #hi
 }
 
 .monitor-card.has-logins #monitor-body-content {
   display: grid;
   grid: 1fr auto / repeat(7, 1fr);
   align-items: center;
 }
 
+.monitor-card .card-body {
+  padding-top: 0;
+  border-block-start: none;
+}
+
 .monitor-block {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
   text-align: center;
   margin-inline-end: 15px;
 }
 
--- a/browser/components/protections/content/protections.html
+++ b/browser/components/protections/content/protections.html
@@ -206,21 +206,21 @@
                 <div class="monitor-partial-breaches-wrapper">
                   <div class="monitor-partial-breaches-header">
                     <img id="monitor-partial-breaches-icon" src="chrome://browser/skin/protections/resolved-breach-gray.svg"/>
                     <span id="monitor-partial-breaches-title"></span>
                     <span id="monitor-partial-breaches-percentage"></span>
                   </div>
                   <progress class="progress-bar" max="100"></progress>
                   <div class="monitor-partial-breaches-motivation-text">
+                    <span id="monitor-partial-breaches-motivation-title"></span>
                     <div class="monitor-partial-breaches-motivation-wrapper">
-                      <span id="monitor-partial-breaches-motivation-title"></span>
                       <span id="monitor-partial-breaches-motivation-desc" class="content" data-l10n-id="monitor-partial-breaches-motivation-description"></span>
+                      <a id="monitor-partial-breaches-link" target="_blank" data-l10n-id="monitor-resolve-breaches-link"></a>
                     </div>
-                    <a id="monitor-partial-breaches-link" target="_blank" data-l10n-id="monitor-resolve-breaches-link"></a>
                   </div>
                 </div>
               </div>
             </div>
           </div>
       </section>
       <!-- Markup for Lockwise card. -->
       <section class="card card-no-hover lockwise-card hidden">