From 865573f1b2b89239a79684f2dd7c62b43578275d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Wed, 20 Jun 2018 16:36:10 +0200
Subject: [PATCH] experimental modal centering

---
 src/components/base/Modal/index.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/base/Modal/index.js b/src/components/base/Modal/index.js
index a57b5fbe..6d1f19d6 100644
--- a/src/components/base/Modal/index.js
+++ b/src/components/base/Modal/index.js
@@ -10,6 +10,7 @@ import { connect } from 'react-redux'
 import Mortal from 'react-mortal'
 import styled from 'styled-components'
 import noop from 'lodash/noop'
+import { EXPERIMENTAL_CENTER_MODAL } from 'config/constants'
 
 import { rgba } from 'styles/helpers'
 import { radii } from 'styles/theme'
@@ -133,6 +134,18 @@ function stopPropagation(e) {
   e.stopPropagation()
 }
 
+const wrap = EXPERIMENTAL_CENTER_MODAL
+  ? children => (
+      <Box alignItems="center" justifyContent="center" grow>
+        {children}
+      </Box>
+    )
+  : children => (
+      <GrowScroll alignItems="center" full pt={8}>
+        {children}
+      </GrowScroll>
+    )
+
 export class Modal extends Component<Props> {
   static defaultProps = {
     isOpened: false,
@@ -198,7 +211,7 @@ export class Modal extends Component<Props> {
           <Container isVisible={isVisible} onClick={preventBackdropClick ? undefined : onClose}>
             <Backdrop op={m.opacity} />
             <NonClickableHeadArea onClick={stopPropagation} />
-            <GrowScroll alignItems="center" full pt={8}>
+            {wrap(
               <Wrapper
                 tabIndex={-1}
                 op={m.opacity}
@@ -208,8 +221,8 @@ export class Modal extends Component<Props> {
                 width={width}
               >
                 <Pure isAnimated={isAnimated} render={render} data={data} onClose={onClose} />
-              </Wrapper>
-            </GrowScroll>
+              </Wrapper>,
+            )}
           </Container>
         )}
       </Mortal>