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" animation="none"
position="top" position="top"
arrow arrow
theme="info" theme="tippy-tooltip-home"
> >
<img <img
alt="" alt=""

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

@ -1,8 +1,12 @@
.tippy-tooltip.info-theme { .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); background: rgba(36, 41, 46, 0.9);
color: $white; color: $white;
border-radius: 8px; border-radius: 8px;
} }
}
.home-notification { .home-notification {
background: rgba(36, 41, 46, 0.9); background: rgba(36, 41, 46, 0.9);
@ -47,7 +51,7 @@
color: #6a737d; color: #6a737d;
} }
&__ignore-button { & &__ignore-button {
border: 2px solid #6a737d; border: 2px solid #6a737d;
box-sizing: border-box; box-sizing: border-box;
border-radius: 6px; border-radius: 6px;
@ -71,7 +75,7 @@
} }
} }
&__accept-button { & &__accept-button {
border: 2px solid #6a737d; border: 2px solid #6a737d;
box-sizing: border-box; box-sizing: border-box;
border-radius: 6px; border-radius: 6px;

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

@ -5,23 +5,24 @@
} }
} }
.tippy-popper[x-placement^=top] .info-theme [x-arrow] { .tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow] {
border-top-color: $white; 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; 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; 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; border-bottom-color: $white;
} }
.tippy-tooltip.info-theme { .tippy-tooltip {
&#{&}-info-theme {
background: white; background: white;
color: black; color: black;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18); box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
@ -37,3 +38,4 @@
color: $Grey-500; 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" tooltipInnerClassName="info-tooltip__tooltip-content"
tooltipArrowClassName={positionArrowClassMap[position]} tooltipArrowClassName={positionArrowClassMap[position]}
html={contentText} html={contentText}
theme="info" theme="tippy-tooltip-info"
> >
<img src="images/mm-info-icon.svg" /> <img src="images/mm-info-icon.svg" />
</Tooltip> </Tooltip>