increase specifity of button style overrides on notifications (#9427)

ui/app/components/app/home-notification/home-notification.component.js

@@ -66,7 +66,7 @@ export default class HomeNotification extends PureComponent {
                 animation="none"
                 position="top"
                 arrow
-                theme="info"
+                theme="tippy-tooltip-home"
               >
                 <img
                   alt=""

ui/app/components/app/home-notification/index.scss

@@ -1,7 +1,11 @@
-.tippy-tooltip.info-theme {
-  background: rgba(36, 41, 46, 0.9);
-  color: $white;
-  border-radius: 8px;
+.tippy-tooltip {
+  // This looks weird, but its repeating the class name
+  // using interpolation for higher specificity.
+  &#{&}-home-theme {
+    background: rgba(36, 41, 46, 0.9);
+    color: $white;
+    border-radius: 8px;
+  }
 }
 
 .home-notification {
@@ -47,7 +51,7 @@
     color: #6a737d;
   }
 
-  &__ignore-button {
+  & &__ignore-button {
     border: 2px solid #6a737d;
     box-sizing: border-box;
     border-radius: 6px;
@@ -71,7 +75,7 @@
     }
   }
 
-  &__accept-button {
+  & &__accept-button {
     border: 2px solid #6a737d;
     box-sizing: border-box;
     border-radius: 6px;

ui/app/components/ui/info-tooltip/index.scss

@@ -5,35 +5,37 @@
   }
 }
 
-.tippy-popper[x-placement^=top] .info-theme [x-arrow] {
+.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow] {
   border-top-color: $white;
 }
 
-.tippy-popper[x-placement^=right] .info-theme [x-arrow] {
+.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow] {
   border-right-color: $white;
 }
 
-.tippy-popper[x-placement^=left] .info-theme [x-arrow] {
+.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow] {
   border-left-color: $white;
 }
 
-.tippy-popper[x-placement^=bottom] .info-theme [x-arrow] {
+.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow] {
   border-bottom-color: $white;
 }
 
-.tippy-tooltip.info-theme {
-  background: white;
-  color: black;
-  box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
-  border-radius: 8px;
-  max-width: 203px;
-  padding: 16px;
-  padding-bottom: 15px;
+.tippy-tooltip {
+  &#{&}-info-theme {
+    background: white;
+    color: black;
+    box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
+    border-radius: 8px;
+    max-width: 203px;
+    padding: 16px;
+    padding-bottom: 15px;
 
-  .tippy-tooltip-content {
-    @include H8;
+    .tippy-tooltip-content {
+      @include H8;
 
-    text-align: left;
-    color: $Grey-500;
+      text-align: left;
+      color: $Grey-500;
+    }
   }
 }

ui/app/components/ui/info-tooltip/info-tooltip.js

@@ -22,7 +22,7 @@ export default function InfoTooltip ({
         tooltipInnerClassName="info-tooltip__tooltip-content"
         tooltipArrowClassName={positionArrowClassMap[position]}
         html={contentText}
-        theme="info"
+        theme="tippy-tooltip-info"
       >
         <img src="images/mm-info-icon.svg" />
       </Tooltip>