Bug 1571670 - Added :hover effect to the dismiss buttons for Onboarding triplets & welcome modal r=k88hudson

Differential Revision: https://phabricator.services.mozilla.com/D61921

--HG--
extra : moz-landing-system : lando

browser/components/newtab/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss

@@ -63,6 +63,10 @@ $modal-scrollbar-z-index: 1100;
     fill: $white;
     position: absolute;
 
+    &:hover {
+      background-color: $trailhead-purple;
+    }
+
     &:focus {
       border: 1px dotted;
     }

browser/components/newtab/content-src/asrouter/templates/Trailhead/_Trailhead.scss

@@ -222,6 +222,7 @@
 
   .icon-dismiss {
     border: 0;
+    border-radius: 4px;
     cursor: pointer;
     inset-inline-end: 15px;
     padding: 15px;
@@ -231,7 +232,7 @@
 
     &:hover,
     &:focus {
-      background-color: var(--newtab-element-hover-color);
+      background-color: var(--newtab-element-active-color);
     }
   }
 }

browser/components/newtab/css/activity-stream-linux.css

@@ -3350,6 +3350,8 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
     padding: 20px;
     fill: #FFF;
     position: absolute; }
+    .modalOverlayInner .icon-dismiss:hover {
+      background-color: #2B2156; }
     .modalOverlayInner .icon-dismiss:focus {
       border: 1px dotted; }
   .modalOverlayInner h2 {
@@ -4194,6 +4196,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
       width: 1042px; } }
   .trailheadCardsInner .icon-dismiss {
     border: 0;
+    border-radius: 4px;
     cursor: pointer;
     inset-inline-end: 15px;
     padding: 15px;
@@ -4201,7 +4204,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
     position: absolute;
     top: 15px; }
     .trailheadCardsInner .icon-dismiss:hover, .trailheadCardsInner .icon-dismiss:focus {
-      background-color: var(--newtab-element-hover-color); }
+      background-color: var(--newtab-element-active-color); }
 
 .trailheadCardGrid {
   display: grid;

browser/components/newtab/css/activity-stream-mac.css

@@ -3353,6 +3353,8 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
     padding: 20px;
     fill: #FFF;
     position: absolute; }
+    .modalOverlayInner .icon-dismiss:hover {
+      background-color: #2B2156; }
     .modalOverlayInner .icon-dismiss:focus {
       border: 1px dotted; }
   .modalOverlayInner h2 {
@@ -4197,6 +4199,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
       width: 1042px; } }
   .trailheadCardsInner .icon-dismiss {
     border: 0;
+    border-radius: 4px;
     cursor: pointer;
     inset-inline-end: 15px;
     padding: 15px;
@@ -4204,7 +4207,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
     position: absolute;
     top: 15px; }
     .trailheadCardsInner .icon-dismiss:hover, .trailheadCardsInner .icon-dismiss:focus {
-      background-color: var(--newtab-element-hover-color); }
+      background-color: var(--newtab-element-active-color); }
 
 .trailheadCardGrid {
   display: grid;

browser/components/newtab/css/activity-stream-windows.css

@@ -3350,6 +3350,8 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
     padding: 20px;
     fill: #FFF;
     position: absolute; }
+    .modalOverlayInner .icon-dismiss:hover {
+      background-color: #2B2156; }
     .modalOverlayInner .icon-dismiss:focus {
       border: 1px dotted; }
   .modalOverlayInner h2 {
@@ -4194,6 +4196,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
       width: 1042px; } }
   .trailheadCardsInner .icon-dismiss {
     border: 0;
+    border-radius: 4px;
     cursor: pointer;
     inset-inline-end: 15px;
     padding: 15px;
@@ -4201,7 +4204,7 @@ body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme {
     position: absolute;
     top: 15px; }
     .trailheadCardsInner .icon-dismiss:hover, .trailheadCardsInner .icon-dismiss:focus {
-      background-color: var(--newtab-element-hover-color); }
+      background-color: var(--newtab-element-active-color); }
 
 .trailheadCardGrid {
   display: grid;