WA-238 Adding gnosis-safe logo on safe details view

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

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

src/routes/safe/component/Safe/assets/gnosis_safe.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
+    <defs>
+        <linearGradient id="a" x1="0%" y1="50.001%" y2="50.001%">
+            <stop offset="0%" stop-color="#00B3CE"/>
+            <stop offset="100%" stop-color="#00C8DD"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="nonzero">
+        <circle cx="250" cy="250" r="250" fill="url(#a)"/>
+        <g fill="#FFF">
+            <path d="M189.93 245.903l-49.95-49.674c-4.508 6.049-7.237 13.563-7.237 21.674 0 19.583 15.972 35.52 35.528 35.52 8.118 0 15.66-2.715 21.66-7.52z"/>
+            <path d="M248.639 71.028c-52.077 0-100.542 21.097-136.063 58.694l-5.708 6.042 143.84 144.48v25.923l-.555.562-37.007-37.326c-17.18 11.423-39.153 14.757-59.903 7.528-34.924-12.653-53-50.882-40.361-85.5 1.826-5.41 4.52-10.23 7.52-14.743l-15.937-15.959-3.014 5.118c-16.555 27.104-25.597 58.403-25.597 90.59-.285 96.042 77.965 174.577 173.965 174.577h29.396V71.056l-30.576-.028zm-118.292 64.729c31.945-31.02 73.743-47.854 118.611-47.854h.285c.5 0 .993 0 1.465.02v168.5l-120.36-120.666z"/>
+            <path d="M248.639 71.028c-52.077 0-100.542 21.097-136.063 58.694l-5.708 6.042 143.84 144.48v25.923l-.555.562-37.007-37.326c-17.18 11.423-39.153 14.757-59.903 7.528-34.924-12.653-53-50.882-40.361-85.5 1.826-5.41 4.52-10.23 7.52-14.743l-15.937-15.959-3.014 5.118c-16.555 27.104-25.597 58.403-25.597 90.59-.285 96.042 77.965 174.577 173.965 174.577h29.396V71.056l-30.576-.028zm-118.292 64.729c31.945-31.02 73.743-47.854 118.611-47.854h.285c.5 0 .993 0 1.465.02v168.5l-120.36-120.666zM423.611 250.41c0-79.618-64.764-144.417-144.389-144.473v17.3c70.104.027 127.125 57.069 127.125 127.166 0 70.11-57.02 127.166-127.125 127.194v17.278c79.625-.035 144.39-64.813 144.39-144.465z"/>
+            <path d="M314.549 250.486l-6.855 42.98h33.577l-6.854-42.98c7.646-3.743 12.944-11.59 12.944-20.708 0-12.702-10.236-23-22.868-23-12.632 0-22.875 10.298-22.875 23-.014 9.132 5.285 16.965 12.93 20.708zM303.25 152.986c9.028 2.333 12.507-11.201 3.48-13.528-9.015-2.312-12.508 11.223-3.48 13.528M342.868 173.549c7.139 5.972 16.111-4.73 8.972-10.702-7.11-6-16.104 4.715-8.972 10.702M368.333 206.944c4.105 8.362 16.646 2.223 12.549-6.138-4.09-8.369-16.646-2.209-12.549 6.138M303.25 347.618c9.028-2.326 12.507 11.23 3.48 13.549-9.015 2.305-12.508-11.23-3.48-13.549M342.868 327.07c7.139-5.98 16.111 4.729 8.972 10.687-7.11 6.014-16.104-4.701-8.972-10.688M368.333 293.66c4.105-8.361 16.646-2.202 12.549 6.166-4.09 8.34-16.646 2.202-12.549-6.166M378.424 250.826c0 9.334 13.958 9.334 13.958 0 0-9.312-13.958-9.312-13.958 0"/>
+        </g>
+    </g>
+</svg>

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<SafeProps> {
@@ -29,8 +31,8 @@ class GnoSafe extends React.PureComponent<SafeProps> {
     const { safe, balance } = this.props
 
     return (
-      <Row>
-        <Col xs={12} top="xs" sm={4} margin="xl">
+      <Row grow>
+        <Col sm={12} top="xs" md={4} margin="xl" overflow>
           <List style={listStyle}>
             <Balance balance={balance} />
             <Owners owners={safe.owners} />
@@ -39,15 +41,15 @@ class GnoSafe extends React.PureComponent<SafeProps> {
             <DailyLimit limit={safe.get('dailyLimit')} />
           </List>
         </Col>
-        <Col xs={12} center="xs" sm={8} margin="xl" layout="block">
+        <Col sm={12} center="xs" md={8} margin="xl" layout="column">
           <Block margin="xl">
             <Paragraph size="lg" noMargin align="right">
               <Bold>{safe.name.toUpperCase()}</Bold>
             </Paragraph>
           </Block>
-          <Block>
-            Extra info will be placed here
-          </Block>
+          <Row grow align="center">
+            <Img alt="Safe Icon" src={safeIcon} height={330} />
+          </Row>
         </Col>
       </Row>
     )