Fix safe list colors

src/components/Header/component/Layout.jsx

@@ -12,14 +12,14 @@ import Col from '~/components/layout/Col'
 import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
 import Spacer from '~/components/Spacer'
-import { border, sm, md } from '~/theme/variables'
+import {
+  border, sm, md, headerHeight,
+} from '~/theme/variables'
 import Provider from './Provider'
 import SafeListHeader from './SafeListHeader'
 
 const logo = require('../assets/gnosis-safe-logo.svg')
 
-export const headerHeight = '53px'
-
 type Props = Open & {
   classes: Object,
   providerDetails: React.Node,

src/components/Sidebar/SafeList.jsx

@@ -0,0 +1,63 @@
+// @flow
+import * as React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { List } from 'immutable'
+import MuiList from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import Link from '~/components/layout/Link'
+import Hairline from '~/components/layout/Hairline'
+import Identicon from '~/components/Identicon'
+import { sm, secondary, primary } from '~/theme/variables'
+import { shortVersionOf } from '~/logic/wallets/ethAddresses'
+import { type Safe } from '~/routes/safe/store/models/safe'
+import { SAFELIST_ADDRESS } from '~/routes/routes'
+
+type SafeListProps = {
+  safes: List<Safe>,
+}
+
+const useStyles = makeStyles({
+  icon: {
+    marginRight: sm,
+  },
+  listItemRoot: {
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+  safeName: {
+    color: secondary,
+  },
+  safeAddress: {
+    color: primary,
+  },
+})
+
+const SafeList = ({ safes }: SafeListProps) => {
+  const classes = useStyles()
+
+  return (
+    <MuiList>
+      {safes.map((safe) => (
+        <React.Fragment key={safe.address}>
+          <Link to={`${SAFELIST_ADDRESS}/${safe.address}`}>
+            <ListItem classes={{ root: classes.listItemRoot }}>
+              <ListItemIcon>
+                <Identicon address={safe.address} diameter={32} className={classes.icon} />
+              </ListItemIcon>
+              <ListItemText
+                primary={safe.name}
+                secondary={shortVersionOf(safe.address, 4)}
+                classes={{ primary: classes.safeName, secondary: classes.safeAddress }}
+              />
+            </ListItem>
+          </Link>
+          <Hairline />
+        </React.Fragment>
+      ))}
+    </MuiList>
+  )
+}
+
+export default SafeList

src/components/Sidebar/index.jsx

@@ -1,7 +1,12 @@
 // @flow
 import * as React from 'react'
+import { List } from 'immutable'
+import { connect } from 'react-redux'
 import Drawer from '@material-ui/core/Drawer'
+import { type Safe } from '~/routes/safe/store/models/safe'
+import { safesListSelector } from '~/routes/safeList/store/selectors'
 import useSidebarStyles from './style'
+import SafeList from './SafeList'
 
 const { useState } = React
 
@@ -17,9 +22,10 @@ export const SidebarContext = React.createContext<TSidebarContext>({
 
 type SidebarProps = {
   children: React.Node,
+  safes: List<Safe>,
 }
 
-const Sidebar = ({ children }: SidebarProps) => {
+const Sidebar = ({ children, safes }: SidebarProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const classes = useSidebarStyles()
 
@@ -33,14 +39,19 @@ const Sidebar = ({ children }: SidebarProps) => {
         className={classes.sidebar}
         open={isOpen}
         onKeyDown={toggleSidebar}
+        onClick={toggleSidebar}
         classes={{ paper: classes.sidebarPaper }}
       >
         <div className={classes.headerPlaceholder} />
-        Wop
+        <SafeList safes={safes} />
       </Drawer>
       {children}
     </SidebarContext.Provider>
   )
 }
 
-export default Sidebar
+export default connect<Object, Object, ?Function, ?Object>(
+  // $FlowFixMe
+  (state) => ({ safes: safesListSelector(state) }),
+  null,
+)(Sidebar)

src/components/Sidebar/style.js

@@ -1,6 +1,6 @@
 // @flow
 import { makeStyles } from '@material-ui/core/styles'
-import { headerHeight } from '~/components/Header/component/Layout'
+import { headerHeight } from '~/theme/variables'
 
 const sidebarWidth = '400px'
 
@@ -12,7 +12,7 @@ const useSidebarStyles = makeStyles({
     width: sidebarWidth,
   },
   headerPlaceholder: {
-    height: headerHeight,
+    height: headerHeight, // for some reason it didn't want to work with an imported variable 🤔
   },
 })
 

src/theme/variables.js

@@ -17,6 +17,7 @@ const lg = '24px'
 const xl = '32px'
 const xxl = '40px'
 const marginButtonImg = '12px'
+const headerHeight = '53px'
 
 module.exports = {
   primary,
@@ -29,6 +30,7 @@ module.exports = {
   warning: warningColor,
   error: errorColor,
   connected: connectedColor,
+  headerHeight,
   xs,
   sm,
   md,