From b3a6ae4582094891c43770e23106dbf18f553489 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Thu, 26 Jul 2018 18:18:05 +0200
Subject: [PATCH] fixes #1112

---
 src/components/IsUnlocked.js                  | 57 +++++++++++--------
 src/components/Onboarding/helperComponents.js | 14 -----
 src/components/Onboarding/steps/Finish.js     | 12 ++--
 src/components/Onboarding/steps/Init.js       | 12 ++--
 src/components/Onboarding/steps/NoDevice.js   | 18 ++++--
 src/components/Onboarding/steps/Start.js      |  6 +-
 src/components/SettingsPage/PasswordForm.js   |  1 +
 src/components/SettingsPage/PasswordModal.js  |  2 +-
 src/components/base/LedgerLiveLogo.js         | 29 ++++++++++
 src/icons/ArrowRight.js                       | 17 ++++++
 10 files changed, 112 insertions(+), 56 deletions(-)
 create mode 100644 src/components/base/LedgerLiveLogo.js
 create mode 100644 src/icons/ArrowRight.js

diff --git a/src/components/IsUnlocked.js b/src/components/IsUnlocked.js
index 8c56e2f3..e50576ff 100644
--- a/src/components/IsUnlocked.js
+++ b/src/components/IsUnlocked.js
@@ -24,6 +24,8 @@ import { createCustomErrorClass } from 'helpers/errors'
 
 import Box from 'components/base/Box'
 import InputPassword from 'components/base/InputPassword'
+import LedgerLiveLogo from 'components/base/LedgerLiveLogo'
+import IconArrowRight from 'icons/ArrowRight'
 import Button from './base/Button/index'
 import ConfirmModal from './base/Modal/ConfirmModal'
 
@@ -68,16 +70,12 @@ const defaultState = {
 }
 
 export const PageTitle = styled(Box).attrs({
-  width: 152,
-  height: 27,
   ff: 'Museo Sans|Regular',
   fontSize: 7,
   color: 'dark',
 })``
 
 export const LockScreenDesc = styled(Box).attrs({
-  width: 340,
-  height: 36,
   ff: 'Open Sans|Regular',
   fontSize: 4,
   textAlign: 'center',
@@ -156,33 +154,42 @@ class IsUnlocked extends Component<Props, State> {
         <Box sticky alignItems="center" justifyContent="center">
           <form onSubmit={this.handleSubmit}>
             <Box align="center">
-              <div
-                style={{
-                  padding: 14,
-                  backgroundColor: 'white',
-                  borderRadius: 80,
-                  fontSize: 0,
-                  marginBottom: 40,
-                  boxShadow: '0 2px 23px 0 rgba(0, 0, 0, 0.08)',
-                }}
-              >
-                <img alt="" src={i('ledgerlive-logo.svg')} width={50} height={50} />
-              </div>
+              <LedgerLiveLogo
+                style={{ marginBottom: 40 }}
+                icon={
+                  <img
+                    src={i('ledgerlive-logo.svg')}
+                    alt=""
+                    draggable="false"
+                    width={50}
+                    height={50}
+                  />
+                }
+              />
               <PageTitle>{t('app:common.lockScreen.title')}</PageTitle>
               <LockScreenDesc>
                 {t('app:common.lockScreen.subTitle')}
                 <br />
                 {t('app:common.lockScreen.description')}
               </LockScreenDesc>
-              <Box style={{ minWidth: 230 }}>
-                <InputPassword
-                  autoFocus
-                  placeholder={t('app:common.lockScreen.inputPlaceholder')}
-                  type="password"
-                  onChange={this.handleChangeInput('password')}
-                  value={inputValue.password}
-                  error={incorrectPassword}
-                />
+              <Box horizontal align="center">
+                <Box style={{ width: 280 }}>
+                  <InputPassword
+                    autoFocus
+                    placeholder={t('app:common.lockScreen.inputPlaceholder')}
+                    type="password"
+                    onChange={this.handleChangeInput('password')}
+                    value={inputValue.password}
+                    error={incorrectPassword}
+                  />
+                </Box>
+                <Box ml={2}>
+                  <Button style={{ width: 38, height: 38 }} primary onClick={this.handleSubmit}>
+                    <Box style={{ alignItems: 'center' }}>
+                      <IconArrowRight size={16} />
+                    </Box>
+                  </Button>
+                </Box>
               </Box>
               <Button type="button" mt={3} small onClick={this.handleOpenHardResetModal}>
                 {t('app:common.lockScreen.lostPassword')}
diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index 7a0e7d39..c9e62747 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -52,20 +52,6 @@ export const OnboardingFooterWrapper = styled(Box).attrs({
   border-bottom-left-radius: ${radii[1]}px;
   border-bottom-right-radius: ${radii[1]}px;
 `
-// LIVE LOGO
-export function LiveLogo({ icon, ...p }: { icon: any }) {
-  return <LiveLogoContainer {...p}>{icon}</LiveLogoContainer>
-}
-export const LiveLogoContainer = styled(Box).attrs({
-  borderRadius: '50%',
-  alignItems: 'center',
-  justifyContent: 'center',
-})`
-  background-color: white;
-  box-shadow: 0 2px 24px 0 #00000014;
-  width: ${p => (p.width ? p.width : 80)}
-  height: ${p => (p.height ? p.height : 80)}
-`
 
 // INSTRUCTION LIST
 type StepType = {
diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js
index 4cb6ee93..a286892d 100644
--- a/src/components/Onboarding/steps/Finish.js
+++ b/src/components/Onboarding/steps/Finish.js
@@ -9,6 +9,7 @@ import { urls } from 'config/urls'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import ConfettiParty from 'components/ConfettiParty'
+import LedgerLiveLogo from 'components/base/LedgerLiveLogo'
 import TrackPage from 'analytics/TrackPage'
 
 import IconCheckFull from 'icons/CheckFull'
@@ -19,7 +20,7 @@ import IconSocialGithub from 'icons/Github'
 import { lighten } from 'styles/helpers'
 
 import type { StepProps } from '..'
-import { Title, Description, LiveLogo } from '../helperComponents'
+import { Title, Description } from '../helperComponents'
 
 const ConfettiLayer = styled.div`
   position: absolute;
@@ -83,13 +84,14 @@ export default class Finish extends Component<StepProps, *> {
             onMouseUp={this.onMouseUp}
             onMouseLeave={this.onMouseLeave}
           >
-            <LiveLogo
-              style={{ width: 64, height: 64 }}
+            <LedgerLiveLogo
+              width="64px"
+              height="64px"
               icon={
                 <img
-                  draggable="false"
-                  alt=""
                   src={i('ledgerlive-logo.svg')}
+                  alt=""
+                  draggable="false"
                   width={40}
                   height={40}
                 />
diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js
index dd243081..c6b9a097 100644
--- a/src/components/Onboarding/steps/Init.js
+++ b/src/components/Onboarding/steps/Init.js
@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import { flowType } from 'reducers/onboarding'
 import Box from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
+import LedgerLiveLogo from 'components/base/LedgerLiveLogo'
 import TrackPage from 'analytics/TrackPage'
 import IconPlus from 'icons/Plus'
 import IconRecover from 'icons/Recover'
@@ -15,7 +16,7 @@ import IconCheck from 'icons/Check'
 import IconExternalLink from 'icons/ExternalLink'
 import IconChevronRight from 'icons/ChevronRight'
 import { i } from 'helpers/staticPath'
-import { Title, LiveLogo } from '../helperComponents'
+import { Title } from '../helperComponents'
 
 import type { StepProps } from '..'
 
@@ -68,9 +69,12 @@ class Init extends PureComponent<StepProps, *> {
       <GrowScroll full justifyContent="center" py={7}>
         <TrackPage category="Onboarding" name="Init" />
         <Box align="center">
-          <LiveLogo
-            style={{ width: 64, height: 64 }}
-            icon={<img src={i('ledgerlive-logo.svg')} alt="" width={40} height={40} />}
+          <LedgerLiveLogo
+            width="64px"
+            height="64px"
+            icon={
+              <img src={i('ledgerlive-logo.svg')} alt="" draggable="false" width={40} height={40} />
+            }
           />
           <Box m={5} style={{ maxWidth: 480 }}>
             <Title>{t('onboarding:init.title')}</Title>
diff --git a/src/components/Onboarding/steps/NoDevice.js b/src/components/Onboarding/steps/NoDevice.js
index 29c8cfbd..26365db0 100644
--- a/src/components/Onboarding/steps/NoDevice.js
+++ b/src/components/Onboarding/steps/NoDevice.js
@@ -6,13 +6,14 @@ import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
+import LedgerLiveLogo from 'components/base/LedgerLiveLogo'
 import TrackPage from 'analytics/TrackPage'
 import { urls } from 'config/urls'
 import IconCart from 'icons/Cart'
 import IconTruck from 'icons/Truck'
 import IconInfoCircle from 'icons/InfoCircle'
 import Button from '../../base/Button/index'
-import { Title, OnboardingFooterWrapper, LiveLogo } from '../helperComponents'
+import { Title, OnboardingFooterWrapper } from '../helperComponents'
 import { OptionFlowCard } from './Init'
 
 import type { StepProps } from '..'
@@ -53,9 +54,18 @@ class NoDevice extends PureComponent<StepProps, *> {
         <GrowScroll pb={7} pt={130}>
           <TrackPage category="Onboarding" name="No Device" />
           <Box grow alignItems="center">
-            <LiveLogo
-              style={{ width: 64, height: 64 }}
-              icon={<img src={i('ledgerlive-logo.svg')} alt="" width={40} height={40} />}
+            <LedgerLiveLogo
+              width="64px"
+              height="64px"
+              icon={
+                <img
+                  src={i('ledgerlive-logo.svg')}
+                  alt=""
+                  draggable="false"
+                  width={40}
+                  height={40}
+                />
+              }
             />
             <Box m={5} style={{ maxWidth: 480 }}>
               <Title>{t('onboarding:noDevice.title')}</Title>
diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js
index 5ca234b0..d5fcdbe8 100644
--- a/src/components/Onboarding/steps/Start.js
+++ b/src/components/Onboarding/steps/Start.js
@@ -6,9 +6,10 @@ import { i } from 'helpers/staticPath'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import TrackPage from 'analytics/TrackPage'
+import LedgerLiveLogo from 'components/base/LedgerLiveLogo'
 
 import type { StepProps } from '..'
-import { Title, LiveLogo } from '../helperComponents'
+import { Title } from '../helperComponents'
 
 export default (props: StepProps) => {
   const { jumpStep, t } = props
@@ -16,8 +17,7 @@ export default (props: StepProps) => {
     <Box sticky justifyContent="center">
       <TrackPage category="Onboarding" name="Start" />
       <Box alignItems="center">
-        <LiveLogo
-          style={{ width: 80, height: 80 }}
+        <LedgerLiveLogo
           icon={<img src={i('ledgerlive-logo.svg')} alt="" width={50} height={50} />}
         />
         <Box my={5}>
diff --git a/src/components/SettingsPage/PasswordForm.js b/src/components/SettingsPage/PasswordForm.js
index e8422f68..1e573b0c 100644
--- a/src/components/SettingsPage/PasswordForm.js
+++ b/src/components/SettingsPage/PasswordForm.js
@@ -77,6 +77,7 @@ class PasswordForm extends PureComponent<Props> {
               error={!isValid() && confirmPassword.length > 0 && new PasswordsDontMatchError()}
             />
           </Box>
+          <button hidden type="submit" />
         </Box>
       </form>
     )
diff --git a/src/components/SettingsPage/PasswordModal.js b/src/components/SettingsPage/PasswordModal.js
index e876546e..aee790cb 100644
--- a/src/components/SettingsPage/PasswordModal.js
+++ b/src/components/SettingsPage/PasswordModal.js
@@ -112,7 +112,7 @@ class PasswordModal extends PureComponent<Props, State> {
               />
             </ModalContent>
             <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
-              <Button small type="Button small" onClick={onClose}>
+              <Button small type="button" onClick={onClose}>
                 {t('app:common.cancel')}
               </Button>
               <Button
diff --git a/src/components/base/LedgerLiveLogo.js b/src/components/base/LedgerLiveLogo.js
new file mode 100644
index 00000000..da587402
--- /dev/null
+++ b/src/components/base/LedgerLiveLogo.js
@@ -0,0 +1,29 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+type Props = {
+  icon: any,
+}
+class LedgerLiveLogo extends PureComponent<Props> {
+  render() {
+    const { icon, ...p } = this.props
+    return <LiveLogoContainer {...p}>{icon}</LiveLogoContainer>
+  }
+}
+
+const LiveLogoContainer = styled(Box).attrs({
+  borderRadius: '50%',
+  alignItems: 'center',
+  justifyContent: 'center',
+})`
+  background-color: white;
+  box-shadow: 0 2px 24px 0 #00000014;
+  width: ${p => (p.width ? p.width : '80px')};
+  height: ${p => (p.height ? p.height : '80px')};
+`
+
+export default LedgerLiveLogo
diff --git a/src/icons/ArrowRight.js b/src/icons/ArrowRight.js
new file mode 100644
index 00000000..203d52b7
--- /dev/null
+++ b/src/icons/ArrowRight.js
@@ -0,0 +1,17 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    transform="rotate(90 7.75 8.25)"
+    d="M7 4.56L4.28 7.28a.75.75 0 0 1-1.06-1.06l3.896-3.897A.765.765 0 0 1 7.75 2c.267 0 .5.13.633.323L12.28 6.22a.75.75 0 0 1-1.06 1.06L8.5 4.56v9.246c0 .383-.336.694-.75.694S7 14.19 7 13.806V4.56z"
+  />
+)
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    {path}
+  </svg>
+)