From 5c24d46ffc1187da1a5bc199d9997608ca8a22fd Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Fri, 22 Jun 2018 17:50:13 +0200
Subject: [PATCH 1/2] transferring all illustrations to the images to not
 pollute icons in storybook

---
 src/components/Onboarding/helperComponents.js |  2 +-
 .../Onboarding/steps/GenuineCheck.js          |  9 +--
 .../Onboarding/steps/SelectDevice.js          |  9 ++-
 .../steps/SelectPIN/SelectPINblue.js          |  4 +-
 .../steps/SelectPIN/SelectPINnano.js          |  4 +-
 .../steps/SelectPIN/SelectPINrestoreBlue.js   |  4 +-
 .../steps/SelectPIN/SelectPINrestoreNano.js   |  4 +-
 src/components/Onboarding/steps/Start.js      |  4 +-
 .../steps/WriteSeed/WriteSeedBlue.js          |  4 +-
 .../steps/WriteSeed/WriteSeedNano.js          |  4 +-
 .../steps/WriteSeed/WriteSeedRestore.js       |  4 +-
 .../SensitiveOperationShield.js               |  0
 src/icons/illustrations/GetStartedLogo.js     | 79 -------------------
 src/icons/illustrations/LedgerBlue.js         | 32 --------
 src/icons/illustrations/LedgerBlueError.js    | 47 -----------
 .../illustrations/LedgerBlueSelectPIN.js      | 47 -----------
 src/icons/illustrations/LedgerNano.js         | 44 -----------
 src/icons/illustrations/LedgerNanoError.js    | 78 ------------------
 .../illustrations/LedgerNanoSelectPIN.js      | 60 --------------
 src/icons/illustrations/SetPassword.js        | 63 ---------------
 src/icons/illustrations/WriteSeed.js          | 40 ----------
 src/stories/icons.stories.js                  |  2 +-
 static/images/blue-error-onb.svg              | 19 +++++
 static/images/get-started-onb.svg             | 13 +++
 static/images/ledger-blue-onb.svg             |  7 ++
 static/images/ledger-nano-onb.svg             | 10 +++
 static/images/nano-error-onb.svg              | 34 ++++++++
 static/images/select-pin-blue-onb.svg         | 19 +++++
 static/images/select-pin-nano-onb.svg         | 25 ++++++
 static/images/write-seed-onb.svg              |  9 +++
 30 files changed, 163 insertions(+), 517 deletions(-)
 rename src/icons/{illustrations => }/SensitiveOperationShield.js (100%)
 delete mode 100644 src/icons/illustrations/GetStartedLogo.js
 delete mode 100644 src/icons/illustrations/LedgerBlue.js
 delete mode 100644 src/icons/illustrations/LedgerBlueError.js
 delete mode 100644 src/icons/illustrations/LedgerBlueSelectPIN.js
 delete mode 100644 src/icons/illustrations/LedgerNano.js
 delete mode 100644 src/icons/illustrations/LedgerNanoError.js
 delete mode 100644 src/icons/illustrations/LedgerNanoSelectPIN.js
 delete mode 100644 src/icons/illustrations/SetPassword.js
 delete mode 100644 src/icons/illustrations/WriteSeed.js
 create mode 100644 static/images/blue-error-onb.svg
 create mode 100644 static/images/get-started-onb.svg
 create mode 100644 static/images/ledger-blue-onb.svg
 create mode 100644 static/images/ledger-nano-onb.svg
 create mode 100644 static/images/nano-error-onb.svg
 create mode 100644 static/images/select-pin-blue-onb.svg
 create mode 100644 static/images/select-pin-nano-onb.svg
 create mode 100644 static/images/write-seed-onb.svg

diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index 93d6d1a0..70734f21 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -5,7 +5,7 @@ import { radii } from 'styles/theme'
 
 import Box from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
-import IconSensitiveOperationShield from 'icons/illustrations/SensitiveOperationShield'
+import IconSensitiveOperationShield from 'icons/SensitiveOperationShield'
 
 // GENERAL
 export const Title = styled(Box).attrs({
diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js
index 66e22e72..292e9e08 100644
--- a/src/components/Onboarding/steps/GenuineCheck.js
+++ b/src/components/Onboarding/steps/GenuineCheck.js
@@ -5,6 +5,7 @@ import { shell } from 'electron'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
 
 import type { T } from 'types/common'
 
@@ -17,8 +18,6 @@ import RadioGroup from 'components/base/RadioGroup'
 import GenuineCheckModal from 'components/GenuineCheckModal'
 import TranslatedError from 'components/TranslatedError'
 
-import IconLedgerNanoError from 'icons/illustrations/LedgerNanoError'
-import IconLedgerBlueError from 'icons/illustrations/LedgerBlueError'
 import IconCheck from 'icons/Check'
 import IconCross from 'icons/Cross'
 
@@ -325,8 +324,8 @@ export function GenuineCheckFail({
           <Fragment>
             <Title>{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}</Title>
             <Description>{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}</Description>
-            <Box style={{ width: 550 }} mt={5} ml={100}>
-              <IconLedgerNanoError />
+            <Box mt={5} mr={7}>
+              <img alt="" src={i('nano-error-onb.svg')} />
             </Box>
           </Fragment>
         ) : (
@@ -336,7 +335,7 @@ export function GenuineCheckFail({
               {t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
             </Description>
             <Box alignItems="center">
-              <IconLedgerBlueError />
+              <img alt="" src={i('blue-error-onb.svg')} />
             </Box>
           </Fragment>
         )}
diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js
index 938ba166..04b7710a 100644
--- a/src/components/Onboarding/steps/SelectDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@@ -3,14 +3,15 @@
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
+import { i } from 'helpers/staticPath'
+
 import { rgba } from 'styles/helpers'
 
 import { isLedgerNano } from 'reducers/onboarding'
 
 import Box from 'components/base/Box'
 import IconCheckCirle from 'icons/Check'
-import IconLedgerNano from 'icons/illustrations/LedgerNano'
-import IconLedgerBlue from 'icons/illustrations/LedgerBlue'
+
 import { Title, Inner, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 
@@ -47,7 +48,7 @@ class SelectDevice extends PureComponent<StepProps, {}> {
               >
                 {onboarding.isLedgerNano && <DeviceSelected />}
                 <DeviceIcon>
-                  <IconLedgerNano />
+                  <img alt="" src={i('ledger-nano-onb.svg')} />
                 </DeviceIcon>
                 <BlockTitle>{t('onboarding:selectDevice.ledgerNanoCard.title')}</BlockTitle>
               </DeviceContainer>
@@ -57,7 +58,7 @@ class SelectDevice extends PureComponent<StepProps, {}> {
               >
                 {!onboarding.isLedgerNano && onboarding.isLedgerNano !== null && <DeviceSelected />}
                 <DeviceIcon>
-                  <IconLedgerBlue />
+                  <img alt="" src={i('ledger-blue-onb.svg')} />
                 </DeviceIcon>
                 <BlockTitle>{t('onboarding:selectDevice.ledgerBlueCard.title')}</BlockTitle>
               </DeviceContainer>
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
index a47cced6..21611255 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
@@ -2,11 +2,11 @@
 import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
 import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
 
 import type { T } from 'types/common'
-import IconLedgerBlueSelectPIN from 'icons/illustrations/LedgerBlueSelectPIN'
 
 import IconChevronRight from 'icons/ChevronRight'
 
@@ -60,7 +60,7 @@ class SelectPIN extends PureComponent<Props, *> {
       <Box align="center">
         <Inner style={{ width: 550 }}>
           <Box style={{ width: 180, justifyContent: 'center', alignItems: 'center' }}>
-            <IconLedgerBlueSelectPIN />
+            <img alt="" src={i('select-pin-blue-onb.svg')} />
           </Box>
           <Box>
             <Box shrink grow flow={4}>
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
index b19bbd0b..9db95c4e 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
@@ -2,11 +2,11 @@
 import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
 import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
 
 import type { T } from 'types/common'
-import IconLedgerNanoSelectPIN from 'icons/illustrations/LedgerNanoSelectPIN'
 
 import IconChevronRight from 'icons/ChevronRight'
 
@@ -63,7 +63,7 @@ class SelectPINnano extends PureComponent<Props, *> {
     return (
       <Box align="center" mt={3}>
         <Inner style={{ width: 700 }}>
-          <IconLedgerNanoSelectPIN />
+          <img alt="" src={i('select-pin-nano-onb.svg')} />
           <Box shrink grow flow={4} style={{ marginLeft: 40 }}>
             {stepsLedgerNano.map(step => <OptionRow key={step.key} step={step} />)}
           </Box>
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
index 5bbc8767..0ff30312 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
@@ -2,11 +2,11 @@
 import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
 import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
 
 import type { T } from 'types/common'
-import IconLedgerBlueSelectPIN from 'icons/illustrations/LedgerBlueSelectPIN'
 
 import IconChevronRight from 'icons/ChevronRight'
 
@@ -60,7 +60,7 @@ class SelectPINrestoreBlue extends PureComponent<Props, *> {
       <Box align="center">
         <Inner style={{ width: 550 }}>
           <Box style={{ width: 180, justifyContent: 'center', alignItems: 'center' }}>
-            <IconLedgerBlueSelectPIN />
+            <img alt="" src={i('select-pin-blue-onb.svg')} />
           </Box>
           <Box>
             <Box shrink grow flow={4}>
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
index ebf20881..addacd63 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
@@ -2,11 +2,11 @@
 import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
 import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
 
 import type { T } from 'types/common'
-import IconLedgerNanoSelectPIN from 'icons/illustrations/LedgerNanoSelectPIN'
 
 import IconChevronRight from 'icons/ChevronRight'
 
@@ -63,7 +63,7 @@ class SelectPINrestoreNano extends PureComponent<Props, *> {
     return (
       <Box align="center" mt={3}>
         <Inner style={{ width: 700 }}>
-          <IconLedgerNanoSelectPIN />
+          <img alt="" src={i('select-pin-nano-onb.svg')} />
           <Box shrink grow flow={4} style={{ marginLeft: 40 }}>
             {stepsLedgerNano.map(step => <OptionRow key={step.key} step={step} />)}
           </Box>
diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js
index 8d782096..c419be90 100644
--- a/src/components/Onboarding/steps/Start.js
+++ b/src/components/Onboarding/steps/Start.js
@@ -1,11 +1,11 @@
 // @flow
 
 import React from 'react'
+import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 
-import IconGetStarted from 'icons/illustrations/GetStartedLogo'
 import type { StepProps } from '..'
 import { Title } from '../helperComponents'
 
@@ -14,7 +14,7 @@ export default (props: StepProps) => {
   return (
     <Box sticky justifyContent="center">
       <Box alignItems="center">
-        <IconGetStarted />
+        <img alt="" src={i('get-started-onb.svg')} />
         <Box my={4}>
           <Title>{t('onboarding:start.title')}</Title>
         </Box>
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
index f0db2baf..3cf4e412 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
@@ -2,11 +2,11 @@
 import React, { PureComponent, Fragment } from 'react'
 import { translate } from 'react-i18next'
 import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
 
 import type { T } from 'types/common'
 
 import Box from 'components/base/Box'
-import IconWriteSeed from 'icons/illustrations/WriteSeed'
 import IconChevronRight from 'icons/ChevronRight'
 
 import {
@@ -75,7 +75,7 @@ class WriteSeedBlue extends PureComponent<Props, *> {
         <Box align="center">
           <Inner style={{ width: 760 }}>
             <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }}>
-              <IconWriteSeed />
+              <img alt="" src={i('write-seed-onb.svg')} />
             </Box>
             <Box shrink flow={2} m={0}>
               {steps.map(step => <OptionRow key={step.key} step={step} />)}
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
index b472fce0..3d34664a 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
@@ -2,11 +2,11 @@
 import React, { PureComponent, Fragment } from 'react'
 import { translate } from 'react-i18next'
 import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
 
 import type { T } from 'types/common'
 
 import Box from 'components/base/Box'
-import IconWriteSeed from 'icons/illustrations/WriteSeed'
 import IconChevronRight from 'icons/ChevronRight'
 
 import {
@@ -75,7 +75,7 @@ class WriteSeedNano extends PureComponent<Props, *> {
         <Box align="center" mt={3}>
           <Inner style={{ width: 700 }}>
             <Box style={{ width: 300 }} justifyContent="center" alignItems="center">
-              <IconWriteSeed />
+              <img alt="" src={i('write-seed-onb.svg')} />
             </Box>
 
             <Box shrink grow flow={4}>
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
index 2d319b6b..39ebf55d 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
@@ -2,11 +2,11 @@
 import React, { PureComponent, Fragment } from 'react'
 import { translate } from 'react-i18next'
 import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
 
 import type { T } from 'types/common'
-import IconWriteSeed from 'icons/illustrations/WriteSeed'
 import type { OnboardingState } from 'reducers/onboarding'
 
 import IconChevronRight from 'icons/ChevronRight'
@@ -100,7 +100,7 @@ class WriteSeedRestore extends PureComponent<Props, *> {
         <Box align="center">
           <Inner style={{ width: 760 }}>
             <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }}>
-              <IconWriteSeed />
+              <img alt="" src={i('write-seed-onb.svg')} />
             </Box>
             {onboarding.isLedgerNano ? (
               <Box shrink flow={2} m={0}>
diff --git a/src/icons/illustrations/SensitiveOperationShield.js b/src/icons/SensitiveOperationShield.js
similarity index 100%
rename from src/icons/illustrations/SensitiveOperationShield.js
rename to src/icons/SensitiveOperationShield.js
diff --git a/src/icons/illustrations/GetStartedLogo.js b/src/icons/illustrations/GetStartedLogo.js
deleted file mode 100644
index cce003ad..00000000
--- a/src/icons/illustrations/GetStartedLogo.js
+++ /dev/null
@@ -1,79 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-  <svg width="113" height="109">
-    <g fill="none" fillRule="evenodd">
-      <rect
-        width="1.44"
-        height="5.6"
-        y="16.6"
-        fill="#1D2028"
-        rx=".72"
-        transform="matrix(-1 0 0 1 1.44 0)"
-      />
-      <rect
-        width="1.44"
-        height="5.6"
-        y="34.8"
-        fill="#1D2028"
-        rx=".72"
-        transform="matrix(-1 0 0 1 1.44 0)"
-      />
-      <path
-        fill="#6490F1"
-        fillOpacity=".1"
-        stroke="#1D2028"
-        strokeWidth="2"
-        d="M16.592 12c.225 0 .408.183.408.408v95.184a.408.408 0 0 1-.408.408H2.128a.408.408 0 0 1-.408-.408V12.408c0-.225.183-.408.408-.408h14.464z"
-      />
-      <rect
-        width="7.64"
-        height="27"
-        x="5.513"
-        y="18.522"
-        fill="#FFF"
-        stroke="#6490F1"
-        rx=".704"
-        transform="matrix(-1 0 0 1 18.665 0)"
-      />
-      <path
-        fill="#FFF"
-        stroke="#1D2028"
-        strokeWidth="2"
-        d="M9.36 54A7.64 7.64 0 0 1 17 61.64v45.952a.408.408 0 0 1-.408.408H2.128a.408.408 0 0 1-.408-.408V61.64A7.64 7.64 0 0 1 9.36 54z"
-      />
-      <ellipse
-        cx="9.36"
-        cy="61.4"
-        fill="#FFF"
-        stroke="#6490F1"
-        rx="3.82"
-        ry="3.7"
-        transform="matrix(-1 0 0 1 18.72 0)"
-      />
-      <rect width="3.137" height="9.306" x="109.863" y="13.959" fill="#1D2028" rx="1.569" />
-      <rect
-        width="76.431"
-        height="106.571"
-        x="34"
-        y="1"
-        fill="#6490F1"
-        fillOpacity=".1"
-        stroke="#1D2027"
-        strokeWidth="2"
-        rx="5.44"
-      />
-      <rect
-        width="52.333"
-        height="79.653"
-        x="46.043"
-        y="15.235"
-        fill="#FFF"
-        stroke="#6490F1"
-        rx="4.08"
-      />
-    </g>
-  </svg>
-)
diff --git a/src/icons/illustrations/LedgerBlue.js b/src/icons/illustrations/LedgerBlue.js
deleted file mode 100644
index 739afc2c..00000000
--- a/src/icons/illustrations/LedgerBlue.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-  <svg width="52" height="72">
-    <g fill="none" fillRule="evenodd">
-      <rect width="2.039" height="6.171" x="49.961" y="9.257" fill="#1D2028" rx="1.02" />
-      <rect
-        width="49.48"
-        height="70.5"
-        x=".75"
-        y=".75"
-        fill="#6490F1"
-        fillOpacity=".1"
-        stroke="#1D2027"
-        strokeWidth="1.5"
-        rx="3.2"
-      />
-      <rect
-        width="34.167"
-        height="52.986"
-        x="8.403"
-        y="10.021"
-        fill="#FFF"
-        stroke="#6490F1"
-        strokeWidth=".5"
-        rx="2.4"
-      />
-    </g>
-  </svg>
-)
diff --git a/src/icons/illustrations/LedgerBlueError.js b/src/icons/illustrations/LedgerBlueError.js
deleted file mode 100644
index c668b490..00000000
--- a/src/icons/illustrations/LedgerBlueError.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-  <svg width="92" height="188">
-    <defs>
-      <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
-        <stop offset="0%" />
-        <stop offset="100%" stopColor="#FFF" />
-      </linearGradient>
-    </defs>
-    <g fill="none" fillRule="evenodd">
-      <path
-        stroke="#1D2027"
-        strokeWidth="2"
-        d="M37 120.644a1 1 0 0 0-1 1v26.225a5 5 0 0 0 5 5h8.486a5 5 0 0 0 5-5v-26.225a1 1 0 0 0-1-1H37z"
-      />
-      <path stroke="#142533" strokeWidth="2" d="M42.208 153.253v10.929h6.436v-10.93h-6.436z" />
-      <path
-        stroke="#1D2027"
-        strokeWidth="2"
-        d="M39.713 120.577h11.255l-.082-6.977a1 1 0 0 0-1-.988h-9.267a1 1 0 0 0-.988 1.012l.082 6.953z"
-      />
-      <path
-        fill="url(#a)"
-        d="M6.836 53.925h1.616v22.65H6.836v-22.65zm5.657 0h1.616v22.65h-1.616v-22.65z"
-        transform="translate(35 111)"
-      />
-      <path
-        fill="#1D2028"
-        d="M88.556 17.556c0-1.105.671-2 1.5-2 .828 0 1.5.895 1.5 2v6c0 1.104-.672 2-1.5 2-.829 0-1.5-.896-1.5-2"
-      />
-      <rect
-        width="88"
-        height="118.635"
-        x="1"
-        y="1"
-        fill="#FCEAEC"
-        stroke="#1D2027"
-        strokeWidth="2"
-        rx="5.44"
-      />
-      <rect width="59" height="88.615" x="15.5" y="16.5" fill="#FFF" stroke="#EA2E49" rx="4.08" />
-    </g>
-  </svg>
-)
diff --git a/src/icons/illustrations/LedgerBlueSelectPIN.js b/src/icons/illustrations/LedgerBlueSelectPIN.js
deleted file mode 100644
index 2391fe05..00000000
--- a/src/icons/illustrations/LedgerBlueSelectPIN.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-  <svg width="92" height="188">
-    <defs>
-      <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
-        <stop offset="0%" />
-        <stop offset="100%" stopColor="#FFF" />
-      </linearGradient>
-    </defs>
-    <g fill="none" fillRule="evenodd">
-      <path
-        stroke="#1D2027"
-        strokeWidth="2"
-        d="M37 120.644a1 1 0 0 0-1 1v26.225a5 5 0 0 0 5 5h8.486a5 5 0 0 0 5-5v-26.225a1 1 0 0 0-1-1H37z"
-      />
-      <path stroke="#142533" strokeWidth="2" d="M42.208 153.253v10.929h6.436v-10.93h-6.436z" />
-      <path
-        stroke="#1D2027"
-        strokeWidth="2"
-        d="M39.713 120.577h11.255l-.082-6.977a1 1 0 0 0-1-.988h-9.267a1 1 0 0 0-.988 1.012l.082 6.953z"
-      />
-      <path
-        fill="url(#a)"
-        d="M6.836 53.925h1.616v22.65H6.836v-22.65zm5.657 0h1.616v22.65h-1.616v-22.65z"
-        transform="translate(35 111)"
-      />
-      <path
-        fill="#1D2028"
-        d="M88.556 17.556c0-1.105.671-2 1.5-2 .828 0 1.5.895 1.5 2v6c0 1.104-.672 2-1.5 2-.829 0-1.5-.896-1.5-2"
-      />
-      <rect
-        width="88"
-        height="118.635"
-        x="1"
-        y="1"
-        fill="#EFF3FD"
-        stroke="#1D2027"
-        strokeWidth="2"
-        rx="5.44"
-      />
-      <rect width="59" height="88.615" x="15.5" y="16.5" fill="#FFF" stroke="#6490F1" rx="4.08" />
-    </g>
-  </svg>
-)
diff --git a/src/icons/illustrations/LedgerNano.js b/src/icons/illustrations/LedgerNano.js
deleted file mode 100644
index 634bd32b..00000000
--- a/src/icons/illustrations/LedgerNano.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-  <svg width="13" height="72">
-    <g fill="none" fillRule="evenodd">
-      <rect width="1.04" height="4.114" x="11.96" y="4.114" fill="#1D2028" rx=".52" />
-      <rect width="1.04" height="4.114" x="11.96" y="17.486" fill="#1D2028" rx=".52" />
-      <path
-        fill="#6490F1"
-        fillOpacity=".1"
-        stroke="#1D2028"
-        strokeWidth="1.5"
-        d="M1.6.75a.85.85 0 0 0-.85.85v68.8c0 .47.38.85.85.85h9.28c.47 0 .85-.38.85-.85V1.6a.85.85 0 0 0-.85-.85H1.6z"
-      />
-      <rect
-        width="5.74"
-        height="20.071"
-        x="3.39"
-        y="5.409"
-        fill="#FFF"
-        stroke="#6490F1"
-        strokeWidth=".5"
-        rx=".8"
-      />
-      <path
-        fill="#FFF"
-        stroke="#1D2028"
-        strokeWidth="1.5"
-        d="M6.24 31.607a5.49 5.49 0 0 0-5.49 5.49V70.4c0 .47.38.85.85.85h9.28c.47 0 .85-.38.85-.85V37.097a5.49 5.49 0 0 0-5.49-5.49z"
-      />
-      <ellipse
-        cx="6.24"
-        cy="37.029"
-        fill="#FFF"
-        stroke="#6490F1"
-        strokeWidth=".5"
-        rx="2.87"
-        ry="2.836"
-      />
-    </g>
-  </svg>
-)
diff --git a/src/icons/illustrations/LedgerNanoError.js b/src/icons/illustrations/LedgerNanoError.js
deleted file mode 100644
index e265504f..00000000
--- a/src/icons/illustrations/LedgerNanoError.js
+++ /dev/null
@@ -1,78 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-  <svg>
-    <defs>
-      <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
-        <stop offset="0%" />
-        <stop offset="100%" stopColor="#FFF" />
-      </linearGradient>
-      <rect id="b" width="41.711" height="238.384" rx="4" />
-      <path
-        id="c"
-        d="M5.773 5l2.541-2.541a.235.235 0 0 0 0-.332l-.441-.441a.235.235 0 0 0-.332 0L5 4.226l-2.541-2.54a.235.235 0 0 0-.332 0l-.441.441a.235.235 0 0 0 0 .332L4.226 5l-2.54 2.541a.235.235 0 0 0 0 .332l.441.441c.092.092.24.092.332 0L5 5.774l2.541 2.54c.092.092.24.092.332 0l.441-.441a.235.235 0 0 0 0-.332L5.774 5z"
-      />
-    </defs>
-    <g fill="none" fillRule="evenodd">
-      <path
-        stroke="#1D2027"
-        strokeWidth="2"
-        d="M127.356 30a1 1 0 0 1-1 1H100.13a5 5 0 0 1-5-5v-8.486a5 5 0 0 1 5-5h26.225a1 1 0 0 1 1 1V30z"
-      />
-      <path stroke="#142533" strokeWidth="2" d="M94.747 24.792H83.818v-6.436h10.93v6.436z" />
-      <path
-        stroke="#1D2027"
-        strokeWidth="2"
-        d="M127.423 27.287V16.032l6.977.082a1 1 0 0 1 .988 1v9.267a1 1 0 0 1-1.012.988l-6.953-.082z"
-      />
-      <path
-        fill="url(#a)"
-        d="M6.836 53.925h1.616v82.65H6.836v-82.65zm5.657 0h1.616v82.65h-1.616v-82.65z"
-        transform="matrix(0 -1 -1 0 137 32)"
-      />
-      <g transform="rotate(-90 85 -42)">
-        <rect width="4.492" height="17.12" x="38.336" y="15.505" fill="#142533" rx="2" />
-        <rect width="4.492" height="17.12" x="38.336" y="70.094" fill="#142533" rx="2" />
-        <use fill="#FFF" />
-        <rect
-          width="39.711"
-          height="236.384"
-          x="1"
-          y="1"
-          fill="#FCE0E4"
-          stroke="#142533"
-          strokeLinejoin="square"
-          strokeWidth="2"
-          rx="4"
-        />
-        <rect
-          width="20.176"
-          height="61.019"
-          x="10.767"
-          y="21.173"
-          fill="#FFF"
-          stroke="#EA2E49"
-          rx="1.6"
-        />
-        <path
-          fill="#FFF"
-          stroke="#142533"
-          strokeWidth="2"
-          d="M20.856 95.966C9.89 95.966 1 104.856 1 115.822v118.562a3 3 0 0 0 3 3h33.711a3 3 0 0 0 3-3V115.822c0-10.966-8.89-19.856-19.855-19.856z"
-        />
-        <ellipse cx="21.016" cy="116.123" stroke="#EA2E49" rx="10.57" ry="10.644" />
-        <g transform="translate(16.066 26.884)">
-          <mask id="d" fill="#fff">
-            <use xlinkHref="#c" />
-          </mask>
-          <use fill="#000" fillRule="nonzero" xlinkHref="#c" />
-          <g fill="#EA2E49" mask="url(#d)">
-            <path d="M0 0h10v10H0z" />
-          </g>
-        </g>
-      </g>
-    </g>
-  </svg>
-)
diff --git a/src/icons/illustrations/LedgerNanoSelectPIN.js b/src/icons/illustrations/LedgerNanoSelectPIN.js
deleted file mode 100644
index aa9fb1c2..00000000
--- a/src/icons/illustrations/LedgerNanoSelectPIN.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// @flow
-import React from 'react'
-
-export default () => (
-  <svg width="260" height="129">
-    <defs>
-      <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
-        <stop offset="0%" />
-        <stop offset="100%" stopColor="#FFF" />
-      </linearGradient>
-      <path
-        id="b"
-        d="M91 0h34a4 4 0 0 1 4 4v108.144c0 11.519-9.337 20.856-20.856 20.856h-.288C96.337 133 87 123.663 87 112.144V4a4 4 0 0 1 4-4z"
-      />
-    </defs>
-    <g fill="none" fillRule="evenodd">
-      <path
-        stroke="#1D2027"
-        strokeWidth="2"
-        d="M127.856 31.44a1 1 0 0 1-1 1H100.63a5 5 0 0 1-5-5v-8.486a5 5 0 0 1 5-5h26.225a1 1 0 0 1 1 1v16.485z"
-      />
-      <path stroke="#142533" strokeWidth="2" d="M95.247 26.231H84.318v-6.435h10.93v6.435z" />
-      <path
-        stroke="#1D2027"
-        strokeWidth="2"
-        d="M127.923 28.726V17.471l6.977.083a1 1 0 0 1 .988 1v9.266a1 1 0 0 1-1.012.988l-6.953-.083z"
-      />
-      <path
-        fill="url(#a)"
-        d="M6.836 53.925h1.616v82.65H6.836v-82.65zm5.657 0h1.616v82.65h-1.616v-82.65z"
-        transform="matrix(0 -1 -1 0 137.5 33.44)"
-      />
-      <g transform="rotate(-90 128.59 1.975)">
-        <rect width="4.492" height="17.12" x="125.336" y="15.505" fill="#142533" rx="2" />
-        <rect width="4.492" height="17.12" x="125.336" y="70.094" fill="#142533" rx="2" />
-        <use fill="#FFF" xlinkHref="#b" />
-        <path
-          fill="#6490F1"
-          fillOpacity=".15"
-          stroke="#142533"
-          strokeLinejoin="square"
-          strokeWidth="2"
-          d="M91 1a3 3 0 0 0-3 3v108.144C88 123.11 96.89 132 107.856 132h.288C119.11 132 128 123.11 128 112.144V4a3 3 0 0 0-3-3H91z"
-        />
-        <rect width="21" height="62" x="97.5" y="21.5" fill="#FFF" stroke="#6490F1" rx="1.6" />
-        <path
-          fill="#6490F1"
-          d="M105.5 35h5a.5.5 0 0 1 .5.5v34a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-34a.5.5 0 0 1 .5-.5zm1.238 3.042l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472zm0 3.908l.774.512v.013l-.774.505.341.466.722-.578h.013l.243.9.551-.178-.328-.88.932.053v-.597l-.932.046.328-.872-.551-.17-.243.891h-.013l-.722-.584-.34.473zm0 3.907l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.899.551-.178-.328-.879.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472zm0 3.908l.774.511v.014l-.774.505.341.466.722-.578h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.872-.551-.171-.243.892h-.013l-.722-.584-.34.473zm0 3.907l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.898.551-.177-.328-.879.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472zm0 3.908l.774.511v.013l-.774.506.341.465.722-.577h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.473zm0 3.907l.774.512v.013l-.774.505.341.466.722-.578h.013l.243.9.551-.178-.328-.879.932.052v-.597l-.932.046.328-.872-.551-.17-.243.891h-.013l-.722-.583-.34.472zm0 3.907l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472z"
-        />
-        <path
-          fill="#FFF"
-          stroke="#142533"
-          strokeWidth="2"
-          d="M123.166 125.105c7.049-8.4 5.953-20.925-2.447-27.974l-90.824-76.21a3 3 0 0 0-4.227.37L4 47.115a3 3 0 0 0 .37 4.227l90.824 76.21c8.4 7.049 20.924 5.953 27.973-2.447z"
-        />
-        <ellipse cx="108.016" cy="111.123" stroke="#6490F1" rx="10.57" ry="10.644" />
-      </g>
-    </g>
-  </svg>
-)
diff --git a/src/icons/illustrations/SetPassword.js b/src/icons/illustrations/SetPassword.js
deleted file mode 100644
index 3f0e82ce..00000000
--- a/src/icons/illustrations/SetPassword.js
+++ /dev/null
@@ -1,63 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-  <svg width="136" height="52">
-    <g fill="none" fillRule="evenodd">
-      <g fillRule="nonzero">
-        <g transform="translate(36 1)">
-          <ellipse cx="37.488" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
-          <ellipse cx="33.5" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
-          <ellipse cx="29.512" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
-          <path
-            fill="#142533"
-            d="M65.405 40.242h-2.792V9.562c0-7.251-5.982-9.164-9.173-9.164H13.56c-3.191 0-9.173 1.913-9.173 9.165v30.68H1.595C.957 40.242.4 40.8.4 41.436c0 3.188 1.914 9.165 9.172 9.165H57.43c7.258 0 9.172-5.977 9.172-9.164 0-.638-.558-1.196-1.196-1.196zM6.78 9.562c0-6.534 6.062-6.773 6.78-6.773h39.88c.718 0 6.78.24 6.78 6.774v30.68H6.78V9.562zm50.649 38.649H9.57c-5.025 0-6.3-3.586-6.7-5.578h61.18c-.32 1.912-1.595 5.578-6.62 5.578z"
-          />
-        </g>
-        <g fill="#6490F1">
-          <path d="M74.189 20.125c0-.16.08-.319.08-.478V16.38c0-1.833-1.524-3.427-3.448-3.427h-2.005c-1.844 0-3.448 1.514-3.448 3.427v3.267c0 .16 0 .319.08.478-1.763.16-3.127 1.594-3.127 3.347v6.773c0 1.833 1.524 3.427 3.448 3.427h8.26c1.844 0 3.447-1.514 3.447-3.427v-6.773c-.08-1.753-1.523-3.188-3.287-3.347zM67.854 16.3c0-.558.481-1.036 1.043-1.036H70.9c.561 0 1.043.478 1.043 1.036v3.267c0 .16-.08.319-.16.478h-3.69c-.08-.16-.16-.318-.16-.478l-.08-3.267zm7.136 14.025c0 .558-.48 1.036-1.042 1.036H65.77a1.058 1.058 0 0 1-1.042-1.036v-6.773c0-.558.481-1.036 1.042-1.036h8.26c.56 0 1.042.478 1.042 1.036l-.08 6.773z" />
-          <path d="M69.899 24.11c-.638 0-1.197.548-1.197 1.175v2.43c0 .627.559 1.176 1.197 1.176s1.196-.549 1.196-1.176v-2.43c0-.705-.558-1.176-1.196-1.176z" />
-        </g>
-      </g>
-      <g transform="translate(109 4)">
-        <path
-          fill="#CCC"
-          fillRule="nonzero"
-          d="M6.325 38.352l.614-.636c.254-.263.712-.233 1.023.067.31.3.356.757.102 1.02l-.614.636.643.62c.267.258.242.715-.055 1.022-.296.307-.753.348-1.019.09l-.643-.62-.614.635c-.254.264-.712.234-1.023-.066-.31-.3-.356-.757-.102-1.02l.614-.636-.643-.62c-.266-.258-.242-.715.055-1.022.296-.308.753-.348 1.02-.09l.642.62z"
-        />
-        <ellipse cx="1.224" cy="24.349" stroke="#E2E2E2" strokeWidth=".8" rx="1.146" ry="1.133" />
-        <ellipse cx="21.21" cy="23.216" stroke="#E2E2E2" strokeWidth=".8" rx="1.564" ry="1.546" />
-        <path
-          fill="#EEE"
-          fillRule="nonzero"
-          d="M11.558 12.189l.917-.95c.281-.291.677-.366.883-.167.206.2.145.597-.136.888l-.917.95.96.928c.295.284.375.68.178.884-.197.204-.596.139-.89-.146l-.961-.927-.917.95c-.281.29-.677.365-.883.166-.206-.2-.145-.597.136-.888l.917-.95-.96-.928c-.295-.284-.375-.68-.178-.884.197-.204.596-.139.89.146l.961.928z"
-        />
-        <path
-          fill="#CCC"
-          fillRule="nonzero"
-          d="M25.03 3.01l.71-.736c.251-.26.657-.277.905-.037.249.24.246.646-.005.907l-.71.734.744.718c.263.255.285.66.047.906-.237.246-.643.239-.907-.016l-.743-.718-.71.735c-.251.26-.657.277-.906.037-.248-.24-.246-.646.006-.906l.71-.735-.744-.718c-.263-.255-.285-.66-.047-.906.237-.246.643-.238.907.016l.743.718z"
-        />
-      </g>
-      <g transform="translate(1 -1)">
-        <path
-          fill="#CCC"
-          fillRule="nonzero"
-          d="M20.486 48.016l.621-.643c.257-.267.72-.238 1.033.065.314.303.36.764.102 1.03l-.621.644.648.626c.269.26.243.722-.057 1.033-.3.31-.761.352-1.03.093l-.648-.627-.622.644c-.257.266-.72.237-1.033-.066-.313-.302-.359-.764-.102-1.03l.622-.643-.649-.627c-.268-.26-.243-.721.057-1.032.3-.311.762-.353 1.03-.093l.649.626z"
-        />
-        <ellipse cx="3.155" cy="37.389" stroke="#CCC" strokeWidth=".8" rx="3.155" ry="3.13" />
-        <ellipse cx="18.932" cy="29.564" stroke="#E2E2E2" strokeWidth=".8" rx="1.578" ry="1.565" />
-        <path
-          fill="#EEE"
-          fillRule="nonzero"
-          d="M9.447 16.156l1.118-1.158c.343-.356.825-.447 1.075-.205.251.242.176.726-.167 1.081l-1.118 1.158 1.167 1.128c.358.346.454.828.214 1.076-.24.249-.725.17-1.084-.176l-1.167-1.127-1.118 1.158c-.343.355-.825.447-1.075.205-.251-.242-.176-.727.167-1.082l1.118-1.158L7.41 15.93c-.358-.346-.454-.828-.214-1.077.24-.248.725-.17 1.084.176l1.167 1.128z"
-        />
-        <path
-          fill="#CCC"
-          fillRule="nonzero"
-          d="M22.47 2.013l.699-.724c.214-.222.515-.28.672-.128.156.151.11.454-.105.676l-.699.724.73.704c.224.216.283.518.133.673-.15.156-.453.106-.677-.11l-.73-.704-.698.723c-.215.222-.515.28-.672.128-.157-.15-.11-.454.104-.676l.7-.723-.73-.705c-.224-.216-.284-.517-.134-.673.15-.155.453-.106.677.11l.73.705z"
-        />
-      </g>
-    </g>
-  </svg>
-)
diff --git a/src/icons/illustrations/WriteSeed.js b/src/icons/illustrations/WriteSeed.js
deleted file mode 100644
index 674f9bb8..00000000
--- a/src/icons/illustrations/WriteSeed.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-  <svg width="145" height="109">
-    <g fill="none" fillRule="evenodd" transform="translate(-1)">
-      <path
-        fill="#6490F1"
-        fillOpacity=".1"
-        stroke="#142533"
-        strokeWidth="1.8"
-        d="M29.105 104.014l19.87-84.34L4.123 35.999a2.7 2.7 0 0 0-1.573 3.566l26.556 64.449zm89.265 1.336L97.73 34.29l44.752 16.288a2.7 2.7 0 0 1 1.49 3.748L118.37 105.35z"
-      />
-      <rect
-        width="88.2"
-        height="107.2"
-        x="29.9"
-        y=".9"
-        fill="#FFF"
-        stroke="#142533"
-        strokeWidth="1.8"
-        rx="3.6"
-      />
-      <rect width="50" height="4" x="49" y="14" fill="#6490F1" rx="2" />
-      <path
-        fill="#6490F1"
-        d="M83.18 91.378h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622zm42.37-12.675h24.01a1.81 1.81 0 0 1 0 3.621H83.18a1.81 1.81 0 1 1 0-3.621zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.621H40.81a1.81 1.81 0 1 1 0-3.621zm42.37-12.676h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622zm42.37-12.676h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622zm42.37-12.675h24.01a1.81 1.81 0 0 1 0 3.621H83.18a1.81 1.81 0 1 1 0-3.621zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.621H40.81a1.81 1.81 0 1 1 0-3.621zM83.18 28h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622z"
-        opacity=".5"
-      />
-      <path
-        fill="#FFF"
-        fillRule="nonzero"
-        stroke="#6490F1"
-        strokeWidth="2"
-        d="M85.623 56.047a17.987 17.987 0 0 1 6.194 13.596c0 9.92-8.032 17.99-17.909 17.99-9.876 0-17.908-8.07-17.908-17.99a17.986 17.986 0 0 1 6.194-13.596v-3.281C62.194 46.278 67.447 41 73.908 41c6.462 0 11.715 5.278 11.715 11.766v3.28zM73.809 73.193zm.003-.018v4.55a.1.1 0 0 0 .096.102.1.1 0 0 0 .097-.102v-4.55a3.149 3.149 0 0 1-.006-.054l-.088-.899.885-.179a4.505 4.505 0 0 0 3.596-4.42c0-2.493-2.008-4.51-4.484-4.51-2.475 0-4.483 2.018-4.483 4.51a4.505 4.505 0 0 0 3.596 4.42l.885.18-.088.898a3.149 3.149 0 0 1-.006.054zm.196.018a.1.1 0 0 0 0 .004v-.004zm0 .004v-.002zm-7.62-19.876a17.719 17.719 0 0 1 7.52-1.668c2.633 0 5.186.577 7.521 1.668v-.555c0-4.17-3.375-7.562-7.52-7.562-4.146 0-7.521 3.392-7.521 7.562v.555z"
-      />
-    </g>
-  </svg>
-)
diff --git a/src/stories/icons.stories.js b/src/stories/icons.stories.js
index f3527b8c..81c44de4 100644
--- a/src/stories/icons.stories.js
+++ b/src/stories/icons.stories.js
@@ -6,7 +6,7 @@ import Box from 'components/base/Box'
 
 const stories = storiesOf('Common', module)
 
-const req = require.context('../icons', true, /^((?!illustrations).)*\.js$/)
+const req = require.context('../icons', true, /.js$/)
 const icons = req
   .keys()
   .map(file => {
diff --git a/static/images/blue-error-onb.svg b/static/images/blue-error-onb.svg
new file mode 100644
index 00000000..96fa9e15
--- /dev/null
+++ b/static/images/blue-error-onb.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="92" height="188" viewBox="0 0 92 188">
+    <defs>
+        <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path stroke="#1D2027" stroke-width="2" d="M37 120.644a1 1 0 0 0-1 1v26.225a5 5 0 0 0 5 5h8.486a5 5 0 0 0 5-5v-26.225a1 1 0 0 0-1-1H37z"/>
+        <path stroke="#142533" stroke-width="2" d="M42.208 153.253v10.929h6.436v-10.93h-6.436z"/>
+        <path stroke="#1D2027" stroke-width="2" d="M39.713 120.577h11.255l-.082-6.977a1 1 0 0 0-1-.988H40.619a1 1 0 0 0-.988 1.012l.082 6.953z"/>
+        <path fill="url(#a)" d="M6.836 53.925h1.616v22.65H6.836v-22.65zm5.657 0h1.616v22.65h-1.616v-22.65z" transform="translate(35 111)"/>
+        <g>
+            <path fill="#1D2028" d="M88.556 17.556c0-1.105.671-2 1.5-2 .828 0 1.5.895 1.5 2v6c0 1.104-.672 2-1.5 2-.829 0-1.5-.896-1.5-2"/>
+            <rect width="88" height="118.635" x="1" y="1" fill="#FCEAEC" stroke="#1D2027" stroke-width="2" rx="5.44"/>
+            <rect width="59" height="88.615" x="15.5" y="16.5" fill="#FFF" stroke="#EA2E49" rx="4.08"/>
+        </g>
+    </g>
+</svg>
diff --git a/static/images/get-started-onb.svg b/static/images/get-started-onb.svg
new file mode 100644
index 00000000..ec9acd80
--- /dev/null
+++ b/static/images/get-started-onb.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="113" height="109" viewBox="0 0 113 109">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="1.44" height="5.6" y="16.6" fill="#1D2028" rx=".72" transform="matrix(-1 0 0 1 1.44 0)"/>
+        <rect width="1.44" height="5.6" y="34.8" fill="#1D2028" rx=".72" transform="matrix(-1 0 0 1 1.44 0)"/>
+        <path fill="#6490F1" fill-opacity=".1" stroke="#1D2028" stroke-width="2" d="M16.592 12c.225 0 .408.183.408.408v95.184a.408.408 0 0 1-.408.408H2.128a.408.408 0 0 1-.408-.408V12.408c0-.225.183-.408.408-.408h14.464z"/>
+        <rect width="7.64" height="27" x="5.513" y="18.522" fill="#FFF" stroke="#6490F1" rx=".704" transform="matrix(-1 0 0 1 18.665 0)"/>
+        <path fill="#FFF" stroke="#1D2028" stroke-width="2" d="M9.36 54A7.64 7.64 0 0 1 17 61.64v45.952a.408.408 0 0 1-.408.408H2.128a.408.408 0 0 1-.408-.408V61.64A7.64 7.64 0 0 1 9.36 54z"/>
+        <ellipse cx="9.36" cy="61.4" fill="#FFF" stroke="#6490F1" rx="3.82" ry="3.7" transform="matrix(-1 0 0 1 18.72 0)"/>
+        <rect width="3.137" height="9.306" x="109.863" y="13.959" fill="#1D2028" rx="1.569"/>
+        <rect width="76.431" height="106.571" x="34" y="1" fill="#6490F1" fill-opacity=".1" stroke="#1D2027" stroke-width="2" rx="5.44"/>
+        <rect width="52.333" height="79.653" x="46.043" y="15.235" fill="#FFF" stroke="#6490F1" rx="4.08"/>
+    </g>
+</svg>
diff --git a/static/images/ledger-blue-onb.svg b/static/images/ledger-blue-onb.svg
new file mode 100644
index 00000000..c4b098b8
--- /dev/null
+++ b/static/images/ledger-blue-onb.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="72" viewBox="0 0 52 72">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="2.039" height="6.171" x="49.961" y="9.257" fill="#1D2028" rx="1.02"/>
+        <rect width="49.48" height="70.5" x=".75" y=".75" fill="#6490F1" fill-opacity=".1" stroke="#1D2027" stroke-width="1.5" rx="3.2"/>
+        <rect width="34.167" height="52.986" x="8.403" y="10.021" fill="#FFF" stroke="#6490F1" stroke-width=".5" rx="2.4"/>
+    </g>
+</svg>
diff --git a/static/images/ledger-nano-onb.svg b/static/images/ledger-nano-onb.svg
new file mode 100644
index 00000000..5e25be0a
--- /dev/null
+++ b/static/images/ledger-nano-onb.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="72" viewBox="0 0 13 72">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="1.04" height="4.114" x="11.96" y="4.114" fill="#1D2028" rx=".52"/>
+        <rect width="1.04" height="4.114" x="11.96" y="17.486" fill="#1D2028" rx=".52"/>
+        <path fill="#6490F1" fill-opacity=".1" stroke="#1D2028" stroke-width="1.5" d="M1.6.75a.85.85 0 0 0-.85.85v68.8c0 .47.38.85.85.85h9.28c.47 0 .85-.38.85-.85V1.6a.85.85 0 0 0-.85-.85H1.6z"/>
+        <rect width="5.74" height="20.071" x="3.39" y="5.409" fill="#FFF" stroke="#6490F1" stroke-width=".5" rx=".8"/>
+        <path fill="#FFF" stroke="#1D2028" stroke-width="1.5" d="M6.24 31.607a5.49 5.49 0 0 0-5.49 5.49V70.4c0 .47.38.85.85.85h9.28c.47 0 .85-.38.85-.85V37.097a5.49 5.49 0 0 0-5.49-5.49z"/>
+        <ellipse cx="6.24" cy="37.029" fill="#FFF" stroke="#6490F1" stroke-width=".5" rx="2.87" ry="2.836"/>
+    </g>
+</svg>
diff --git a/static/images/nano-error-onb.svg b/static/images/nano-error-onb.svg
new file mode 100644
index 00000000..38237aa0
--- /dev/null
+++ b/static/images/nano-error-onb.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="366" height="43" viewBox="0 0 366 43">
+    <defs>
+        <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+        <rect id="b" width="41.711" height="238.384" rx="4"/>
+        <path id="c" d="M5.773 5l2.541-2.541a.235.235 0 0 0 0-.332l-.441-.441a.235.235 0 0 0-.332 0L5 4.226l-2.541-2.54a.235.235 0 0 0-.332 0l-.441.441a.235.235 0 0 0 0 .332L4.226 5l-2.54 2.541a.235.235 0 0 0 0 .332l.441.441c.092.092.24.092.332 0L5 5.774l2.541 2.54c.092.092.24.092.332 0l.441-.441a.235.235 0 0 0 0-.332L5.774 5z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path stroke="#1D2027" stroke-width="2" d="M127.356 30a1 1 0 0 1-1 1H100.13a5 5 0 0 1-5-5v-8.486a5 5 0 0 1 5-5h26.225a1 1 0 0 1 1 1V30z"/>
+        <path stroke="#142533" stroke-width="2" d="M94.747 24.792H83.818v-6.436h10.93v6.436z"/>
+        <path stroke="#1D2027" stroke-width="2" d="M127.423 27.287V16.032l6.977.082a1 1 0 0 1 .988 1V26.381a1 1 0 0 1-1.012.988l-6.953-.082z"/>
+        <path fill="url(#a)" d="M6.836 53.925h1.616v82.65H6.836v-82.65zm5.657 0h1.616v82.65h-1.616v-82.65z" transform="matrix(0 -1 -1 0 137 32)"/>
+        <g transform="rotate(-90 85 -42)">
+            <rect width="4.492" height="17.12" x="38.336" y="15.505" fill="#142533" rx="2"/>
+            <rect width="4.492" height="17.12" x="38.336" y="70.094" fill="#142533" rx="2"/>
+            <use fill="#FFF" xlink:href="#b"/>
+            <rect width="39.711" height="236.384" x="1" y="1" fill="#FCE0E4" stroke="#142533" stroke-linejoin="square" stroke-width="2" rx="4"/>
+            <rect width="20.176" height="61.019" x="10.767" y="21.173" fill="#FFF" stroke="#EA2E49" rx="1.6"/>
+            <path fill="#FFF" stroke="#142533" stroke-width="2" d="M20.856 95.966C9.89 95.966 1 104.856 1 115.822v118.562a3 3 0 0 0 3 3h33.711a3 3 0 0 0 3-3V115.822c0-10.966-8.89-19.856-19.855-19.856z"/>
+            <ellipse cx="21.016" cy="116.123" stroke="#EA2E49" rx="10.57" ry="10.644"/>
+            <g transform="translate(16.066 26.884)">
+                <mask id="d" fill="#fff">
+                    <use xlink:href="#c"/>
+                </mask>
+                <use fill="#000" fill-rule="nonzero" xlink:href="#c"/>
+                <g fill="#EA2E49" mask="url(#d)">
+                    <path d="M0 0h10v10H0z"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/static/images/select-pin-blue-onb.svg b/static/images/select-pin-blue-onb.svg
new file mode 100644
index 00000000..65ba0de4
--- /dev/null
+++ b/static/images/select-pin-blue-onb.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="92" height="188" viewBox="0 0 92 188">
+    <defs>
+        <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path stroke="#1D2027" stroke-width="2" d="M37 120.644a1 1 0 0 0-1 1v26.225a5 5 0 0 0 5 5h8.486a5 5 0 0 0 5-5v-26.225a1 1 0 0 0-1-1H37z"/>
+        <path stroke="#142533" stroke-width="2" d="M42.208 153.253v10.929h6.436v-10.93h-6.436z"/>
+        <path stroke="#1D2027" stroke-width="2" d="M39.713 120.577h11.255l-.082-6.977a1 1 0 0 0-1-.988H40.619a1 1 0 0 0-.988 1.012l.082 6.953z"/>
+        <path fill="url(#a)" d="M6.836 53.925h1.616v22.65H6.836v-22.65zm5.657 0h1.616v22.65h-1.616v-22.65z" transform="translate(35 111)"/>
+        <g>
+            <path fill="#1D2028" d="M88.556 17.556c0-1.105.671-2 1.5-2 .828 0 1.5.895 1.5 2v6c0 1.104-.672 2-1.5 2-.829 0-1.5-.896-1.5-2"/>
+            <rect width="88" height="118.635" x="1" y="1" fill="#EFF3FD" stroke="#1D2027" stroke-width="2" rx="5.44"/>
+            <rect width="59" height="88.615" x="15.5" y="16.5" fill="#FFF" stroke="#6490F1" rx="4.08"/>
+        </g>
+    </g>
+</svg>
diff --git a/static/images/select-pin-nano-onb.svg b/static/images/select-pin-nano-onb.svg
new file mode 100644
index 00000000..e3676379
--- /dev/null
+++ b/static/images/select-pin-nano-onb.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="260" height="129" viewBox="0 0 260 129">
+    <defs>
+        <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%"/>
+            <stop offset="100%" stop-color="#FFF"/>
+        </linearGradient>
+        <path id="b" d="M91 0h34a4 4 0 0 1 4 4v108.144c0 11.519-9.337 20.856-20.856 20.856h-.288C96.337 133 87 123.663 87 112.144V4a4 4 0 0 1 4-4z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path stroke="#1D2027" stroke-width="2" d="M127.856 31.44a1 1 0 0 1-1 1H100.63a5 5 0 0 1-5-5v-8.486a5 5 0 0 1 5-5h26.225a1 1 0 0 1 1 1v16.485z"/>
+        <path stroke="#142533" stroke-width="2" d="M95.247 26.231H84.318v-6.435h10.93v6.435z"/>
+        <path stroke="#1D2027" stroke-width="2" d="M127.923 28.726V17.471l6.977.083a1 1 0 0 1 .988 1V27.82a1 1 0 0 1-1.012.988l-6.953-.083z"/>
+        <path fill="url(#a)" d="M6.836 53.925h1.616v82.65H6.836v-82.65zm5.657 0h1.616v82.65h-1.616v-82.65z" transform="matrix(0 -1 -1 0 137.5 33.44)"/>
+        <g transform="rotate(-90 128.59 1.975)">
+            <rect width="4.492" height="17.12" x="125.336" y="15.505" fill="#142533" rx="2"/>
+            <rect width="4.492" height="17.12" x="125.336" y="70.094" fill="#142533" rx="2"/>
+            <use fill="#FFF" xlink:href="#b"/>
+            <path fill="#6490F1" fill-opacity=".15" stroke="#142533" stroke-linejoin="square" stroke-width="2" d="M91 1a3 3 0 0 0-3 3v108.144C88 123.11 96.89 132 107.856 132h.288C119.11 132 128 123.11 128 112.144V4a3 3 0 0 0-3-3H91z"/>
+            <rect width="21" height="62" x="97.5" y="21.5" fill="#FFF" stroke="#6490F1" rx="1.6"/>
+            <path fill="#6490F1" d="M105.5 35h5a.5.5 0 0 1 .5.5v34a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-34a.5.5 0 0 1 .5-.5zm1.238 3.042l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472zm0 3.908l.774.512v.013l-.774.505.341.466.722-.578h.013l.243.9.551-.178-.328-.88.932.053v-.597l-.932.046.328-.872-.551-.17-.243.891h-.013l-.722-.584-.34.473zm0 3.907l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.899.551-.178-.328-.879.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472zm0 3.908l.774.511v.014l-.774.505.341.466.722-.578h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.872-.551-.171-.243.892h-.013l-.722-.584-.34.473zm0 3.907l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.898.551-.177-.328-.879.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472zm0 3.908l.774.511v.013l-.774.506.341.465.722-.577h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.473zm0 3.907l.774.512v.013l-.774.505.341.466.722-.578h.013l.243.9.551-.178-.328-.879.932.052v-.597l-.932.046.328-.872-.551-.17-.243.891h-.013l-.722-.583-.34.472zm0 3.907l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472z"/>
+            <path fill="#FFF" stroke="#142533" stroke-width="2" d="M123.166 125.105c7.049-8.4 5.953-20.925-2.447-27.974l-90.824-76.21a3 3 0 0 0-4.227.37L4 47.115a3 3 0 0 0 .37 4.227l90.824 76.21c8.4 7.049 20.924 5.953 27.973-2.447z"/>
+            <ellipse cx="108.016" cy="111.123" stroke="#6490F1" rx="10.57" ry="10.644"/>
+        </g>
+    </g>
+</svg>
diff --git a/static/images/write-seed-onb.svg b/static/images/write-seed-onb.svg
new file mode 100644
index 00000000..31573420
--- /dev/null
+++ b/static/images/write-seed-onb.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="145" height="109" viewBox="0 0 145 109">
+    <g fill="none" fill-rule="evenodd" transform="translate(-1)">
+        <path fill="#6490F1" fill-opacity=".1" stroke="#142533" stroke-width="1.8" d="M29.105 104.014l19.87-84.34L4.123 35.999a2.7 2.7 0 0 0-1.573 3.566l26.556 64.449zM118.37 105.35L97.73 34.29l44.752 16.288a2.7 2.7 0 0 1 1.49 3.748L118.37 105.35z"/>
+        <rect width="88.2" height="107.2" x="29.9" y=".9" fill="#FFF" stroke="#142533" stroke-width="1.8" rx="3.6"/>
+        <rect width="50" height="4" x="49" y="14" fill="#6490F1" rx="2"/>
+        <path fill="#6490F1" d="M83.18 91.378h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622zm42.37-12.675h24.01a1.81 1.81 0 0 1 0 3.621H83.18a1.81 1.81 0 1 1 0-3.621zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.621H40.81a1.81 1.81 0 1 1 0-3.621zm42.37-12.676h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622zm42.37-12.676h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622zm42.37-12.675h24.01a1.81 1.81 0 0 1 0 3.621H83.18a1.81 1.81 0 1 1 0-3.621zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.621H40.81a1.81 1.81 0 1 1 0-3.621zM83.18 28h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622z" opacity=".5"/>
+        <path fill="#FFF" fill-rule="nonzero" stroke="#6490F1" stroke-width="2" d="M85.623 56.047a17.987 17.987 0 0 1 6.194 13.596c0 9.92-8.032 17.99-17.909 17.99-9.876 0-17.908-8.07-17.908-17.99a17.986 17.986 0 0 1 6.194-13.596v-3.281C62.194 46.278 67.447 41 73.908 41c6.462 0 11.715 5.278 11.715 11.766v3.28zM73.809 73.193zm.003-.018v4.55a.1.1 0 0 0 .096.102.1.1 0 0 0 .097-.102v-4.55a3.149 3.149 0 0 1-.006-.054l-.088-.899.885-.179a4.505 4.505 0 0 0 3.596-4.42c0-2.493-2.008-4.51-4.484-4.51-2.475 0-4.483 2.018-4.483 4.51a4.505 4.505 0 0 0 3.596 4.42l.885.18-.088.898a3.149 3.149 0 0 1-.006.054zm.196.018a.1.1 0 0 0 0 .004v-.003-.001zm0 .004v-.002zm-7.62-19.876a17.719 17.719 0 0 1 7.52-1.668c2.633 0 5.186.577 7.521 1.668v-.555c0-4.17-3.375-7.562-7.52-7.562-4.146 0-7.521 3.392-7.521 7.562v.555z"/>
+    </g>
+</svg>

From b898563dc8f3f6a7535a36aa7e4b29c916721f11 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Fri, 22 Jun 2018 17:56:47 +0200
Subject: [PATCH 2/2] make import path consistent

---
 src/components/RenderError.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RenderError.js b/src/components/RenderError.js
index 23a0f39b..ed888ae4 100644
--- a/src/components/RenderError.js
+++ b/src/components/RenderError.js
@@ -14,8 +14,8 @@ import ExportLogsBtn from 'components/ExportLogsBtn'
 import Box from 'components/base/Box'
 import Space from 'components/base/Space'
 import Button from 'components/base/Button'
+import ConfirmModal from 'components/base/Modal/ConfirmModal'
 import IconTriangleWarning from 'icons/TriangleWarning'
-import ConfirmModal from './base/Modal/ConfirmModal'
 import { IconWrapperCircle } from './SettingsPage/sections/Profile'
 
 type Props = {