fix(sell): styling of coin selection

blockchain · Nov 27, 2020 · 6c83d97 · 6c83d97
1 parent ab1c060
commit 6c83d97
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/...ockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx b/...ockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx
@@ -150,6 +150,7 @@ const CryptoSelector: React.FC<InjectedFormProps<{}, Props> &
                     account={account}
                     coins={props.coins}
                     isAccountSelected={false}
+                    isSwap={false}
                     onClick={() => handleSell(account)}
                     walletCurrency={props.walletCurrency}
                   />

diff --git a/...blockchain-wallet-v4-frontend/src/modals/Swap/CoinSelection/CryptoAccountOption/index.tsx b/...blockchain-wallet-v4-frontend/src/modals/Swap/CoinSelection/CryptoAccountOption/index.tsx
@@ -15,7 +15,7 @@ import { SwapAccountType } from 'data/types'
 import CoinBalance from '../../components/CoinBalance'
 
 const CryptoAccountOption: React.FC<Props> = props => {
-  const { account, coins, isAccountSelected, walletCurrency } = props
+  const { account, coins, isAccountSelected, isSwap, walletCurrency } = props
   return (
     <Option role='button' data-e2e='changeAcct' onClick={props.onClick}>
       <FlexStartRow>
@@ -38,15 +38,19 @@ const CryptoAccountOption: React.FC<Props> = props => {
         {account.type === 'CUSTODIAL' && (
           <SuccessCartridge>Low Fees</SuccessCartridge>
         )}
-        {isAccountSelected ? (
-          <Icon
-            name='checkmark-circle-filled'
-            color='green600'
-            size='24px'
-            style={{ padding: '0 2px', marginLeft: '24px' }}
-          />
+        {isSwap ? (
+          isAccountSelected ? (
+            <Icon
+              name='checkmark-circle-filled'
+              color='green600'
+              size='24px'
+              style={{ padding: '0 2px', marginLeft: '24px' }}
+            />
+          ) : (
+            <CircleBorder />
+          )
         ) : (
-          <CircleBorder />
+          <Icon name='chevron-right' size='32px' color='grey400' />
         )}
       </FlexStartRow>
     </Option>
@@ -57,6 +61,7 @@ type Props = {
   account: SwapAccountType
   coins: SupportedWalletCurrenciesType
   isAccountSelected: boolean
+  isSwap: boolean
   onClick: () => void
   walletCurrency: FiatType
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Swap/CoinSelection/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Swap/CoinSelection/index.tsx
@@ -184,6 +184,7 @@ class CoinSelection extends PureComponent<Props> {
                   account={account}
                   coins={coins}
                   isAccountSelected={isAccountSelected}
+                  isSwap={true}
                   walletCurrency={walletCurrency}
                   onClick={() =>
                     this.props.swapActions.changePair(this.props.side, account)