From 3fe79d08541948a9238f4dca7fc914d3cff7e4e2 Mon Sep 17 00:00:00 2001
From: NastiaS <anastasiasergienko@gmail.com>
Date: Tue, 15 May 2018 16:38:08 +0200
Subject: [PATCH] wip start slide and options slide

---
 src/components/Onboarding/steps/Init.js  | 156 +++++++++++++----------
 src/components/Onboarding/steps/Start.js |  13 +-
 src/icons/onboarding/GetStartedLogo.js   |  79 ++++++++++++
 3 files changed, 175 insertions(+), 73 deletions(-)
 create mode 100644 src/icons/onboarding/GetStartedLogo.js

diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js
index 0ed00ea6..99a5d759 100644
--- a/src/components/Onboarding/steps/Init.js
+++ b/src/components/Onboarding/steps/Init.js
@@ -1,90 +1,112 @@
 // @flow
 
 import React from 'react'
-import styled from 'styled-components'
 import { shell } from 'electron'
 
-import Box from 'components/base/Box'
+import styled from 'styled-components'
+import Box, { Card } from 'components/base/Box'
 import IconUser from 'icons/User'
-import { Title, Description, Inner } from '../helperComponents'
+import IconChevronRight from 'icons/ChevronRight'
+import { Title } from '../helperComponents'
 
 import type { StepProps } from '..'
 
 export default (props: StepProps) => {
   const { nextStep, jumpStep } = props
-  const handleOpenLink = (url: string) => () => shell.openExternal(url)
-  /* TODO: all titles, descriptions to be wrapped in a translation tag once defined */
+  const optionCards = [
+    {
+      key: 'newDevice',
+      icon: <IconUser size={22} />,
+      title: 'Initialize your new Ledger device',
+      desc: 'Please replace it with the final wording once it’s done.',
+      onClick: () => nextStep(),
+    },
+    {
+      key: 'restoreDevice',
+      icon: <IconUser size={22} />,
+      title: 'Restore a Ledger device',
+      desc: 'Please replace it with the final wording once it’s done.',
+      onClick: () => jumpStep('choosePIN'),
+    },
+    {
+      key: 'initializedDevice',
+      icon: <IconUser size={22} />,
+      title: 'I have already initialized my device',
+      desc: 'Please replace it with the final wording once it’s done.',
+      onClick: () => jumpStep('choosePIN'),
+    },
+    {
+      key: 'noDevice',
+      icon: <IconUser size={22} />,
+      title: 'Do not have a Ledger device yet? Buy one',
+      desc: 'Please replace it with the final wording once it’s done.',
+      onClick: () => shell.openExternal('https://www.ledger.fr/'),
+    },
+  ]
+
   return (
     <Box sticky alignItems="center" justifyContent="center">
       <Box align="center">
-        <Title>This is the title of the screen. 1 line is the maximum</Title>
-        <Description>
-          This is a long text, please replace it with the final wording once it’s done.
-          <br />
-          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
-        </Description>
-        <Box style={{ paddingBottom: 10 }}>
-          <Inner>
-            <DeviceContainer onClick={() => nextStep()}>
-              {/* colors are temp, we don't have icons now */}
-              <DeviceIcon style={{ color: '#66be54' }}>
-                <IconUser size={24} />
-              </DeviceIcon>
-              <TrackChoiceTitle>Clean Nano S setup</TrackChoiceTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-            <DeviceContainer onClick={() => jumpStep('choosePIN')}>
-              <DeviceIcon style={{ color: '#66be54' }}>
-                <IconUser size={24} />
-              </DeviceIcon>
-              <TrackChoiceTitle>Existing seed + Clean setup</TrackChoiceTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-          </Inner>
+        <Box color="wallet">
+          <IconUser size={36} />
         </Box>
-        <Box>
-          <Inner>
-            <DeviceContainer onClick={() => nextStep()}>
-              <DeviceIcon style={{ color: '#6490f1' }}>
-                <IconUser size={24} />
-              </DeviceIcon>
-              <TrackChoiceTitle>Migrate accounts</TrackChoiceTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-            <DeviceContainer onClick={handleOpenLink('https://www.ledger.fr/')}>
-              <DeviceIcon style={{ color: '#ea2e41' }}>
-                <IconUser size={24} />
-              </DeviceIcon>
-              <TrackChoiceTitle>Not a user, but would love to</TrackChoiceTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-          </Inner>
+        <Box style={{ padding: 20, maxWidth: 650 }}>
+          <Title>
+            Welcome to Ledger Live, the computer companion app to your Ledger device. Please select
+            one of the options below:
+          </Title>
         </Box>
+        <Box flow={5}>{optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}</Box>
       </Box>
     </Box>
   )
 }
 
-const DeviceContainer = styled(Box).attrs({
-  alignItems: 'center',
-  justifyContent: 'center',
-})`
-  width: 218px;
-  height: 204px;
-  border: 1px solid #d8d8d8;
-`
-const DeviceIcon = styled(Box).attrs({
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: 'graphite',
+type CardType = {
+  icon: any,
+  desc: string,
+  title: string,
+  onClick: Function,
+}
+
+export function OptionFlowCard({ card }: { card: CardType }) {
+  const { icon, desc, title, onClick } = card
+  return (
+    <Card
+      horizontal
+      p={5}
+      style={{
+        cursor: 'pointer',
+        border: 'solid 1px #d8d8d8',
+        minWidth: '533px',
+        maxHeight: '80px',
+      }}
+      onClick={onClick}
+    >
+      <Box justify="center" color="grey" style={{ width: 50 }}>
+        {icon}
+      </Box>
+      <Box ff="Open Sans|Regular" justify="center" fontSize={4} grow>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{desc}</CardDescription>
+      </Box>
+      <Box justify="center" color="grey">
+        <IconChevronRight size={22} />
+      </Box>
+    </Card>
+  )
+}
+
+export const CardDescription = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'left',
+  color: 'smoke',
+})``
+export const CardTitle = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'left',
 })`
-  width: 55px;
-  padding: 10px;
+  font-weight: 600;
 `
-export const TrackChoiceTitle = styled(Box).attrs({
-  width: 152,
-  height: 27,
-  ff: 'Museo Sans|Regular',
-  fontSize: 5,
-  color: 'dark',
-})``
diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js
index e3586584..ab948625 100644
--- a/src/components/Onboarding/steps/Start.js
+++ b/src/components/Onboarding/steps/Start.js
@@ -5,7 +5,7 @@ import React from 'react'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 
-import LedgerLogo from 'icons/LockScreen'
+import IconGetStarted from 'icons/onboarding/GetStartedLogo'
 import type { StepProps } from '..'
 import { Title, Description } from '../helperComponents'
 
@@ -14,11 +14,12 @@ export default (props: StepProps) => {
   return (
     <Box sticky alignItems="center" justifyContent="center">
       <Box align="center" alignItems="center">
-        <LedgerLogo size={136} />
-        <Title>Ledger Live</Title>
-        <Title>Welcome to the new Ledger Live Desktop app.</Title>
-        <Description>Let’s get started!</Description>
-        <Button small primary onClick={() => jumpStep('init')}>
+        <IconGetStarted />
+        <Box style={{ paddingTop: '20px' }}>
+          <Title>Welcome to the new Ledger Live Desktop app.</Title>
+          <Description>Let’s get started!</Description>
+        </Box>
+        <Button primary onClick={() => jumpStep('init')}>
           Get Started
         </Button>
       </Box>
diff --git a/src/icons/onboarding/GetStartedLogo.js b/src/icons/onboarding/GetStartedLogo.js
new file mode 100644
index 00000000..cce003ad
--- /dev/null
+++ b/src/icons/onboarding/GetStartedLogo.js
@@ -0,0 +1,79 @@
+// @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>
+)