Handle back on ModalTitle

src/components/base/Modal/ModalBody.js

@@ -67,6 +67,10 @@ const CloseContainer = styled(Box).attrs({
   &:hover {
     color: ${p => p.theme.colors.grey};
   }
+
+  &:active {
+    color: ${p => p.theme.colors.dark};
+  }
 `
 
 const Body = styled(Box).attrs({

src/components/base/Modal/ModalTitle.js

@@ -0,0 +1,67 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
+
+import Box from 'components/base/Box'
+import IconAngleLeft from 'icons/AngleLeft'
+
+const Container = styled(Box).attrs({
+  alignItems: 'center',
+  color: 'dark',
+  ff: 'Museo Sans|Regular',
+  fontSize: 6,
+  justifyContent: 'center',
+  p: 5,
+  relative: true,
+})``
+
+const Back = styled(Box).attrs({
+  horizontal: true,
+  align: 'center',
+  color: 'grey',
+  ff: 'Open Sans',
+  fontSize: 3,
+  p: 4,
+})`
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  &:hover {
+    color: ${p => p.theme.colors.graphite};
+  }
+
+  &:active {
+    color: ${p => p.theme.colors.dark};
+  }
+`
+
+function ModalTitle({
+  t,
+  onBack,
+  children,
+  ...props
+}: {
+  t: T,
+  onBack: any => void,
+  children: any,
+}) {
+  return (
+    <Container {...props}>
+      {onBack && (
+        <Back onClick={onBack}>
+          <IconAngleLeft size={16} />
+          {t('common:back')}
+        </Back>
+      )}
+      {children}
+    </Container>
+  )
+}
+
+export default translate()(ModalTitle)

src/components/base/Modal/index.js

@@ -22,6 +22,7 @@ import Defer from 'components/base/Defer'
 
 export { default as ModalBody } from './ModalBody'
 export { default as ConfirmModal } from './ConfirmModal'
+export { default as ModalTitle } from './ModalTitle'
 
 const springConfig = {
   stiffness: 320,
@@ -188,16 +189,6 @@ export class Modal extends Component<Props> {
   }
 }
 
-export const ModalTitle = styled(Box).attrs({
-  alignItems: 'center',
-  color: 'dark',
-  ff: 'Museo Sans|Regular',
-  fontSize: 6,
-  justifyContent: 'center',
-  p: 5,
-  relative: true,
-})``
-
 export const ModalFooter = styled(Box).attrs({
   px: 5,
   py: 3,

src/components/modals/ImportAccounts/index.js

@@ -26,6 +26,7 @@ const createSteps = ({ t }: { t: T }) => [
     label: t('importAccounts:breadcrumb.informations'),
     component: StepChooseCurrency,
     footer: StepChooseCurrencyFooter,
+    onBack: null,
     hideFooter: false,
   },
   {
@@ -33,6 +34,7 @@ const createSteps = ({ t }: { t: T }) => [
     label: t('importAccounts:breadcrumb.connectDevice'),
     component: StepConnectDevice,
     footer: StepConnectDeviceFooter,
+    onBack: ({ transitionTo }: StepProps) => transitionTo('chooseCurrency'),
     hideFooter: false,
   },
   {
@@ -40,14 +42,16 @@ const createSteps = ({ t }: { t: T }) => [
     label: t('importAccounts:breadcrumb.import'),
     component: StepImport,
     footer: null,
+    onBack: ({ transitionTo }: StepProps) => transitionTo('chooseCurrency'),
     hideFooter: true,
   },
   {
     id: 'finish',
     label: t('importAccounts:breadcrumb.finish'),
     component: StepFinish,
-    hideFooter: false,
     footer: StepChooseCurrencyFooter,
+    onBack: null,
+    hideFooter: false,
   },
 ]
 
@@ -92,7 +96,11 @@ class ImportAccounts extends PureComponent<Props, State> {
   })
 
   transitionTo = stepId => {
-    this.setState({ stepId })
+    let nextState = { stepId }
+    if (stepId === 'chooseCurrency') {
+      nextState = { ...INITIAL_STATE }
+    }
+    this.setState(nextState)
   }
 
   render() {
@@ -106,7 +114,7 @@ class ImportAccounts extends PureComponent<Props, State> {
       throw new Error(`ImportAccountsModal: step ${stepId} doesn't exists`)
     }
 
-    const { component: StepComponent, footer: StepFooter, hideFooter } = step
+    const { component: StepComponent, footer: StepFooter, hideFooter, onBack } = step
 
     const stepProps: StepProps = {
       t,
@@ -124,7 +132,9 @@ class ImportAccounts extends PureComponent<Props, State> {
         onHide={() => this.setState({ ...INITIAL_STATE })}
         render={({ onClose }) => (
           <ModalBody onClose={onClose}>
-            <ModalTitle>{t('importAccounts:title')}</ModalTitle>
+            <ModalTitle onBack={onBack ? () => onBack(stepProps) : void 0}>
+              {t('importAccounts:title')}
+            </ModalTitle>
             <ModalContent>
               <Breadcrumb mb={6} currentStep={stepIndex} items={this.STEPS} />
               <StepComponent {...stepProps} />

src/components/modals/ImportAccounts/steps/03-step-import.js

@@ -1,11 +1,15 @@
 // @flow
 
-import React from 'react'
+import React, { PureComponent } from 'react'
 
 import Box from 'components/base/Box'
 
-function StepInProgress() {
-  return <Box>{'StepInProgress'}</Box>
+import type { StepProps } from '../index'
+
+class StepImport extends PureComponent<StepProps> {
+  render() {
+    return <Box>step import</Box>
+  }
 }
 
-export default StepInProgress
+export default StepImport