diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js index 6e607ccc..d91e6655 100644 --- a/src/components/Breadcrumb/index.js +++ b/src/components/Breadcrumb/index.js @@ -23,9 +23,9 @@ const Wrapper = styled(Box).attrs({ class Breadcrumb extends PureComponent { render() { - const { items, currentStep } = this.props + const { items, currentStep, ...props } = this.props return ( - + {items.map((item, i) => ( {item.label} diff --git a/src/components/base/Label.js b/src/components/base/Label.js index 1d4811fd..7314164b 100644 --- a/src/components/base/Label.js +++ b/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; ` diff --git a/src/components/base/Modal/index.js b/src/components/base/Modal/index.js index 1d4ab7c9..5f738f49 100644 --- a/src/components/base/Modal/index.js +++ b/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 = ({ )} - - {children} - + {children} ) @@ -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) diff --git a/src/components/modals/Receive.js b/src/components/modals/Receive.js index 86eb9e1a..4fe836da 100644 --- a/src/components/modals/Receive.js +++ b/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 { return ( - - {t('receive:title')} - - - - - - {account && ( - - - - - - - - )} - + {t('receive:title')} + + + + + + {account && ( + + + + + + + + )} + + - + ) }} diff --git a/src/components/modals/Send.js b/src/components/modals/Send.js index 604c7111..a4a4fdf7 100644 --- a/src/components/modals/Send.js +++ b/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 = { } }} > - - {t('send:title')} - + + @@ -43,16 +43,6 @@ const Steps = { - - - Cancel - - - - - ), @@ -157,25 +147,35 @@ class Send extends PureComponent { render() { const { step } = this.state - + const { t } = this.props + const Step = Steps[step] return ( { - const Step = Steps[step] - - return ( - - + render={({ data, onClose }) => ( + + {t('send:title')} + + - - - - - - ) - }} + + + + + + + + + + + + )} /> ) } diff --git a/src/components/modals/SettingsAccount.js b/src/components/modals/SettingsAccount.js index 67074aa5..ad82bd5b 100644 --- a/src/components/modals/SettingsAccount.js +++ b/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 { const account = this.getAccount(data) return ( - - - Account settings - - - - {editName ? ( -
- - - - - - - + + {'Account settings'} + + + + {editName ? ( + + + + + + + + + + + ) : ( + account.name + )} + + {!editName && + nameHovered && ( + + - - ) : ( - account.name - )} + )} - {!editName && - nameHovered && ( - - - - )} - - - - - - - - - - - + + + - + + + + +
) }}