Removed modal less, refactored

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 colors from 'config/colors';
-import variables from 'config/css/variables';
+import Icon from 'components/Icon';
-
+import icons from 'config/icons';
-import TickImage from './images/tick.svg';
+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};
+    color: ${props => (props.checked ? colors.WHITE : colors.GREEN_PRIMARY)};
-    border: 2px solid ${props => (props.checked ? colors.BLUE : colors.LIGHT_GRAY_2)};
+    background: ${props => (props.checked ? colors.GREEN_PRIMARY : colors.WHITE)};
-    width: 16px;
+    border: 1px solid ${props => (props.checked ? colors.GREEN_PRIMARY : colors.DIVIDER)};
-    height: 16px;
+    width: 24px;
+    height: 24px;
 
-    ${/*sc-selector*/Wrapper}:hover &,
+    &:hover,
-    ${/*sc-selector*/Wrapper}:focus & {
+    &:focus {
-        border: 2px solid ${colors.BLUE};
+        border: 1px solid ${colors.TEXT_PRIMARY};
-    }
+        background: ${props => (props.checked ? colors.TEXT_PRIMARY : colors.WHITE)};
-
-    ${/*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;
+    padding-left: 10px;
-    font-weight: ${variables.FONT.WEIGHT.LIGHT};
     justify-content: center;
+    ${colors.TEXT_SECONDARY};
+    font-size: ${FONT_SIZE.SMALL};
 
-    ${/*sc-selector*/Wrapper}:hover &,
+    &:hover,
-    ${/*sc-selector*/Wrapper}:focus & {
+    &:focus {
-        color: ${props => (props.checked ? colors.DARK_GRAY_1 : colors.BLUE)};
+        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
+                <IconWrapper checked={checked}>
-                    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>
         );

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;
 

src/components/modals/index.js

@@ -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) {

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

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

src/styles/modal.less

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