From 8406a3d156676604db41f9278ec346f18f90e40c Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Fri, 31 Aug 2018 12:23:31 +0200
Subject: [PATCH] Adding size xs on Block

---
 src/components/layout/Block/index.jsx           |  3 +--
 src/components/layout/Block/index.scss          |  7 +++++++
 src/components/layout/Hairline/index.js         | 17 ++++++++++++-----
 .../Transactions/Transaction/index.jsx          |  2 +-
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/layout/Block/index.jsx b/src/components/layout/Block/index.jsx
index a92dd060..d399bb82 100644
--- a/src/components/layout/Block/index.jsx
+++ b/src/components/layout/Block/index.jsx
@@ -2,12 +2,11 @@
 import classNames from 'classnames/bind'
 import React, { PureComponent } from 'react'
 import { capitalize } from '~/utils/css'
+import { type Size } from '~/theme/size'
 import styles from './index.scss'
 
 const cx = classNames.bind(styles)
 
-type Size = 'sm' | 'md' | 'lg' | 'xl'
-
 type Props = {
   margin?: Size,
   padding?: Size,
diff --git a/src/components/layout/Block/index.scss b/src/components/layout/Block/index.scss
index 62a278cb..a52a9e4b 100644
--- a/src/components/layout/Block/index.scss
+++ b/src/components/layout/Block/index.scss
@@ -2,6 +2,9 @@
   width: 100%;
   overflow: hidden;
 }
+.xs {
+  margin-bottom: $xs;
+}
 
 .sm {
     margin-bottom: $sm;
@@ -19,6 +22,10 @@
     margin-bottom: $xl;
 }
 
+.paddingXs {
+  padding-top: $xs;
+}
+
 .paddingSm {
   padding-top: $sm;
 }
diff --git a/src/components/layout/Hairline/index.js b/src/components/layout/Hairline/index.js
index cf47e673..7da19fb6 100644
--- a/src/components/layout/Hairline/index.js
+++ b/src/components/layout/Hairline/index.js
@@ -1,16 +1,23 @@
 // @flow
 import * as React from 'react'
+import { type Size, getSize } from '~/theme/size'
 import { border } from '~/theme/variables'
 
-const hairlineStyle = {
+const calculateStyleFrom = (margin: Size) => ({
   width: '100%',
   height: '2px',
   backgroundColor: border,
-  margin: '20px 0px',
+  margin: `${getSize(margin)} 0px`,
+})
+
+type Props = {
+  margin?: Size,
 }
 
-const Hairline = () => (
-  <div style={hairlineStyle} />
-)
+const Hairline = ({ margin = 'md' }: Props) => {
+  const style = calculateStyleFrom(margin)
+
+  return <div style={style} />
+}
 
 export default Hairline
diff --git a/src/routes/safe/component/Transactions/Transaction/index.jsx b/src/routes/safe/component/Transactions/Transaction/index.jsx
index e294dafa..18a0e317 100644
--- a/src/routes/safe/component/Transactions/Transaction/index.jsx
+++ b/src/routes/safe/component/Transactions/Transaction/index.jsx
@@ -102,7 +102,7 @@ class GnoTransaction extends React.PureComponent<Props> {
             destination={transaction.get('destination')}
             threshold={threshold}
           /> }
-        <Hairline />
+        <Hairline margin="md" />
       </React.Fragment>
     )
   }