From e013682fcdb20908da0d46bd5c39c092d6c34323 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Fri, 15 Jun 2018 11:46:07 +0200
Subject: [PATCH] update reset hard modal and add ledger blue text to genuine
 check

---
 src/components/IsUnlocked.js                  | 21 ++++++++++++++++---
 .../Onboarding/steps/GenuineCheck.js          |  7 ++++++-
 src/components/base/Modal/ConfirmModal.js     |  9 +++++++-
 src/icons/TriangleWarning.js                  | 16 ++++++++++++++
 static/i18n/en/app.yml                        |  7 +++----
 static/i18n/en/onboarding.yml                 |  3 ++-
 6 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 src/icons/TriangleWarning.js

diff --git a/src/components/IsUnlocked.js b/src/components/IsUnlocked.js
index f6dadf2e..edfc44bb 100644
--- a/src/components/IsUnlocked.js
+++ b/src/components/IsUnlocked.js
@@ -11,7 +11,7 @@ import { translate } from 'react-i18next'
 import type { SettingsState as Settings } from 'reducers/settings'
 import type { T } from 'types/common'
 import IconLockScreen from 'icons/LockScreen'
-
+import IconTriangleWarning from 'icons/TriangleWarning'
 import get from 'lodash/get'
 
 import { setEncryptionKey } from 'helpers/db'
@@ -138,7 +138,13 @@ class IsUnlocked extends Component<Props, State> {
       this.setState({ isHardResetting: false })
     }
   }
-
+  hardResetIconRender = () => {
+    return (
+      <IconWrapperCircle color="alertRed">
+        <IconTriangleWarning width={23} height={21} />
+      </IconWrapperCircle>
+    )
+  }
   render() {
     const { inputValue, incorrectPassword, isHardResetting, isHardResetModalOpened } = this.state
     const { isLocked, t } = this.props
@@ -182,8 +188,8 @@ class IsUnlocked extends Component<Props, State> {
             onReject={this.handleCloseHardResetModal}
             onConfirm={this.handleHardReset}
             title={t('app:settings.hardResetModal.title')}
-            subTitle={t('app:settings.hardResetModal.subTitle')}
             desc={t('app:settings.hardResetModal.desc')}
+            renderIcon={this.hardResetIconRender}
           />
         </Box>
       )
@@ -204,3 +210,12 @@ export default compose(
   ),
   translate(),
 )(IsUnlocked)
+
+const IconWrapperCircle = styled(Box).attrs({})`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: #ea2e4919;
+  text-align: -webkit-center;
+  justify-content: center;
+`
diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js
index bff77501..c4f97654 100644
--- a/src/components/Onboarding/steps/GenuineCheck.js
+++ b/src/components/Onboarding/steps/GenuineCheck.js
@@ -129,7 +129,12 @@ class GenuineCheck extends PureComponent<StepProps, State> {
       <FixedTopContainer>
         <Box grow alignItems="center">
           <Title>{t('onboarding:genuineCheck.title')}</Title>
-          <Description>{t('onboarding:genuineCheck.desc')}</Description>
+          {onboarding.isLedgerNano ? (
+            <Description>{t('onboarding:genuineCheck.descNano')}</Description>
+          ) : (
+            <Description>{t('onboarding:genuineCheck.descBlue')}</Description>
+          )}
+
           <Box mt={5}>
             <CardWrapper>
               <Box justify="center">
diff --git a/src/components/base/Modal/ConfirmModal.js b/src/components/base/Modal/ConfirmModal.js
index 750f9b3f..c4c29f7e 100644
--- a/src/components/base/Modal/ConfirmModal.js
+++ b/src/components/base/Modal/ConfirmModal.js
@@ -14,8 +14,9 @@ type Props = {
   isOpened: boolean,
   isDanger: boolean,
   title: string,
-  subTitle: string,
+  subTitle?: string,
   desc: string,
+  renderIcon?: Function,
   confirmText?: string,
   cancelText?: string,
   onReject: Function,
@@ -37,6 +38,7 @@ class ConfirmModal extends PureComponent<Props> {
       onReject,
       onConfirm,
       isLoading,
+      renderIcon,
       t,
       ...props
     } = this.props
@@ -57,6 +59,11 @@ class ConfirmModal extends PureComponent<Props> {
                   {subTitle}
                 </Box>
               )}
+              {renderIcon && (
+                <Box justifyContent="center" alignItems="center" mt={4} mb={3}>
+                  {renderIcon()}
+                </Box>
+              )}
               <Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center">
                 {desc}
               </Box>
diff --git a/src/icons/TriangleWarning.js b/src/icons/TriangleWarning.js
new file mode 100644
index 00000000..569fff9d
--- /dev/null
+++ b/src/icons/TriangleWarning.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M6.217 2.188a2.085 2.085 0 0 1 3.566 0l5.653 9.437a2.083 2.083 0 0 1-1.79 3.125h-11.3A2.083 2.083 0 0 1 .57 11.615l5.647-9.427zm1.285.773l-5.64 9.414a.583.583 0 0 0 .491.875h11.285a.583.583 0 0 0 .505-.865L8.5 2.962a.583.583 0 0 0-.997-.001zM7.25 6a.75.75 0 0 1 1.5 0v2.667a.75.75 0 0 1-1.5 0V6zm1.5 5a.75.75 0 1 1-1.5 0v-.01a.75.75 0 1 1 1.5 0V11z"
+  />
+)
+
+export default ({ height, width, ...p }: { height: number, width: number }) => (
+  <svg viewBox="0 0 19 17" height={height} width={width} {...p}>
+    {path}
+  </svg>
+)
diff --git a/static/i18n/en/app.yml b/static/i18n/en/app.yml
index e969be12..4b00bb11 100644
--- a/static/i18n/en/app.yml
+++ b/static/i18n/en/app.yml
@@ -119,7 +119,7 @@ exchange:
   coinmama: 'Coinmama is a financial service that makes it fast, safe and fun to buy digital currency, anywhere in the world.'
 genuinecheck:
   modal:
-    title: Genuine check, bro
+    title: Genuine check
 addAccounts:
   title: Add accounts
   breadcrumb:
@@ -307,9 +307,8 @@ settings:
     terms: Terms and Privacy policy
     termsDesc: Lorem ipsum dolor sit amet
   hardResetModal:
-    title: Hard reset
-    subTitle: Are you sure houston?
-    desc: Lorem ipsum dolor sit amet
+    title: Reset Ledger Live
+    desc: Resetting will erase all Ledger Live data stored on your computer, including your profile, accounts, transaction history and application settings. The keys to access your crypto assets in the blockchain remain secure on your Ledger device.
   softResetModal:
     title: Clean application cache
     subTitle: Are you sure houston?
diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml
index 2fa67577..d09f78e2 100644
--- a/static/i18n/en/onboarding.yml
+++ b/static/i18n/en/onboarding.yml
@@ -74,7 +74,8 @@ writeSeed:
     note4: Never use a device supplied with a recovery phrase and/or a PIN code.
 genuineCheck:
   title: Final security check
-  desc: Your Ledger Nano S should now display Your device is now ready. Before getting started, please confirm that
+  descNano: Your Ledger Nano S should now display Your device is now ready. Before getting started, please confirm that
+  descBlue: Your Ledger Blue should now display Your device is now ready. Before getting started, please confirm that
   steps:
     step1:
       title: Did you choose your PIN code by yourself?