From ec1b25d760c901cec825d98f8fc6d46cbcd36b3e Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 31 Aug 2018 17:57:37 +0200 Subject: [PATCH] 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)}>• + + ); } -} \ 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;