style(Swap): swap restyled

blockchain · Dec 13, 2018 · 314d261 · 314d261
1 parent 61833bf
commit 314d261
Show file tree

Hide file tree

Showing 16 changed files with 2,554 additions and 2,489 deletions.
diff --git a/packages/blockchain-info-components/src/Form/AutosizeTextInput.js b/packages/blockchain-info-components/src/Form/AutosizeTextInput.js
@@ -75,7 +75,6 @@ class TextInput extends React.Component {
   render () {
     const { errorState, disabled, ...rest } = this.props
     const borderColor = selectBorderColor(errorState)
-
     return (
       <BaseTextInput
         innerRef={this.refInput}

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Exchange/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Exchange/index.js
@@ -2,17 +2,18 @@ import styled from 'styled-components'
 import { Text, Button } from 'blockchain-info-components'
 
 export const Wrapper = styled.div`
-  padding: 30px;
+  padding: 32px;
   max-width: 440px;
   border: 1px solid ${props => props.theme['gray-1']}};
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
 `
 export const ExchangeText = styled(Text)`
   font-size: 14px;
-  line-height: 17px;
+  line-height: 20px;
   font-weight: 300;
 `
 export const Title = styled(Text)`
@@ -36,13 +37,14 @@ export const TableRow = styled.div`
   justify-content: space-between;
   width: 100%;
   margin-bottom: 16px;
+  height: 20px;
 `
 export const Note = styled(Text)`
   font-size: 12px;
   line-height: 14px;
   margin-top: 12px;
   margin-bottom: 28px;
-  font-weight: 200;
+  font-weight: 300;
 `
 export const ExchangeButton = styled(Button)`
   margin-left: 30px;
@@ -54,9 +56,8 @@ export const CancelButton = styled(ExchangeButton)`
   margin-top: 10px;
 `
 export const ExchangeAmount = styled(Text)`
-  font-weight: 200;
-  font-size: 20px;
-  line-height: 24px;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 20px;
   color: ${props => props.theme['brand-primary']};
-  margin-bottom: 24px;
 `
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/ResizeableFontInputHOC/index.js b/packages/blockchain-wallet-v4-frontend/src/components/ResizeableFontInputHOC/index.js
@@ -27,6 +27,10 @@ const getValueLength = value => {
  */
 export const ResizeableFontInputHOC = Component =>
   class ResizeableInput extends React.PureComponent {
+    static defaultProps = {
+      onUpdate: () => {}
+    }
+
     componentDidMount () {
       window.addEventListener('resize', this.resizeInputFont)
     }
@@ -62,7 +66,7 @@ export const ResizeableFontInputHOC = Component =>
       const input = this.selectInput()
       if (!input) return
 
-      const { maxFontSize } = this.props
+      const { maxFontSize, onUpdate } = this.props
       const fontSizeNumber = fontSizeToNumber(maxFontSize)
       let fontSizeRatio = calculateFontSizeRatio(
         input.offsetWidth,
@@ -72,6 +76,7 @@ export const ResizeableFontInputHOC = Component =>
       )
       if (fontSizeRatio > 1) fontSizeRatio = 1
       input.style.fontSize = `${fontSizeNumber * fontSizeRatio}px`
+      onUpdate(input, fontSizeRatio, fontSizeNumber)
     }
 
     updateValueLength = () => {

diff --git a/...t-v4-frontend/src/scenes/Exchange/ExchangeForm/ComplementaryAmount/ComplementaryAmount.js b/...t-v4-frontend/src/scenes/Exchange/ExchangeForm/ComplementaryAmount/ComplementaryAmount.js
@@ -5,8 +5,9 @@ import { connect } from 'react-redux'
 import { getData } from './selectors'
 import StringDisplay from 'components/Display/StringDisplay'
 
+import { setMinDecimals } from 'blockchain-wallet-v4/src/utils/bigNumber'
 const ComplementaryAmountContaier = styled.div`
-  font-weight: 200;
+  font-weight: 300;
   font-size: 20px;
   line-height: 24px;
   position: relative;
@@ -17,9 +18,9 @@ const ComplementaryAmountContaier = styled.div`
 `
 
 export const formatAmount = (isFiat, symbol, value) => {
-  if (!value) return ''
-
-  return isFiat ? `${symbol}${value}` : `${value} ${symbol}`
+  return isFiat
+    ? `${symbol}${setMinDecimals(value, 2)}`
+    : `${setMinDecimals(value, 2)} ${symbol}`
 }
 export class ComplementaryAmount extends React.PureComponent {
   render () {

diff --git a/...frontend/src/scenes/Exchange/ExchangeForm/ComplementaryAmount/ComplementaryAmount.spec.js b/...frontend/src/scenes/Exchange/ExchangeForm/ComplementaryAmount/ComplementaryAmount.spec.js
@@ -44,7 +44,7 @@ describe('Exchange RatesBox', () => {
         complementaryAmount={Remote.of(STUB_AMOUNT)}
       />
     )
-    expect(component.find('StringDisplayContainer').text()).toBe('$100')
+    expect(component.find('StringDisplayContainer').text()).toBe('$100.00')
   })
 
   it('should render crypto value correctly', () => {
@@ -55,6 +55,6 @@ describe('Exchange RatesBox', () => {
         complementaryAmount={Remote.of(STUB_AMOUNT)}
       />
     )
-    expect(component.find('StringDisplayContainer').text()).toBe('100 BTC')
+    expect(component.find('StringDisplayContainer').text()).toBe('100.00 BTC')
   })
 })
diff --git a/...hain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/CurrencySelect/CurrencySelect.js b/...hain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/CurrencySelect/CurrencySelect.js
@@ -11,10 +11,6 @@ import SelectBox from './SelectBox'
 import { Icon, TooltipHost } from 'blockchain-info-components'
 import { Cell, Row } from '../Layout'
 
-const SelectSourceRow = styled(Row)`
-  border-bottom: 1px solid ${props => props.theme['gray-1']};
-`
-
 const CoinSwapIcon = styled(Icon)`
   font-size: 18px;
   margin: 0 15px;
@@ -27,6 +23,10 @@ const CoinSwapIcon = styled(Icon)`
   }
 `
 
+const CurrencyRow = styled(Row)`
+  padding-top: 8px;
+`
+
 const extractFieldValue = (e, value) => value
 
 export class CurrencySelect extends React.Component {
@@ -37,7 +37,7 @@ export class CurrencySelect extends React.Component {
   render () {
     const { swapDisabled, fromElements, toElements, actions } = this.props
     return (
-      <SelectSourceRow height='50px' spaced>
+      <CurrencyRow height='50px' spaced>
         <Cell>
           <Field
             name='source'
@@ -74,7 +74,7 @@ export class CurrencySelect extends React.Component {
             elements={toElements}
           />
         </Cell>
-      </SelectSourceRow>
+      </CurrencyRow>
     )
   }
 }

diff --git a/.../src/scenes/Exchange/ExchangeForm/CurrencySelect/__snapshots__/CurrencySelct.spec.js.snap b/.../src/scenes/Exchange/ExchangeForm/CurrencySelect/__snapshots__/CurrencySelct.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Exchange CurrencySelct should render correctly 1`] = `
-<CurrencySelect__SelectSourceRow
+<CurrencySelect__CurrencyRow
   height="50px"
   spaced={true}
 >
@@ -71,5 +71,5 @@ exports[`Exchange CurrencySelct should render correctly 1`] = `
       onChange={[Function]}
     />
   </Layout__Cell>
-</CurrencySelect__SelectSourceRow>
+</CurrencySelect__CurrencyRow>
 `;
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Error/Error.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Error/Error.js
@@ -8,7 +8,7 @@ import { Row } from '../Layout'
 
 const ErrorRow = styled(Row)`
   justify-content: center;
-  min-height: 15px;
+  min-height: 16px;
   padding: 0px;
 `
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Layout/Layout.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/Layout/Layout.js
@@ -15,6 +15,6 @@ export const Row = styled.div`
   justify-content: space-between;
   box-sizing: border-box;
   align-items: center;
-  padding: 30px;
+  padding: 32px;
   width: 100%;
 `
diff --git a/...kchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/MinMaxButtons/MinMaxButtons.js b/...kchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/MinMaxButtons/MinMaxButtons.js
@@ -12,15 +12,22 @@ import { Button } from 'blockchain-info-components'
 export const MinMaxButton = styled(Button)`
   width: 48%;
   font-size: 10px;
+  height: 48px;
+  border-radius: 4px;
   justify-content: space-between;
+  border-color: ${props => props.theme['gray-2']};
   > * {
     color: ${props => props.theme['brand-primary']};
+    font-weight: 500;
   }
 `
 export const MinMaxValue = styled.div`
-  font-weight: 600;
+  font-weight: 500;
   font-size: 14px;
 `
+const MixMaxRow = styled(Row)`
+  padding-bottom: 0;
+`
 
 const formatAmount = (isFiat, symbol, value) =>
   isFiat ? `${symbol}${value}` : `${value} ${symbol}`
@@ -39,7 +46,7 @@ export class MinMaxButtons extends React.PureComponent {
     } = this.props
 
     return (
-      <Row>
+      <MixMaxRow>
         <MinMaxButton fullwidth disabled={disabled} onClick={actions.useMin}>
           <FormattedMessage
             id='scenes.exchange.exchangeform.min'
@@ -60,7 +67,7 @@ export class MinMaxButtons extends React.PureComponent {
             {!disabled && formatAmount(maxIsFiat, maxSymbol, maxAmount)}
           </MinMaxValue>
         </MinMaxButton>
-      </Row>
+      </MixMaxRow>
     )
   }
 }

diff --git a/...ockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/SubmitButton/SubmitButton.js b/...ockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/SubmitButton/SubmitButton.js
@@ -8,8 +8,13 @@ import { Row } from '../Layout'
 import { Button, HeartbeatLoader } from 'blockchain-info-components'
 
 const ButtonRow = styled(Row)`
-  border: 1px solid ${props => props.theme['gray-1']}};
-  border-top: none;
+  padding: 23px 32px;
+`
+const BigButton = styled(Button)`
+  height: 72px;
+  border-radius: 6px;
+  font-size: 17px;
+  font-weight: 400;
 `
 
 class SubmitButton extends React.PureComponent {
@@ -29,7 +34,7 @@ class SubmitButton extends React.PureComponent {
     } = this.props
     return (
       <ButtonRow>
-        <Button
+        <BigButton
           nature='primary'
           fullwidth
           onClick={handleSubmit}
@@ -57,7 +62,7 @@ class SubmitButton extends React.PureComponent {
           ) : (
             <HeartbeatLoader height='20px' width='20px' color='white' />
           )}
-        </Button>
+        </BigButton>
       </ButtonRow>
     )
   }