fix - design glitches on exchange journey

blockchain · May 29, 2018 · 6b9bfb6 · 6b9bfb6
1 parent 5d57bc7
commit 6b9bfb6
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 68 deletions.
diff --git a/packages/blockchain-info-components/src/Form/CheckBoxInput.js b/packages/blockchain-info-components/src/Form/CheckBoxInput.js
@@ -40,8 +40,8 @@ const Label = styled.label`
   align-items: center;
   &:before {
     content: '';
-    min-width: 15px;
-    min-height: 15px;
+    min-width: 12px;
+    min-height: 12px;
     margin-right: 5px;
     background: white;
     border-radius: 2px;

diff --git a/packages/blockchain-info-components/src/Form/SelectInput/template.js b/packages/blockchain-info-components/src/Form/SelectInput/template.js
@@ -22,6 +22,7 @@ const Display = styled.button.attrs({ type: 'button' })`
   background-color: ${props => props.disabled ? props.theme['gray-1'] : props.theme['white']};
   cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   border-left: ${props => props.borderLeft === 'none' ? '0px' : ''};
+  text-align: left;
 
   &:focus { outline: none; }
 `

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/Step1/index.js b/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/Step1/index.js
@@ -50,7 +50,10 @@ const Step1 = props => (
       }
     </Circle>
     <Text size='13px' weight={500} capitalize>
-      <FormattedMessage id='components.exchangetimeline.funds' defaultMessage='Funds sent' />
+      { props.status === 'active'
+        ? <FormattedMessage id='components.exchangetimeline.sendingfunds' defaultMessage='Sending funds' />
+        : <FormattedMessage id='components.exchangetimeline.funds' defaultMessage='Funds sent' />
+      }
     </Text>
   </Wrapper>
 )

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/index.js b/packages/blockchain-wallet-v4-frontend/src/components/ExchangeTimeline/index.js
@@ -18,6 +18,7 @@ const Wrapper = styled.div`
   width: 100%;
   padding: 15px;
   box-sizing: border-box;
+  padding-bottom: 0;
 `
 const Row = styled.div`
   display: flex;

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/CountdownTimer/template.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/CountdownTimer/template.js
@@ -17,7 +17,7 @@ const Wrapper = styled.div`
 
 const CountdownTimer = (props) => (
   <Wrapper {...props}>
-    <Text size='12px' weight={300}>
+    <Text size='11px' weight={300}>
       <FormattedMessage id='scenes.exchange.secondstep.expiry' defaultMessage='Quote expires in: {timeLeft}' values={{ timeLeft: props.timeLeft }} />
     </Text>
     <Tooltip>

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/exchange/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/components/exchange/sagas.js
@@ -165,9 +165,10 @@ export default ({ api, coreSagas }) => {
       } else {
         yield put(A.firstStepFormValidated())
       }
-      yield put(A.firstStepEnabled())
     } catch (e) {
       yield put(actions.logs.logErrorMessage(logLocation, 'validateForm', e))
+    } finally {
+      yield put(A.firstStepEnabled())
     }
   }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/ExchangeDetails/template.success.js b/packages/blockchain-wallet-v4-frontend/src/modals/ExchangeDetails/template.success.js
@@ -121,7 +121,7 @@ const ExchangeDetails = props => {
             </TableCell>
             <TableCell>
               <Text size='13px' weight={300} uppercase>
-                {`${minerFee} ${sourceCoin}`}
+                {`${minerFee} ${targetCoin}`}
               </Text>
             </TableCell>
           </TableRow>

diff --git a/...blockchain-wallet-v4-frontend/src/scenes/Exchange/Shapeshift/FirstStep/SelectBox/index.js b/...blockchain-wallet-v4-frontend/src/scenes/Exchange/Shapeshift/FirstStep/SelectBox/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { path, prop } from 'ramda'
 
-import { Icon, Separator, Text } from 'blockchain-info-components'
+import { Icon, Separator } from 'blockchain-info-components'
 import { SelectBox } from 'components/Form'
 
 const DisplayWrapper = styled.div`
@@ -15,10 +15,9 @@ const DisplayWrapper = styled.div`
   padding: 5px;
   box-sizing: border-box;
   cursor: pointer;
-  text-overflow: ellipsis;
-
-  & > * { margin-left: 5px; }
+  min-width: 0;
 `
+
 const HeaderWrapper = styled.div`
   display: flex;
   flex-direction: row;
@@ -29,10 +28,7 @@ const HeaderWrapper = styled.div`
   padding: 5px;
   box-sizing: border-box;
   cursor: not-allowed;
-  text-overflow: ellipsis;
-
-  & > * { margin-left: 5px; }
-  & > :first-child { margin-right: 5px; }
+  min-width: 0;
 `
 const ItemWrapper = styled.div`
   display: flex;
@@ -44,20 +40,35 @@ const ItemWrapper = styled.div`
   padding: 5px;
   box-sizing: border-box;
   cursor: pointer;
-  text-overflow: ellipsis;
+  min-width: 0;
 
-  & > * { margin-left: 5px; }
   &:hover {
     color: ${props => props.theme['gray-4']};
     background-color: ${props => props.theme['gray-1']};
   }
 `
+const Text = styled.span`
+  position: relative;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 300;
+  font-size: 14px;
+  text-transform: ${props => props.uppercase ? 'uppercase' : 'none'};
+  font-style: normal;
+  color: ${props => props.theme['gray-5']};
+  cursor: pointer;
+  width: 100%;
+  padding-left: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
 const renderDisplay = item => (
   <DisplayWrapper>
     {prop('value', item) === 'BCH' && <Icon name='bitcoin-cash' size='14px' weight={300} />}
     {prop('value', item) === 'BTC' && <Icon name='bitcoin' size='14px' weight={300} />}
     {prop('value', item) === 'ETH' && <Icon name='ethereum' size='14px' weight={300} />}
-    <Text size='14px' weight={300}>{item.text}</Text>
+    <Text>{item.text}</Text>
   </DisplayWrapper>
 )
 const renderHeader = item => (
@@ -66,13 +77,13 @@ const renderHeader = item => (
     {prop('text', item) === 'Bitcoin cash' && <Icon name='bitcoin-cash' size='14px' weight={300} />}
     {prop('text', item) === 'Ether' && <Icon name='ethereum-filled' size='14px' weight={300} />}
     <Separator align='right'>
-      <Text size='14px' weight={300} uppercase>{item.text}</Text>
+      <Text uppercase>{item.text}</Text>
     </Separator>
   </HeaderWrapper>
 )
 const renderItem = item => (
   <ItemWrapper>
-    <Text size='14px' weight={300}>{item.text}</Text>
+    <Text>{item.text}</Text>
   </ItemWrapper>
 )
 
@@ -81,7 +92,7 @@ const renderItemWithIcon = item => (
     {path(['value', 'coin'], item) === 'BCH' && <Icon name='bitcoin-cash' size='14px' weight={300} />}
     {path(['value', 'coin'], item) === 'BTC' && <Icon name='bitcoin' size='14px' weight={300} />}
     {path(['value', 'coin'], item) === 'ETH' && <Icon name='ethereum' size='14px' weight={300} />}
-    <Text size='14px' weight={300}>{item.text}</Text>
+    <Text>{item.text}</Text>
   </ItemWrapper>
 )
 

diff --git a/...ockchain-wallet-v4-frontend/src/scenes/Exchange/Shapeshift/SecondStep/template.success.js b/...ockchain-wallet-v4-frontend/src/scenes/Exchange/Shapeshift/SecondStep/template.success.js
@@ -15,10 +15,31 @@ const Wrapper = styled.div`
   justify-content: flex-start;
   align-items: flex-start;
   width: 100%;
-  padding: 20px 30px 10px 30px;
-  box-sizing: border-box;
   border: 1px solid ${props => props.theme['gray-2']};
 `
+const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 20px 30px 20px 30px;
+  border-bottom: 1px solid ${props => props.theme['gray-2']};
+  box-sizing: border-box;
+`
+const Container = styled.div`
+  padding: 20px 30px 20px 30px;
+  box-sizing: border-box;
+`
+const Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 10px;
+
+  & > :first-child { margin-right: 20px; }
+`
 const Row = styled.div`
   display: flex;
   flex-direction: row;
@@ -27,17 +48,19 @@ const Row = styled.div`
   width: 100%;
   height: ${props => props.height || 'auto'};
   margin-bottom: ${props => props.spaced ? '20px' : '5px'};
-
-  > :first-child { margin-right: 20px; }
 `
 const Table = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   padding: 0 10px;
   box-sizing: border-box;
   border: 1px solid ${props => props.theme['gray-2']};
   background-color: ${props => props.theme['white-blue']};
   & > :last-child { border-bottom: none; }
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 `
 const TableRow = styled.div`
   display: flex;
@@ -48,8 +71,6 @@ const TableRow = styled.div`
   padding: 8px 0;
   box-sizing: border-box;
   border-bottom: 1px solid ${props => props.theme['gray-2']};
-
-  > :first-child { margin-right: 5px; }
 `
 const TableCell = styled.div`
   display: flex;
@@ -65,29 +86,29 @@ const Success = props => {
 
   return (
     <Wrapper>
-      <Form onSubmit={handleSubmit}>
-        <Row justify='space-between'>
-          <Text size='14px'>
-            <FormattedMessage id='scenes.exchange.shapeshift.secondstep.title' defaultMessage='Confirm Exchange Order' />
-          </Text>
-          <Text size='12px' weight={300}>
-            <FormattedMessage id='scenes.exchange.shapeshift.secondstep.stepnumber' defaultMessage='Step 2 of 2' />
-          </Text>
-        </Row>
-        <Row>
-          <TextGroup inline>
-            <Text size='13px' weight={300}>
-              <FormattedMessage id='scenes.exchange.shapeshift.secondstep.recap' defaultMessage="Review the details below and click 'Confirm' to begin your exchange." />
-            </Text>
-            <Text size='13px' weight={300}>
-              <FormattedMessage id='scenes.exchange.shapeshift.secondstep.recap2' defaultMessage='The exchanged funds will be deposited directly into {depositLabel}.' values={{ depositLabel: targetLabel }} />
-            </Text>
-          </TextGroup>
-        </Row>
-        <Row align='right'>
-          <CountdownTimer expiryDate={expiration} tooltipExpiryTime='10 minutes' handleExpiry={handleExpiry} />
-        </Row>
-        <Row>
+      <Header justify='space-between'>
+        <Text size='14px'>
+          <FormattedMessage id='scenes.exchange.shapeshift.secondstep.title' defaultMessage='Confirm Exchange Order' />
+        </Text>
+        <Text size='12px' weight={300}>
+          <FormattedMessage id='scenes.exchange.shapeshift.secondstep.stepnumber' defaultMessage='Step 2 of 2' />
+        </Text>
+      </Header>
+      <Container>
+        <Form onSubmit={handleSubmit}>
+          <Row>
+            <TextGroup inline>
+              <Text size='13px' weight={300}>
+                <FormattedMessage id='scenes.exchange.shapeshift.secondstep.recap' defaultMessage="Review the details below and click 'Confirm' to begin your exchange." />
+              </Text>
+              <Text size='13px' weight={300}>
+                <FormattedMessage id='scenes.exchange.shapeshift.secondstep.recap2' defaultMessage='The exchanged funds will be deposited directly into {depositLabel}.' values={{ depositLabel: targetLabel }} />
+              </Text>
+            </TextGroup>
+          </Row>
+          <Row align='right'>
+            <CountdownTimer expiryDate={expiration} tooltipExpiryTime='10 minutes' handleExpiry={handleExpiry} />
+          </Row>
           <Table>
             <TableRow>
               <TableCell>
@@ -159,23 +180,23 @@ const Success = props => {
               </TableCell>
             </TableRow>
           </Table>
-        </Row>
-        <Row>
-          <Field name='terms' validate={[checkboxShouldBeChecked]} component={CheckBox}>
-            <Text size='12px' weight={300}>
-              <Terms company='shapeshift' />
-            </Text>
-          </Field>
-        </Row>
-        <Row justify='flex-end'>
-          <Link size='13px' weight={300} onClick={handleCancel}>
-            <FormattedMessage id='scenes.exchange.shapeshift.secondstep.back' defaultMessage='Cancel' />
-          </Link>
-          <Button type='submit' nature='primary' disabled={submitting || invalid}>
-            <FormattedMessage id='scenes.exchange.shapeshift.secondstep.finish' defaultMessage='Confirm' />
-          </Button>
-        </Row>
-      </Form>
+          <Row>
+            <Field name='terms' validate={[checkboxShouldBeChecked]} component={CheckBox}>
+              <Text size='12px' weight={300}>
+                <Terms company='shapeshift' />
+              </Text>
+            </Field>
+          </Row>
+          <Footer>
+            <Link size='13px' weight={300} onClick={handleCancel}>
+              <FormattedMessage id='scenes.exchange.shapeshift.secondstep.back' defaultMessage='Cancel' />
+            </Link>
+            <Button type='submit' nature='primary' disabled={submitting || invalid}>
+              <FormattedMessage id='scenes.exchange.shapeshift.secondstep.finish' defaultMessage='Confirm' />
+            </Button>
+          </Footer>
+        </Form>
+      </Container>
     </Wrapper>
   )
 }

diff --git a/...lockchain-wallet-v4-frontend/src/scenes/Exchange/Shapeshift/ThirdStep/template.success.js b/...lockchain-wallet-v4-frontend/src/scenes/Exchange/Shapeshift/ThirdStep/template.success.js
@@ -166,7 +166,7 @@ const Success = props => {
               </TableCell>
               <TableCell>
                 <Text size='13px' weight={300} uppercase>
-                  {transactionFee}
+                  {`${transactionFee} ${targetCoin}`}
                 </Text>
               </TableCell>
             </TableRow>