diff --git a/src/components/layout/Col/index.jsx b/src/components/layout/Col/index.jsx index 1e8137c5..f9ae8d87 100644 --- a/src/components/layout/Col/index.jsx +++ b/src/components/layout/Col/index.jsx @@ -16,7 +16,8 @@ type Props = { around?: 'xs' | 'sm' | 'md' | 'lg', between?: 'xs' | 'sm' | 'md' | 'lg', margin?: 'sm' | 'md' | 'lg' | 'xl', - layout?: 'inherit' | 'block', + layout?: 'inherit' | 'block' | 'column', + overflow?: boolean, xs?: number | boolean, sm?: number | boolean, md?: number | boolean, @@ -30,7 +31,7 @@ type Props = { } const Col = ({ - children, margin, layout = 'inherit', + children, margin, layout = 'inherit', overflow, xs, sm, md, lg, start, center, end, top, middle, bottom, around, between, xsOffset, smOffset, mdOffset, lgOffset, @@ -55,6 +56,7 @@ const Col = ({ smOffset ? capitalize(smOffset, 'smOffset') : undefined, mdOffset ? capitalize(mdOffset, 'mdOffset') : undefined, lgOffset ? capitalize(lgOffset, 'lgOffset') : undefined, + { overflow }, layout, props.className, ) diff --git a/src/components/layout/Col/index.scss b/src/components/layout/Col/index.scss index 91fb43d6..30d06ace 100644 --- a/src/components/layout/Col/index.scss +++ b/src/components/layout/Col/index.scss @@ -12,6 +12,15 @@ display: block; } +.column { + display: flex; + flex-direction: column; +} + +.overflow { + overflow: hidden; +} + .marginSm { margin-bottom: $sm; } diff --git a/src/routes/safe/component/Safe/assets/gnosis_safe.svg b/src/routes/safe/component/Safe/assets/gnosis_safe.svg new file mode 100644 index 00000000..c7bf5502 --- /dev/null +++ b/src/routes/safe/component/Safe/assets/gnosis_safe.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/routes/safe/component/Safe/index.jsx b/src/routes/safe/component/Safe/index.jsx index 442373e5..9ec0726a 100644 --- a/src/routes/safe/component/Safe/index.jsx +++ b/src/routes/safe/component/Safe/index.jsx @@ -3,6 +3,7 @@ import * as React from 'react' import Block from '~/components/layout/Block' import Col from '~/components/layout/Col' import Bold from '~/components/layout/Bold' +import Img from '~/components/layout/Img' import Paragraph from '~/components/layout/Paragraph' import Row from '~/components/layout/Row' import { type Safe } from '~/routes/safe/store/model/safe' @@ -14,6 +15,8 @@ import Owners from './Owners' import Confirmations from './Confirmations' import DailyLimit from './DailyLimit' +const safeIcon = require('./assets/gnosis_safe.svg') + type SafeProps = { safe: Safe, balance: string, @@ -21,7 +24,6 @@ type SafeProps = { const listStyle = { width: '100%', - minWidth: '485px', } class GnoSafe extends React.PureComponent { @@ -29,8 +31,8 @@ class GnoSafe extends React.PureComponent { const { safe, balance } = this.props return ( - - + + @@ -39,15 +41,15 @@ class GnoSafe extends React.PureComponent { - + {safe.name.toUpperCase()} - - Extra info will be placed here - + + Safe Icon + )