Merge pull request #218 from meriadec/master

Update send, receive and account settings modals

src/components/Breadcrumb/index.js

@@ -23,9 +23,9 @@ const Wrapper = styled(Box).attrs({
 
 class Breadcrumb extends PureComponent<Props> {
   render() {
-    const { items, currentStep } = this.props
+    const { items, currentStep, ...props } = this.props
     return (
-      <Wrapper>
+      <Wrapper {...props}>
         {items.map((item, i) => (
           <Step key={i} isActive={i < parseInt(currentStep, 10)} isFirst={i === 0} number={i + 1}>
             {item.label}

src/components/base/Label.js

@@ -1,11 +1,15 @@
 import styled from 'styled-components'
-import { fontSize } from 'styled-system'
+import { fontSize, color } from 'styled-system'
+
+import fontFamily from 'styles/styled/fontFamily'
 
 export default styled.label.attrs({
   fontSize: 3,
+  ff: 'Museo Sans|Regular',
+  color: 'grey',
 })`
+  ${color};
   ${fontSize};
+  ${fontFamily};
   display: block;
-  text-transform: uppercase;
-  letter-spacing: 1px;
 `

src/components/base/Modal/index.js

@@ -12,6 +12,7 @@ import styled from 'styled-components'
 import noop from 'lodash/noop'
 
 import { rgba } from 'styles/helpers'
+import { radii } from 'styles/theme'
 
 import { closeModal, isModalOpened, getModalData } from 'reducers/modals'
 
@@ -83,9 +84,8 @@ const Wrapper = styled(Tabbable).attrs({
 const Body = styled(Box).attrs({
   bg: p => p.theme.colors.white,
   relative: true,
-})`
+  borderRadius: 1,
-  border-radius: 5px;
+})``
-`
 
 const CloseContainer = styled(Box).attrs({
   p: 4,
@@ -220,9 +220,7 @@ export const ModalBody = ({
         <IconCross height={16} width={16} />
       </CloseContainer>
     )}
-    <Box p={5} {...props}>
+    <Box {...props}>{children}</Box>
-      {children}
-    </Box>
   </Body>
 )
 
@@ -230,4 +228,26 @@ ModalBody.defaultProps = {
   onClose: undefined,
 }
 
+export const ModalTitle = styled(Box).attrs({
+  ff: 'Museo Sans|Regular',
+  fontSize: 6,
+  color: 'dark',
+  align: 'center',
+  p: 5,
+})``
+
+export const ModalFooter = styled(Box).attrs({
+  px: 5,
+  py: 3,
+})`
+  border-top: 2px solid ${p => p.theme.colors.lightGrey};
+  border-bottom-left-radius: ${radii[1]}px;
+  border-bottom-right-radius: ${radii[1]}px;
+`
+
+export const ModalContent = styled(Box).attrs({
+  px: 5,
+  pb: 5,
+})``
+
 export default connect(mapStateToProps, mapDispatchToProps)(Modal)

src/components/modals/Receive.js

@@ -10,10 +10,9 @@ import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import Input from 'components/base/Input'
 import Label from 'components/base/Label'
-import Modal, { ModalBody } from 'components/base/Modal'
+import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal'
 import ReceiveBox from 'components/ReceiveBox'
 import SelectAccount from 'components/SelectAccount'
-import Text from 'components/base/Text'
 
 import type { Account as AccountType, T } from 'types/common'
 
@@ -65,9 +64,8 @@ class ReceiveModal extends PureComponent<Props, State> {
 
           return (
             <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={4} color="graphite">
+              <ModalTitle>{t('receive:title')}</ModalTitle>
-                {t('receive:title')}
+              <ModalContent>
-              </Text>
                 <Box flow={1}>
                   <Label>Account</Label>
                   <SelectAccount value={account} onChange={this.handleChangeInput('account')} />
@@ -86,11 +84,12 @@ class ReceiveModal extends PureComponent<Props, State> {
                     <ReceiveBox account={account} amount={amount} />
                   </Fragment>
                 )}
-              <Box horizontal justifyContent="center">
+              </ModalContent>
+              <ModalFooter horizontal align="center" justify="flex-end">
                 <Button primary onClick={onClose}>
-                  Close
+                  {'Close'}
                 </Button>
-              </Box>
+              </ModalFooter>
             </ModalBody>
           )
         }}

src/components/modals/Send.js

@@ -1,8 +1,9 @@
 // @flow
 
-import React, { Fragment, PureComponent } from 'react'
+import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
 import get from 'lodash/get'
+import { getDefaultUnitByCoinType } from '@ledgerhq/currencies'
 
 import type { T } from 'types/common'
 
@@ -12,11 +13,11 @@ import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import Input from 'components/base/Input'
 import Label from 'components/base/Label'
-import Modal, { ModalBody } from 'components/base/Modal'
+import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal'
 import Breadcrumb from 'components/Breadcrumb'
 import RecipientAddress from 'components/RecipientAddress'
 import SelectAccount from 'components/SelectAccount'
-import Text from 'components/base/Text'
+import FormattedVal from 'components/base/FormattedVal'
 
 const Steps = {
   '1': ({ t, ...props }: Object) => (
@@ -29,9 +30,8 @@ const Steps = {
         }
       }}
     >
-      <Box flow={5}>
+      <Box flow={4}>
-        <Text fontSize={6}>{t('send:title')}</Text>
+        <Box flow={1}>
-        <Box flow={2}>
           <Label>Account to debit</Label>
           <SelectAccount onChange={props.onChangeInput('account')} value={props.value.account} />
         </Box>
@@ -43,16 +43,6 @@ const Steps = {
           <Label>Amount</Label>
           <Input onChange={props.onChangeInput('amount')} value={props.value.amount} />
         </Box>
-        <Box horizontal alignItems="center">
-          <Box grow>
-            <Text>Cancel</Text>
-          </Box>
-          <Box justifyContent="flex-end">
-            <Button type="submit" primary disabled={!props.canSubmit}>
-              Next
-            </Button>
-          </Box>
-        </Box>
       </Box>
     </form>
   ),
@@ -157,25 +147,35 @@ class Send extends PureComponent<Props, State> {
 
   render() {
     const { step } = this.state
-
+    const { t } = this.props
+    const Step = Steps[step]
     return (
       <Modal
         name={MODAL_SEND}
         onHide={this.handleHide}
-        render={({ data, onClose }) => {
+        render={({ data, onClose }) => (
-          const Step = Steps[step]
-
-          return (
-            <Fragment>
-              <ModalBody p={3}>
-                <Breadcrumb currentStep={step} items={this._items} />
-              </ModalBody>
           <ModalBody onClose={onClose}>
+            <ModalTitle>{t('send:title')}</ModalTitle>
+            <ModalContent>
+              <Box mb={6} mt={2}>
+                <Breadcrumb currentStep={step} items={this._items} />
+              </Box>
               <Step {...this.getStepProps(data)} />
+            </ModalContent>
+            <ModalFooter horizontal align="center">
+              <Box grow>
+                <Label>{'Total spent'}</Label>
+                <FormattedVal
+                  color="dark"
+                  val={15496420404}
+                  unit={getDefaultUnitByCoinType(0)}
+                  showCode
+                />
+              </Box>
+              <Button primary>{'Next'}</Button>
+            </ModalFooter>
           </ModalBody>
-            </Fragment>
+        )}
-          )
-        }}
       />
     )
   }

src/components/modals/SettingsAccount.js

@@ -15,8 +15,7 @@ import { setDataModal, closeModal } from 'reducers/modals'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import Input from 'components/base/Input'
-import Modal, { ModalBody } from 'components/base/Modal'
+import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal'
-import Text from 'components/base/Text'
 import Label from 'components/base/Label'
 
 import IconEdit from 'icons/Edit'
@@ -162,10 +161,9 @@ class SettingsAccount extends PureComponent<Props, State> {
           const account = this.getAccount(data)
 
           return (
-            <ModalBody onClose={onClose} flow={3}>
+            <ModalBody onClose={onClose}>
-              <Text fontSize={4} color="graphite">
+              <ModalTitle>{'Account settings'}</ModalTitle>
-                Account settings
+              <ModalContent flow={4}>
-              </Text>
                 <Box
                   alignItems="center"
                   flow={2}
@@ -211,16 +209,13 @@ class SettingsAccount extends PureComponent<Props, State> {
                     onChange={this.handleChangeMinConfirmations(account)}
                   />
                 </Box>
-              <Box horizontal grow alignItems="flex-end" flow={2}>
+              </ModalContent>
-                <Box grow>
+              <ModalFooter horizontal justify="flex-end" flow={2}>
                 <Button onClick={this.handleArchiveAccount(account)}>
                   {hasNoTransactions(account) ? 'Remove account' : 'Archive account'}
                 </Button>
-                </Box>
-                <Box grow>
                 <Button primary>Go to account</Button>
-                </Box>
+              </ModalFooter>
-              </Box>
             </ModalBody>
           )
         }}