feat: moved common styles to SimpleBuy component

packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/Content.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+const Content = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color: ${props => props.theme.grey800};
+  margin-left: 16px;
+  min-width: 336px;
+`
+
+export default Content

packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplayContainer.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+const DisplayContainer = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 16px 40px;
+  flex-direction: row;
+  cursor: pointer;
+  border-bottom: 1px solid ${props => props.theme.grey000};
+  &hover {
+    background-color: ${props => props.theme.grey100};
+  }
+`
+
+export default DisplayContainer

packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplayIcon.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+const DisplayIcon = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: 500;
+  max-width: 32px;
+  color: ${props => props.theme.grey800};
+`
+
+export default DisplayIcon

packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplayTitle.tsx

@@ -0,0 +1,14 @@
+import { Title } from 'components/Flyout'
+import styled from 'styled-components'
+
+const DisplayTitle = styled(Title)`
+  align-items: left;
+  font-weight: 600;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  color: ${props => props.theme.textBlack};
+  width: 100%;
+`
+
+export default DisplayTitle

packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/index.tsx

@@ -0,0 +1,6 @@
+import Content from './Content'
+import DisplayContainer from './DisplayContainer'
+import DisplayIcon from './DisplayIcon'
+import DisplayTitle from './DisplayTitle'
+
+export { DisplayIcon, DisplayContainer, Content, DisplayTitle }

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/Payment/index.tsx

@@ -2,7 +2,7 @@ import {
   CARD_TYPES,
   DEFAULT_CARD_SVG_LOGO
 } from 'components/Form/CreditCardBox/model'
-import { DisplayIcon } from 'blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index'
+import { DisplayIcon } from 'components/SimpleBuy'
 import { fiatToString } from 'core/exchange/currency'
 import { FiatType, SBPaymentMethodType } from 'core/types'
 import { FormattedMessage } from 'react-intl'
@@ -55,6 +55,10 @@ const DisplaySubTitle = styled(Title)`
   width: 100%;
 `
 
+const DisplayPaymentIcon = styled(DisplayIcon)`
+  justify-content: center;
+`
+
 const renderCardText = (value: SBPaymentMethodType): string => {
   return value.card
     ? value.card.label
@@ -126,7 +130,7 @@ const Payment: React.FC<Props> = props => (
   >
     {props.method && (
       <>
-        <DisplayIcon>{getIcon(props.method)}</DisplayIcon>
+        <DisplayPaymentIcon>{getIcon(props.method)}</DisplayPaymentIcon>
         <PaymentText>
           {props.method.type === 'USER_CARD'
             ? renderCard(props.method)

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/BankAccount/index.tsx

@@ -1,5 +1,9 @@
-import { Content, DisplayContainer, DisplayTitle } from '../index'
-import { DisplayIcon } from 'blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index'
+import {
+  Content,
+  DisplayContainer,
+  DisplayIcon,
+  DisplayTitle
+} from 'components/SimpleBuy'
 import { FormattedMessage } from 'react-intl'
 import { Icon } from 'blockchain-info-components'
 import { SBPaymentMethodType } from 'core/types'

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Card/index.tsx

@@ -1,5 +1,8 @@
-import { DisplayContainer, DisplayTitle } from '../index'
-import { DisplayIcon } from 'blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index'
+import {
+  DisplayContainer,
+  DisplayIcon,
+  DisplayTitle
+} from 'components/SimpleBuy'
 import { fiatToString } from 'core/exchange/currency'
 import { FiatType, SBPaymentMethodType } from 'core/types'
 import { FormattedMessage } from 'react-intl'

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Fund/index.tsx

@@ -1,5 +1,8 @@
-import { DisplayContainer, DisplayTitle } from '../index'
-import { DisplayIcon } from 'blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index'
+import {
+  DisplayContainer,
+  DisplayIcon,
+  DisplayTitle
+} from 'components/SimpleBuy'
 import { fiatToString } from 'core/exchange/currency'
 import { FiatType, SBPaymentMethodType } from 'core/types'
 import { Value } from 'components/Flyout'

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/PaymentCard/index.tsx

@@ -1,5 +1,9 @@
-import { Content, DisplayContainer, DisplayTitle } from '../index'
-import { DisplayIcon } from 'blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index'
+import {
+  Content,
+  DisplayContainer,
+  DisplayIcon,
+  DisplayTitle
+} from 'components/SimpleBuy'
 import { fiatToString } from 'core/exchange/currency'
 import { FiatType, SBPaymentMethodType } from 'core/types'
 import { FormattedMessage } from 'react-intl'

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx

@@ -2,7 +2,7 @@ import {
   CARD_TYPES,
   DEFAULT_CARD_SVG_LOGO
 } from 'components/Form/CreditCardBox/model'
-import { FlyoutWrapper, Title } from 'components/Flyout'
+import { FlyoutWrapper } from 'components/Flyout'
 import { Form, InjectedFormProps, reduxForm } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
 import { Icon, Text } from 'blockchain-info-components'
@@ -38,37 +38,6 @@ const IconContainer = styled.div`
   align-items: center;
   justify-content: center;
 `
-export const DisplayContainer = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 16px 40px;
-  flex-direction: row;
-  cursor: pointer;
-  border-bottom: 1px solid ${props => props.theme.grey000};
-  &hover {
-    background-color: ${props => props.theme.grey100};
-  }
-`
-export const Content = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  color: ${props => props.theme.grey800};
-  margin-left: 16px;
-  min-width: 336px;
-`
-
-export const DisplayTitle = styled(Title)`
-  align-items: left;
-  font-weight: 600;
-  font-size: 16px;
-  display: flex;
-  flex-direction: column;
-  color: ${props => props.theme.textBlack};
-  width: 100%;
-`
 
 export type Props = OwnProps & SuccessStateType
 

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx

@@ -22,20 +22,9 @@ import ModalEnhancer from 'providers/ModalEnhancer'
 import OrderSummary from './OrderSummary'
 import PaymentMethods from './PaymentMethods'
 import React, { PureComponent } from 'react'
-import styled from 'styled-components'
 import ThreeDSHandler from './ThreeDSHandler'
 import TransferDetails from './TransferDetails'
 
-export const DisplayIcon = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-size: 16px;
-  font-weight: 500;
-  max-width: 32px;
-  color: ${props => props.theme.grey800};
-`
-
 class SimpleBuy extends PureComponent<Props, State> {
   state: State = { show: false, direction: 'left' }