diff --git a/app/components/Toasts/components/Toast.js b/app/components/Toasts/components/Toast.js index 1c17464e6..4be464b33 100644 --- a/app/components/Toasts/components/Toast.js +++ b/app/components/Toasts/components/Toast.js @@ -61,13 +61,13 @@ const Action = styled.span` height: 100%; text-transform: uppercase; font-size: 12px; - color: ${props => props.theme.white}; - background: ${props => darken(0.05, props.theme[props.type])}; + color: ${props => props.theme.toastText}; + background: ${props => darken(0.05, props.theme.toastBackground)}; border-top-right-radius: 5px; border-bottom-right-radius: 5px; &:hover { - background: ${props => darken(0.1, props.theme[props.type])}; + background: ${props => darken(0.1, props.theme.toastBackground)}; } `; @@ -76,14 +76,14 @@ const Container = styled.div` align-items: center; animation: ${fadeAndScaleIn} 100ms ease; margin: 8px 0; - color: ${props => props.theme.white}; - background: ${props => props.theme[props.type]}; + color: ${props => props.theme.toastText}; + background: ${props => props.theme.toastBackground}; font-size: 15px; border-radius: 5px; cursor: default; &:hover { - background: ${props => darken(0.05, props.theme[props.type])}; + background: ${props => darken(0.05, props.theme.toastBackground)}; } `; diff --git a/shared/styles/theme.js b/shared/styles/theme.js index 6e1b8c08d..5fff6381d 100644 --- a/shared/styles/theme.js +++ b/shared/styles/theme.js @@ -129,6 +129,9 @@ export const light = { tooltipBackground: colors.almostBlack, tooltipText: colors.white, + toastBackground: colors.almostBlack, + toastText: colors.white, + quote: colors.slateLight, codeBackground: colors.smoke, codeBorder: colors.smokeDark, @@ -176,6 +179,9 @@ export const dark = { tooltipBackground: colors.white, tooltipText: colors.lightBlack, + toastBackground: colors.white, + toastText: colors.lightBlack, + quote: colors.almostWhite, codeBackground: colors.black, codeBorder: colors.black50,