diff --git a/.eslintrc b/.eslintrc
index f04dfa1b..da0eb9a1 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -45,7 +45,8 @@
],
"react/require-default-props": 0,
"react/no-array-index-key": 0,
- "react/jsx-props-no-spreading": 0
+ "react/jsx-props-no-spreading": 0,
+ "react/state-in-constructor": 0
},
"env": {
"jest/globals": true,
diff --git a/scripts/test.js b/scripts/test.js
index ff7207c1..76223eff 100644
--- a/scripts/test.js
+++ b/scripts/test.js
@@ -11,6 +11,7 @@ require('dotenv').config({ silent: true })
const jest = require('jest')
const argv = process.argv.slice(2)
+argv.push('--runInBand')
// Watch unless on CI or in coverage mode
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
deleted file mode 100644
index 8ab1c99d..00000000
--- a/src/components/Footer/index.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// @flow
-import React from 'react'
-import Block from '~/components/layout/Block'
-import Link from '~/components/layout/Link'
-import Paragraph from '~/components/layout/Paragraph'
-import { WELCOME_ADDRESS, SAFELIST_ADDRESS } from '~/routes/routes'
-import styles from './index.scss'
-
-const Footer = () => (
-
-
- Add Safe
-
-
- Safe List
-
-
-)
-
-export default Footer
diff --git a/src/components/Footer/index.scss b/src/components/Footer/index.scss
deleted file mode 100644
index 0f3b3eba..00000000
--- a/src/components/Footer/index.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.footer {
- font-size: $smallFontSize;
- display: grid;
- grid-template-columns: 100px 100px 1fr;
- grid-template-rows: 36px;
- justify-items: center;
- align-items: center;
- border: solid 0.5px $border;
- background-color: white;
- margin-top: 50px;
-}
-
-@media only screen and (max-width: $(screenXs)px) {
- .footer {
- grid-template-columns: none;
- grid-template-rows: auto auto;
- grid-row-gap: $sm;
- justify-items: center;
- }
-
- .footer > a {
- padding: 0;
- }
-}
\ No newline at end of file
diff --git a/src/components/Footer/index.stories.js b/src/components/Footer/index.stories.js
deleted file mode 100644
index e0b29e91..00000000
--- a/src/components/Footer/index.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// @flow
-import { storiesOf } from '@storybook/react'
-import * as React from 'react'
-import styles from '~/components/layout/PageFrame/index.scss'
-import Component from './index'
-
-const FrameDecorator = (story) => (
-
-)
-
-storiesOf('Components /Footer', module)
- .addDecorator(FrameDecorator)
- .add('Loaded', () => )
diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx
index fdbc92d1..877647ea 100644
--- a/src/components/Header/component/Layout.jsx
+++ b/src/components/Header/component/Layout.jsx
@@ -12,8 +12,11 @@ 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')
@@ -32,10 +35,12 @@ const styles = () => ({
left: '4px',
},
summary: {
- borderBottom: `solid 1px ${border}`,
+ borderBottom: `solid 2px ${border}`,
alignItems: 'center',
- height: '53px',
+ height: headerHeight,
+ boxShadow: '0 2px 4px 0 rgba(212, 212, 211, 0.59)',
backgroundColor: 'white',
+ zIndex: 1301,
},
logo: {
padding: `${sm} ${md}`,
@@ -55,6 +60,8 @@ const Layout = openHoc(({
+
+
diff --git a/src/components/Header/component/SafeListHeader/index.jsx b/src/components/Header/component/SafeListHeader/index.jsx
new file mode 100644
index 00000000..dafbf3da
--- /dev/null
+++ b/src/components/Header/component/SafeListHeader/index.jsx
@@ -0,0 +1,68 @@
+// @flow
+import * as React from 'react'
+import { connect } from 'react-redux'
+import { makeStyles } from '@material-ui/core/styles'
+import IconButton from '@material-ui/core/IconButton'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import ExpandLessIcon from '@material-ui/icons/ExpandLess'
+import Paragraph from '~/components/layout/Paragraph'
+import Col from '~/components/layout/Col'
+import {
+ xs, sm, md, border,
+} from '~/theme/variables'
+import { safesCountSelector } from '~/routes/safe/store/selectors'
+import { SidebarContext } from '~/components/Sidebar'
+
+export const TOGGLE_SIDEBAR_BTN_TESTID = 'TOGGLE_SIDEBAR_BTN'
+
+const useStyles = makeStyles({
+ container: {
+ flexGrow: 0,
+ padding: `0 ${md}`,
+ },
+ counter: {
+ background: border,
+ padding: xs,
+ borderRadius: '3px',
+ marginLeft: sm,
+ lineHeight: 'normal',
+ },
+ icon: {
+ marginLeft: sm,
+ },
+})
+
+type Props = {
+ safesCount: number,
+}
+
+const { useContext } = React
+
+const SafeListHeader = ({ safesCount }: Props) => {
+ const classes = useStyles()
+ const { toggleSidebar, isOpen } = useContext(SidebarContext)
+
+ return (
+
+ Safes
+ {' '}
+
+ {safesCount}
+
+
+ {isOpen ? : }
+
+
+ )
+}
+
+export default connect