From 73e89a2300a7dc894b98cad41876f8dde94767e2 Mon Sep 17 00:00:00 2001
From: Bouncey <staylor1012@gmail.com>
Date: Thu, 13 Sep 2018 18:25:48 +0100
Subject: [PATCH] feat(spacer): Extend Spacer API

---
 client/src/components/helpers/Spacer.js | 21 ++++++++++++++++++---
 client/src/pages/welcome.js             |  8 +-------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/client/src/components/helpers/Spacer.js b/client/src/components/helpers/Spacer.js
index 0d4575400d..385b819937 100644
--- a/client/src/components/helpers/Spacer.js
+++ b/client/src/components/helpers/Spacer.js
@@ -1,7 +1,22 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const Spacer = () => (
-  <div className='spacer' style={{ marginTop: '50px', marginBottom: '50px' }} />
-);
+const styles = { padding: '15px 0', height: '1px' };
+
+const Comp = props => <div className='spacer' style={styles} {...props} />;
+
+const Spacer = ({ size = 1 }) =>
+  size === 1 ? (
+    <Comp />
+  ) : (
+    '#'
+      .repeat(size)
+      .split('')
+      .map((_, i) => <Comp key={`spacer_${i}`} />)
+  );
+
+Spacer.propTypes = {
+  size: PropTypes.number
+};
 
 export default Spacer;
diff --git a/client/src/pages/welcome.js b/client/src/pages/welcome.js
index 6f6be16216..b305080a05 100644
--- a/client/src/pages/welcome.js
+++ b/client/src/pages/welcome.js
@@ -101,7 +101,6 @@ function Welcome({
           </Col>
         </Row>
         <Spacer />
-        <Spacer />
         <Row>
           <Col sm={8} smOffset={2} xs={12}>
             <p className='stats'>
@@ -125,7 +124,6 @@ function Welcome({
           </Col>
         </Row>
         <Spacer />
-        <Spacer />
         <Row>
           <Col sm={8} smOffset={2} xs={12}>
             <Button block={true} bsStyle='primary' className='btn-cta-big'>
@@ -133,11 +131,7 @@ function Welcome({
             </Button>
           </Col>
         </Row>
-        <Spacer />
-        <Spacer />
-        <Spacer />
-        <Spacer />
-        <Spacer />
+        <Spacer size={4}/>
       </Grid>
     </Layout>
   );