feat(sb): use cartridge comp

blockchain · Jul 26, 2020 · 43712d2 · 43712d2
1 parent c53fbaa
commit 43712d2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/...blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Card/index.tsx b/...blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Card/index.tsx
@@ -47,7 +47,7 @@ const Card: React.FC<Props> = ({ value, onClick, icon, text }) => (
     </MultiRowContainer>
     {value.card && (
       <DisplayCardDetails>
-        <Value asTitle>{value.card.number}</Value>
+        <Value asTitle>····{value.card.number}</Value>
         <Title asValue>
           <FormattedMessage
             id='modals.simplebuy.card_expire'

diff --git a/...ain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/PaymentCard/index.tsx b/...ain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/PaymentCard/index.tsx
@@ -8,6 +8,7 @@ import { fiatToString } from 'core/exchange/currency'
 import { FiatType, SBPaymentMethodType } from 'core/types'
 import { FormattedMessage } from 'react-intl'
 import { Icon } from 'blockchain-info-components'
+import { SuccessCartridge } from 'components/Cartridge'
 import { Title } from 'components/Flyout'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
@@ -20,15 +21,8 @@ const SubTitle = styled(Title)`
 const DisplayIconPayment = styled(DisplayIcon)`
   min-height: 110px;
 `
-
-const MostPopular = styled(Title)`
-  background: ${props => props.theme.green000};
-  border-radius: 8px;
-  color: ${props => props.theme.green500};
-  width: 114px;
-  text-align: center;
-  padding: 6px 12px;
-  font-weight: 600;
+const CartridgeContainer = styled.div`
+  width: auto;
   margin-top: 8px;
 `
 
@@ -66,12 +60,14 @@ const PaymentCard: React.FC<Props> = ({ value, onClick, icon, text }) => (
           defaultMessage='Instantly buy crypto with any Visa or Mastercard.'
         />
       </SubTitle>
-      <MostPopular>
-        <FormattedMessage
-          id='modals.simplebuy.most_popular'
-          defaultMessage='Most Popular'
-        />
-      </MostPopular>
+      <CartridgeContainer>
+        <SuccessCartridge>
+          <FormattedMessage
+            id='modals.simplebuy.most_popular'
+            defaultMessage='Most Popular'
+          />
+        </SuccessCartridge>
+      </CartridgeContainer>
     </Content>
     <Icon name='chevron-right' size='24px' color='grey400' />
   </DisplayContainer>

diff --git a/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx b/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx
@@ -122,7 +122,7 @@ const Success: React.FC<InjectedFormProps<
               <Child>
                 <CardDetails right>
                   <Text size='16px' color='grey800' weight={600}>
-                    ···· {card.card.number}
+                    ····{card.card.number}
                   </Text>
                   <Text size='14px' color='grey600' weight={500}>
                     Exp: {card.card.expireMonth}/{card.card.expireYear}