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 = () => ( -
-) +const Hairline = ({ margin = 'md' }: Props) => { + const style = calculateStyleFrom(margin) + + return
+} 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 { destination={transaction.get('destination')} threshold={threshold} /> } - + ) }