diff --git a/package.json b/package.json index d2e81fcc..23701c93 100644 --- a/package.json +++ b/package.json @@ -58,8 +58,8 @@ "raf": "^3.4.1", "raven-js": "^3.27.0", "rc-tooltip": "^3.7.3", - "react": "^16.8.1", - "react-dom": "^16.8.5", + "react": "^16.8.6", + "react-dom": "^16.8.6", "react-hot-loader": "^4.6.5", "react-intl": "^2.8.0", "react-json-view": "^1.19.1", @@ -82,7 +82,7 @@ "styled-normalize": "^8.0.6", "trezor-bridge-communicator": "1.0.2", "trezor-connect": "7.0.2-electron.4", - "trezor-ui-components": "^1.0.0-beta.4", + "trezor-ui-components": "^1.0.0-beta.12", "wallet-address-validator": "^0.2.4", "web3": "1.0.0-beta.35", "webpack": "^4.29.3", diff --git a/src/actions/ethereum/SendFormActions.js b/src/actions/ethereum/SendFormActions.js index ad1c3f0e..19fb15ab 100644 --- a/src/actions/ethereum/SendFormActions.js +++ b/src/actions/ethereum/SendFormActions.js @@ -1,6 +1,6 @@ /* @flow */ import React from 'react'; -import Link from 'components/Link'; +import { Link } from 'trezor-ui-components'; import TrezorConnect from 'trezor-connect'; import BigNumber from 'bignumber.js'; import * as ACCOUNT from 'actions/constants/account'; diff --git a/src/components/Button/index.js b/src/components/Button/index.js deleted file mode 100644 index b7b57b22..00000000 --- a/src/components/Button/index.js +++ /dev/null @@ -1,193 +0,0 @@ -/* @flow */ - -import * as React from 'react'; -import styled, { css } from 'styled-components'; -import PropTypes from 'prop-types'; -import colors from 'config/colors'; -import { TRANSITION, FONT_WEIGHT, FONT_SIZE } from 'config/variables'; - -type Props = { - children: React.Node, - className?: string, - onClick?: () => any, - onMouseEnter?: () => void, - onMouseLeave?: () => void, - onFocus?: () => void, - isDisabled?: boolean, - isWhite?: boolean, - isWebUsb?: boolean, - isTransparent?: boolean, - dataTest?: string, -}; - -const Wrapper = styled.button` - padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')}; - border-radius: 3px; - font-size: ${FONT_SIZE.BASE}; - font-weight: ${FONT_WEIGHT.LIGHT}; - cursor: pointer; - background: ${colors.GREEN_PRIMARY}; - color: ${colors.WHITE}; - border: 0; - - &:hover { - background: ${colors.GREEN_SECONDARY}; - } - - &:active { - background: ${colors.GREEN_TERTIARY}; - } - - &:focus { - border-color: ${colors.INPUT_FOCUSED_BORDER}; - box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; - } - - ${props => - props.isDisabled && - css` - pointer-events: none; - color: ${colors.TEXT_SECONDARY}; - background: ${colors.GRAY_LIGHT}; - `} - - ${props => - props.isWhite && - css` - background: ${colors.WHITE}; - color: ${colors.TEXT_SECONDARY}; - border: 1px solid ${colors.DIVIDER}; - - &:focus { - border-color: ${colors.INPUT_FOCUSED_BORDER}; - } - - &:hover { - color: ${colors.TEXT_PRIMARY}; - background: ${colors.DIVIDER}; - } - - &:active { - color: ${colors.TEXT_PRIMARY}; - background: ${colors.DIVIDER}; - } - `} - - ${props => - props.isTransparent && - css` - background: transparent; - border: 0px; - color: ${colors.TEXT_SECONDARY}; - - &:focus { - color: ${colors.TEXT_PRIMARY}; - box-shadow: none; - } - - &:hover, - &:active { - color: ${colors.TEXT_PRIMARY}; - background: transparent; - } - `} - - ${props => - props.isWebUsb && - css` - position: relative; - padding: 12px 24px 12px 40px; - background: transparent; - color: ${colors.GREEN_PRIMARY}; - border: 1px solid ${colors.GREEN_PRIMARY}; - transition: ${TRANSITION.HOVER}; - - &:before, - &:after { - content: ''; - position: absolute; - background: ${colors.GREEN_PRIMARY}; - top: 0; - bottom: 0; - margin: auto; - transition: ${TRANSITION.HOVER}; - } - - &:before { - width: 12px; - height: 2px; - left: 18px; - } - - &:after { - width: 2px; - height: 12px; - left: 23px; - } - - &:hover { - background: ${colors.GREEN_PRIMARY}; - color: ${colors.WHITE}; - - &:before, - &:after { - background: ${colors.WHITE}; - } - } - - iframe { - position: absolute; - top: 0; - left: 0; - z-index: 1; - } - `} -`; - -const Button = ({ - children, - className = '', - onClick, - onMouseEnter, - onMouseLeave, - onFocus, - isDisabled = false, - isWhite = false, - isWebUsb = false, - isTransparent = false, - dataTest, -}: Props) => { - const newClassName = isWebUsb ? `${className} trezor-webusb-button` : className; - return ( - - {children} - - ); -}; - -Button.propTypes = { - children: PropTypes.node.isRequired, - className: PropTypes.string, - onClick: PropTypes.func, - onMouseEnter: PropTypes.func, - onMouseLeave: PropTypes.func, - onFocus: PropTypes.func, - isDisabled: PropTypes.bool, - isWhite: PropTypes.bool, - isWebUsb: PropTypes.bool, - isTransparent: PropTypes.bool, - dataTest: PropTypes.string, -}; - -export default Button; diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js deleted file mode 100644 index 21dac698..00000000 --- a/src/components/Checkbox/index.js +++ /dev/null @@ -1,101 +0,0 @@ -/* @flow */ - -import * as React from 'react'; -import PropTypes from 'prop-types'; -import styled, { css } from 'styled-components'; -import colors from 'config/colors'; -import Icon from 'components/Icon'; -import icons from 'config/icons'; -import { FONT_SIZE } from 'config/variables'; - -type Props = { - onClick: (event: KeyboardEvent) => void, - isChecked: boolean, - children: React.Node, -}; - -const Wrapper = styled.div` - display: flex; - flex-direction: row; - cursor: pointer; - align-items: center; - - &:hover, - &:focus { - outline: none; - } -`; - -const Tick = styled.div``; - -const IconWrapper = styled.div` - display: flex; - border-radius: 2px; - justify-content: center; - align-items: center; - color: ${props => (props.isChecked ? colors.WHITE : colors.GREEN_PRIMARY)}; - background: ${props => (props.isChecked ? colors.GREEN_PRIMARY : colors.WHITE)}; - border: 1px solid ${props => (props.isChecked ? colors.GREEN_PRIMARY : colors.DIVIDER)}; - width: 24px; - height: 24px; - - &:hover, - &:focus { - ${props => - !props.isChecked && - css` - border: 1px solid ${colors.GREEN_PRIMARY}; - `} - background: ${props => (props.isChecked ? colors.GREEN_PRIMARY : colors.WHITE)}; - } -`; - -const Label = styled.div` - display: flex; - padding-left: 10px; - justify-content: center; - ${colors.TEXT_SECONDARY}; - font-size: ${FONT_SIZE.BASE}; - - &:hover, - &:focus { - color: ${props => (props.isChecked ? colors.TEXT_PRIMARY : colors.TEXT_PRIMARY)}; - } -`; - -class Checkbox extends React.PureComponent { - handleKeyboard(event: KeyboardEvent) { - if (event.keyCode === 32) { - this.props.onClick(event); - } - } - - render() { - const { isChecked, children, onClick } = this.props; - return ( - this.handleKeyboard(event)} tabIndex={0}> - - {isChecked && ( - - - - )} - - - - ); - } -} - -Checkbox.propTypes = { - onClick: PropTypes.func.isRequired, - isChecked: PropTypes.bool, - children: PropTypes.string, -}; - -export default Checkbox; diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index ab21dc26..3f3a7350 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -2,9 +2,9 @@ import React from 'react'; import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; -import { getStatusColor, getStatusName, getStatus, getVersion } from 'utils/device'; -import TrezorImage from 'components/images/TrezorImage'; -import colors from 'config/colors'; +import { getStatusColor, getStatusName, getStatus } from 'utils/device'; +import { TrezorImage, colors } from 'trezor-ui-components'; + import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; const Wrapper = styled.div` @@ -72,6 +72,7 @@ const IconWrapper = styled.div` display: flex; flex: 1 0 0; justify-content: flex-end; + align-items: center; `; const ImageWrapper = styled.div` @@ -115,7 +116,10 @@ const DeviceHeader = ({ > - + {device.instanceLabel} diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index 7d5bda50..5ad08447 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -3,13 +3,12 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; import React from 'react'; -import Link from 'components/Link'; +import { Link, colors } from 'trezor-ui-components'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { FormattedMessage } from 'react-intl'; -import colors from 'config/colors'; -import { FONT_SIZE, SCREEN_SIZE } from 'config/variables'; +import { FONT_SIZE, SCREEN_SIZE, FOOTER_HEIGHT } from 'config/variables'; import * as LogActions from 'actions/LogActions'; import l10nMessages from './index.messages'; @@ -26,7 +25,7 @@ const Wrapper = styled.div` color: ${colors.TEXT_SECONDARY}; padding: 10px 30px; display: flex; - height: 59px; + height: ${FOOTER_HEIGHT}; flex-wrap: wrap; align-items: center; justify-content: space-between; diff --git a/src/components/Header/components/LanguagePicker/index.js b/src/components/Header/components/LanguagePicker/index.js index 8947373c..33f0f0f4 100644 --- a/src/components/Header/components/LanguagePicker/index.js +++ b/src/components/Header/components/LanguagePicker/index.js @@ -1,7 +1,7 @@ /* @flow */ import * as React from 'react'; import styled from 'styled-components'; -import colors from 'config/colors'; +import { colors } from 'trezor-ui-components'; import ReactSelect from 'react-select'; import { SCREEN_SIZE } from 'config/variables'; import { LANGUAGE } from 'config/app'; diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 19433cef..24a7fc8b 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -3,10 +3,8 @@ import React from 'react'; import styled from 'styled-components'; import { NavLink } from 'react-router-dom'; -import colors from 'config/colors'; import { SCREEN_SIZE } from 'config/variables'; -import Icon from 'components/Icon'; -import icons from 'config/icons'; +import { Icon, icons, colors } from 'trezor-ui-components'; import { FormattedMessage } from 'react-intl'; import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions'; @@ -60,7 +58,9 @@ const MenuToggler = styled.div` } `; -const TogglerText = styled.div``; +const TogglerText = styled.div` + margin-left: 6px; +`; const TREZOR = styled.div``; const T = styled.div``; @@ -161,14 +161,14 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => ( {sidebarOpened ? ( <> - + ) : ( <> - + diff --git a/src/components/Heading/index.js b/src/components/Heading/index.js deleted file mode 100644 index 6265414e..00000000 --- a/src/components/Heading/index.js +++ /dev/null @@ -1,45 +0,0 @@ -import styled, { css } from 'styled-components'; -import colors from 'config/colors'; -import { FONT_SIZE } from 'config/variables'; - -const baseStyles = css` - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - color: ${colors.TEXT_PRIMARY}; - font-weight: bold; - margin: 0; - padding: 0; -`; - -const H1 = styled.h1` - ${baseStyles}; - font-size: ${FONT_SIZE.H1}; - padding-bottom: 10px; -`; - -const H2 = styled.h2` - ${baseStyles}; - font-size: ${FONT_SIZE.H2}; - padding-bottom: 10px; - - ${props => - props.claim && - css` - font-size: ${FONT_SIZE.HUGE}; - padding-bottom: 24px; - `}; -`; - -const H3 = styled.h3` - ${baseStyles}; - font-size: ${FONT_SIZE.H3}; - margin-bottom: 10px; -`; - -const H4 = styled.h4` - ${baseStyles}; - font-size: ${FONT_SIZE.H4}; - padding-bottom: 10px; -`; - -export { H1, H2, H3, H4 }; diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js deleted file mode 100644 index df18cb1c..00000000 --- a/src/components/Icon/index.js +++ /dev/null @@ -1,116 +0,0 @@ -/* @flow */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import colors from 'config/colors'; -import styled, { keyframes } from 'styled-components'; - -type Props = { - icon: Array, - className?: string, - hoverColor?: string, - canAnimate?: boolean, - size?: number, - isActive?: boolean, - color?: string, - onMouseEnter?: () => void, - onMouseLeave?: () => void, - onFocus?: () => void, - onClick?: () => void, -}; - -const chooseIconAnimationType = (canAnimate, isActive) => { - if (canAnimate) { - if (isActive) { - return rotate180up; - } - return rotate180down; - } - return null; -}; - -// TODO: make animation of icons better -const rotate180up = keyframes` - from { - transform: rotate(0deg); - } - to { - transform: rotate(180deg); - } -`; - -const rotate180down = keyframes` - from { - transform: rotate(180deg); - } - to { - transform: rotate(0deg); - } -`; - -const SvgWrapper = styled.svg` - animation: ${props => chooseIconAnimationType(props.canAnimate, props.isActive)} 0.2s linear 1 - forwards; - - :hover { - path { - fill: ${props => props.hoverColor}; - } - } -`; - -const Path = styled.path` - fill: ${props => props.color}; -`; - -const Icon = ({ - icon, - size = 32, - color = colors.TEXT_SECONDARY, - isActive, - canAnimate, - hoverColor, - className, - onMouseEnter, - onMouseLeave, - onFocus, - onClick, -}: Props) => ( - - {icon.map(path => ( - - ))} - -); - -Icon.propTypes = { - className: PropTypes.string, - hoverColor: PropTypes.string, - canAnimate: PropTypes.bool, - icon: PropTypes.arrayOf(PropTypes.string).isRequired, - size: PropTypes.number, - isActive: PropTypes.bool, - color: PropTypes.string, - onMouseEnter: PropTypes.func, - onMouseLeave: PropTypes.func, - onFocus: PropTypes.func, - onClick: PropTypes.func, -}; - -export default Icon; diff --git a/src/components/Link/index.js b/src/components/Link/index.js deleted file mode 100644 index 38cbd4dc..00000000 --- a/src/components/Link/index.js +++ /dev/null @@ -1,101 +0,0 @@ -import React, { PureComponent } from 'react'; -import styled, { css } from 'styled-components'; -import PropTypes from 'prop-types'; -import { FONT_SIZE, TRANSITION } from 'config/variables'; -import colors from 'config/colors'; -import { NavLink } from 'react-router-dom'; - -const A = styled.a` - text-decoration: none; - cursor: pointer; - transition: ${TRANSITION.HOVER}; - font-size: ${FONT_SIZE.SMALL}; - - ${props => - props.isGreen && - css` - text-decoration: underline; - text-decoration-color: ${colors.GREEN_PRIMARY}; - `} - ${props => - props.isGray && - css` - text-decoration: underline; - text-decoration-color: ${colors.TEXT_SECONDARY}; - `} - - &, - &:visited, - &:active, - &:hover { - ${props => - props.isGreen && - css` - color: ${colors.GREEN_PRIMARY}; - `} - ${props => - props.isGray && - css` - color: ${colors.TEXT_SECONDARY}; - `} - } - - &:hover { - border-color: transparent; - } -`; - -const StyledNavLink = styled(NavLink)` - ${props => - props.isGreen && - css` - color: ${colors.GREEN_PRIMARY}; - `} - - ${props => - props.isGray && - css` - color: ${colors.TEXT_SECONDARY}; - `} -`; - -class Link extends PureComponent { - render() { - const shouldRenderRouterLink = this.props.to; - let LinkComponent; - if (shouldRenderRouterLink) { - LinkComponent = {this.props.children}; - } else { - LinkComponent = ( - - {this.props.children} - - ); - } - - return LinkComponent; - } -} - -Link.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.object, - PropTypes.array, - PropTypes.node, - ]).isRequired, - className: PropTypes.string, - href: PropTypes.string, - target: PropTypes.string, - to: PropTypes.string, - onClick: PropTypes.func, - isGreen: PropTypes.bool, - isGray: PropTypes.bool, -}; - -export default Link; diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js deleted file mode 100644 index 6fc847f1..00000000 --- a/src/components/Loader/index.js +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import styled, { css } from 'styled-components'; -import PropTypes from 'prop-types'; -import Paragraph from 'components/Paragraph'; -import { FONT_SIZE } from 'config/variables'; -import { DASH, GREEN_COLOR } from 'config/animations'; -import colors from 'config/colors'; - -const Wrapper = styled.div` - position: relative; - width: ${props => `${props.size}px`}; - height: ${props => `${props.size}px`}; - display: flex; - justify-content: center; - align-items: center; -`; - -const SvgWrapper = styled.svg` - position: absolute; - width: 100%; - height: 100%; - animation: rotate 2s linear infinite; - transform-origin: center center; -`; - -const CircleWrapper = styled.circle` - ${props => - props.isRoute && - css` - stroke: ${props.transparentRoute ? 'transparent' : colors.GRAY_LIGHT}; - `} - - ${props => - props.isPath && - css` - stroke-width: ${props.transparentRoute ? '2px' : '1px'}; - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - animation: ${DASH} 1.5s ease-in-out infinite, - ${props.animationColor || GREEN_COLOR} 6s ease-in-out infinite; - stroke-linecap: round; - `}; -`; - -const StyledParagraph = styled(Paragraph)` - font-size: ${props => (props.isSmallText ? FONT_SIZE.SMALL : FONT_SIZE.BIG)}; - color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)}; -`; - -const Loader = ({ - className, - text, - isWhiteText = false, - isSmallText, - size = 100, - animationColor, - transparentRoute, -}) => ( - - - {text} - - - - - - -); - -Loader.propTypes = { - isWhiteText: PropTypes.bool, - isSmallText: PropTypes.bool, - className: PropTypes.string, - text: PropTypes.string, - animationColor: PropTypes.object, - transparentRoute: PropTypes.bool, - size: PropTypes.number, -}; - -export default Loader; diff --git a/src/components/Log/index.js b/src/components/Log/index.js index fadff58d..0bc434a3 100644 --- a/src/components/Log/index.js +++ b/src/components/Log/index.js @@ -3,17 +3,12 @@ import React from 'react'; import styled from 'styled-components'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import colors from 'config/colors'; -import { H2 } from 'components/Heading'; -import Button from 'components/Button'; -import Tooltip from 'components/Tooltip'; + +import { Button, Tooltip, H5, P, Icon, icons, colors } from 'trezor-ui-components'; import ReactJson from 'react-json-view'; -import Icon from 'components/Icon'; -import P from 'components/Paragraph'; import { FormattedMessage } from 'react-intl'; import * as LogActions from 'actions/LogActions'; -import icons from 'config/icons'; import type { State, Dispatch } from 'flowtype'; import l10nMessages from './index.messages'; @@ -80,12 +75,12 @@ const Log = (props: Props): ?React$Element => { return ( - + -

+

-
- + + diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js deleted file mode 100644 index 73b99946..00000000 --- a/src/components/Notification/components/NotificationButton/index.js +++ /dev/null @@ -1,93 +0,0 @@ -/* @flow */ - -import * as React from 'react'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; -import Icon from 'components/Icon'; -import colors from 'config/colors'; -import { WHITE_COLOR } from 'config/animations'; -import { getPrimaryColor } from 'utils/notification'; -import Loader from 'components/Loader'; -import { TRANSITION, FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables'; - -type Props = { - type: string, - icon?: { - type: Array, - color: string, - size: number, - }, - onClick: () => void, - isLoading?: boolean, - children: React.Node, -}; - -const LoaderContent = styled.div` - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - cursor: default; - color: ${colors.WHITE}; - background: ${props => getPrimaryColor(props.type)}; -`; - -const Wrapper = styled.button` - padding: 12px 58px; - border-radius: 3px; - background: transparent; - font-size: ${FONT_SIZE.BASE}; - position: relative; - font-weight: ${FONT_WEIGHT.LIGHT}; - cursor: pointer; - color: ${props => getPrimaryColor(props.type)}; - border: 1px solid ${props => getPrimaryColor(props.type)}; - transition: ${TRANSITION.HOVER}; - - @media screen and (max-width: ${SCREEN_SIZE.SM}) { - padding: 12px 24px; - } - - &:hover { - color: ${colors.WHITE}; - background: ${props => getPrimaryColor(props.type)}; - } -`; - -const IconWrapper = styled.span` - margin-right: 8px; -`; - -const NotificationButton = ({ type, icon, onClick, children, isLoading }: Props) => ( - - {isLoading && ( - - - - )} - {icon && ( - - - - )} - {children} - -); - -NotificationButton.propTypes = { - type: PropTypes.string.isRequired, - icon: PropTypes.shape({ - type: PropTypes.arrayOf(PropTypes.string).isRequired, - color: PropTypes.string, - size: PropTypes.number, - }), - isLoading: PropTypes.bool, - onClick: PropTypes.func, - children: PropTypes.node.isRequired, -}; - -export default NotificationButton; diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js deleted file mode 100644 index 8b95d8ee..00000000 --- a/src/components/Notification/index.js +++ /dev/null @@ -1,143 +0,0 @@ -/* @flow */ -import * as React from 'react'; -import styled from 'styled-components'; -import { getPrimaryColor, getSecondaryColor, getIcon } from 'utils/notification'; -import Icon from 'components/Icon'; -import icons from 'config/icons'; -import { FONT_WEIGHT, FONT_SIZE } from 'config/variables'; - -import * as NotificationActions from 'actions/NotificationActions'; -import Loader from 'components/Loader'; -import type { CallbackAction } from 'reducers/NotificationReducer'; - -import NotificationButton from './components/NotificationButton'; - -type Props = { - type: string, - cancelable?: boolean, - title: ?React.Node, - className?: string, - message?: ?React.Node, - actions?: Array, - isActionInProgress?: boolean, - close?: typeof NotificationActions.close, - loading?: boolean, -}; - -const Wrapper = styled.div` - width: 100%; - position: relative; - display: flex; - justify-content: center; - color: ${props => getPrimaryColor(props.type)}; - background: ${props => getSecondaryColor(props.type)}; -`; - -const Content = styled.div` - width: 100%; - max-width: 1170px; - padding: 24px; - display: flex; - flex-direction: row; - text-align: left; - align-items: center; -`; - -const Body = styled.div` - display: flex; -`; - -const Message = styled.div` - font-size: ${FONT_SIZE.SMALL}; -`; - -const Title = styled.div` - padding-bottom: 5px; - padding-top: 1px; - font-weight: ${FONT_WEIGHT.MEDIUM}; -`; - -const CloseClick = styled.div` - margin-left: 24px; - align-self: flex-start; - cursor: pointer; -`; - -const StyledIcon = styled(Icon)` - position: relative; - top: -7px; - min-width: 20px; -`; - -const IconWrapper = styled.div` - min-width: 30px; -`; - -const Texts = styled.div` - display: flex; - padding: 0 10px 0 0; - flex-direction: column; -`; - -const AdditionalContent = styled.div` - display: flex; - justify-content: flex-end; - align-items: flex-end; - flex: 1; -`; - -const ActionContent = styled.div` - display: flex; - justify-content: right; - align-items: flex-end; -`; - -const Notification = (props: Props): React$Element => { - const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action - - return ( - - - {props.loading && } - - - - - - {props.title} - {props.message ? {props.message} : ''} - - - - {props.actions && props.actions.length > 0 && ( - - {props.actions.map(action => ( - { - close(); - action.callback(); - }} - > - {action.label} - - ))} - - )} - - {props.cancelable && ( - close()}> - - - )} - - - ); -}; - -export default Notification; diff --git a/src/components/Paragraph/index.js b/src/components/Paragraph/index.js deleted file mode 100644 index 68115a05..00000000 --- a/src/components/Paragraph/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import styled, { css } from 'styled-components'; -import PropTypes from 'prop-types'; -import colors from 'config/colors'; -import { FONT_SIZE, LINE_HEIGHT } from 'config/variables'; - -const Wrapper = styled.p` - font-size: ${FONT_SIZE.BIG}; - line-height: ${LINE_HEIGHT.BASE}; - color: ${colors.TEXT_SECONDARY}; - padding: 0; - margin: 0; - - ${props => - props.isSmaller && - css` - font-size: ${FONT_SIZE.SMALL}; - `} -`; - -const P = ({ children, className, isSmaller = false }) => ( - - {children} - -); - -P.propTypes = { - className: PropTypes.string, - isSmaller: PropTypes.bool, - children: PropTypes.node, -}; - -export default P; diff --git a/src/components/Select/index.js b/src/components/Select/index.js deleted file mode 100644 index 4c493b83..00000000 --- a/src/components/Select/index.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ReactSelect from 'react-select'; -import ReactAsyncSelect from 'react-select/lib/Async'; -import colors from 'config/colors'; - -const styles = (isSearchable, withDropdownIndicator = true) => ({ - singleValue: base => ({ - ...base, - maxWidth: 'calc(100% - 10px)', // 8px padding + 2px maring-left - width: '100%', - color: colors.TEXT_SECONDARY, - '&:hover': { - cursor: isSearchable ? 'text' : 'pointer', - }, - }), - control: (base, { isDisabled, isFocused }) => ({ - ...base, - minHeight: 'initial', - height: '40px', - borderRadius: '2px', - borderColor: isFocused ? colors.INPUT_FOCUSED_BORDER : colors.DIVIDER, - boxShadow: isFocused ? `0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}` : 'none', - background: isDisabled ? colors.LANDING : colors.WHITE, - '&:hover': { - cursor: 'pointer', - }, - }), - indicatorSeparator: () => ({ - display: 'none', - }), - dropdownIndicator: (base, { isDisabled }) => ({ - ...base, - display: !withDropdownIndicator || isDisabled ? 'none' : 'block', - color: colors.TEXT_SECONDARY, - path: '', - '&:hover': { - color: colors.TEXT_SECONDARY, - }, - }), - menu: base => ({ - ...base, - margin: 0, - boxShadow: 'none', - }), - menuList: base => ({ - ...base, - padding: 0, - boxShadow: 'none', - background: colors.WHITE, - borderLeft: `1px solid ${colors.DIVIDER}`, - borderRight: `1px solid ${colors.DIVIDER}`, - borderBottom: `1px solid ${colors.DIVIDER}`, - }), - option: (base, { isFocused }) => ({ - ...base, - color: colors.TEXT_SECONDARY, - background: isFocused ? colors.LANDING : colors.WHITE, - borderRadius: 0, - '&:hover': { - cursor: 'pointer', - background: colors.LANDING, - }, - }), -}); - -const propTypes = { - isAsync: PropTypes.bool, - isSearchable: PropTypes.bool, -}; -const Select = props => ; -const AsyncSelect = props => ; -Select.propTypes = propTypes; -AsyncSelect.propTypes = propTypes; - -export { Select, AsyncSelect }; diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js deleted file mode 100644 index 9d29a7d6..00000000 --- a/src/components/Textarea/index.js +++ /dev/null @@ -1,228 +0,0 @@ -import React from 'react'; -import Textarea from 'react-textarea-autosize'; -import PropTypes from 'prop-types'; -import styled, { css } from 'styled-components'; -import colors from 'config/colors'; -import { FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, FONT_FAMILY } from 'config/variables'; - -const Wrapper = styled.div` - width: 100%; - position: relative; - display: flex; - flex-direction: column; - justify-content: flex-start; -`; - -const disabledColor = colors.TEXT_PRIMARY; - -const StyledTextarea = styled(Textarea)` - width: 100%; - min-height: 85px; - padding: 10px 12px; - box-sizing: border-box; - border: 1px solid ${props => (props.colorBorder ? props.colorBorder : colors.DIVIDER)}; - border-radius: 2px; - resize: none; - outline: none; - font-family: ${FONT_FAMILY.MONOSPACE}; - color: ${colors.TEXT_PRIMARY}; - background: ${colors.WHITE}; - font-weight: ${FONT_WEIGHT.MEDIUM}; - font-size: ${FONT_SIZE.BASE}; - white-space: pre-wrap; /* css-3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ - - /* placeholder styles do not work correctly when groupped into one block */ - - &::-webkit-input-placeholder { - color: ${colors.LIGHT_GRAY_1}; - opacity: 1; - } - - &::-moz-placeholder { - color: ${colors.LIGHT_GRAY_1}; - opacity: 1; - } - - &:-moz-placeholder { - color: ${colors.LIGHT_GRAY_1}; - opacity: 1; - } - - &:-ms-input-placeholder { - color: ${colors.LIGHT_GRAY_1}; - opacity: 1; - } - - &:read-only { - background: ${colors.GRAY_LIGHT}; - color: ${colors.TEXT_SECONDARY}; - } - - &:focus { - border-color: ${colors.INPUT_FOCUSED_BORDER}; - box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; - } - - &:disabled { - pointer-events: none; - background: ${colors.GRAY_LIGHT}; - color: ${colors.TEXT_SECONDARY}; - - &::-webkit-input-placeholder { - color: ${disabledColor}; - opacity: 1; - } - - &::-moz-placeholder { - color: ${disabledColor}; - opacity: 1; - } - - &:-moz-placeholder { - color: ${disabledColor}; - opacity: 1; - } - - &:-ms-input-placeholder { - color: ${disabledColor}; - opacity: 1; - } - } - - ${props => - props.trezorAction && - css` - z-index: 10001; /* bigger than modal container */ - border-color: ${colors.WHITE}; - border-width: 2px; - transform: translate(-1px, -1px); - background: ${colors.DIVIDER}; - pointer-events: none; - `} -`; - -const TopLabel = styled.span` - padding-bottom: 10px; - color: ${colors.TEXT_SECONDARY}; -`; - -const BottomText = styled.span` - margin-top: 10px; - font-size: ${FONT_SIZE.SMALL}; - color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)}; -`; - -const getColor = inputState => { - let color = ''; - if (inputState === 'success') { - color = colors.SUCCESS_PRIMARY; - } else if (inputState === 'warning') { - color = colors.WARNING_PRIMARY; - } else if (inputState === 'error') { - color = colors.ERROR_PRIMARY; - } - return color; -}; - -const TrezorAction = styled.div` - display: ${props => (props.action ? 'flex' : 'none')}; - align-items: center; - margin: 0px 10px; - padding: 0 14px 0 5px; - position: absolute; - background: black; - bottom: -25px; - color: ${colors.WHITE}; - border-radius: 5px; - line-height: ${LINE_HEIGHT.TREZOR_ACTION}; - z-index: 10002; - transform: translate(-1px, -1px); -`; - -const ArrowUp = styled.div` - position: absolute; - top: -9px; - left: 12px; - width: 0; - height: 0; - border-left: 9px solid transparent; - border-right: 9px solid transparent; - border-bottom: 9px solid black; - z-index: 10001; -`; - -const TextArea = ({ - className, - placeholder = '', - value, - customStyle = {}, - onFocus, - onBlur, - isDisabled, - readOnly, - name, - onChange, - topLabel, - rows, - maxRows, - maxLength, - autoSelect, - state = '', - bottomText = '', - trezorAction = null, -}) => ( - - {topLabel && {topLabel}} - event.target.select() : null} - placeholder={placeholder} - onChange={onChange} - /> - - - {trezorAction} - - {bottomText && {bottomText}} - -); - -TextArea.propTypes = { - className: PropTypes.string, - onFocus: PropTypes.func, - onBlur: PropTypes.func, - onChange: PropTypes.func, - customStyle: PropTypes.string, - placeholder: PropTypes.string, - value: PropTypes.string, - readOnly: PropTypes.bool, - maxRows: PropTypes.number, - maxLength: PropTypes.number, - rows: PropTypes.number, - name: PropTypes.string, - isDisabled: PropTypes.bool, - topLabel: PropTypes.node, - state: PropTypes.string, - autoSelect: PropTypes.bool, - bottomText: PropTypes.string, - trezorAction: PropTypes.node, -}; - -export default TextArea; diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js deleted file mode 100644 index 2fca2817..00000000 --- a/src/components/Tooltip/index.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import RcTooltip from 'rc-tooltip'; -import colors from 'config/colors'; -import Link from 'components/Link'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; -import l10nCommonMessages from 'views/common.messages'; - -const Wrapper = styled.div``; - -const Content = styled.div` - max-width: ${props => `${props.maxWidth}px` || 'auto'}; -`; - -const ContentWrapper = styled.div` - display: block; -`; - -const ReadMore = styled.div` - margin-top: 15px; - padding: 10px 0 5px 0; - text-align: center; - width: 100%; - color: ${colors.WHITE}; - border-top: 1px solid ${colors.TEXT_SECONDARY}; -`; - -const Tooltip = ({ - maxWidth, - className, - placement, - content, - readMoreLink, - children, - enterDelayMs, - defaultVisible = false, - ...rest -}) => ( - - } - placement={placement} - mouseEnterDelay={enterDelayMs || 0} - defaultVisible={defaultVisible} - overlay={() => ( - - {content} - {readMoreLink && ( - - - - - - )} - - )} - {...rest} - > - {children} - - -); - -Tooltip.propTypes = { - className: PropTypes.string, - placement: PropTypes.string, - children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]), - maxWidth: PropTypes.number, - content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]), - readMoreLink: PropTypes.string, - enterDelayMs: PropTypes.number, - defaultVisible: PropTypes.bool, -}; - -export default Tooltip; diff --git a/src/components/Tooltip/index.messages.js b/src/components/Tooltip/index.messages.js deleted file mode 100644 index 3f8a287b..00000000 --- a/src/components/Tooltip/index.messages.js +++ /dev/null @@ -1,7 +0,0 @@ -/* @flow */ -import { defineMessages } from 'react-intl'; -import type { Messages } from 'flowtype/npm/react-intl'; - -const definedMessages: Messages = defineMessages({}); - -export default definedMessages; diff --git a/src/components/Transaction/index.js b/src/components/Transaction/index.js index db923884..b36f2b52 100644 --- a/src/components/Transaction/index.js +++ b/src/components/Transaction/index.js @@ -3,8 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import colors from 'config/colors'; -import Link from 'components/Link'; +import { Link, colors } from 'trezor-ui-components'; import type { Transaction, Network } from 'flowtype'; diff --git a/src/components/images/CoinLogo/index.js b/src/components/images/CoinLogo/index.js deleted file mode 100644 index 8816a799..00000000 --- a/src/components/images/CoinLogo/index.js +++ /dev/null @@ -1,42 +0,0 @@ -import React, { PureComponent } from 'react'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; - -const Wrapper = styled.div` - padding-right: 20px; - width: 40px; - display: flex; - justify-content: center; -`; - -const Logo = styled.img` - height: 23px; - display: block; -`; - -class CoinLogo extends PureComponent { - render() { - const { network, className, standalone } = this.props; - - const logo = ( - - ); - - if (standalone) { - return logo; - } - - return {logo}; - } -} - -CoinLogo.propTypes = { - network: PropTypes.string, - className: PropTypes.string, - standalone: PropTypes.bool, -}; - -export default CoinLogo; diff --git a/src/components/images/DeviceIcon/index.js b/src/components/images/DeviceIcon/index.js index b52a452d..8ae997ad 100644 --- a/src/components/images/DeviceIcon/index.js +++ b/src/components/images/DeviceIcon/index.js @@ -2,9 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import COLORS from 'config/colors'; -import ICONS from 'config/icons'; -import styled from 'styled-components'; +import { Icon, colors as COLORS, icons } from 'trezor-ui-components'; import type { TrezorDevice } from 'flowtype'; type Props = { @@ -15,26 +13,14 @@ type Props = { onClick?: any, }; -const SvgWrapper = styled.svg` - :hover { - path { - fill: ${props => props.hoverColor}; - } - } -`; - -const Path = styled.path` - fill: ${props => props.color}; -`; - const getDeviceIcon = (majorVersion: number) => { switch (majorVersion) { case 1: - return ICONS.T1; + return icons.T1; case 2: - return ICONS.T2; + return icons.T2; default: - return ICONS.T2; + return icons.T2; } }; @@ -44,18 +30,19 @@ const DeviceIcon = ({ color = COLORS.TEXT_SECONDARY, hoverColor, onClick, + ...rest }: Props) => { const majorVersion = device.features ? device.features.major_version : 2; + const icon = getDeviceIcon(majorVersion); return ( - - - + color={color} + size={size} + {...rest} + /> ); }; diff --git a/src/components/images/TrezorImage/images/trezor-1.png b/src/components/images/TrezorImage/images/trezor-1.png deleted file mode 100644 index 8c35659b..00000000 Binary files a/src/components/images/TrezorImage/images/trezor-1.png and /dev/null differ diff --git a/src/components/images/TrezorImage/images/trezor-T.png b/src/components/images/TrezorImage/images/trezor-T.png deleted file mode 100644 index 54fdab30..00000000 Binary files a/src/components/images/TrezorImage/images/trezor-T.png and /dev/null differ diff --git a/src/components/images/TrezorImage/index.js b/src/components/images/TrezorImage/index.js deleted file mode 100644 index 5577d6a9..00000000 --- a/src/components/images/TrezorImage/index.js +++ /dev/null @@ -1,32 +0,0 @@ -/* @flow */ - -import React from 'react'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; - -type Props = { - model: string, -}; - -const Wrapper = styled.div``; - -const Img = styled.img` - width: ${props => (props.model === 'T' ? '17px' : '13px')}; -`; - -const TrezorImage = ({ model }: Props) => { - const imageName = model === 'One' ? 1 : model; - // $FlowIssue: `require` must be a string literal. - const src = require(`./images/trezor-${imageName}.png`); // eslint-disable-line - return ( - - - - ); -}; - -TrezorImage.propTypes = { - model: PropTypes.string, -}; - -export default TrezorImage; diff --git a/src/components/images/WalletType/index.js b/src/components/images/WalletType/index.js index 7796bf2e..853ad882 100644 --- a/src/components/images/WalletType/index.js +++ b/src/components/images/WalletType/index.js @@ -1,44 +1,29 @@ import React from 'react'; import PropTypes from 'prop-types'; -import colors from 'config/colors'; -import styled from 'styled-components'; -import ICONS from 'config/icons'; +import { Icon, colors, icons } from 'trezor-ui-components'; -const SvgWrapper = styled.svg` - :hover { - path { - fill: ${props => props.hoverColor}; - } - } -`; - -const Path = styled.path` - fill: ${props => props.color}; -`; - -const Icon = ({ +const WalletType = ({ type = 'standard', - size = 24, + size = 14, color = colors.TEXT_SECONDARY, hoverColor, onClick, -}) => ( - - { + const icon = type === 'hidden' ? icons.WALLET_HIDDEN : icons.WALLET_STANDARD; + return ( + - -); + ); +}; -Icon.propTypes = { +WalletType.propTypes = { type: PropTypes.string, size: PropTypes.number, color: PropTypes.string, @@ -46,4 +31,4 @@ Icon.propTypes = { onClick: PropTypes.func, }; -export default Icon; +export default WalletType; diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js deleted file mode 100644 index a9fd56a0..00000000 --- a/src/components/inputs/Input/index.js +++ /dev/null @@ -1,255 +0,0 @@ -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import styled, { css } from 'styled-components'; -import colors from 'config/colors'; -import ICONS from 'config/icons'; -import Icon from 'components/Icon'; -import { FONT_SIZE, FONT_FAMILY, FONT_WEIGHT, LINE_HEIGHT, TRANSITION } from 'config/variables'; - -const Wrapper = styled.div` - width: 100%; - display: flex; - flex-direction: column; - justify-content: flex-start; -`; - -const InputWrapper = styled.div` - display: flex; -`; - -const InputIconWrapper = styled.div` - flex: 1; - position: relative; - display: inline-block; - background: white; -`; - -const TopLabel = styled.span` - padding-bottom: 10px; - color: ${colors.TEXT_SECONDARY}; -`; - -const StyledInput = styled.input` - width: 100%; - height: ${props => (props.height ? `${props.height}px` : '40px')}; - padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px; - - font-family: ${FONT_FAMILY.MONOSPACE}; - line-height: ${LINE_HEIGHT.SMALL}; - font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALL}` : `${FONT_SIZE.BASE}`)}; - font-weight: ${FONT_WEIGHT.MEDIUM}; - color: ${props => (props.color ? props.color : colors.TEXT)}; - - border-radius: 2px; - - ${props => - props.hasAddon && - css` - border-top-right-radius: 0; - border-bottom-right-radius: 0; - `} - - border: 1px solid ${colors.DIVIDER}; - border-color: ${props => props.borderColor}; - - background-color: ${colors.WHITE}; - transition: ${TRANSITION.HOVER}; - - &:focus { - border-color: ${colors.INPUT_FOCUSED_BORDER}; - box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; - } - - &:disabled { - pointer-events: none; - background: ${colors.GRAY_LIGHT}; - color: ${colors.TEXT_SECONDARY}; - } - - &:read-only { - background: ${colors.GRAY_LIGHT}; - color: ${colors.TEXT_SECONDARY}; - } - - ${props => - props.trezorAction && - css` - z-index: 10001; - position: relative; /* bigger than modal container */ - border-color: ${colors.WHITE}; - border-width: 2px; - transform: translate(-1px, -1px); - background: ${colors.DIVIDER}; - `}; -`; - -const StyledIcon = styled(Icon)` - position: absolute; - left: auto; - top: 3px; - right: 10px; -`; - -const BottomText = styled.span` - margin-top: 10px; - font-size: ${FONT_SIZE.SMALL}; - color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)}; -`; - -const Overlay = styled.div` - ${props => - props.isPartiallyHidden && - css` - bottom: 0; - border: 1px solid ${colors.DIVIDER}; - border-radius: 2px; - position: absolute; - width: 100%; - height: 100%; - background-image: linear-gradient( - to right, - rgba(0, 0, 0, 0) 0%, - rgba(249, 249, 249, 1) 220px - ); - `} -`; - -const TrezorAction = styled.div` - display: ${props => (props.action ? 'flex' : 'none')}; - align-items: center; - height: 37px; - margin: 0px 10px; - padding: 0 14px 0 5px; - position: absolute; - top: 45px; - background: black; - color: ${colors.WHITE}; - border-radius: 5px; - line-height: ${LINE_HEIGHT.TREZOR_ACTION}; - z-index: 10002; - transform: translate(-1px, -1px); -`; - -const ArrowUp = styled.div` - position: absolute; - top: -9px; - left: 12px; - width: 0; - height: 0; - border-left: 9px solid transparent; - border-right: 9px solid transparent; - border-bottom: 9px solid black; - z-index: 10001; -`; - -class Input extends PureComponent { - getIcon(inputState) { - let icon = []; - if (inputState === 'success') { - icon = ICONS.CHECKED; - } else if (inputState === 'warning') { - icon = ICONS.WARNING; - } else if (inputState === 'error') { - icon = ICONS.ERROR; - } - return icon; - } - - getColor(inputState) { - let color = ''; - if (inputState === 'success') { - color = colors.SUCCESS_PRIMARY; - } else if (inputState === 'warning') { - color = colors.WARNING_PRIMARY; - } else if (inputState === 'error') { - color = colors.ERROR_PRIMARY; - } - return color; - } - - render() { - return ( - - {this.props.topLabel && {this.props.topLabel}} - - - {this.props.state && ( - - )} - - {this.props.icon} - 0} - ref={this.props.innerRef} - hasAddon={!!this.props.sideAddons} - type={this.props.type} - color={this.getColor(this.props.state)} - placeholder={this.props.placeholder} - autoCorrect={this.props.autocorrect} - autoCapitalize={this.props.autocapitalize} - spellCheck={this.props.spellCheck} - isSmallText={this.props.isSmallText} - value={this.props.value} - readOnly={this.props.readOnly} - onChange={this.props.onChange} - onClick={this.props.autoSelect ? event => event.target.select() : null} - borderColor={this.getColor(this.props.state)} - disabled={this.props.isDisabled} - name={this.props.name} - data-lpignore="true" - /> - - - {this.props.trezorAction} - - - {this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)} - - {this.props.bottomText && ( - - {this.props.bottomText} - - )} - - ); - } -} - -Input.propTypes = { - className: PropTypes.string, - innerRef: PropTypes.func, - placeholder: PropTypes.string, - type: PropTypes.string, - height: PropTypes.number, - autocorrect: PropTypes.string, - autocapitalize: PropTypes.string, - icon: PropTypes.node, - spellCheck: PropTypes.string, - value: PropTypes.string, - readOnly: PropTypes.bool, - autoSelect: PropTypes.bool, - onChange: PropTypes.func, - state: PropTypes.string, - bottomText: PropTypes.string, - topLabel: PropTypes.node, - trezorAction: PropTypes.node, - sideAddons: PropTypes.arrayOf(PropTypes.node), - isDisabled: PropTypes.bool, - name: PropTypes.string, - isSmallText: PropTypes.bool, - isPartiallyHidden: PropTypes.bool, -}; - -Input.defaultProps = { - type: 'text', - autoSelect: false, - height: 40, -}; - -export default Input; diff --git a/src/components/modals/QrModal/index.js b/src/components/modals/QrModal/index.js index 03453dfe..6ac10641 100644 --- a/src/components/modals/QrModal/index.js +++ b/src/components/modals/QrModal/index.js @@ -5,14 +5,7 @@ import PropTypes from 'prop-types'; import QrReader from 'react-qr-reader'; import styled from 'styled-components'; import { FormattedMessage, injectIntl } from 'react-intl'; - -import colors from 'config/colors'; -import icons from 'config/icons'; - -import { H2 } from 'components/Heading'; -import P from 'components/Paragraph'; -import Icon from 'components/Icon'; -import Link from 'components/Link'; +import { Link, Icon, P, H5, icons, colors } from 'trezor-ui-components'; import { parseUri } from 'utils/cryptoUriParser'; import type { parsedURI } from 'utils/cryptoUriParser'; @@ -141,12 +134,12 @@ class QrModal extends Component { return ( - + -

+

-
+ {!this.state.readerLoaded && !this.state.error && ( diff --git a/src/components/modals/confirm/Action/index.js b/src/components/modals/confirm/Action/index.js index 62a8c4eb..6026c5a5 100644 --- a/src/components/modals/confirm/Action/index.js +++ b/src/components/modals/confirm/Action/index.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { H3 } from 'components/Heading'; +import { H6 } from 'trezor-ui-components'; import DeviceIcon from 'components/images/DeviceIcon'; import type { TrezorDevice } from 'flowtype'; import { FormattedMessage } from 'react-intl'; @@ -20,13 +20,17 @@ const Header = styled.div` padding: 48px; `; +const StyledDeviceIcon = styled(DeviceIcon)` + margin-bottom: 30px; +`; + const ConfirmAction = (props: Props) => (
- -

+ +
-
+

); diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js index f0ee049a..1de717ca 100644 --- a/src/components/modals/confirm/Address/index.js +++ b/src/components/modals/confirm/Address/index.js @@ -3,14 +3,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; +import { FormattedMessage } from 'react-intl'; -import colors from 'config/colors'; +import { H6, P, colors } from 'trezor-ui-components'; import { FONT_SIZE } from 'config/variables'; -import { H3 } from 'components/Heading'; -import P from 'components/Paragraph'; -import { FormattedMessage } from 'react-intl'; - import l10nCommonMessages from 'views/common.messages'; import l10nMessages from './index.messages'; @@ -43,9 +40,9 @@ const ConfirmAddress = (props: Props) => { return (
-

+

-
+

diff --git a/src/components/modals/confirm/NoBackup/index.js b/src/components/modals/confirm/NoBackup/index.js index 8cf08208..999ee710 100644 --- a/src/components/modals/confirm/NoBackup/index.js +++ b/src/components/modals/confirm/NoBackup/index.js @@ -4,15 +4,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import icons from 'config/icons'; import { getOldWalletUrl } from 'utils/url'; -import colors from 'config/colors'; -import { H2 } from 'components/Heading'; -import P from 'components/Paragraph'; -import Icon from 'components/Icon'; -import Button from 'components/Button'; -import Link from 'components/Link'; +import { H5, P, Icon, Button, Link, colors, icons } from 'trezor-ui-components'; import type { TrezorDevice } from 'flowtype'; import type { Props as BaseProps } from '../../Container'; @@ -56,7 +50,10 @@ const ProceedButton = styled(Button)` `; const StyledP = styled(P)` - padding-bottom: 20px; + /* boost-specificity hack to override P base styling */ + && { + padding-bottom: 20px; + } `; const Row = styled.div` @@ -67,11 +64,11 @@ const Row = styled.div` const Confirmation = (props: Props) => ( props.onReceiveConfirmation(false)}> - + -

Your Trezor is not backed up

- - +
Your Trezor is not backed up
+ + If your device is ever lost or damaged, your funds will be lost. Backup your device first, to protect your coins against such events. diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index d25788e0..bf18e18a 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -4,12 +4,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import colors from 'config/colors'; +import { H5, P, colors } from 'trezor-ui-components'; import { LINE_HEIGHT, FONT_SIZE, FONT_WEIGHT } from 'config/variables'; -import P from 'components/Paragraph'; import DeviceIcon from 'components/images/DeviceIcon'; -import { H3 } from 'components/Heading'; import { FormattedMessage } from 'react-intl'; import type { TrezorDevice, State } from 'flowtype'; @@ -37,6 +35,7 @@ const Content = styled.div` const StyledP = styled(P)` padding-bottom: 20px; + text-align: center; color: ${colors.TEXT}; font-size: ${FONT_SIZE.BASE}; &:last-child { @@ -60,6 +59,10 @@ const FeeLevelName = styled(StyledP)` padding-bottom: 0px; `; +const StyledDeviceIcon = styled(DeviceIcon)` + margin-bottom: 10px; +`; + const ConfirmSignTx = (props: Props) => { const { amount, address, selectedFeeLevel } = props.sendForm; @@ -71,14 +74,14 @@ const ConfirmSignTx = (props: Props) => { return (
- -

+ +
-
-

+

+

diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js index 18609720..f5de2d62 100644 --- a/src/components/modals/confirm/UnverifiedAddress/index.js +++ b/src/components/modals/confirm/UnverifiedAddress/index.js @@ -3,15 +3,8 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { getOldWalletUrl } from 'utils/url'; -import icons from 'config/icons'; -import colors from 'config/colors'; - -import { H2 } from 'components/Heading'; -import P from 'components/Paragraph'; -import Icon from 'components/Icon'; -import Button from 'components/Button'; -import Link from 'components/Link'; import { FormattedMessage } from 'react-intl'; +import { Link, Button, Icon, P, H5, colors, icons } from 'trezor-ui-components'; import type { TrezorDevice } from 'flowtype'; import l10nMessages from './index.messages'; @@ -45,7 +38,9 @@ const Content = styled.div` `; const StyledP = styled(P)` - padding-bottom: 20px; + && { + padding-bottom: 20px; + } `; const Divider = styled.div` @@ -150,10 +145,10 @@ class ConfirmUnverifiedAddress extends PureComponent { - + -

{deviceStatus}

- +
{deviceStatus}
+ { {needsBackup && ( <> -

Device {device.label} is not backed up

- +
Device {device.label} is not backed up
+ If your device is ever lost or damaged, your funds will be lost. Backup your device first, to protect your coins against such events. diff --git a/src/components/modals/device/Duplicate/index.js b/src/components/modals/device/Duplicate/index.js index 0b696a95..a674a5c1 100644 --- a/src/components/modals/device/Duplicate/index.js +++ b/src/components/modals/device/Duplicate/index.js @@ -3,16 +3,9 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import icons from 'config/icons'; -import colors from 'config/colors'; import { FONT_SIZE } from 'config/variables'; -import { H3 } from 'components/Heading'; -import P from 'components/Paragraph'; -import Button from 'components/Button'; -import Input from 'components/inputs/Input'; -import Icon from 'components/Icon'; -import Link from 'components/Link'; +import { H5, P, Button, Input, Icon, Link, icons, colors } from 'trezor-ui-components'; import { getDuplicateInstanceNumber } from 'reducers/utils'; @@ -51,7 +44,9 @@ const Column = styled.div` `; const StyledP = styled(P)` - padding: 10px 0px; + && { + padding: 10px 0px; + } `; const StyledButton = styled(Button)` @@ -137,10 +132,10 @@ class DuplicateDevice extends PureComponent { return ( - + -

Clone {device.label}?

- +
Clone {device.label}?
+ This will create new instance of device which can be used with different passphrase diff --git a/src/components/modals/device/Forget/index.js b/src/components/modals/device/Forget/index.js index 79339bf8..7a58094b 100644 --- a/src/components/modals/device/Forget/index.js +++ b/src/components/modals/device/Forget/index.js @@ -4,9 +4,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { H2 } from 'components/Heading'; -import P from 'components/Paragraph'; -import Button from 'components/Button'; +import { H5, P, Button } from 'trezor-ui-components'; import { FormattedMessage } from 'react-intl'; import type { TrezorDevice } from 'flowtype'; @@ -31,7 +29,9 @@ const Wrapper = styled.div` `; const StyledP = styled(P)` - padding: 20px 0px; + && { + padding: 20px 0px; + } `; const Row = styled.div` @@ -69,15 +69,15 @@ class ForgetDevice extends PureComponent { render() { return ( -

+

-
- + + diff --git a/src/components/modals/device/Remember/index.js b/src/components/modals/device/Remember/index.js index 7cd128d4..15990598 100644 --- a/src/components/modals/device/Remember/index.js +++ b/src/components/modals/device/Remember/index.js @@ -3,10 +3,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { H3 } from 'components/Heading'; -import P from 'components/Paragraph'; -import Loader from 'components/Loader'; -import Button from 'components/Button'; +import { H5, P, Loader, Button } from 'trezor-ui-components'; import { FormattedMessage } from 'react-intl'; import type { TrezorDevice } from 'flowtype'; @@ -126,15 +123,15 @@ class RememberDevice extends PureComponent { } return ( -

+

-
- + + { constructor(props: Props) { super(props); @@ -111,7 +111,7 @@ class WalletType extends PureComponent { {device.state && ( - + )} @@ -129,10 +129,14 @@ class WalletType extends PureComponent {
- +
-

+

onWalletTypeRequest(false)}> @@ -140,21 +144,24 @@ class WalletType extends PureComponent { - - - + + } + > + + +
- +
-

+

diff --git a/src/components/modals/external/Cardano/index.js b/src/components/modals/external/Cardano/index.js index 7bedb2bd..ef727b8e 100644 --- a/src/components/modals/external/Cardano/index.js +++ b/src/components/modals/external/Cardano/index.js @@ -3,15 +3,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import colors from 'config/colors'; -import icons from 'config/icons'; -import Icon from 'components/Icon'; -import Link from 'components/Link'; -import Button from 'components/Button'; -import { H2 } from 'components/Heading'; -import P from 'components/Paragraph'; -import coins from 'constants/coins'; import { FormattedMessage } from 'react-intl'; +import { H5, Button, P, Icon, Link, icons, colors } from 'trezor-ui-components'; +import coins from 'constants/coins'; import l10nCommonMessages from '../common.messages'; import l10nMessages from './index.messages'; @@ -51,13 +45,13 @@ const Img = styled.img` const CardanoWallet = (props: Props) => ( - + -

+

-
-

+ +

diff --git a/src/components/modals/external/Nem/index.js b/src/components/modals/external/Nem/index.js index 4e03a333..5e9e6b94 100644 --- a/src/components/modals/external/Nem/index.js +++ b/src/components/modals/external/Nem/index.js @@ -3,13 +3,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import colors from 'config/colors'; -import icons from 'config/icons'; -import Icon from 'components/Icon'; -import Link from 'components/Link'; -import Button from 'components/Button'; -import { H2, H4 } from 'components/Heading'; -import P from 'components/Paragraph'; +import { H5, Button, P, Icon, Link, icons, colors } from 'trezor-ui-components'; + import coins from 'constants/coins'; import { FormattedMessage } from 'react-intl'; @@ -47,17 +42,18 @@ const Img = styled.img` const NemWallet = (props: Props) => ( - + -

+

-
-

+ +

+
+ + +

-

- -

i.id === 'xem').url}> diff --git a/src/components/modals/external/Stellar/index.js b/src/components/modals/external/Stellar/index.js index 486ee7f5..b04098bd 100644 --- a/src/components/modals/external/Stellar/index.js +++ b/src/components/modals/external/Stellar/index.js @@ -3,15 +3,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import colors from 'config/colors'; -import icons from 'config/icons'; -import Icon from 'components/Icon'; -import Link from 'components/Link'; -import Button from 'components/Button'; -import { H2 } from 'components/Heading'; -import P from 'components/Paragraph'; -import coins from 'constants/coins'; import { FormattedMessage } from 'react-intl'; +import { Button, H5, Link, P, Icon, icons, colors } from 'trezor-ui-components'; +import coins from 'constants/coins'; import l10nCommonMessages from '../common.messages'; import l10nMessages from './index.messages'; @@ -51,13 +45,13 @@ const Img = styled.img` const StellarWallet = (props: Props) => ( - + -

+

-
-

+ +

diff --git a/src/components/modals/external/Tezos/index.js b/src/components/modals/external/Tezos/index.js index f5d1176e..44c69ad3 100644 --- a/src/components/modals/external/Tezos/index.js +++ b/src/components/modals/external/Tezos/index.js @@ -3,13 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import colors from 'config/colors'; -import icons from 'config/icons'; -import Icon from 'components/Icon'; -import Link from 'components/Link'; -import Button from 'components/Button'; -import { H2 } from 'components/Heading'; -import P from 'components/Paragraph'; +import { Button, H5, Link, P, Icon, icons, colors } from 'trezor-ui-components'; import coins from 'constants/coins'; import TezosImage from './images/xtz.png'; @@ -47,10 +41,10 @@ const Img = styled.img` const TezosWallet = (props: Props) => ( - + -

Tezos wallet

+
Tezos wallet

You will be redirected to external wallet

i.id === 'xtz').url}> diff --git a/src/components/modals/index.js b/src/components/modals/index.js index be40b967..955fc467 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -3,7 +3,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import colors from 'config/colors'; +import { colors } from 'trezor-ui-components'; import { FADE_IN } from 'config/animations'; import { UI } from 'trezor-connect'; diff --git a/src/components/modals/passphrase/Passphrase/index.js b/src/components/modals/passphrase/Passphrase/index.js index 39243513..e0ef1989 100644 --- a/src/components/modals/passphrase/Passphrase/index.js +++ b/src/components/modals/passphrase/Passphrase/index.js @@ -3,15 +3,8 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { FormattedMessage } from 'react-intl'; - -import colors from 'config/colors'; -import { FONT_SIZE, TRANSITION } from 'config/variables'; - -import { H2 } from 'components/Heading'; -import P from 'components/Paragraph'; -import Checkbox from 'components/Checkbox'; -import Button from 'components/Button'; -import Input from 'components/inputs/Input'; +import { Button, Input, Checkbox, P, H5, colors } from 'trezor-ui-components'; +import { FONT_SIZE } from 'config/variables'; import type { TrezorDevice } from 'flowtype'; import l10nCommonMessages from 'views/common.messages'; @@ -68,24 +61,13 @@ const Footer = styled.div` const LinkButton = styled(Button)` padding: 0; margin: 0; - text-decoration: none; - cursor: pointer; - transition: ${TRANSITION.HOVER}; font-size: ${FONT_SIZE.SMALL}; - border-radius: 0; - border-bottom: 1px solid ${colors.GREEN_PRIMARY}; - background: transparent; + text-decoration: underline; + color: ${colors.GREEN_PRIMARY}; - &, - &:visited, - &:active, &:hover { color: ${colors.GREEN_PRIMARY}; - } - - &:hover { - border-color: transparent; - background: transparent; + text-decoration: none; } `; @@ -208,14 +190,14 @@ class Passphrase extends PureComponent { render() { return ( -

+

-
+

{' '} @@ -276,12 +258,16 @@ class Passphrase extends PureComponent {