feat(Borrow): dropdown cleanup

packages/blockchain-info-components/src/Form/CreatableInput/template.js

@@ -12,10 +12,14 @@ const StyledCreatableSelect = styled(CreatableSelect)`
   font-size: ${props => (props.fontSize === 'small' ? '14px' : '16px')};
 
   .bc__menu {
+    border-radius: 4px;
+    box-shadow: initial;
+    border: 1px solid ${props => props.theme.grey100};
     background-color: ${props => props.theme.white};
   }
 
   .bc__menu-list {
+    border-radius: 4px;
     padding: 0;
   }
 

packages/blockchain-info-components/src/Form/SelectInput/template.js

@@ -11,10 +11,14 @@ const StyledSelect = styled(Select)`
   font-size: ${props => (props.fontSize === 'small' ? '14px' : '16px')};
 
   .bc__menu {
+    border-radius: 4px;
+    box-shadow: initial;
+    border: 1px solid ${props => props.theme.grey100};
     background-color: ${props => props.theme.white};
   }
 
   .bc__menu-list {
+    border-radius: 4px;
     padding: 0;
   }
 

packages/blockchain-wallet-v4-frontend/src/components/Form/FormLabel/__snapshots__/index.spec.js.snap

@@ -7,6 +7,7 @@ exports[`FormItem renders correctly 1`] = `
 
 <label
   className="c0"
+  htmlFor="comp"
 >
   <text
     color="gray-6"

packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/BorrowCoinDropdown/index.tsx

@@ -2,14 +2,16 @@ import {
   AccountTypes,
   CoinType,
   RemoteDataType,
-  SupportedCoinsType
+  SupportedCoinsType,
+  SupportedCoinType
 } from 'core/types'
 import { connect } from 'react-redux'
 import { Field } from 'redux-form'
 import { getData } from './selectors'
 import { Icon, Text } from 'blockchain-info-components'
 import { RatesType } from 'data/types'
 import { RootState } from 'data/rootReducer'
+
 import CoinDisplay from 'components/Display/CoinDisplay'
 import FiatDisplay from 'components/Display/FiatDisplay'
 import React, { Component } from 'react'
@@ -30,11 +32,18 @@ type LinkStatePropsType = {
 
 type Props = OwnProps & LinkStatePropsType
 
-const DisplayContainer = styled.div`
+const DisplayContainer = styled.div<{
+  coinType: SupportedCoinType
+  isItem: boolean
+}>`
   display: flex;
-  padding: 16px 12px;
   width: 100%;
   align-items: center;
+  box-sizing: border-box;
+  padding: ${props => (props.isItem ? '6px 6px 0px 6px' : '16px 12px')};
+  > span {
+    color: ${props => props.theme[props.coinType.colorCode]} !important;
+  }
 `
 
 const AccountContainer = styled.div`
@@ -43,6 +52,7 @@ const AccountContainer = styled.div`
   flex-direction: column;
   margin-left: 12px;
   width: 100%;
+  cursor: pointer;
   .bc__single-value {
     position: relative;
     top: 0;
@@ -83,17 +93,19 @@ export class BorrowCoinDropdown extends Component<Props> {
     const coinType = this.props.supportedCoins[props.value.coin]
     const icon = coinType.icons.circleFilled
     const color = coinType.colorCode
+    const isItem = !children
 
     return (
-      <DisplayContainer>
+      <DisplayContainer coinType={coinType} isItem={isItem}>
         <Icon size='32px' color={color} name={icon} />
         <AccountContainer>
-          {children}
+          {children || props.value.label}
           <AmountContainer>
             <CoinDisplay
               coin={props.value.coin}
               size='12px'
               weight={500}
+              cursor='pointer'
               color='grey800'
             >
               {props.value.balance}
@@ -107,6 +119,7 @@ export class BorrowCoinDropdown extends Component<Props> {
                 weight={500}
                 color='grey400'
                 currency='USD'
+                cursor='pointer'
                 rates={this.props.rates}
               >
                 {props.value.balance}
@@ -127,10 +140,10 @@ export class BorrowCoinDropdown extends Component<Props> {
             component={SelectBox}
             elements={this.renderElements(values)}
             templateDisplay={this.renderDisplay}
+            templateItem={this.renderDisplay}
             hideIndicator={values.length <= 1}
             openMenuOnClick={values.length > 1}
             searchEnabled={false}
-            includeAll={false}
             name='collateral'
           />
         )

packages/blockchain-wallet-v4/src/redux/walletOptions/types.ts

@@ -1,31 +1,33 @@
 import { CoinType } from '../../types'
 
-export type SupportedCoinsType = {
-  [key in CoinType]: {
-    availability: {
-      exchangeFrom: boolean
-      exchangeTo: boolean
-      lockbox: boolean
-      request: boolean
-      send: boolean
-      syncToPit: boolean
-    }
-    coinCode: string
-    coinTicker: string
-    colorCode: string
-    config: {
-      network: string
-    }
-    displayName: string
-    hasLockboxSupport: boolean
-    icons: {
-      circle: string
-      circleFilled: string
-      default: string
-    }
-    learnMoreLink: string
-    minConfirmations: number
-    txExplorerBaseUrl: string
-    txListAppRoute: string
+export type SupportedCoinType = {
+  availability: {
+    exchangeFrom: boolean
+    exchangeTo: boolean
+    lockbox: boolean
+    request: boolean
+    send: boolean
+    syncToPit: boolean
+  }
+  coinCode: string
+  coinTicker: string
+  colorCode: string
+  config: {
+    network: string
+  }
+  displayName: string
+  hasLockboxSupport: boolean
+  icons: {
+    circle: string
+    circleFilled: string
+    default: string
   }
+  learnMoreLink: string
+  minConfirmations: number
+  txExplorerBaseUrl: string
+  txListAppRoute: string
+}
+
+export type SupportedCoinsType = {
+  [key in CoinType]: SupportedCoinType
 }