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,
-})`
-  border-radius: 5px;
-`
+  borderRadius: 1,
+})``
 
 const CloseContainer = styled(Box).attrs({
   p: 4,
@@ -220,9 +220,7 @@ export const ModalBody = ({
         <IconCross height={16} width={16} />
       </CloseContainer>
     )}
-    <Box p={5} {...props}>
-      {children}
-    </Box>
+    <Box {...props}>{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,32 +64,32 @@ class ReceiveModal extends PureComponent<Props, State> {
 
           return (
             <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={4} color="graphite">
-                {t('receive:title')}
-              </Text>
-              <Box flow={1}>
-                <Label>Account</Label>
-                <SelectAccount value={account} onChange={this.handleChangeInput('account')} />
-              </Box>
-              {account && (
-                <Fragment>
-                  <Box flow={1}>
-                    <Label>Request amount</Label>
-                    <Input
-                      type="number"
-                      min={0}
-                      max={account.balance / 1e8}
-                      onChange={this.handleChangeInput('amount')}
-                    />
-                  </Box>
-                  <ReceiveBox account={account} amount={amount} />
-                </Fragment>
-              )}
-              <Box horizontal justifyContent="center">
+              <ModalTitle>{t('receive:title')}</ModalTitle>
+              <ModalContent>
+                <Box flow={1}>
+                  <Label>Account</Label>
+                  <SelectAccount value={account} onChange={this.handleChangeInput('account')} />
+                </Box>
+                {account && (
+                  <Fragment>
+                    <Box flow={1}>
+                      <Label>Request amount</Label>
+                      <Input
+                        type="number"
+                        min={0}
+                        max={account.balance / 1e8}
+                        onChange={this.handleChangeInput('amount')}
+                      />
+                    </Box>
+                    <ReceiveBox account={account} amount={amount} />
+                  </Fragment>
+                )}
+              </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}>
-        <Text fontSize={6}>{t('send:title')}</Text>
-        <Box flow={2}>
+      <Box flow={4}>
+        <Box flow={1}>
           <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 }) => {
-          const Step = Steps[step]
-
-          return (
-            <Fragment>
-              <ModalBody p={3}>
+        render={({ data, onClose }) => (
+          <ModalBody onClose={onClose}>
+            <ModalTitle>{t('send:title')}</ModalTitle>
+            <ModalContent>
+              <Box mb={6} mt={2}>
                 <Breadcrumb currentStep={step} items={this._items} />
-              </ModalBody>
-              <ModalBody onClose={onClose}>
-                <Step {...this.getStepProps(data)} />
-              </ModalBody>
-            </Fragment>
-          )
-        }}
+              </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>
+        )}
       />
     )
   }

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 Text from 'components/base/Text'
+import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal'
 import Label from 'components/base/Label'
 
 import IconEdit from 'icons/Edit'
@@ -162,65 +161,61 @@ class SettingsAccount extends PureComponent<Props, State> {
           const account = this.getAccount(data)
 
           return (
-            <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={4} color="graphite">
-                Account settings
-              </Text>
-              <Box
-                alignItems="center"
-                flow={2}
-                horizontal
-                onMouseEnter={this.handleHoveredName(true)}
-                onMouseLeave={this.handleHoveredName(false)}
-              >
-                <Box>
-                  {editName ? (
-                    <form onSubmit={this.handleSubmitName(account)}>
-                      <Box alignItems="center" horizontal flow={2}>
-                        <Box>
-                          <Input value={account.name} onChange={this.handleChangeName} />
-                        </Box>
-                        <Box flow={2} horizontal>
-                          <Button type="button" onClick={this.handleCancelEditName(data)}>
-                            Cancel
-                          </Button>
-                          <Button type="submit" primary>
-                            Ok
-                          </Button>
+            <ModalBody onClose={onClose}>
+              <ModalTitle>{'Account settings'}</ModalTitle>
+              <ModalContent flow={4}>
+                <Box
+                  alignItems="center"
+                  flow={2}
+                  horizontal
+                  onMouseEnter={this.handleHoveredName(true)}
+                  onMouseLeave={this.handleHoveredName(false)}
+                >
+                  <Box>
+                    {editName ? (
+                      <form onSubmit={this.handleSubmitName(account)}>
+                        <Box alignItems="center" horizontal flow={2}>
+                          <Box>
+                            <Input value={account.name} onChange={this.handleChangeName} />
+                          </Box>
+                          <Box flow={2} horizontal>
+                            <Button type="button" onClick={this.handleCancelEditName(data)}>
+                              Cancel
+                            </Button>
+                            <Button type="submit" primary>
+                              Ok
+                            </Button>
+                          </Box>
                         </Box>
+                      </form>
+                    ) : (
+                      account.name
+                    )}
+                  </Box>
+                  {!editName &&
+                    nameHovered && (
+                      <Box onClick={this.handleEditName(true)} style={{ cursor: 'pointer' }}>
+                        <IconEdit height={16} width={16} />
                       </Box>
-                    </form>
-                  ) : (
-                    account.name
-                  )}
+                    )}
                 </Box>
-                {!editName &&
-                  nameHovered && (
-                    <Box onClick={this.handleEditName(true)} style={{ cursor: 'pointer' }}>
-                      <IconEdit height={16} width={16} />
-                    </Box>
-                  )}
-              </Box>
-              <Box>
-                <Label>{'Minimum confirmations'}</Label>
-                <Input
-                  type="number"
-                  min={1}
-                  max={100}
-                  value={account.settings.minConfirmations}
-                  onChange={this.handleChangeMinConfirmations(account)}
-                />
-              </Box>
-              <Box horizontal grow alignItems="flex-end" flow={2}>
-                <Box grow>
-                  <Button onClick={this.handleArchiveAccount(account)}>
-                    {hasNoTransactions(account) ? 'Remove account' : 'Archive account'}
-                  </Button>
-                </Box>
-                <Box grow>
-                  <Button primary>Go to account</Button>
+                <Box>
+                  <Label>{'Minimum confirmations'}</Label>
+                  <Input
+                    type="number"
+                    min={1}
+                    max={100}
+                    value={account.settings.minConfirmations}
+                    onChange={this.handleChangeMinConfirmations(account)}
+                  />
                 </Box>
-              </Box>
+              </ModalContent>
+              <ModalFooter horizontal justify="flex-end" flow={2}>
+                <Button onClick={this.handleArchiveAccount(account)}>
+                  {hasNoTransactions(account) ? 'Remove account' : 'Archive account'}
+                </Button>
+                <Button primary>Go to account</Button>
+              </ModalFooter>
             </ModalBody>
           )
         }}