Adding size xs on Block

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,

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;
 }

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 = () => (
+const Hairline = ({ margin = 'md' }: Props) => {
-  <div style={hairlineStyle} />
+  const style = calculateStyleFrom(margin)
-)
+
+  return <div style={style} />
+}
 
 export default Hairline

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>
     )
   }