fix(misc ui improvements)

blockchain · May 31, 2018 · 75a8c62 · 75a8c62
1 parent ef75ede
commit 75a8c62
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 108 deletions.
diff --git a/packages/blockchain-info-components/src/Buttons/Button.js b/packages/blockchain-info-components/src/Buttons/Button.js
@@ -51,6 +51,7 @@ const selectColor = (nature, disabled) => {
 
   switch (nature) {
     case 'empty': return { color: 'gray-6', backgroundColor: 'white', borderColor: 'gray-2' }
+    case 'light': return { color: 'brand-secondary', backgroundColor: 'white', borderColor: 'brand-secondary' }
     case 'primary': return { color: 'white', backgroundColor: 'brand-secondary', borderColor: 'brand-secondary' }
     case 'secondary': return { color: 'white', backgroundColor: 'brand-primary', borderColor: 'brand-primary' }
     case 'copy': return { color: 'white', backgroundColor: 'success', borderColor: 'success' }
@@ -81,7 +82,7 @@ const Button = (props) => {
 }
 
 Button.propTypes = {
-  nature: PropTypes.oneOf(['empty', 'primary', 'secondary', 'copy', 'received', 'sent', 'transferred', 'logout', 'dark', 'empty-secondary']),
+  nature: PropTypes.oneOf(['empty', 'light', 'primary', 'secondary', 'copy', 'received', 'sent', 'transferred', 'logout', 'dark', 'empty-secondary']),
   fullwidth: PropTypes.bool,
   disabled: PropTypes.bool,
   rounded: PropTypes.bool,

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/BuySell/Signup/index.js b/packages/blockchain-wallet-v4-frontend/src/components/BuySell/Signup/index.js
@@ -30,7 +30,7 @@ export const Info = styled.div`
 `
 
 export const InputWrapper = styled.div`
-  width: 90%;
+  width: 100%;
 `
 
 export const PartnerHeader = styled.div`
@@ -95,3 +95,8 @@ export const CancelWrapper = styled.div`
     font-size: 14px;
   }
 `
+
+export const BorderBox = styled.div`
+  border: 1px solid ${props => props.theme['gray-1']};
+  padding: 30px;
+`
diff --git a/...s/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderReview.js b/...s/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderReview.js
@@ -9,7 +9,7 @@ import { spacing } from 'services/StyleService'
 import { reviewOrder, currencySymbolMap } from 'services/CoinifyService'
 import { FormattedMessage } from 'react-intl'
 import { OrderDetailsTable, OrderDetailsRow } from 'components/BuySell/OrderDetails'
-import { CancelWrapper } from 'components/BuySell/Signup'
+import { BorderBox, CancelWrapper, Row } from 'components/BuySell/Signup'
 import { StepTransition } from 'components/Utilities/Stepper'
 
 const ExchangeRateWrapper = styled.div`
@@ -30,56 +30,58 @@ const renderRate = (rate, q) => {
 }
 
 export const OrderDetails = ({ quoteR, onRefreshQuote, type, medium }) => (
-  <ExchangeCheckoutWrapper>
-    <Text size='32px' weight={600} style={spacing('mb-10')}>
-      <FormattedMessage id='buy.almost_there' defaultMessage="You're almost there" />
-    </Text>
-    <Text size='14px' weight={300} style={spacing('mb-20')}>
-      <FormattedMessage id='buy.review_order_subtext'
-        defaultMessage='Before we can start processing your order, review the order details below. If everything looks good to you, click submit to complete your order.' />
-    </Text>
-    <ExchangeRateWrapper>
-      <Text size='12px' weight={500} style={spacing('mr-10')}>
-        <FormattedMessage id='exchange_rate' defaultMessage='Exchange Rate' />
+  <Row>
+    <BorderBox>
+      <Text size='32px' weight={600} style={spacing('mb-10')}>
+        <FormattedMessage id='buy.almost_there' defaultMessage="You're almost there" />
       </Text>
-      <Text size='12px' weight={300}>
-        1 BTC = {quoteR.map((q) => {
-          const rate = +((1 / (Math.abs(q.quoteAmount) / 1e8)) * Math.abs(q.baseAmount)).toFixed(2)
-          return renderRate(rate, q)
-        }).getOrElse('~')}
+      <Text size='14px' weight={300} style={spacing('mb-20')}>
+        <FormattedMessage id='buy.review_order_subtext'
+          defaultMessage='Before we can start processing your order, review the order details below. If everything looks good to you, click submit to complete your order.' />
       </Text>
-    </ExchangeRateWrapper>
-    <OrderDetailsTable style={spacing('mt-10')}>
-      <OrderDetailsRow>
-        {
-          type === 'buy'
-            ? <Text size='13px' weight={300}><FormattedMessage id='orderdetails.amounttopurchase' defaultMessage='BTC Amount to Purchase' /></Text>
-            : <Text size='13px' weight={300}><FormattedMessage id='orderdetails.amounttosell' defaultMessage='BTC Amount to Sell' /></Text>
-        }
-        <Text size='13px' weight={300}>{quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.firstRow}</Text>
-      </OrderDetailsRow>
-      <OrderDetailsRow>
-        <Text size='13px' weight={300}><FormattedMessage id='orderdetails.tradingfee' defaultMessage='Trading Fee' /></Text>
-        <Text size='13px' weight={300}>{quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.fee}</Text>
-      </OrderDetailsRow>
-      <OrderDetailsRow>
-        {
-          type === 'buy'
-            ? <Text size='13px' weight={300}><FormattedMessage id='orderdetails.totalcost' defaultMessage='Total Cost' /></Text>
-            : <Text size='13px' weight={300}><FormattedMessage id='orderdetails.totaltobereceived' defaultMessage='Total to be Received' /></Text>
-        }
-        <Text size='13px' weight={300} color='success'>{quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.total}</Text>
-      </OrderDetailsRow>
-    </OrderDetailsTable>
-    {quoteR.map((q) => (
-      <CountdownTimer
-        style={spacing('mt-20')}
-        expiryDate={q.expiresAt.getTime()}
-        handleExpiry={onRefreshQuote}
-        tooltipExpiryTime='15 minutes'
-      />
-    )).getOrElse(null)}
-  </ExchangeCheckoutWrapper>
+      <ExchangeRateWrapper>
+        <Text size='12px' weight={500} style={spacing('mr-10')}>
+          <FormattedMessage id='exchange_rate' defaultMessage='Exchange Rate' />
+        </Text>
+        <Text size='12px' weight={300}>
+          1 BTC = {quoteR.map((q) => {
+            const rate = +((1 / (Math.abs(q.quoteAmount) / 1e8)) * Math.abs(q.baseAmount)).toFixed(2)
+            return renderRate(rate, q)
+          }).getOrElse('~')}
+        </Text>
+      </ExchangeRateWrapper>
+      <OrderDetailsTable style={spacing('mt-10')}>
+        <OrderDetailsRow>
+          {
+            type === 'buy'
+              ? <Text size='13px' weight={300}><FormattedMessage id='orderdetails.amounttopurchase' defaultMessage='BTC Amount to Purchase' /></Text>
+              : <Text size='13px' weight={300}><FormattedMessage id='orderdetails.amounttosell' defaultMessage='BTC Amount to Sell' /></Text>
+          }
+          <Text size='13px' weight={300}>{quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.firstRow}</Text>
+        </OrderDetailsRow>
+        <OrderDetailsRow>
+          <Text size='13px' weight={300}><FormattedMessage id='orderdetails.tradingfee' defaultMessage='Trading Fee' /></Text>
+          <Text size='13px' weight={300}>{quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.fee}</Text>
+        </OrderDetailsRow>
+        <OrderDetailsRow>
+          {
+            type === 'buy'
+              ? <Text size='13px' weight={300}><FormattedMessage id='orderdetails.totalcost' defaultMessage='Total Cost' /></Text>
+              : <Text size='13px' weight={300}><FormattedMessage id='orderdetails.totaltobereceived' defaultMessage='Total to be Received' /></Text>
+          }
+          <Text size='13px' weight={300} color='success'>{quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.total}</Text>
+        </OrderDetailsRow>
+      </OrderDetailsTable>
+      {quoteR.map((q) => (
+        <CountdownTimer
+          style={spacing('mt-20')}
+          expiryDate={q.expiresAt.getTime()}
+          handleExpiry={onRefreshQuote}
+          tooltipExpiryTime='15 minutes'
+        />
+      )).getOrElse(null)}
+    </BorderBox>
+  </Row>
 )
 
 export const OrderSubmit = ({ quoteR, onSubmit, busy, clearTradeError, goToStep }) => (

diff --git a/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/index.js b/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/index.js
@@ -8,6 +8,7 @@ import AddBankDetails from './template.js'
 class AddBankDetailsContainer extends React.PureComponent {
   render () {
     const { data } = this.props
+    console.log(data)
     return data.cata({
       Success: (value) => <AddBankDetails quote={value} />,
       Loading: <Loading />,

diff --git a/...et-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/template.js b/...et-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/template.js
@@ -2,13 +2,13 @@ import React from 'react'
 import { reduxForm, Field } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
-import { equals, prop } from 'ramda'
+import { any, equals, prop } from 'ramda'
 
 import { Button, Link, Text } from 'blockchain-info-components'
 import { required, validIban, validBIC } from 'services/FormHelper'
 import { spacing } from 'services/StyleService'
 import { StepTransition } from 'components/Utilities/Stepper'
-import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner } from 'components/BuySell/Signup'
+import { BorderBox, Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner } from 'components/BuySell/Signup'
 import { TextBox } from 'components/Form'
 
 const CancelWrapper = styled.div`
@@ -22,18 +22,17 @@ const CancelWrapper = styled.div`
     font-size: 14px;
   }
 `
-const BorderBox = styled.div`
-  border: 1px solid ${props => props.theme['gray-1']};
-  padding: 30px;
-`
 const FieldText = styled(Text)`
   padding-bottom: 10px;
   padding-top: 20px;
 `
+const FieldWrapper = styled.div`
+  width: 100%;
+`
 
 const AddBankDetails = (props) => {
   const { invalid, submitting, quote } = props
-  const currency = prop('baseCurrency', quote)
+  const isCurrencyDKK = any(equals('DKK'))([prop('baseCurrency', quote), prop('quoteCurrency', quote)])
 
   return (
     <Form>
@@ -47,8 +46,8 @@ const AddBankDetails = (props) => {
               <FormattedMessage id='coinifyexchangedata.addbankdetails.subheader' defaultMessage='Please enter your bank information below.' />
             </PartnerSubHeader>
             {
-              equals(currency, 'DKK')
-                ? <div>
+              isCurrencyDKK
+                ? <FieldWrapper>
                   <FieldText weight={300} size='12px'>
                     <FormattedMessage id='coinifyexchangedata.addbankdetails.accountno' defaultMessage='Account Number' />
                   </FieldText>
@@ -57,8 +56,8 @@ const AddBankDetails = (props) => {
                     <FormattedMessage id='coinifyexchangedata.addbankdetails.reg' defaultMessage='REG Number' />
                   </FieldText>
                   <Field name='bic' validate={[required]} component={TextBox} />
-                </div>
-                : <div>
+                </FieldWrapper>
+                : <FieldWrapper>
                   <FieldText weight={300} size='12px'>
                     <FormattedMessage id='coinifyexchangedata.addbankdetails.iban' defaultMessage='International Bank Account (IBAN)' />
                   </FieldText>
@@ -67,7 +66,7 @@ const AddBankDetails = (props) => {
                     <FormattedMessage id='coinifyexchangedata.addbankdetails.bic' defaultMessage='Bank Identifier Code (BIC)' />
                   </FieldText>
                   <Field name='bic' validate={[required, validBIC]} component={TextBox} />
-                </div>
+                </FieldWrapper>
             }
             <Text weight={300} size='12px'>
               <FormattedMessage id='coinifyexchangedata.addbankdetails.incomplete' defaultMessage='Note: Incomplete or incorrect details will cause processing delays.' />

diff --git a/...nd/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddCustomerDetails/template.success.js b/...nd/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddCustomerDetails/template.success.js
@@ -7,21 +7,22 @@ import { Button, Link, Text } from 'blockchain-info-components'
 import { required } from 'services/FormHelper'
 import { spacing } from 'services/StyleService'
 import { StepTransition } from 'components/Utilities/Stepper'
-import { Form, CancelWrapper, ColLeft, ColLeftInner, ColRight, ColRightInner, InputWrapper, PartnerHeader, PartnerSubHeader, Row } from 'components/BuySell/Signup'
+import { BorderBox, Form, CancelWrapper, ColLeft, ColRight, ColRightInner, InputWrapper, PartnerHeader, PartnerSubHeader, Row } from 'components/BuySell/Signup'
 import { SelectBoxCountry, TextBox } from 'components/Form'
 
-const BorderBox = styled.div`
-  border: 1px solid ${props => props.theme['gray-1']};
-  padding: 30px;
-`
-const SpaceRow = styled(Row)`
+const SpaceRow = styled.div`
   width: 100%;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 55% 35%;
+  grid-gap: 10%;
 `
 const FieldText = styled(Text)`
   padding-bottom: 10px;
   padding-top: 20px;
 `
+const Col = styled.div`
+  width: 100%;
+`
 
 const AddBankDetails = (props) => {
   const { invalid, submitting, onSubmit, medium, account } = props
@@ -45,18 +46,18 @@ const AddBankDetails = (props) => {
             </FieldText>
             <Field name='street' validate={[required]} component={TextBox} />
             <SpaceRow>
-              <ColLeftInner>
+              <Col>
                 <FieldText weight={300} size='12px'>
                   <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='City' />
                 </FieldText>
                 <Field name='city' validate={[required]} component={TextBox} />
-              </ColLeftInner>
-              <ColRightInner>
+              </Col>
+              <Col>
                 <FieldText weight={300} size='12px'>
                   <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='Postal Code' />
                 </FieldText>
                 <Field name='postcode' validate={[required]} component={TextBox} />
-              </ColRightInner>
+              </Col>
             </SpaceRow>
             <FieldText weight={300} size='12px'>
               <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='Country' />

diff --git a/...ontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/template.success.js b/...ontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/template.success.js
@@ -8,16 +8,12 @@ import { Button, Icon, Link, Text } from 'blockchain-info-components'
 import { spacing } from 'services/StyleService'
 import { RadioButton } from 'components/Form'
 import { StepTransition } from 'components/Utilities/Stepper'
-import { Form, CancelWrapper, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner, Row } from 'components/BuySell/Signup'
+import { BorderBox, Form, CancelWrapper, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner, Row } from 'components/BuySell/Signup'
 
-const AccountRow = styled(Row)`
+const RowContent = styled(Row)`
+  padding-left: 10px;
   justify-content: space-between;
 `
-
-const BorderBox = styled.div`
-  border: 1px solid ${props => props.theme['gray-1']};
-  padding: 30px;
-`
 const ClickableIcon = styled(Icon)`
   cursor: pointer;
 `
@@ -39,13 +35,15 @@ const SelectAccounts = (props) => {
             </PartnerSubHeader>
           </InputWrapper>
           {bankAccounts && bankAccounts.map((b, index) =>
-            <AccountRow key={index}>
+            <Row key={index}>
               <Field name='iban' component={RadioButton} props={{ id: `iban${index}`, value: index }} />
-              <Text weight={300}>{path(['_account', '_number'], b)}</Text>
-              <ClickableIcon name='trash' onClick={() => deleteBankAccount(b)} />
-            </AccountRow>
+              <RowContent>
+                <Text weight={300}>{path(['_account', '_number'], b)}</Text>
+                <ClickableIcon name='trash' onClick={() => deleteBankAccount(b)} />
+              </RowContent>
+            </Row>
           )}
-          <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={submitting || invalid}>
+          <StepTransition next Component={Button} style={spacing('mt-45')} nature='light' fullwidth disabled={submitting || invalid}>
             <FormattedMessage id='coinifyexchangedata.selectaccounts.continue' defaultMessage='Add new account' />
           </StepTransition>
         </BorderBox>

diff --git a/...in-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/template.success.js b/...in-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/template.success.js
@@ -11,22 +11,13 @@ import AddCustomerDetails from './AddCustomerDetails'
 import SelectAccounts from './SelectAccounts'
 import ISignThis from 'modals/CoinifyExchangeData/ISignThis'
 import KYCNotification from '../KYCNotification'
+import { ColLeft, ColRight, ColRightInner, Row } from 'components/BuySell/Signup'
 
 const CheckoutWrapper = styled.div`
   display: grid;
   grid-template-columns: 55% 35%;
   grid-gap: 10%;
 `
-const OrderSubmitWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 35%;
-  padding: 30px 30px 30px 10%;
-`
-const FlexRow = styled.div`
-  display: flex;
-  flex-direction: row;
-`
 
 const Sell = props => {
   const {
@@ -99,24 +90,26 @@ const Sell = props => {
           <AddCustomerDetails />
         </StepView>
         <StepView step={4}>
-          <FlexRow>
-            <CheckoutWrapper>
+          <Row>
+            <ColLeft>
               <OrderDetails
                 quoteR={sellQuoteR}
                 onRefreshQuote={refreshQuote}
                 type={'sell'}
                 medium={paymentMedium}
               />
-            </CheckoutWrapper>
-            <OrderSubmitWrapper>
-              <OrderSubmit
-                quoteR={sellQuoteR}
-                onSubmit={initiateSell}
-                busy={busy}
-                clearTradeError={clearTradeError}
-              />
-            </OrderSubmitWrapper>
-          </FlexRow>
+            </ColLeft>
+            <ColRight>
+              <ColRightInner>
+                <OrderSubmit
+                  quoteR={sellQuoteR}
+                  onSubmit={initiateSell}
+                  busy={busy}
+                  clearTradeError={clearTradeError}
+                />
+              </ColRightInner>
+            </ColRight>
+          </Row>
         </StepView>
       </Stepper>
     )