wip start slide and options slide

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)
+  const optionCards = [
-  /* TODO: all titles, descriptions to be wrapped in a translation tag once defined */
+    {
+      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>
+        <Box color="wallet">
-        <Description>
+          <IconUser size={36} />
-          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>
-        <Box>
+        <Box style={{ padding: 20, maxWidth: 650 }}>
-          <Inner>
+          <Title>
-            <DeviceContainer onClick={() => nextStep()}>
+            Welcome to Ledger Live, the computer companion app to your Ledger device. Please select
-              <DeviceIcon style={{ color: '#6490f1' }}>
+            one of the options below:
-                <IconUser size={24} />
+          </Title>
-              </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>
+        <Box flow={5}>{optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}</Box>
       </Box>
     </Box>
   )
 }
 
-const DeviceContainer = styled(Box).attrs({
+type CardType = {
-  alignItems: 'center',
+  icon: any,
-  justifyContent: 'center',
+  desc: string,
-})`
+  title: string,
-  width: 218px;
+  onClick: Function,
-  height: 204px;
+}
-  border: 1px solid #d8d8d8;
+
-`
+export function OptionFlowCard({ card }: { card: CardType }) {
-const DeviceIcon = styled(Box).attrs({
+  const { icon, desc, title, onClick } = card
-  alignItems: 'center',
+  return (
-  justifyContent: 'center',
+    <Card
-  color: 'graphite',
+      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;
+  font-weight: 600;
-  padding: 10px;
 `
-export const TrackChoiceTitle = styled(Box).attrs({
-  width: 152,
-  height: 27,
-  ff: 'Museo Sans|Regular',
-  fontSize: 5,
-  color: 'dark',
-})``

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} />
+        <IconGetStarted />
-        <Title>Ledger Live</Title>
+        <Box style={{ paddingTop: '20px' }}>
-        <Title>Welcome to the new Ledger Live Desktop app.</Title>
+          <Title>Welcome to the new Ledger Live Desktop app.</Title>
-        <Description>Let’s get started!</Description>
+          <Description>Let’s get started!</Description>
-        <Button small primary onClick={() => jumpStep('init')}>
+        </Box>
+        <Button primary onClick={() => jumpStep('init')}>
           Get Started
         </Button>
       </Box>

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>
+)