fix colour/bgColour (gnosis/cowswap#1423)

anxolin · Sep 22, 2021 · 5be6eb1 · 5be6eb1
1 parent c575d39
commit 5be6eb1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/custom/components/HighFeeWarning/index.tsx b/src/custom/components/HighFeeWarning/index.tsx
@@ -29,10 +29,9 @@ const HighFeeWarningContainer = styled(AuxInformationContainer).attrs((props) =>
   ...props,
   hideInput: true,
 }))<HighFeeContainerProps>`
-  &&&&& {
-    background: ${({ theme, bgColour }) => bgColour || theme.info};
-    color: ${({ theme, textColour }) => textColour || theme.infoText};
-  }
+  background: ${({ theme, bgColour }) => bgColour || theme.info};
+  color: ${({ theme, textColour }) => textColour || theme.infoText};
+
   padding: ${({ padding = '5px 12px' }) => padding};
   width: ${({ width = '100%' }) => width};
   border-radius: ${({ theme }) => theme.buttonPrimary.borderRadius};
@@ -108,6 +107,7 @@ const HighFeeWarningMessage = ({ feePercentage }: { feePercentage?: Fraction })
 export type HighFeeWarningProps = {
   trade?: TradeGp
   acceptedStatus?: boolean
+  className?: string
   acceptWarningCb?: () => void
 } & HighFeeContainerProps
 

diff --git a/src/custom/components/swap/SwapModalHeader/index.tsx b/src/custom/components/swap/SwapModalHeader/index.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components'
 import { LightCard as LightCardUni } from 'components/Card'
 import { darken, transparentize } from 'polished'
 import { AuxInformationContainer } from 'components/CurrencyInputPanel'
-import { HighFeeWarning } from 'components/HighFeeWarning'
+import { HighFeeWarning as HighFeeWarningBase } from 'components/HighFeeWarning'
 
 const LightCard = styled(LightCardUni)<{ flatBorder?: boolean }>`
   background-color: ${({ theme }) => darken(0.06, theme.bg1)};
@@ -16,6 +16,9 @@ const LightCard = styled(LightCardUni)<{ flatBorder?: boolean }>`
 
 export type LightCardType = typeof LightCard
 
+// targettable by styled injection
+const HighFeeWarning = styled(HighFeeWarningBase)``
+
 const Wrapper = styled.div`
   ${({ theme }) => theme.mediaWidth.upToSmall`
     margin: 32px auto 0;
@@ -25,11 +28,11 @@ const Wrapper = styled.div`
     stroke: ${({ theme }) => theme.text1};
   }
 
-  ${AutoColumn} > div > div {
+  ${AutoColumn} > div:not(${HighFeeWarning}) > div {
     color: ${({ theme }) => theme.text1};
   }
 
-  ${AuxInformationContainer} {
+  ${AuxInformationContainer}:not(${HighFeeWarning}) {
     background-color: ${({ theme }) => theme.bg3};
     border: 2px solid ${({ theme }) => transparentize(0.5, theme.bg0)};
     border-top: 0;