diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index bef11993..d1cb35ef 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -73,6 +73,7 @@ const IconWrapper = styled.div` display: flex; flex: 1 0 0; justify-content: flex-end; + align-items: center; `; const ImageWrapper = styled.div` diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 437e0fdb..79f969ad 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -58,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``; @@ -159,14 +161,14 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => ( {sidebarOpened ? ( <> - + ) : ( <> - + diff --git a/src/components/Log/index.js b/src/components/Log/index.js index c50d27f8..3bdfc63d 100644 --- a/src/components/Log/index.js +++ b/src/components/Log/index.js @@ -75,7 +75,7 @@ const Log = (props: Props): ?React$Element => { return ( - +
diff --git a/src/components/images/WalletType/index.js b/src/components/images/WalletType/index.js index f5910d73..853ad882 100644 --- a/src/components/images/WalletType/index.js +++ b/src/components/images/WalletType/index.js @@ -1,43 +1,29 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { colors, icons as ICONS } from 'trezor-ui-components'; -import styled from 'styled-components'; +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, @@ -45,4 +31,4 @@ Icon.propTypes = { onClick: PropTypes.func, }; -export default Icon; +export default WalletType; diff --git a/src/components/modals/QrModal/index.js b/src/components/modals/QrModal/index.js index 1c6932fb..15731198 100644 --- a/src/components/modals/QrModal/index.js +++ b/src/components/modals/QrModal/index.js @@ -134,7 +134,7 @@ class QrModal extends Component { return ( - +
diff --git a/src/components/modals/confirm/NoBackup/index.js b/src/components/modals/confirm/NoBackup/index.js index cd7e8cf0..77dc0398 100644 --- a/src/components/modals/confirm/NoBackup/index.js +++ b/src/components/modals/confirm/NoBackup/index.js @@ -64,7 +64,7 @@ const Row = styled.div` const Confirmation = (props: Props) => ( props.onReceiveConfirmation(false)}> - +
Your Trezor is not backed up
diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js index 21bfdc94..ea0d233c 100644 --- a/src/components/modals/confirm/UnverifiedAddress/index.js +++ b/src/components/modals/confirm/UnverifiedAddress/index.js @@ -145,7 +145,7 @@ class ConfirmUnverifiedAddress extends PureComponent { - +
{deviceStatus}
diff --git a/src/components/modals/device/Duplicate/index.js b/src/components/modals/device/Duplicate/index.js index 4c3044b0..fbb5f218 100644 --- a/src/components/modals/device/Duplicate/index.js +++ b/src/components/modals/device/Duplicate/index.js @@ -132,7 +132,7 @@ class DuplicateDevice extends PureComponent { return ( - +
Clone {device.label}?
diff --git a/src/components/modals/device/WalletType/index.js b/src/components/modals/device/WalletType/index.js index 8051dbf9..415348c0 100644 --- a/src/components/modals/device/WalletType/index.js +++ b/src/components/modals/device/WalletType/index.js @@ -74,6 +74,10 @@ const Content = styled.div` `} `; +const StyledWalletTypeIcon = styled(WalletTypeIcon)` + margin-right: 6px; +`; + class WalletType extends PureComponent { constructor(props: Props) { super(props); @@ -104,7 +108,7 @@ class WalletType extends PureComponent { {device.state && ( - + )} @@ -122,7 +126,11 @@ class WalletType extends PureComponent {
- +

@@ -141,10 +149,10 @@ class WalletType extends PureComponent { )} readMoreLink="https://wiki.trezor.io/Passphrase" > - +

- +

diff --git a/src/components/modals/external/Cardano/index.js b/src/components/modals/external/Cardano/index.js index 8d1356d2..3930e163 100644 --- a/src/components/modals/external/Cardano/index.js +++ b/src/components/modals/external/Cardano/index.js @@ -45,7 +45,7 @@ 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 68f14a1f..8d2da02b 100644 --- a/src/components/modals/external/Nem/index.js +++ b/src/components/modals/external/Nem/index.js @@ -42,7 +42,7 @@ const Img = styled.img` const NemWallet = (props: Props) => ( - +
diff --git a/src/components/modals/external/Stellar/index.js b/src/components/modals/external/Stellar/index.js index c93e61a5..5d68775c 100644 --- a/src/components/modals/external/Stellar/index.js +++ b/src/components/modals/external/Stellar/index.js @@ -45,7 +45,7 @@ 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 fa4a4c02..114c6a88 100644 --- a/src/components/modals/external/Tezos/index.js +++ b/src/components/modals/external/Tezos/index.js @@ -41,7 +41,7 @@ const Img = styled.img` const TezosWallet = (props: Props) => ( - +
Tezos wallet
diff --git a/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js index c6ce5b17..d265b191 100644 --- a/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js +++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js @@ -78,7 +78,7 @@ class Group extends PureComponent { diff --git a/src/views/Landing/components/BetaDisclaimer/index.js b/src/views/Landing/components/BetaDisclaimer/index.js index 1c647de5..2d06c0c8 100644 --- a/src/views/Landing/components/BetaDisclaimer/index.js +++ b/src/views/Landing/components/BetaDisclaimer/index.js @@ -91,7 +91,7 @@ const BetaDisclaimer = (props: { close: () => void }) => ( /> - + { - + @@ -191,7 +191,7 @@ const AccountMenu = (props: Props) => { - + @@ -207,7 +207,7 @@ const AccountMenu = (props: Props) => { - + @@ -243,7 +243,7 @@ const AccountMenu = (props: Props) => { iconLeft={{ type: ICONS.ARROW_LEFT, color: colors.TEXT_PRIMARY, - size: 20, + size: 10, }} /> diff --git a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js index 975d4622..1c9973a1 100644 --- a/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js @@ -47,7 +47,7 @@ class CoinMenu extends PureComponent { iconRight={{ type: ICONS.SKIP, color: colors.TEXT_SECONDARY, - size: 27, + size: 13, }} /> ); diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js index ba4dc4ed..066b8115 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js @@ -50,7 +50,7 @@ class DeviceList extends PureComponent { > diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js index 4171be63..79601f55 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js @@ -16,7 +16,7 @@ const Wrapper = styled.div` `; const Item = styled.div` - padding: 6px 24px; + padding: 12px 24px; display: flex; align-items: center; font-size: ${FONT_SIZE.BASE}; @@ -69,7 +69,7 @@ class MenuItems extends PureComponent { > @@ -78,7 +78,7 @@ class MenuItems extends PureComponent { this.props.duplicateDevice(device)}> )} - {this.showRenewSession() && ( + {!this.showRenewSession() && ( this.props.acquireDevice()}> )} this.props.forgetDevice(device)}> - + @@ -107,7 +107,7 @@ class MenuItems extends PureComponent { - + diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index bb665f49..28504e92 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -27,7 +27,9 @@ const Header = styled(DeviceHeader)` flex: 0 0 auto; `; -const WalletTypeIconWrapper = styled.div``; +const DeviceIconWrapper = styled.div` + margin: 0 3px; +`; const Counter = styled.div` display: flex; @@ -39,7 +41,6 @@ const Counter = styled.div` width: 24px; height: 24px; font-size: ${FONT_SIZE.COUNTER}; - margin-right: 8px; `; const TransitionGroupWrapper = styled(TransitionGroup)` @@ -90,6 +91,14 @@ const A = styled.a` } `; +const StyledIcon = styled(Icon)` + margin-right: 6px; +`; + +const IconDivider = styled.div` + width: 8px; +`; + type TransitionMenuProps = { animationType: ?string, children?: React.Node, @@ -276,9 +285,9 @@ class LeftNavigation extends React.PureComponent { } maxWidth={200} placement="bottom" - enterDelayMs={0.5} + mouseEnterDelay={0.5} > - + { if (selectedDevice && isDeviceReady) { @@ -292,10 +301,10 @@ class LeftNavigation extends React.PureComponent { : colors.TEXT_SECONDARY } type={walletType} - size={25} + size={16} color={colors.TEXT_SECONDARY} /> - + )} {this.props.devices.length > 1 && ( @@ -305,9 +314,11 @@ class LeftNavigation extends React.PureComponent { } maxWidth={200} placement="bottom" - enterDelayMs={0.5} + mouseEnterDelay={0.5} > - {this.props.devices.length} + + {this.props.devices.length} + )} {/* { } maxWidth={200} placement="bottom" - enterDelayMs={0.5} + mouseEnterDelay={0.5} > { */} + @@ -353,7 +365,7 @@ class LeftNavigation extends React.PureComponent { target="_blank" rel="noreferrer noopener" > - + diff --git a/src/views/Wallet/views/Account/Receive/ethereum/index.js b/src/views/Wallet/views/Account/Receive/ethereum/index.js index 94aa3ddf..3bc7940d 100644 --- a/src/views/Wallet/views/Account/Receive/ethereum/index.js +++ b/src/views/Wallet/views/Account/Receive/ethereum/index.js @@ -79,6 +79,10 @@ const QrWrapper = styled.div` flex-direction: column; `; +const StyledDeviceIcon = styled(DeviceIcon)` + margin-right: 6px; +`; + const AccountReceive = (props: Props) => { const device = props.wallet.selectedDevice; const { account, discovery, shouldRender } = props.selectedAccount; @@ -118,7 +122,11 @@ const AccountReceive = (props: Props) => { trezorAction={ isAddressVerifying ? ( - + diff --git a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js index 1f9e43bb..48f80200 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js @@ -131,6 +131,7 @@ const StyledLink = styled(Link)` const StyledIcon = styled(Icon)` cursor: pointer; + margin-left: 6px; `; // stateless component @@ -207,7 +208,7 @@ const AdvancedForm = (props: Props) => { @@ -265,7 +266,7 @@ const AdvancedForm = (props: Props) => { @@ -291,7 +292,7 @@ const AdvancedForm = (props: Props) => { diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js index 3c00ef22..9e16e6bd 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/index.js @@ -181,6 +181,7 @@ const ToggleAdvancedSettingsButton = styled(Button)` flex: 1 1 0; align-items: center; font-weight: ${FONT_WEIGHT.SEMIBOLD}; + justify-content: flex-start; `; const FormButtons = styled.div` @@ -205,6 +206,7 @@ const ClearButton = styled(Button)``; const AdvancedSettingsIcon = styled(Icon)` margin-left: 10px; + margin-right: 6px; `; const QrButton = styled(Button)` @@ -225,6 +227,10 @@ const EqualsSign = styled.div` } `; +const StyledIcon = styled(Icon)` + margin-right: 6px; +`; + // render helpers const getAddressInputState = ( address: string, @@ -415,9 +421,15 @@ const AccountSend = (props: Props) => { sideAddons={[ onSetMax()} isActive={setMax}> {!setMax && ( - + + )} + {setMax && ( + )} - {setMax && } , { diff --git a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js index 9153160d..81201913 100644 --- a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js @@ -65,6 +65,7 @@ const AdvancedSettingsSendButtonWrapper = styled.div` const StyledIcon = styled(Icon)` cursor: pointer; + margin-left: 6px; `; const getFeeInputState = (feeErrors: string, feeWarnings: string): string => { @@ -125,7 +126,7 @@ const AdvancedForm = (props: Props) => { @@ -164,7 +165,7 @@ const AdvancedForm = (props: Props) => { diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js index 7c6cb272..77c09c0f 100644 --- a/src/views/Wallet/views/Account/Send/ripple/index.js +++ b/src/views/Wallet/views/Account/Send/ripple/index.js @@ -142,6 +142,7 @@ const ToggleAdvancedSettingsButton = styled(Button)` flex: 1 1 0; align-items: center; font-weight: ${FONT_WEIGHT.SEMIBOLD}; + justify-content: flex-start; `; const FormButtons = styled.div` @@ -223,6 +224,11 @@ const EqualsSign = styled.div` display: none; } `; + +const StyledIcon = styled(Icon)` + margin-right: 6px; +`; + // render helpers const getAddressInputState = ( address: string, @@ -381,9 +387,15 @@ const AccountSend = (props: Props) => { sideAddons={[ onSetMax()} isActive={setMax}> {!setMax && ( - + + )} + {setMax && ( + )} - {setMax && } , { diff --git a/src/views/Wallet/views/Account/Summary/ethereum/index.js b/src/views/Wallet/views/Account/Summary/ethereum/index.js index a0ea3f02..48655136 100644 --- a/src/views/Wallet/views/Account/Summary/ethereum/index.js +++ b/src/views/Wallet/views/Account/Summary/ethereum/index.js @@ -26,7 +26,6 @@ const AccountHeading = styled.div` const TokensHeadingWrapper = styled.div` display: flex; - align-items: center; padding: 20px 0; `; @@ -43,12 +42,8 @@ const AccountTitle = styled.div` `; const StyledIcon = styled(Icon)` - position: relative; - top: -7px; - - &:hover { - cursor: pointer; - } + margin-left: 6px; + cursor: pointer; `; const StyledLink = styled(Link)` @@ -108,7 +103,7 @@ const AccountSummary = (props: Props) => { placement="top" content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)} > - +