m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source
This commit is contained in:
Brad Decker 2020-09-17 09:08:02 -05:00 committed by GitHub
parent feeacc580d
commit f4a2a09713
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/app/home-notification/home-notification.component.js
View File

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

16
ui/app/components/app/home-notification/index.scss
View File

@ -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;

34
ui/app/components/ui/info-tooltip/index.scss
View File

@ -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;
}
}
}

2
ui/app/components/ui/info-tooltip/info-tooltip.js
View File

@ -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>