feat(buy-sell): add coin plus/minus icon to enter amount flyout

blockchain · Aug 11, 2020 · 55d4c7e · 55d4c7e
1 parent d462933
commit 55d4c7e
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 3 deletions.
diff --git a/packages/blockchain-info-components/src/Colors/DarkMode.ts b/packages/blockchain-info-components/src/Colors/DarkMode.ts
@@ -71,6 +71,7 @@ const DarkTheme: DefaultTheme = {
   fiat: '#00B26B',
   'fiat-light': 'rgba(0, 178, 107, 0.15)',
   algo: '#000000',
+  'algo-light': '#DFE3EB',
   btc: '#FF9B22',
   'btc-light': '#FFF2E5',
   bch: '#8DC351',

diff --git a/packages/blockchain-info-components/src/Colors/Default.ts b/packages/blockchain-info-components/src/Colors/Default.ts
@@ -70,8 +70,9 @@ const Default = {
   fiat: '#00B26B',
   'fiat-light': 'rgba(0, 178, 107, 0.15)',
   algo: '#000000',
+  'algo-light': '#DFE3EB',
   btc: '#FF9B22',
-  'btc-light': 'rgba(255, 155, 34, 0.15)',
+  'btc-light': '#FFF2E5',
   bch: '#8DC351',
   'bch-light': 'rgba(141, 195, 81, 0.15)',
   eth: '#473BCB',
@@ -81,7 +82,7 @@ const Default = {
   'usd-d': '#00522C',
   'usd-d-light': 'rgba(0, 82, 44, 0.15)',
   xlm: '#121D33',
-  'xlm-light': 'rgba(0, 0, 0, 0.15)',
+  'xlm-light': '#DFE3EB',
   usdt: '#26A17B',
   'usdt-light': 'rgba(38, 161, 123, 0.15)',
   // OLD - AVOID USE \\

diff --git a/...llet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/index.tsx b/...llet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/index.tsx
@@ -31,6 +31,7 @@ const connector = connect(mapStateToProps, mapDispatchToProps)
 
 export type OwnProps = {
   coin: CoinType
+  cryptoSelection: boolean
   fiat: FiatType
   onClick?: (string) => void
   orderType: SBOrderActionType

diff --git a/...ntend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx b/...ntend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx
@@ -30,6 +30,20 @@ const DisplayTitle = styled(Title)`
   align-items: center;
   color: ${props => props.theme.grey800};
 `
+const IconBackground = styled.div<{ color: string }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
+  z-index: 100;
+  background: ${props => props.theme[props.color]};
+`
+const IconWrapper = styled.div`
+  position: absolute;
+  right: 20px;
+`
 
 type Props = OwnProps & ParentOwnProps & SuccessStateType
 
@@ -47,7 +61,7 @@ const Success: React.FC<Props> = props => {
       role='button'
       onClick={props.onClick}
     >
-      <Icon size='32px' color={color} name={icon} />
+      {props.cryptoSelection && <Icon size='32px' color={color} name={icon} />}
       <Display canClick={!!props.onClick}>
         <Value style={{ marginTop: '0px' }}>{displayName}</Value>
         <DisplayTitle>
@@ -66,6 +80,20 @@ const Success: React.FC<Props> = props => {
       {props.onClick && (
         <Icon name='chevron-right' size='32px' color='grey600' />
       )}
+      {!props.cryptoSelection && (
+        <>
+          <Icon size='32px' color={color} name={icon} />
+          <IconWrapper>
+            <IconBackground color={`${color}-light`}>
+              <Icon
+                name={props.orderType === 'BUY' ? 'plus' : 'minus'}
+                size='24px'
+                color={color}
+              />
+            </IconBackground>
+          </IconWrapper>
+        </>
+      )}
     </DisplayContainer>
   )
 }

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
@@ -120,6 +120,7 @@ const CryptoSelector: React.FC<InjectedFormProps<{}, Props> &
               orderType={orderType}
               fiat={getFiatFromPair(value.pair)}
               coin={getCoinFromPair(value.pair)}
+              cryptoSelection={true}
               onClick={() => handleSubmit(value as SBPairType)}
             />
           ))}

diff --git a/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx b/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx
@@ -242,6 +242,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
         </TopText>
       </FlyoutWrapper>
       <CryptoItem
+        cryptoSelection={false}
         fiat={props.fiatCurrency || 'USD'}
         coin={props.cryptoCurrency}
         orderType={props.orderType}