Unify modals back/close buttons

src/components/base/Modal/ModalBody.js

@@ -55,13 +55,13 @@ class ModalBody extends PureComponent<Props, State> {
 }
 
 const CloseContainer = styled(Box).attrs({
-  p: 2,
+  p: 4,
   color: 'fog',
 })`
   cursor: pointer;
   position: absolute;
-  top: 25px;
-  right: 10px;
+  top: 0;
+  right: 0;
   z-index: 1;
 
   &:hover {

src/components/modals/PrevButton.js

@@ -1,37 +0,0 @@
-// @flow
-
-import React from 'react'
-import { translate } from 'react-i18next'
-import styled from 'styled-components'
-
-import type { T } from 'types/common'
-
-import Button from 'components/base/Button'
-import Box from 'components/base/Box'
-
-import IconAngleLeft from 'icons/AngleLeft'
-
-const Wrapper = styled(Button).attrs({
-  fontSize: 4,
-  ml: 4,
-})`
-  left: 0;
-  margin-top: -18px;
-  position: absolute;
-  top: 50%;
-`
-
-type Props = {
-  t: T,
-}
-
-const PrevButton = ({ t, ...props }: Props) => (
-  <Wrapper {...props}>
-    <Box horizontal alignItems="center">
-      <IconAngleLeft size={16} />
-      {t('app:common.back')}
-    </Box>
-  </Wrapper>
-)
-
-export default translate()(PrevButton)

src/components/modals/Receive/index.js

@@ -17,7 +17,6 @@ import Box from 'components/base/Box'
 import Breadcrumb from 'components/Breadcrumb'
 import Button from 'components/base/Button'
 import Modal, { ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal'
-import PrevButton from 'components/modals/PrevButton'
 import StepConnectDevice from 'components/modals/StepConnectDevice'
 
 import StepAccount from './01-step-account'
@@ -318,8 +317,7 @@ class ReceiveModal extends PureComponent<Props, State> {
           <ModalBody onClose={canClose ? onClose : undefined}>
             <SyncSkipUnderPriority priority={9} />
             {account && <SyncOneAccountOnMount priority={10} accountId={account.id} />}
-            <ModalTitle>
-              {canPrev && <PrevButton onClick={this.handlePrevStep} />}
+            <ModalTitle onBack={canPrev ? this.handlePrevStep : undefined}>
               {t('app:receive.title')}
             </ModalTitle>
             <ModalContent>

src/components/modals/Send/SendModalBody.js

@@ -20,7 +20,6 @@ import PollCounterValuesOnMount from 'components/PollCounterValuesOnMount'
 
 import Breadcrumb from 'components/Breadcrumb'
 import { ModalBody, ModalTitle, ModalContent } from 'components/base/Modal'
-import PrevButton from 'components/modals/PrevButton'
 import StepConnectDevice from 'components/modals/StepConnectDevice'
 import ChildSwitch from 'components/base/ChildSwitch'
 import SyncSkipUnderPriority from 'components/SyncSkipUnderPriority'
@@ -279,8 +278,7 @@ class SendModalBody extends PureComponent<Props, State<*>> {
         <SyncSkipUnderPriority priority={80} />
         {account && <SyncOneAccountOnMount priority={81} accountId={account.id} />}
 
-        <ModalTitle>
-          {canPrev && <PrevButton onClick={this.onPrevStep} />}
+        <ModalTitle onBack={canPrev ? this.onPrevStep : undefined}>
           {t('app:send.title')}
         </ModalTitle>