arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Removed modal less, refactored

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-31 22:17:33 +02:00
parent fc659db337
commit 72d45a0c86
6 changed files with 98 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/Checkbox/index.js
View File

@ -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}
>
<Icon
checked={checked}
>
<IconWrapper checked={checked}>
{checked && (
<Tick>
<TickImage fill={colors.BLUE} />
<Icon size={26} color={checked ? colors.WHITE : colors.GREEN_PRIMARY} icon={icons.SUCCESS} />
</Tick>
)
}
</Icon>
</IconWrapper>
<Label checked={checked}>{children}</Label>
</Wrapper>
);

3
src/components/Header/index.js
View File

@ -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;

4
src/components/modals/index.js
View File

@ -90,7 +90,9 @@ class Modal extends Component<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) {

119
src/components/modals/passphrase/Passphrase/index.js
View File

@ -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<Props, State> {
//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 (
<div className="passphrase">
{/* <button className="close-modal transparent" onClick={ event => this.submit(true) }></button> */}
<h3>Enter { deviceLabel } passphrase</h3>
<p>Note that passphrase is case-sensitive.</p>
<div className="row">
<label>Passphrase</label>
<input
ref={(element) => { this.passphraseInput = element; }}
<Wrapper>
<H2>Enter { deviceLabel } passphrase</H2>
<P isSmaller>Note that passphrase is case-sensitive.</P>
<Row>
<Label>Passphrase</Label>
<Input
innerRef={(element) => { 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<Props, State> {
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"
/>
</div>
{ singleInput ? null : (
<div className="row">
<label>Re-enter passphrase</label>
<input
ref={(element) => { this.passphraseRevisionInput = element; }}
</Row>
{!singleInput && (
<Row>
<Label>Re-enter passphrase</Label>
<Input
innerRef={(element) => { 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<Props, State> {
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 ? <span className="error">Passphrases do not match</span> : null }
</div>
{!match && passphraseRevisionTouched && <PassphraseError className="error">Passphrases do not match</PassphraseError> }
</Row>
) }
<div className="row">
<label className="custom-checkbox">
<input type="checkbox" tabIndex="3" onChange={showPassphraseCheckboxFn} checked={visible} />
<span className="indicator" />
Show passphrase
</label>
{/* <label className="custom-checkbox">
<input type="checkbox" className="save_passphrase" tabIndex="4" onChange={ savePassphraseCheckboxFn } checked={ passphraseCached } />
<span className="indicator"></span>
<span>Save passphrase for current session (i)</span>
</label> */}
</div>
<div>
<button type="button" className="submit" tabIndex="4" disabled={!match} onClick={event => this.submit()}>Enter</button>
</div>
<div>
<p>If you want to access your default account</p>
<p><a className="green" onClick={event => this.submit(true)}>Leave passphrase blank</a></p>
</div>
</div>
<Row>
<Checkbox onClick={showPassphraseCheckboxFn} checked={visible}>Show passphrase</Checkbox>
</Row>
<Row>
<Button type="button" className="submit" tabIndex="4" disabled={!match} onClick={event => this.submit()}>Enter</Button>
</Row>
<Footer>
<P isSmaller>If you want to access your default account</P>
<P isSmaller>
<Link isGreen onClick={() => this.submit(true)}>Leave passphrase blank</Link>
</P>
</Footer>
</Wrapper>
);
}
}

1
src/styles/index.less
View File

@ -2,7 +2,6 @@
@import './colors.less';
@import './mixins.less';
@import './content.less';
@import './modal.less';
@import './reactSelect.less';
@import './rcTooltip.less';

122
src/styles/modal.less
View File

@ -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;
}
}