From 80ac6bcee5a5d4ca16ce82f6600c3fdf7fe8913c Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Thu, 30 Aug 2018 18:01:17 +0200 Subject: [PATCH 01/10] Pin modal partly refactored --- src/components/modals/InvalidPin.js | 19 ------------ src/components/modals/PassphraseType.js | 20 ------------- src/components/modals/index.js | 14 +++++---- .../Passphrase/index.js} | 2 -- .../modals/passphrase/Type/index.js | 29 +++++++++++++++++++ src/components/modals/pin/Invalid/index.js | 24 +++++++++++++++ .../modals/{Pin.js => pin/Pin/index.js} | 10 +++++-- 7 files changed, 68 insertions(+), 50 deletions(-) delete mode 100644 src/components/modals/InvalidPin.js delete mode 100644 src/components/modals/PassphraseType.js rename src/components/modals/{Passphrase.js => passphrase/Passphrase/index.js} (99%) create mode 100644 src/components/modals/passphrase/Type/index.js create mode 100644 src/components/modals/pin/Invalid/index.js rename src/components/modals/{Pin.js => pin/Pin/index.js} (95%) diff --git a/src/components/modals/InvalidPin.js b/src/components/modals/InvalidPin.js deleted file mode 100644 index e1c6a78c..00000000 --- a/src/components/modals/InvalidPin.js +++ /dev/null @@ -1,19 +0,0 @@ -/* @flow */ - - -import React from 'react'; -import type { Props } from './index'; - -const InvalidPin = (props: Props) => { - if (!props.modal.opened) return null; - - const { device } = props.modal; - return ( -
-

Entered PIN for { device.label } is not correct

-

Retrying...

-
- ); -}; - -export default InvalidPin; \ No newline at end of file diff --git a/src/components/modals/PassphraseType.js b/src/components/modals/PassphraseType.js deleted file mode 100644 index a54bd04e..00000000 --- a/src/components/modals/PassphraseType.js +++ /dev/null @@ -1,20 +0,0 @@ -/* @flow */ - - -import React from 'react'; -import type { Props } from './index'; - -const Confirmation = (props: Props) => { - if (!props.modal.opened) return null; - const { device } = props.modal; - - return ( -
-
-

Complete the action on { device.label } device

-
-
- ); -}; - -export default Confirmation; \ No newline at end of file diff --git a/src/components/modals/index.js b/src/components/modals/index.js index fa0596ad..4ad88240 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -17,10 +17,11 @@ import * as CONNECT from 'actions/constants/TrezorConnect'; import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; import type { State, Dispatch } from 'flowtype'; -import Pin from 'components/modals/Pin'; -import InvalidPin from 'components/modals/InvalidPin'; -import Passphrase from 'components/modals/Passphrase'; -import PassphraseType from 'components/modals/PassphraseType'; +import Pin from 'components/modals/pin/Pin'; +import InvalidPin from 'components/modals/pin/Invalid'; + +import Passphrase from 'components/modals/passphrase/Passphrase'; +import PassphraseType from 'components/modals/passphrase/Type'; import ConfirmSignTx from 'components/modals/confirm/SignTx'; import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddress'; @@ -52,7 +53,6 @@ export type Props = StateProps & DispatchProps; const duration = 300; - const Fade = ({ children, ...props }) => ( { render() { if (!this.props.modal.opened) return null; - const { opened, windowType } = this.props.modal; + const { opened } = this.props.modal; + + const windowType = UI.REQUEST_PIN; let component = null; switch (windowType) { diff --git a/src/components/modals/Passphrase.js b/src/components/modals/passphrase/Passphrase/index.js similarity index 99% rename from src/components/modals/Passphrase.js rename to src/components/modals/passphrase/Passphrase/index.js index 007f1e2f..7f151bb9 100644 --- a/src/components/modals/Passphrase.js +++ b/src/components/modals/passphrase/Passphrase/index.js @@ -1,6 +1,4 @@ /* @flow */ - - import React, { Component } from 'react'; import raf from 'raf'; diff --git a/src/components/modals/passphrase/Type/index.js b/src/components/modals/passphrase/Type/index.js new file mode 100644 index 00000000..568c1c3d --- /dev/null +++ b/src/components/modals/passphrase/Type/index.js @@ -0,0 +1,29 @@ +import React from 'react'; +import Icon from 'components/Icon'; +import colors from 'config/colors'; +import icons from 'config/icons'; +import styled from 'styled-components'; +import { H3 } from 'components/Heading'; + +const Wrapper = styled.div` + width: 360px; + padding: 24px 48px; +`; + +const Header = styled.div``; + +const Confirmation = (props) => { + if (!props.modal.opened) return null; + const { device } = props.modal; + + return ( + +
+ +

Complete the action on { device.label } device

+
+ + ); +}; + +export default Confirmation; \ No newline at end of file diff --git a/src/components/modals/pin/Invalid/index.js b/src/components/modals/pin/Invalid/index.js new file mode 100644 index 00000000..281965aa --- /dev/null +++ b/src/components/modals/pin/Invalid/index.js @@ -0,0 +1,24 @@ +import React from 'react'; +import styled from 'styled-components'; +import { H3 } from 'components/Heading'; +import P from 'components/Paragraph'; + +import type { Props } from './index'; + +const Wrapper = styled.div` + padding: 24px 48px; +`; + +const InvalidPin = (props: Props) => { + if (!props.modal.opened) return null; + + const { device } = props.modal; + return ( + +

Entered PIN for { device.label } is not correct

+

Retrying...

+ + ); +}; + +export default InvalidPin; \ No newline at end of file diff --git a/src/components/modals/Pin.js b/src/components/modals/pin/Pin/index.js similarity index 95% rename from src/components/modals/Pin.js rename to src/components/modals/pin/Pin/index.js index 355cd770..0de7fb2d 100644 --- a/src/components/modals/Pin.js +++ b/src/components/modals/pin/Pin/index.js @@ -2,13 +2,17 @@ import React, { Component } from 'react'; - +import styled from 'styled-components'; +import colors from 'config/colors'; import type { Props } from './index'; type State = { pin: string; } +const Wrapper = styled.div``; +const InputRow = styled.div``; + export default class Pin extends Component { keyboardHandler: (event: KeyboardEvent) => void; @@ -111,7 +115,7 @@ export default class Pin extends Component { const { pin } = this.state; return ( -
+ {/* */}

Enter { device.label } PIN

The PIN layout is displayed on your TREZOR.

@@ -139,7 +143,7 @@ export default class Pin extends Component {

Not sure how PIN works? Learn more

-
+ ); } } \ No newline at end of file From e1097b3fcc98ad6baf0ff030cdb8f62f248a36d3 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 31 Aug 2018 13:58:19 +0200 Subject: [PATCH 02/10] Adjust jsx templtes to new components --- src/components/Footer/index.js | 8 ++++---- src/components/Header/index.js | 3 ++- src/components/modals/index.js | 4 +--- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index d0b66f29..cb9562d1 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -18,7 +18,7 @@ const Wrapper = styled.div` display: flex; `; -const LinkWrapper = styled(Link)` +const StyledLink = styled(Link)` margin: 0 6px; margin-right: 20px; `; @@ -30,9 +30,9 @@ const Copy = styled.div` const Footer = ({ toggle }) => ( © {getYear(new Date())} - SatoshiLabs - Terms - Show Log + SatoshiLabs + Terms + Show Log ); diff --git a/src/components/Header/index.js b/src/components/Header/index.js index b64301c5..12d9b0fa 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -1,5 +1,6 @@ /* @flow */ import React from 'react'; +import Link from 'components/Link'; import styled from 'styled-components'; import colors from 'config/colors'; @@ -32,7 +33,7 @@ const LayoutWrapper = styled.div` } `; -const A = styled.a` +const A = styled(Link)` color: ${colors.WHITE}; margin-left: 24px; diff --git a/src/components/modals/index.js b/src/components/modals/index.js index 4ad88240..e62094b7 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -90,9 +90,7 @@ class Modal extends Component { render() { if (!this.props.modal.opened) return null; - const { opened } = this.props.modal; - - const windowType = UI.REQUEST_PIN; + const { opened, windowType } = this.props.modal; let component = null; switch (windowType) { From 8f9a26caaa54eb72593976a4e4c6062a7dfe9187 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 31 Aug 2018 14:05:32 +0200 Subject: [PATCH 03/10] Fixed syntax error --- src/components/Input/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Input/index.js b/src/components/Input/index.js index 5d027da3..b1bfc309 100644 --- a/src/components/Input/index.js +++ b/src/components/Input/index.js @@ -78,7 +78,7 @@ const StyledIcon = styled(Icon)` const Input = ({ type, autoComplete, - placeholder + placeholder, autoCorrect, autoCapitalize, spellCheck, From ec1b25d760c901cec825d98f8fc6d46cbcd36b3e Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 31 Aug 2018 17:57:37 +0200 Subject: [PATCH 04/10] Pin modal refactored --- src/components/Heading/index.js | 2 +- src/components/Paragraph/index.js | 1 + src/components/buttons/PinButton/index.js | 52 +++++++++ src/components/{ => inputs}/Input/index.js | 0 src/components/inputs/PinInput/index.js | 53 +++++++++ .../modals/device/Duplicate/index.js | 2 +- src/components/modals/pin/Pin/index.js | 101 +++++++++++------- src/config/icons.js | 3 + src/config/variables.js | 1 + src/styles/inputs.less | 5 - src/styles/modal.less | 46 -------- 11 files changed, 177 insertions(+), 89 deletions(-) create mode 100644 src/components/buttons/PinButton/index.js rename src/components/{ => inputs}/Input/index.js (100%) create mode 100644 src/components/inputs/PinInput/index.js diff --git a/src/components/Heading/index.js b/src/components/Heading/index.js index 899bcac8..af5ef892 100644 --- a/src/components/Heading/index.js +++ b/src/components/Heading/index.js @@ -4,7 +4,7 @@ import colors from 'config/colors'; const baseStyles = css` -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; - color: ${colors.BLACK}; + color: ${colors.TEXT_PRIMARY}; font-weight: bold; `; diff --git a/src/components/Paragraph/index.js b/src/components/Paragraph/index.js index 9d61a0d2..88a24fb8 100644 --- a/src/components/Paragraph/index.js +++ b/src/components/Paragraph/index.js @@ -8,6 +8,7 @@ const Wrapper = styled.p` font-size: ${FONT_SIZE.BASE}; line-height: ${LINE_HEIGHT.BASE}; color: ${colors.TEXT_SECONDARY}; + padding: 0; ${props => props.isSmaller && css` font-size: ${FONT_SIZE.SMALLER}; diff --git a/src/components/buttons/PinButton/index.js b/src/components/buttons/PinButton/index.js new file mode 100644 index 00000000..169fee14 --- /dev/null +++ b/src/components/buttons/PinButton/index.js @@ -0,0 +1,52 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import colors from 'config/colors'; + +const Wrapper = styled.button` + width: 80px; + height: 80px; + margin-top: 15px; + margin-left: 10px; + font-size: 22px; + font-weight: 600; + color: ${colors.TEXT_PRIMARY}; + border: 1px solid ${colors.DIVIDER}; + background: ${colors.WHITE}; + transition: all 0.3s; + + &:first-child { + margin-left: 0px; + } + + &:hover { + color: ${colors.TEXT_PRIMARY}; + background-color: ${colors.WHITE}; + border-color: ${colors.TEXT_SECONDARY}; + } + + &:active { + color: ${colors.TEXT_PRIMARY}; + background: ${colors.DIVIDER}; + border-color: ${colors.DIVIDER}; + } +`; + +const PinButton = ({ + children, className, onClick, +}) => ( + + {children} + +); + +PinButton.propTypes = { + className: PropTypes.string, + children: PropTypes.string.isRequired, + onClick: PropTypes.func, +}; + +export default PinButton; \ No newline at end of file diff --git a/src/components/Input/index.js b/src/components/inputs/Input/index.js similarity index 100% rename from src/components/Input/index.js rename to src/components/inputs/Input/index.js diff --git a/src/components/inputs/PinInput/index.js b/src/components/inputs/PinInput/index.js new file mode 100644 index 00000000..a271f810 --- /dev/null +++ b/src/components/inputs/PinInput/index.js @@ -0,0 +1,53 @@ +import 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 { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; +import icons from 'config/icons'; + +const Wrapper = styled.div` + position: relative; +`; + +const StyledInput = styled.input` + letter-spacing: 7px; + font-weight: ${FONT_WEIGHT.BIGGER}; + font-size: ${FONT_SIZE.BIGGER}; + padding: 5px 31px 10px 20px; + color: ${colors.TEXT_PRIMARY}; + background: transparent; +`; + +const StyledIcon = styled(Icon)` + position: absolute; + top: 10px; + right: 15px; + cursor: pointer; +`; + +const Input = ({ + onChange, + onDeleteClick, + value, +}) => ( + + + onDeleteClick()} color={colors.TEXT_PRIMARY} icon={icons.BACK} /> + +); + +Input.propTypes = { + onDeleteClick: PropTypes.func.isRequired, + value: PropTypes.string.isRequired, + onChange: PropTypes.func, +}; + +export default Input; diff --git a/src/components/modals/device/Duplicate/index.js b/src/components/modals/device/Duplicate/index.js index 01f12e55..8c8562c7 100644 --- a/src/components/modals/device/Duplicate/index.js +++ b/src/components/modals/device/Duplicate/index.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import { H3 } from 'components/Heading'; import P from 'components/Paragraph'; import Button from 'components/buttons/Button'; -import Input from 'components/Input'; +import Input from 'components/inputs/Input'; import { getDuplicateInstanceNumber } from 'reducers/utils'; import { FONT_SIZE } from 'config/variables'; import Icon from 'components/Icon'; diff --git a/src/components/modals/pin/Pin/index.js b/src/components/modals/pin/Pin/index.js index 0de7fb2d..ae35601e 100644 --- a/src/components/modals/pin/Pin/index.js +++ b/src/components/modals/pin/Pin/index.js @@ -1,19 +1,44 @@ /* @flow */ - - +import P from 'components/Paragraph'; +import { H2 } from 'components/Heading'; import React, { Component } from 'react'; -import styled from 'styled-components'; +import Link from 'components/Link'; import colors from 'config/colors'; +import styled from 'styled-components'; +import PinInput from 'components/inputs/PinInput'; +import PinButton from 'components/buttons/PinButton'; +import Button from 'components/buttons/Button'; import type { Props } from './index'; type State = { pin: string; } -const Wrapper = styled.div``; -const InputRow = styled.div``; +const Wrapper = styled.div` + padding: 24px 48px; +`; -export default class Pin extends Component { +const InputRow = styled.div` + margin-top: 24px; +`; + +const PinRow = styled.div``; + +const StyledP = styled(P)` + padding-top: 5px; +`; + +const StyledLink = styled(Link)` + padding-left: 5px; +`; + +const Footer = styled.div` + margin: 20px 0 10px 0; + display: flex; + flex-direction: column; +`; + +class Pin extends Component { keyboardHandler: (event: KeyboardEvent) => void; state: State; @@ -109,41 +134,45 @@ export default class Pin extends Component { render() { if (!this.props.modal.opened) return null; - const { onPinSubmit } = this.props.modalActions; const { device } = this.props.modal; const { pin } = this.state; - return ( - {/* */} -

Enter { device.label } PIN

-

The PIN layout is displayed on your TREZOR.

- -
- -
- -
- - - -
-
- - - -
-
- - - -
- -
-

Not sure how PIN works? Learn more

+

Enter { device.label } PIN

+

The PIN layout is displayed on your TREZOR.

+ + this.onPinBackspace()} /> + + + this.onPinAdd(7)}>• + this.onPinAdd(8)}>• + this.onPinAdd(9)}>• + + + this.onPinAdd(4)}>• + this.onPinAdd(5)}>• + this.onPinAdd(6)}>• + + + this.onPinAdd(1)}>• + this.onPinAdd(2)}>• + this.onPinAdd(3)}>• + +
+ + Not sure how PIN works? + Learn more + + +
); } -} \ No newline at end of file +} + +export default Pin; \ No newline at end of file diff --git a/src/config/icons.js b/src/config/icons.js index cd08ccb4..a90b2797 100644 --- a/src/config/icons.js +++ b/src/config/icons.js @@ -1,4 +1,7 @@ export default { + BACK: [ + 'M656.224 402.304l-66.848 66.176-66.848-66.176-50.144 49.6 66.912 66.176-66.912 66.176 50.176 49.632 66.848-66.176 66.848 66.176 50.112-49.632-66.816-66.176 66.816-66.176-50.144-49.6zM337.824 256h540.928c27.2 0 49.248 21.824 49.248 48.768v414.464c0 26.944-22.048 48.768-49.248 48.768h-540.608c-13.856 0-27.072-5.792-36.416-15.936l-192.896-209.664c-17.248-18.752-17.088-47.488 0.352-66.048l192.576-204.8c9.344-9.92 22.4-15.552 36.064-15.552z', + ], HELP: [ 'M693.024 330.944c-99.968-99.936-262.080-99.936-362.048 0s-99.968 262.112 0 362.080c99.968 100 262.144 99.936 362.048 0 99.968-99.904 99.968-262.176 0-362.080zM501.216 717.952c-27.808 0-50.496-22.464-50.496-50.048 0-28.32 22.176-50.528 50.496-50.528 27.616 0 50.048 22.656 50.048 50.528 0.032 27.168-22.88 50.048-50.048 50.048zM536.416 542.464v27.744c0 13.504-5.28 18.784-18.784 18.784h-36.224c-13.504 0-18.72-5.28-18.72-18.784v-61.984c0-15.68 16.064-20.352 30.208-24.48 3.456-1.056 7.040-2.080 10.496-3.264 18.336-6.592 29.696-14.816 29.696-35.296 0-6.656 0-26.816-32.832-26.816-20.224 0-38.624 7.776-49.6 12.416-6.208 2.624-9.28 3.904-12.384 3.904-6.336 0-12.32-5.088-13.248-10.304l-12.608-32.96c-1.824-3.776-1.824-6.784-1.824-9.216 0-24.288 75.552-37.664 100.608-37.664 63.104 0 105.504 40.672 105.504 101.152 0.032 65.44-49.12 85.952-80.288 96.768z', ], diff --git a/src/config/variables.js b/src/config/variables.js index 776cb831..9bca6dbd 100644 --- a/src/config/variables.js +++ b/src/config/variables.js @@ -3,6 +3,7 @@ export const FONT_SIZE = { SMALLER: '12px', SMALL: '14px', BASE: '16px', + BIGGER: '32px', BIGGEST: '36px', }; diff --git a/src/styles/inputs.less b/src/styles/inputs.less index 34a4206b..36822482 100644 --- a/src/styles/inputs.less +++ b/src/styles/inputs.less @@ -13,11 +13,6 @@ input, textarea { &:focus { box-shadow: 0 1px 2px 0 rgba(169, 169, 169, 0.25); } - - &:disabled { - background: @color_gray_light; - color: @color_text_secondary; - } } input { diff --git a/src/styles/modal.less b/src/styles/modal.less index a157b540..783675ef 100644 --- a/src/styles/modal.less +++ b/src/styles/modal.less @@ -6,7 +6,6 @@ margin-top: 14px; } p { - margin: 5px 0px; font-weight: normal; color: @color_text_secondary; font-size: 12px; @@ -56,51 +55,6 @@ } .pin { - padding: 24px 48px; - .pin-row { - button { - width: 80px; - height: 80px; - margin-top: 15px; - margin-left: 10px; - font-size: 22px; - font-weight: 600; - color: @color_text_primary; - border: 1px solid @color_divider; - background: @color_white; - transition: all 0.3s; - &:first-child { - margin-left: 0px; - } - &:hover { - color: @color_text_primary; - border-color: @color_text_secondary; - } - &:active { - color: @color_text_primary; - background: @color_divider; - border-color: @color_divider; - } - - } - } - - .pin-input-row { - margin-top: 24px; - display: inline-block; - position: relative; - } - - input { - letter-spacing: 6px; - line-height: 48px; - font-weight: 600; - font-size: 32px; - height: auto; - padding: 0px 31px; - color: @color_text_primary; - background: transparent; - } .pin-backspace { position: absolute; From ef6eef9cfcda184a5be79edfe16c659a5185441e Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 31 Aug 2018 18:57:24 +0200 Subject: [PATCH 05/10] Added checkbox component --- src/components/Checkbox/index.js | 100 +++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 src/components/Checkbox/index.js diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js new file mode 100644 index 00000000..d3c78b3e --- /dev/null +++ b/src/components/Checkbox/index.js @@ -0,0 +1,100 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import colors from 'config/css/colors'; +import variables from 'config/css/variables'; + +import TickImage from './images/tick.svg'; + +const Wrapper = styled.div` + display: flex; + flex-direction: row; + cursor: pointer; + align-items: center; + + &:hover, + &:focus { + outline: none; + } +`; + +const Tick = styled.div` +`; + +const Icon = styled.div` + display: flex; + justify-content: center; + align-items: center; + background: ${colors.CORE_WHITE}; + border: 2px solid ${props => (props.checked ? colors.BLUE : colors.LIGHT_GRAY_2)}; + width: 16px; + height: 16px; + + ${/*sc-selector*/Wrapper}:hover &, + ${/*sc-selector*/Wrapper}:focus & { + border: 2px solid ${colors.BLUE}; + } + + ${/*sc-selector*/Wrapper}:hover & { + background: ${props => (props.checked ? colors.BLUE : colors.CORE_WHITE)}; + + * { + fill: ${props => (props.checked ? colors.CORE_WHITE : colors.BLUE)}; + } + } +`; + +const Label = styled.div` + display: flex; + padding-left: 5px; + font-weight: ${variables.FONT.WEIGHT.LIGHT}; + justify-content: center; + + ${/*sc-selector*/Wrapper}:hover &, + ${/*sc-selector*/Wrapper}:focus & { + color: ${props => (props.checked ? colors.DARK_GRAY_1 : colors.BLUE)}; + } +`; + +class Checkbox extends PureComponent { + handleKeyboard(e) { + if (e.keyCode === 32) { + this.props.onClick(e); + } + } + + render() { + const { + checked, + children, + onClick, + } = this.props; + return ( + this.handleKeyboard(e)} + tabIndex={0} + > + + {checked && ( + + + + ) + } + + + + ); + } +} + +Checkbox.propTypes = { + onClick: PropTypes.func.isRequired, + checked: PropTypes.bool, + children: PropTypes.string, +}; + +export default Checkbox; From fc659db337b2ae2b7530523c385482f8fc410732 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 31 Aug 2018 21:23:29 +0200 Subject: [PATCH 06/10] Refactored send confirm dialog --- .../modals/confirm/Address/index.js | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js index ce626394..0c562333 100644 --- a/src/components/modals/confirm/Address/index.js +++ b/src/components/modals/confirm/Address/index.js @@ -1,14 +1,16 @@ -/* @flow */ -import React, { Component } from 'react'; - -import { findAccount } from 'reducers/AccountsReducer'; +import styled from 'styled-components'; +import H3 from 'components/Heading'; +import colors from 'config/colors'; +import P from 'components/Paragraph'; +import { FONT_SIZE } from 'config/variables'; +import React from 'react'; const Wrapper = styled.div` - width: 370px; - padding: 24px 48px; + width: 390px; `; const Header = styled.div` + padding: 24px 48px; `; const Content = styled.div` @@ -18,11 +20,11 @@ const Content = styled.div` `; const Label = styled.div` - font-size: 10px; + font-size: ${FONT_SIZE.SMALLER}; color: ${colors.TEXT_SECONDARY}; `; -const ConfirmAddress = (props: Props) => { +const ConfirmAddress = (props) => { const { account, network, @@ -30,16 +32,16 @@ const ConfirmAddress = (props: Props) => { if (!account || !network) return null; return ( -
-
-

Confirm address on TREZOR

-

Please compare your address on device with address shown bellow.

-
-
-

{ account.address }

- -
-
+ +
+

Confirm address on TREZOR

+

Please compare your address on device with address shown bellow.

+
+ +

{ account.address }

+ + + ); }; From 72d45a0c866d62b5b9eeed30377f385f0a72c31a Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 31 Aug 2018 22:17:33 +0200 Subject: [PATCH 07/10] Removed modal less, refactored --- src/components/Checkbox/index.js | 54 ++++---- src/components/Header/index.js | 3 +- src/components/modals/index.js | 4 +- .../modals/passphrase/Passphrase/index.js | 119 ++++++++++------- src/styles/index.less | 1 - src/styles/modal.less | 122 ------------------ 6 files changed, 98 insertions(+), 205 deletions(-) delete mode 100644 src/styles/modal.less diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js index d3c78b3e..1f4eef2b 100644 --- a/src/components/Checkbox/index.js +++ b/src/components/Checkbox/index.js @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import colors from 'config/css/colors'; -import variables from 'config/css/variables'; - -import TickImage from './images/tick.svg'; +import colors from 'config/colors'; +import Icon from 'components/Icon'; +import icons from 'config/icons'; +import { FONT_SIZE } from 'config/variables'; const Wrapper = styled.div` display: flex; @@ -21,38 +21,34 @@ const Wrapper = styled.div` const Tick = styled.div` `; -const Icon = styled.div` +const IconWrapper = styled.div` display: flex; + border-radius: 2px; justify-content: center; align-items: center; - background: ${colors.CORE_WHITE}; - border: 2px solid ${props => (props.checked ? colors.BLUE : colors.LIGHT_GRAY_2)}; - width: 16px; - height: 16px; + color: ${props => (props.checked ? colors.WHITE : colors.GREEN_PRIMARY)}; + background: ${props => (props.checked ? colors.GREEN_PRIMARY : colors.WHITE)}; + border: 1px solid ${props => (props.checked ? colors.GREEN_PRIMARY : colors.DIVIDER)}; + width: 24px; + height: 24px; - ${/*sc-selector*/Wrapper}:hover &, - ${/*sc-selector*/Wrapper}:focus & { - border: 2px solid ${colors.BLUE}; - } - - ${/*sc-selector*/Wrapper}:hover & { - background: ${props => (props.checked ? colors.BLUE : colors.CORE_WHITE)}; - - * { - fill: ${props => (props.checked ? colors.CORE_WHITE : colors.BLUE)}; - } + &:hover, + &:focus { + border: 1px solid ${colors.TEXT_PRIMARY}; + background: ${props => (props.checked ? colors.TEXT_PRIMARY : colors.WHITE)}; } `; const Label = styled.div` display: flex; - padding-left: 5px; - font-weight: ${variables.FONT.WEIGHT.LIGHT}; + padding-left: 10px; justify-content: center; + ${colors.TEXT_SECONDARY}; + font-size: ${FONT_SIZE.SMALL}; - ${/*sc-selector*/Wrapper}:hover &, - ${/*sc-selector*/Wrapper}:focus & { - color: ${props => (props.checked ? colors.DARK_GRAY_1 : colors.BLUE)}; + &:hover, + &:focus { + color: ${props => (props.checked ? colors.TEXT_PRIMARY : colors.TEXT_PRIMARY)}; } `; @@ -75,16 +71,14 @@ class Checkbox extends PureComponent { onKeyUp={e => this.handleKeyboard(e)} tabIndex={0} > - + {checked && ( - + ) } - + ); diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 12d9b0fa..b64301c5 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -1,6 +1,5 @@ /* @flow */ import React from 'react'; -import Link from 'components/Link'; import styled from 'styled-components'; import colors from 'config/colors'; @@ -33,7 +32,7 @@ const LayoutWrapper = styled.div` } `; -const A = styled(Link)` +const A = styled.a` color: ${colors.WHITE}; margin-left: 24px; diff --git a/src/components/modals/index.js b/src/components/modals/index.js index e62094b7..4ad88240 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -90,7 +90,9 @@ class Modal extends Component { render() { if (!this.props.modal.opened) return null; - const { opened, windowType } = this.props.modal; + const { opened } = this.props.modal; + + const windowType = UI.REQUEST_PIN; let component = null; switch (windowType) { diff --git a/src/components/modals/passphrase/Passphrase/index.js b/src/components/modals/passphrase/Passphrase/index.js index 7f151bb9..7a18d0cd 100644 --- a/src/components/modals/passphrase/Passphrase/index.js +++ b/src/components/modals/passphrase/Passphrase/index.js @@ -1,9 +1,46 @@ /* @flow */ import React, { Component } from 'react'; import raf from 'raf'; +import colors from 'config/colors'; +import P from 'components/Paragraph'; +import { FONT_SIZE } from 'config/variables'; +import { H2 } from 'components/Heading'; +import Link from 'components/Link'; +import Checkbox from 'components/Checkbox'; +import Button from 'components/buttons/Button'; +import Input from 'components/inputs/Input'; +import styled from 'styled-components'; import type { Props } from './index'; +const Wrapper = styled.div` + padding: 24px 48px; +`; + +const Label = styled.div` + ${colors.TEXT_SECONDARY}; + font-size: ${FONT_SIZE.SMALL}; + padding-bottom: 5px; +`; + +const PassphraseError = styled.div``; + +const Row = styled.div` + position: relative; + text-align: left; + padding-top: 24px; + display: flex; + flex-direction: column; +`; + +const Footer = styled.div` + display: flex; + padding-top: 10px; + align-items: center; + flex-direction: column; + justify-content: center; +`; + type State = { deviceLabel: string; singleInput: boolean; @@ -231,18 +268,16 @@ export default class PinModal extends Component { //let passphraseInputType: string = visible || passphraseFocused ? "text" : "password"; //let passphraseRevisionInputType: string = visible || passphraseRevisionFocused ? "text" : "password"; - const showPassphraseCheckboxFn: Function = visible ? this.onPassphraseHide : this.onPassphraseShow; - + console.log('passphraseInputType', passphraseInputType); return ( -
- {/* */} -

Enter { deviceLabel } passphrase

-

Note that passphrase is case-sensitive.

-
- - { this.passphraseInput = element; }} + +

Enter { deviceLabel } passphrase

+

Note that passphrase is case-sensitive.

+ + + { this.passphraseInput = element; }} onChange={event => this.onPassphraseChange('passphrase', event.currentTarget.value)} type={passphraseInputType} autoComplete="off" @@ -250,17 +285,16 @@ export default class PinModal extends Component { autoCapitalize="off" spellCheck="false" data-lpignore="true" - onFocus={event => this.onPassphraseFocus('passphrase')} - onBlur={event => this.onPassphraseBlur('passphrase')} - + onFocus={() => this.onPassphraseFocus('passphrase')} + onBlur={() => this.onPassphraseBlur('passphrase')} tabIndex="1" /> -
- { singleInput ? null : ( -
- - { this.passphraseRevisionInput = element; }} + + {!singleInput && ( + + + { this.passphraseRevisionInput = element; }} onChange={event => this.onPassphraseChange('revision', event.currentTarget.value)} type={passphraseRevisionInputType} autoComplete="off" @@ -268,39 +302,26 @@ export default class PinModal extends Component { autoCapitalize="off" spellCheck="false" data-lpignore="true" - onFocus={event => this.onPassphraseFocus('revision')} - onBlur={event => this.onPassphraseBlur('revision')} - + onFocus={() => this.onPassphraseFocus('revision')} + onBlur={() => this.onPassphraseBlur('revision')} tabIndex="2" /> - { !match && passphraseRevisionTouched ? Passphrases do not match : null } -
+ {!match && passphraseRevisionTouched && Passphrases do not match } + ) } - - -
- - {/* */} -
- -
- -
- -
-

If you want to access your default account

-

this.submit(true)}>Leave passphrase blank

-
- -
+ + Show passphrase + + + + +
+

If you want to access your default account

+

+ this.submit(true)}>Leave passphrase blank +

+
+ ); } } \ No newline at end of file diff --git a/src/styles/index.less b/src/styles/index.less index e472047a..0c4c1b42 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -2,7 +2,6 @@ @import './colors.less'; @import './mixins.less'; @import './content.less'; -@import './modal.less'; @import './reactSelect.less'; @import './rcTooltip.less'; diff --git a/src/styles/modal.less b/src/styles/modal.less deleted file mode 100644 index 783675ef..00000000 --- a/src/styles/modal.less +++ /dev/null @@ -1,122 +0,0 @@ -.modal-container { - h3 { - color: @color_text_primary; - font-size: 16px; - font-weight: 500; - margin-top: 14px; - } - p { - font-weight: normal; - color: @color_text_secondary; - font-size: 12px; - } - - .confirm-address { - width: 390px; // address overflow - - .header { - padding: 24px 48px; - &:before { - .icomoon-T1; - font-size: 52px; - color: @color_text_secondary; - } - h3 { - margin: 0; - } - } - .content { - border-top: 1px solid @color_divider; - background: @color_main; - padding: 24px 48px; - - label { - font-size: 12px; - color: @color_text_secondary; - } - - p { - font-size: 12px; - font-weight: 400; - color: @color_text_primary; - } - } - } - - .close-modal { - position: absolute; - top: 0; - right: 0; - padding: 12px; - - &:after { - .icomoon-close; - } - } - - .pin { - - .pin-backspace { - position: absolute; - right: 14px; - top: 0; - bottom: 0; - margin: auto 0; - padding: 0; - &:after { - .icomoon-back; - } - } - - a { - color: @color_green_primary; - } - } - - .passphrase { - padding: 24px 48px; - - h3 { - max-width: 260px; - word-break: break-all; - } - - .row { - position: relative; - text-align: left; - padding-top: 24px; - label:not(.custom-checkbox) { - display: block; - padding-bottom: 6px; - color: @color_text_secondary; - } - - .error { - position: absolute; - left: 0px; - bottom: -19px; - font-size: 12px; - color: @color_error_primary; - } - } - } - - input[type="text"], - input[type="password"] { - width: 260px; - // box-shadow: none; - // border-radius: 0px; - // border: 1px solid @color_divider; - height: auto; - - .placeholder({ - color: @color_divider; - }); - } - - .submit { - width: 100%; - margin-top: 24px; - margin-bottom: 14px; - } -} \ No newline at end of file From 4ec97ad0030575bd3cb82f32b1312c5e43213f16 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 31 Aug 2018 22:26:28 +0200 Subject: [PATCH 08/10] Fixed passphrase modal after delete of global styles --- src/components/inputs/PinInput/index.js | 1 + src/components/modals/passphrase/Passphrase/index.js | 5 +++-- src/components/modals/pin/Pin/index.js | 6 ++++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/inputs/PinInput/index.js b/src/components/inputs/PinInput/index.js index a271f810..c4290a9a 100644 --- a/src/components/inputs/PinInput/index.js +++ b/src/components/inputs/PinInput/index.js @@ -12,6 +12,7 @@ const Wrapper = styled.div` const StyledInput = styled.input` letter-spacing: 7px; + width: 100%; font-weight: ${FONT_WEIGHT.BIGGER}; font-size: ${FONT_SIZE.BIGGER}; padding: 5px 31px 10px 20px; diff --git a/src/components/modals/passphrase/Passphrase/index.js b/src/components/modals/passphrase/Passphrase/index.js index 7a18d0cd..4948e08e 100644 --- a/src/components/modals/passphrase/Passphrase/index.js +++ b/src/components/modals/passphrase/Passphrase/index.js @@ -15,6 +15,7 @@ import type { Props } from './index'; const Wrapper = styled.div` padding: 24px 48px; + max-width: 390px; `; const Label = styled.div` @@ -272,8 +273,8 @@ export default class PinModal extends Component { console.log('passphraseInputType', passphraseInputType); return ( -

Enter { deviceLabel } passphrase

-

Note that passphrase is case-sensitive.

+ {/* ?

Enter { deviceLabel } passphrase

*/} + {/*

Note that passphrase is case-sensitive.

*/} { return (

Enter { device.label } PIN

-

The PIN layout is displayed on your TREZOR.

+

The PIN layout is displayed on your TREZOR.

this.onPinBackspace()} /> @@ -161,8 +162,9 @@ class Pin extends Component {