no more borderRadius errors! (#1968)

gnosis · Jul 6, 2021 · 43cefbd · 43cefbd
1 parent ae86fef
commit 43cefbd
Show file tree

Hide file tree

Showing 23 changed files with 88 additions and 124 deletions.
diff --git a/package.json b/package.json
@@ -92,6 +92,7 @@
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.8",
     "react-ga": "^2.5.7",
+    "react-is": "^17.0.2",
     "react-markdown": "^4.3.1",
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.2",
@@ -106,7 +107,7 @@
     "redux-localstorage-simple": "^2.3.1",
     "serve": "^11.3.2",
     "start-server-and-test": "^1.11.0",
-    "styled-components": "^4.2.0",
+    "styled-components": "^5.3.0",
     "styled-system": "^5.1.5",
     "typechain": "^5.0.0",
     "typescript": "^4.2.3",

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -12,16 +12,15 @@ const Base = styled(RebassButton)<
   {
     padding?: string
     width?: string
-    borderRadius?: string
+    $borderRadius?: string
     altDisabledStyle?: boolean
   } & ButtonProps
 >`
-  padding: ${({ padding }) => (padding ? padding : '16px')};
-  width: ${({ width }) => (width ? width : '100%')};
+  padding: ${({ padding }) => padding ?? '16px'};
+  width: ${({ width }) => width ?? '100%'};
   font-weight: 500;
   text-align: center;
-  border-radius: 20px;
-  border-radius: ${({ borderRadius }) => borderRadius && borderRadius};
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? '20px'};
   outline: none;
   border: 1px solid transparent;
   color: white;
@@ -345,17 +344,6 @@ export function ButtonDropdown({ disabled = false, children, ...rest }: { disabl
   )
 }
 
-export function ButtonDropdownGrey({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
-  return (
-    <ButtonGray {...rest} disabled={disabled} style={{ borderRadius: '20px' }}>
-      <RowBetween>
-        <div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
-        <ChevronDown size={24} />
-      </RowBetween>
-    </ButtonGray>
-  )
-}
-
 export function ButtonDropdownLight({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
   return (
     <ButtonOutlined {...rest} disabled={disabled}>
@@ -367,14 +355,6 @@ export function ButtonDropdownLight({ disabled = false, children, ...rest }: { d
   )
 }
 
-export function ButtonRadio({ active, ...rest }: { active?: boolean } & ButtonProps) {
-  if (!active) {
-    return <ButtonWhite {...rest} />
-  } else {
-    return <ButtonPrimary {...rest} />
-  }
-}
-
 const ActiveOutlined = styled(ButtonOutlined)`
   border: 1px solid;
   border-color: ${({ theme }) => theme.primary1};
@@ -407,13 +387,13 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
 
   if (!active) {
     return (
-      <ButtonOutlined borderRadius="12px" padding="12px 8px" {...rest}>
+      <ButtonOutlined $borderRadius="12px" padding="12px 8px" {...rest}>
         {<RowBetween>{children}</RowBetween>}
       </ButtonOutlined>
     )
   } else {
     return (
-      <ActiveOutlined {...rest} padding="12px 8px" borderRadius="12px">
+      <ActiveOutlined {...rest} padding="12px 8px" $borderRadius="12px">
         {
           <RowBetween>
             {children}

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -1,13 +1,11 @@
 import styled from 'styled-components/macro'
 import { Box } from 'rebass/styled-components'
 
-const Card = styled(Box)<{ width?: string; padding?: string; border?: string; borderRadius?: string }>`
+const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $borderRadius?: string }>`
   width: ${({ width }) => width ?? '100%'};
-  border-radius: 16px;
-  padding: 1rem;
-  padding: ${({ padding }) => padding};
+  padding: ${({ padding }) => padding ?? '1rem'};
+  border-radius: ${({ $borderRadius }) => $borderRadius ?? '16px'};
   border: ${({ border }) => border};
-  border-radius: ${({ borderRadius }) => borderRadius};
 `
 export default Card
 

diff --git a/src/components/FeeSelector/index.tsx b/src/components/FeeSelector/index.tsx
@@ -159,7 +159,7 @@ export default function FeeSelector({
               )}
             </AutoColumn>
 
-            <ButtonGray onClick={() => setShowOptions(!showOptions)} width="auto" padding="4px" borderRadius="6px">
+            <ButtonGray onClick={() => setShowOptions(!showOptions)} width="auto" padding="4px" $borderRadius="6px">
               {showOptions ? <Trans>Hide</Trans> : <Trans>Edit</Trans>}
             </ButtonGray>
           </RowBetween>

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -172,7 +172,7 @@ export default function Menu() {
             </div>
           </MenuItem>
           {account && (
-            <UNIbutton onClick={openClaimModal} padding="8px 16px" width="100%" borderRadius="12px" mt="0.5rem">
+            <UNIbutton onClick={openClaimModal} padding="8px 16px" width="100%" $borderRadius="12px" mt="0.5rem">
               <Trans>Claim UNI</Trans>
             </UNIbutton>
           )}

diff --git a/src/components/Popups/ClaimPopup.tsx b/src/components/Popups/ClaimPopup.tsx
@@ -117,7 +117,7 @@ export default function ClaimPopup() {
             </TYPE.subHeader>
           </AutoColumn>
           <AutoColumn style={{ zIndex: 10 }} justify="center">
-            <ButtonPrimary padding="8px" borderRadius="8px" width={'fit-content'} onClick={handleToggleSelfClaimModal}>
+            <ButtonPrimary padding="8px" $borderRadius="8px" width={'fit-content'} onClick={handleToggleSelfClaimModal}>
               <Trans>Claim your UNI tokens</Trans>
             </ButtonPrimary>
           </AutoColumn>

diff --git a/src/components/PositionCard/Sushi.tsx b/src/components/PositionCard/Sushi.tsx
@@ -62,7 +62,7 @@ export default function SushiPositionCard({ tokenA, tokenB, liquidityToken, bord
           <RowFixed gap="8px">
             <ButtonEmpty
               padding="0px 35px 0px 0px"
-              borderRadius="12px"
+              $borderRadius="12px"
               width="fit-content"
               as={Link}
               to={`/migrate/v2/${liquidityToken.address}`}

diff --git a/src/components/PositionCard/V2.tsx b/src/components/PositionCard/V2.tsx
@@ -98,7 +98,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
           <RowFixed gap="8px">
             <ButtonEmpty
               padding="6px 8px"
-              borderRadius="12px"
+              $borderRadius="12px"
               width="fit-content"
               onClick={() => setShowMore(!showMore)}
             >
@@ -188,7 +188,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
               <RowBetween marginTop="10px">
                 <ButtonPrimary
                   padding="8px"
-                  borderRadius="8px"
+                  $borderRadius="8px"
                   as={Link}
                   to={`/migrate/v2/${pair.liquidityToken.address}`}
                   width="64%"
@@ -197,7 +197,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
                 </ButtonPrimary>
                 <ButtonSecondary
                   padding="8px"
-                  borderRadius="8px"
+                  $borderRadius="8px"
                   as={Link}
                   width="32%"
                   to={`/remove/v2/${currencyId(currency0)}/${currencyId(currency1)}`}

diff --git a/src/components/PositionCard/index.tsx b/src/components/PositionCard/index.tsx
@@ -219,7 +219,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
             </Text>
           </AutoRow>
           <RowFixed gap="8px" style={{ marginRight: '4px' }}>
-            <ButtonEmpty padding="6px 8px" borderRadius="12px" width="100%" onClick={() => setShowMore(!showMore)}>
+            <ButtonEmpty padding="6px 8px" $borderRadius="12px" width="100%" onClick={() => setShowMore(!showMore)}>
               {showMore ? (
                 <>
                   <Trans>Manage</Trans>
@@ -306,7 +306,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
               </Text>
             </FixedHeightRow>
 
-            <ButtonSecondary padding="8px" borderRadius="8px">
+            <ButtonSecondary padding="8px" $borderRadius="8px">
               <ExternalLink
                 style={{ width: '100%', textAlign: 'center' }}
                 href={`https://v2.info.uniswap.org/account/${account}`}
@@ -320,7 +320,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
               <RowBetween marginTop="10px">
                 <ButtonPrimary
                   padding="8px"
-                  borderRadius="8px"
+                  $borderRadius="8px"
                   as={Link}
                   to={`/migrate/v2/${pair.liquidityToken.address}`}
                   width="32%"
@@ -329,7 +329,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
                 </ButtonPrimary>
                 <ButtonPrimary
                   padding="8px"
-                  borderRadius="8px"
+                  $borderRadius="8px"
                   as={Link}
                   to={`/add/v2/${currencyId(currency0)}/${currencyId(currency1)}`}
                   width="32%"
@@ -338,7 +338,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
                 </ButtonPrimary>
                 <ButtonPrimary
                   padding="8px"
-                  borderRadius="8px"
+                  $borderRadius="8px"
                   as={Link}
                   width="32%"
                   to={`/remove/v2/${currencyId(currency0)}/${currencyId(currency1)}`}
@@ -350,7 +350,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
             {stakedBalance && JSBI.greaterThan(stakedBalance.quotient, BIG_INT_ZERO) && (
               <ButtonPrimary
                 padding="8px"
-                borderRadius="8px"
+                $borderRadius="8px"
                 as={Link}
                 to={`/uni/${currencyId(currency0)}/${currencyId(currency1)}`}
                 width="100%"

diff --git a/src/components/SearchModal/CurrencyList.tsx b/src/components/SearchModal/CurrencyList.tsx
@@ -162,7 +162,7 @@ function BreakLineComponent({ style }: { style: CSSProperties }) {
   const theme = useTheme()
   return (
     <FixedContentRow style={style}>
-      <LightGreyCard padding="8px 12px" borderRadius="8px">
+      <LightGreyCard padding="8px 12px" $borderRadius="8px">
         <RowBetween>
           <RowFixed>
             <TokenListLogoWrapper src={TokenListLogo} />

diff --git a/src/components/SearchModal/ImportList.tsx b/src/components/SearchModal/ImportList.tsx
@@ -149,7 +149,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
           <ButtonPrimary
             disabled={!confirmed}
             altDisabledStyle={true}
-            borderRadius="20px"
+            $borderRadius="20px"
             padding="10px 1rem"
             onClick={handleAddList}
           >

diff --git a/src/components/SearchModal/ImportToken.tsx b/src/components/SearchModal/ImportToken.tsx
@@ -108,7 +108,7 @@ export function ImportToken({ tokens, list, onBack, onDismiss, handleCurrencySel
                     </TYPE.small>
                   </RowFixed>
                 ) : (
-                  <WarningWrapper borderRadius="4px" padding="4px" highWarning={true}>
+                  <WarningWrapper $borderRadius="4px" padding="4px" highWarning={true}>
                     <RowFixed>
                       <AlertCircle stroke={theme.red1} size="10px" />
                       <TYPE.body color={theme.red1} ml="4px" fontSize="10px" fontWeight={500}>
@@ -124,7 +124,7 @@ export function ImportToken({ tokens, list, onBack, onDismiss, handleCurrencySel
 
         <ButtonPrimary
           altDisabledStyle={true}
-          borderRadius="20px"
+          $borderRadius="20px"
           padding="10px 1rem"
           onClick={() => {
             tokens.map((token) => addToken(token))

diff --git a/src/components/claim/AddressClaimModal.tsx b/src/components/claim/AddressClaimModal.tsx
@@ -132,7 +132,7 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
               disabled={!isAddress(parsedAddress ?? '') || !hasAvailableClaim}
               padding="16px 16px"
               width="100%"
-              borderRadius="12px"
+              $borderRadius="12px"
               mt="1rem"
               onClick={onClaim}
             >

diff --git a/src/components/claim/ClaimModal.tsx b/src/components/claim/ClaimModal.tsx
@@ -161,7 +161,7 @@ export default function ClaimModal() {
               disabled={!isAddress(account ?? '')}
               padding="16px 16px"
               width="100%"
-              borderRadius="12px"
+              $borderRadius="12px"
               mt="1rem"
               onClick={onClaim}
             >

diff --git a/src/components/earn/PoolCard.tsx b/src/components/earn/PoolCard.tsx
@@ -119,7 +119,7 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
         </TYPE.white>
 
         <StyledInternalLink to={`/uni/${currencyId(currency0)}/${currencyId(currency1)}`} style={{ width: '100%' }}>
-          <ButtonPrimary padding="8px" borderRadius="8px">
+          <ButtonPrimary padding="8px" $borderRadius="8px">
             {isStaking ? <Trans>Manage</Trans> : <Trans>Deposit</Trans>}
           </ButtonPrimary>
         </StyledInternalLink>

diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx
@@ -639,7 +639,7 @@ export default function AddLiquidity({
                     )}
 
                     {outOfRange ? (
-                      <YellowCard padding="8px 12px" borderRadius="12px">
+                      <YellowCard padding="8px 12px" $borderRadius="12px">
                         <RowBetween>
                           <AlertTriangle stroke={theme.yellow3} size="16px" />
                           <TYPE.yellow ml="12px" fontSize="12px">
@@ -653,7 +653,7 @@ export default function AddLiquidity({
                     ) : null}
 
                     {invalidRange ? (
-                      <YellowCard padding="8px 12px" borderRadius="12px">
+                      <YellowCard padding="8px 12px" $borderRadius="12px">
                         <RowBetween>
                           <AlertTriangle stroke={theme.yellow3} size="16px" />
                           <TYPE.yellow ml="12px" fontSize="12px">
@@ -703,13 +703,13 @@ export default function AddLiquidity({
               </DynamicSection>
               <div>
                 {addIsUnsupported ? (
-                  <ButtonPrimary disabled={true} borderRadius="12px" padding={'12px'}>
+                  <ButtonPrimary disabled={true} $borderRadius="12px" padding={'12px'}>
                     <TYPE.main mb="4px">
                       <Trans>Unsupported Asset</Trans>
                     </TYPE.main>
                   </ButtonPrimary>
                 ) : !account ? (
-                  <ButtonLight onClick={toggleWalletModal} borderRadius="12px" padding={'12px'}>
+                  <ButtonLight onClick={toggleWalletModal} $borderRadius="12px" padding={'12px'}>
                     <Trans>Connect wallet</Trans>
                   </ButtonLight>
                 ) : (

diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx
@@ -215,7 +215,7 @@ export default function AddLiquidity({
   const modalHeader = () => {
     return noLiquidity ? (
       <AutoColumn gap="20px">
-        <LightCard mt="20px" borderRadius="20px">
+        <LightCard mt="20px" $borderRadius="20px">
           <RowFlat>
             <Text fontSize="48px" fontWeight={500} lineHeight="42px" marginRight={10}>
               {currencies[Field.CURRENCY_A]?.symbol + '/' + currencies[Field.CURRENCY_B]?.symbol}
@@ -398,7 +398,7 @@ export default function AddLiquidity({
             />
             {currencies[Field.CURRENCY_A] && currencies[Field.CURRENCY_B] && pairState !== PairState.INVALID && (
               <>
-                <LightCard padding="0px" borderRadius={'20px'}>
+                <LightCard padding="0px" $borderRadius={'20px'}>
                   <RowBetween padding="1rem">
                     <TYPE.subHeader fontWeight={500} fontSize={14}>
                       {noLiquidity ? (
@@ -408,7 +408,7 @@ export default function AddLiquidity({
                       )}
                     </TYPE.subHeader>
                   </RowBetween>{' '}
-                  <LightCard padding="1rem" borderRadius={'20px'}>
+                  <LightCard padding="1rem" $borderRadius={'20px'}>
                     <PoolPriceBar
                       currencies={currencies}
                       poolTokenPercentage={poolTokenPercentage}

diff --git a/src/pages/Earn/Manage.tsx b/src/pages/Earn/Manage.tsx
@@ -217,7 +217,7 @@ export default function Manage({
               </RowBetween>
               <ButtonPrimary
                 padding="8px"
-                borderRadius="8px"
+                $borderRadius="8px"
                 width={'fit-content'}
                 as={Link}
                 to={`/add/${currencyA && currencyId(currencyA)}/${currencyB && currencyId(currencyB)}`}
@@ -292,7 +292,7 @@ export default function Manage({
                 {stakingInfo?.earnedAmount && JSBI.notEqual(BIG_INT_ZERO, stakingInfo?.earnedAmount?.quotient) && (
                   <ButtonEmpty
                     padding="8px"
-                    borderRadius="8px"
+                    $borderRadius="8px"
                     width="fit-content"
                     onClick={() => setShowClaimRewardModal(true)}
                   >
@@ -340,7 +340,7 @@ export default function Manage({
         {!showAddLiquidityButton && (
           <DataRow style={{ marginBottom: '1rem' }}>
             {stakingInfo && stakingInfo.active && (
-              <ButtonPrimary padding="8px" borderRadius="8px" width="160px" onClick={handleDepositClick}>
+              <ButtonPrimary padding="8px" $borderRadius="8px" width="160px" onClick={handleDepositClick}>
                 {stakingInfo?.stakedAmount?.greaterThan(JSBI.BigInt(0)) ? (
                   <Trans>Deposit</Trans>
                 ) : (
@@ -353,7 +353,7 @@ export default function Manage({
               <>
                 <ButtonPrimary
                   padding="8px"
-                  borderRadius="8px"
+                  $borderRadius="8px"
                   width="160px"
                   onClick={() => setShowUnstakingModal(true)}
                 >

diff --git a/src/pages/MigrateV2/MigrateV2Pair.tsx b/src/pages/MigrateV2/MigrateV2Pair.tsx
@@ -544,7 +544,7 @@ function V2PairMigration({
           />
 
           {outOfRange ? (
-            <YellowCard padding="8px 12px" borderRadius="12px">
+            <YellowCard padding="8px 12px" $borderRadius="12px">
               <RowBetween>
                 <AlertTriangle stroke={theme.yellow3} size="16px" />
                 <TYPE.yellow ml="12px" fontSize="12px">
@@ -557,7 +557,7 @@ function V2PairMigration({
           ) : null}
 
           {invalidRange ? (
-            <YellowCard padding="8px 12px" borderRadius="12px">
+            <YellowCard padding="8px 12px" $borderRadius="12px">
               <RowBetween>
                 <AlertTriangle stroke={theme.yellow3} size="16px" />
                 <TYPE.yellow ml="12px" fontSize="12px">