diff --git a/src/components/Button/index.js b/src/components/Button/index.js index c0704b56..a5f3931d 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -37,6 +37,11 @@ const Wrapper = styled.button` 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}; @@ -48,6 +53,10 @@ const Wrapper = styled.button` color: ${colors.TEXT_SECONDARY}; border: 1px solid ${colors.DIVIDER}; + &:focus { + border-color: ${colors.INPUT_FOCUSED_BORDER}; + } + &:hover { color: ${colors.TEXT_PRIMARY}; background: ${colors.DIVIDER}; @@ -64,6 +73,11 @@ const Wrapper = styled.button` border: 0px; color: ${colors.TEXT_SECONDARY}; + &:focus { + color: ${colors.TEXT_PRIMARY}; + box-shadow: none; + } + &:hover, &:active { color: ${colors.TEXT_PRIMARY}; diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index cdce9e46..0742e4e3 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -15,6 +15,7 @@ const Wrapper = styled.div` position: relative; height: 70px; width: 320px; + z-index: 10; display: flex; align-items: center; background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')}; diff --git a/src/components/Select/index.js b/src/components/Select/index.js index 1d7c020b..a3691964 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -11,17 +11,16 @@ const styles = isSearchable => ({ width: '100%', color: colors.TEXT_SECONDARY, }), - control: (base, { isDisabled }) => ({ + control: (base, { isDisabled, isFocused }) => ({ ...base, minHeight: 'initial', height: '40px', borderRadius: '2px', - borderColor: colors.DIVIDER, - boxShadow: 'none', + 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: isSearchable ? 'text' : 'pointer', - borderColor: colors.DIVIDER, }, }), indicatorSeparator: () => ({ diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 1566b416..5355ce44 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -67,6 +67,11 @@ const StyledTextarea = styled(Textarea)` 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}; diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 5bda40dd..ee2aa96a 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -59,6 +59,11 @@ const StyledInput = styled.input` 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}; diff --git a/src/config/animations.js b/src/config/animations.js index 950ea9e2..c7fee813 100644 --- a/src/config/animations.js +++ b/src/config/animations.js @@ -71,4 +71,13 @@ export const FADE_IN = keyframes` 100% { opacity: 1; } +`; + +export const SLIDE_DOWN = keyframes` + 0% { + transform: translateY(-100%); + } + 100% { + transform: translateY(0%); + } `; \ No newline at end of file diff --git a/src/config/colors.js b/src/config/colors.js index efca1cda..23140583 100644 --- a/src/config/colors.js +++ b/src/config/colors.js @@ -34,4 +34,7 @@ export default { LABEL_COLOR: '#A9A9A9', TOOLTIP_BACKGROUND: '#333333', + + INPUT_FOCUSED_BORDER: '#A9A9A9', + INPUT_FOCUSED_SHADOW: '#d6d7d7', }; \ No newline at end of file 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 0abfb858..e3792143 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 @@ -8,18 +8,21 @@ import colors from 'config/colors'; import { FONT_SIZE } from 'config/variables'; const Wrapper = styled.div` - padding: 0px 24px 8px 19px; - box-shadow: 0 3px 8px rgba(0,0,0,0.06); background: ${colors.WHITE}; + box-shadow: 0 3px 8px rgba(0,0,0,0.06); `; const Item = styled.div` - padding: 4px 2px; + padding: 6px 24px; display: flex; align-items: center; font-size: ${FONT_SIZE.BASE}; cursor: pointer; - color: ${colors.TEXT_SECONDARY}; + color: ${colors.TEXT_SECONDARY}; + + &:hover { + background: ${colors.GRAY_LIGHT}; + } `; const Label = styled.div` diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 8899072f..4797b422 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -3,6 +3,11 @@ import React, { PureComponent } from 'react'; import styled from 'styled-components'; import TrezorConnect from 'trezor-connect'; import type { TrezorDevice } from 'flowtype'; + +import COLORS from 'config/colors'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; +import { SLIDE_DOWN } from 'config/animations'; + import Button from 'components/Button'; import * as deviceUtils from 'utils/device'; import MenuItems from './components/MenuItems'; @@ -12,9 +17,18 @@ import type { Props } from '../common'; import Divider from '../Divider'; -const Wrapper = styled.div``; +const Wrapper = styled.div` + position: absolute; + width: 100%; + padding-bottom: 8px; + border-bottom: 1px solid #E3E3E3; + background: white; + box-shadow: 0 3px 8px rgba(0,0,0,0.06); + animation: ${SLIDE_DOWN} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards; +`; + const ButtonWrapper = styled.div` - margin-top: 10px; + margin: 10px 0; padding: 0 10px; display: flex; `; @@ -22,6 +36,14 @@ const StyledButton = styled(Button)` flex: 1; `; +const StyledDivider = styled(Divider)` + background: #fff; + color: ${COLORS.TEXT_PRIMARY}; + font-weight: ${FONT_WEIGHT.MEDIUM}; + font-size: ${FONT_SIZE.BASE}; + border: none; +`; + type DeviceMenuItem = { type: string; label: string; @@ -32,6 +54,7 @@ class DeviceMenu extends PureComponent { super(props); this.mouseDownHandler = this.mouseDownHandler.bind(this); this.blurHandler = this.blurHandler.bind(this); + this.myRef = React.createRef(); } componentDidMount(): void { @@ -63,6 +86,10 @@ class DeviceMenu extends PureComponent { } } + getMenuHeight(): number { + return this.myRef.current ? this.myRef.current.getBoundingClientRect().height : 0; + } + blurHandler(): void { this.props.toggleDeviceDropdown(false); } @@ -96,26 +123,28 @@ class DeviceMenu extends PureComponent { return deviceUtils.isDeviceAccessible(this.props.wallet.selectedDevice); } + myRef: { current: ?HTMLDivElement } + render() { const { devices, onSelectDevice, forgetDevice } = this.props; const { transport } = this.props.connect; const { selectedDevice } = this.props.wallet; return ( - + {this.showMenuItems() && } - {this.showDivider() && } + {this.showDivider() && } - - {deviceUtils.isWebUSB(transport) && ( + {deviceUtils.isWebUSB(transport) && ( + Check for devices - )} - + + )} ); } diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js index 4b722a7d..1cce3321 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js @@ -23,10 +23,11 @@ const TextLeft = styled.p` `; const Divider = ({ - textLeft, textRight, hasBorder = false, + textLeft, textRight, hasBorder = false, className, }) => ( {textLeft}

{textRight}

@@ -34,6 +35,7 @@ const Divider = ({ ); Divider.propTypes = { + className: PropTypes.string, textLeft: PropTypes.string, textRight: PropTypes.string, hasBorder: PropTypes.bool, diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index c98c7b72..5a2e7e83 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -57,6 +57,7 @@ const Footer = styled.div.attrs(props => ({ const Body = styled.div` width: 320px; + min-height: ${props => (props.minHeight ? `${props.minHeight}px` : '0px')}; `; const Help = styled.div` @@ -110,42 +111,48 @@ const TransitionMenu = (props: TransitionMenuProps): React$Element { constructor(props: Props) { super(props); + this.deviceMenuRef = React.createRef(); const { location } = this.props.router; const hasNetwork = location && location.state && location.state.network; this.state = { animationType: hasNetwork ? 'slide-left' : null, - shouldRenderDeviceSelection: false, clicked: false, + bodyMinHeight: 0, }; } + componentDidMount() { + this.recalculateBodyMinHeight(); + } + componentWillReceiveProps(nextProps: Props) { - const { dropdownOpened, selectedDevice } = nextProps.wallet; + const { selectedDevice } = nextProps.wallet; const { location } = nextProps.router; const hasNetwork = location && location.state.network; const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal'; - if (dropdownOpened) { - this.setState({ shouldRenderDeviceSelection: true }); - } else if (hasNetwork) { + + if (hasNetwork) { this.setState({ - shouldRenderDeviceSelection: false, animationType: 'slide-left', }); } else { this.setState({ - shouldRenderDeviceSelection: false, animationType: deviceReady ? 'slide-right' : null, }); } } + componentDidUpdate() { + this.recalculateBodyMinHeight(); + } + shouldRenderAccounts() { const { selectedDevice } = this.props.wallet; const { location } = this.props.router; @@ -153,7 +160,6 @@ class LeftNavigation extends React.PureComponent { && location && location.state && location.state.network - && !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-left'; } @@ -163,9 +169,19 @@ class LeftNavigation extends React.PureComponent { } shouldRenderCoins() { - return !this.state.shouldRenderDeviceSelection && this.state.animationType !== 'slide-left'; + return this.state.animationType !== 'slide-left'; } + recalculateBodyMinHeight() { + if (this.deviceMenuRef.current) { + this.setState({ + bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(), + }); + } + } + + deviceMenuRef: { current: any }; + render() { const { props } = this; let menu; @@ -183,7 +199,7 @@ class LeftNavigation extends React.PureComponent { ); } - const { selectedDevice } = props.wallet; + const { selectedDevice, dropdownOpened } = props.wallet; const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice); return ( { )} {...this.props} /> - - {this.state.shouldRenderDeviceSelection && } + + {dropdownOpened && } {isDeviceAccessible && menu}