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