added texts for passphrase modals and wallet type icons

src/components/images/WalletType/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import colors from 'config/colors';
+import styled from 'styled-components';
+
+const SvgWrapper = styled.svg`
+    :hover {
+        path {
+            fill: ${props => props.hoverColor}
+        }
+    }
+`;
+
+const Path = styled.path`
+    fill: ${props => props.color};
+`;
+
+export const HIDDEN = 'M23.9,13.6l-4-11C19.8,2.3,19.4,2,19,2h-3c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.3l3.3,9H14h-4H2.4l3.3-9H8 c0.6,0,1-0.4,1-1S8.6,2,8,2H5C4.6,2,4.2,2.3,4.1,2.7l-4,11C0,13.7,0,13.9,0,14c0,0,0,0,0,0v0c0,0,0,0,0,0v5c0,1.7,1.3,3,3,3h5 c1.7,0,3-1.3,3-3v-4h2v4c0,1.7,1.3,3,3,3h5c1.7,0,3-1.3,3-3v-5c0,0,0,0,0,0v0c0,0,0,0,0,0C24,13.9,24,13.7,23.9,13.6z';
+export const STANDARD = 'M23,4H4H3C2.449,4,2,3.551,2,3s0.449-1,1-1h15v1h2V1c0-0.552-0.448-1-1-1H3C1.343,0,0,1.343,0,3v17 c0,2.209,1.791,4,4,4h19c0.552,0,1-0.448,1-1V5C24,4.448,23.552,4,23,4z M18,16c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2 s2,0.895,2,2C20,15.105,19.105,16,18,16z';
+
+const Icon = ({
+    type = 'standard',
+    size = 24,
+    color = colors.TEXT_SECONDARY,
+    hoverColor,
+    onClick,
+}) => (
+    <SvgWrapper
+        hoverColor={hoverColor}
+        width={`${size}`}
+        height={`${size}`}
+        viewBox="-12 -12 48 48"
+        onClick={onClick}
+    >
+        <Path
+            key={type}
+            color={color}
+            d={type === 'hidden' ? HIDDEN : STANDARD}
+        />
+    </SvgWrapper>
+);
+
+Icon.propTypes = {
+    type: PropTypes.string,
+    size: PropTypes.number,
+    color: PropTypes.string,
+    hoverColor: PropTypes.string,
+    onClick: PropTypes.func,
+};
+
+export default Icon;

src/components/modals/device/Type/index.js

@@ -5,6 +5,11 @@ import styled from 'styled-components';
 import { H3 } from 'components/Heading';
 import P from 'components/Paragraph';
 import Button from 'components/Button';
+import Icon from 'components/Icon';
+import Link from 'components/Link';
+import colors from 'config/colors';
+import icons from 'config/icons';
+import WalletTypeIcon from 'components/images/WalletType';
 
 import type { Props } from 'components/modals/index';
 
@@ -13,6 +18,12 @@ const Wrapper = styled.div`
     padding: 24px 48px;
 `;
 
+const StyledLink = styled(Link)`
+    position: absolute;
+    right: 15px;
+    top: 15px;
+`;
+
 const StyledButton = styled(Button)`
     margin: 0 0 10px 0;
 `;
@@ -23,8 +34,7 @@ const Row = styled.div`
     padding: 10px 0;
 `;
 
-class ForgetDevice extends Component<Props> {
-
+class WalletType extends Component<Props> {
     constructor(props: Props) {
         super(props);
         this.keyboardHandler = this.keyboardHandler.bind(this);
@@ -56,17 +66,34 @@ class ForgetDevice extends Component<Props> {
     render() {
         if (!this.props.modal.opened) return null;
         const { device } = this.props.modal;
-        // const { onCancel } = this.props.modalActions;
+        const { onCancel } = this.props.modalActions;
+
         return (
             <Wrapper>
+                { device.state && (
+                    <StyledLink onClick={onCancel}>
+                        <Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+                    </StyledLink>
+                )}
                 <H3>RequestWalletType for { device.instanceLabel }?</H3>
                 <Row>
-                    <StyledButton onClick={() => this.foo(false)}>Basic</StyledButton>
-                    <StyledButton isWhite onClick={() => this.foo(true)}>Hidden</StyledButton>
+                    <span>
+                        <WalletTypeIcon type="standard" size={24} color={colors.TEXT_SECONDARY} />
+                        Standard Wallet
+                    </span>
+                    <P isSmaller>Continue to access your standard wallet.</P>
+                    <StyledButton onClick={() => this.foo(false)}>Go to your standard wallet</StyledButton>
+                    <Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.HELP} />
+                    <span>
+                        <WalletTypeIcon type="hidden" size={24} color={colors.TEXT_SECONDARY} />
+                        Hidden Wallet
+                    </span>
+                    <P isSmaller>You will be asked to enter your passphrase to unlock your hidden wallet.</P>
+                    <StyledButton isWhite onClick={() => this.foo(true)}>Go to your hidden wallet</StyledButton>
                 </Row>
             </Wrapper>
         );
     }
 }
 
-export default ForgetDevice;
+export default WalletType;

src/components/modals/passphrase/Passphrase/index.js

@@ -212,7 +212,7 @@ class Passphrase extends Component<Props, State> {
         return (
             <Wrapper>
                 <H2>Enter {this.state.deviceLabel} passphrase</H2>
-                <P isSmaller>Note that passphrase is case-sensitive.</P>
+                <P isSmaller>Note that passphrase is case-sensitive. If you enter a wrong passphrase, you will not unlock the desired hidden wallet.</P>
                 <Row>
                     <Label>Passphrase</Label>
                     <Input
@@ -228,7 +228,7 @@ class Passphrase extends Component<Props, State> {
                 </Row>
                 {!this.state.shouldShowSingleInput && (
                     <Row>
-                        <Label>Re-enter passphrase</Label>
+                        <Label>Confirm passphrase</Label>
                         <Input
                             name="passphraseCheckInputValue"
                             type={this.state.isPassphraseHidden ? 'password' : 'text'}
@@ -263,12 +263,12 @@ class Passphrase extends Component<Props, State> {
                 </Row>
 
                 <Footer>
-                    <P isSmaller>If you want to access your default account</P>
                     <P isSmaller>
+                        Changed your mind? &nbsp;
                         <LinkButton
                             isGreen
                             onClick={() => this.submitPassphrase(true)}
-                        >Leave passphrase blank
+                        >Go to your standard wallet
                         </LinkButton>
                     </P>
                 </Footer>

src/components/modals/passphrase/Type/index.js

@@ -26,7 +26,7 @@ const Confirmation = (props: Props) => {
             <Header>
                 <Icon icon={icons.T1} size={60} color={colors.TEXT_SECONDARY} />
                 <H3>Complete the action on { device.label } device</H3>
-                <P isSmaller>TODO: add detailed text here. Explain passphrase/hidden wallet...</P>
+                <P isSmaller>If you enter a wrong passphrase, you will not unlock the desired hidden wallet.</P>
             </Header>
         </Wrapper>
     );

src/views/Wallet/components/LeftNavigation/index.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
 import Icon from 'components/Icon';
+import WalletTypeIcon from 'components/images/WalletType';
 import icons from 'config/icons';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import styled from 'styled-components';
@@ -197,11 +198,12 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                             this.handleOpen();
                         }
                     }}
-                    device={this.props.wallet.selectedDevice}
+                    device={selectedDevice}
                     disabled={!isDeviceAccessible && this.props.devices.length === 1}
                     isOpen={this.props.wallet.dropdownOpened}
                     icon={(
                         <React.Fragment>
+                            <WalletTypeIcon type={selectedDevice && !selectedDevice.useEmptyPassphrase ? 'hidden' : 'standard'} size={25} color={colors.TEXT_SECONDARY} />
                             {this.props.devices.length > 1 && (
                                 <Counter>{this.props.devices.length}</Counter>
                             )}