diff --git a/package.json b/package.json
index acb8dd9a..3f7f0a13 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"start": "node scripts/start.js",
"start-mainnet": "REACT_APP_NETWORK=mainnet yarn start",
"test": "NODE_ENV=test && node scripts/test.js --env=jsdom",
- "format": "prettier-eslint \"src/**/*.js\" --write"
+ "format": "prettier-eslint $PWD'/src/**/*.{js,jsx}' --write"
},
"pre-commit": [
"precommit"
@@ -152,4 +152,4 @@
"webpack-dev-server": "3.9.0",
"webpack-manifest-plugin": "2.2.0"
}
-}
+}
\ No newline at end of file
diff --git a/src/components/CookiesBanner/index.jsx b/src/components/CookiesBanner/index.jsx
index 2784ce3f..71df4d16 100644
--- a/src/components/CookiesBanner/index.jsx
+++ b/src/components/CookiesBanner/index.jsx
@@ -1,14 +1,15 @@
// @flow
import Checkbox from '@material-ui/core/Checkbox'
-import Close from '@material-ui/icons/Close'
import FormControlLabel from '@material-ui/core/FormControlLabel'
-import IconButton from '@material-ui/core/IconButton'
import React, { useEffect, useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { useDispatch, useSelector } from 'react-redux'
+import cn from 'classnames'
import Link from '~/components/layout/Link'
import Button from '~/components/layout/Button'
-import { primary, mainFontFamily, md } from '~/theme/variables'
+import {
+ primary, mainFontFamily, md, screenSm,
+} from '~/theme/variables'
import type { CookiesProps } from '~/logic/cookies/model/cookie'
import { COOKIES_KEY } from '~/logic/cookies/model/cookie'
import { loadFromCookie, saveCookie } from '~/logic/cookies/utils'
@@ -48,9 +49,12 @@ const useStyles = makeStyles({
columnGap: '10px',
display: 'grid',
gridTemplateColumns: '1fr',
+ paddingBottom: '30px',
rowGap: '10px',
- '@media (min-width: 960px)': {
+
+ [`@media (min-width: ${screenSm}px)`]: {
gridTemplateColumns: '1fr 1fr 1fr',
+ paddingBottom: '0',
},
},
formItem: {
@@ -64,10 +68,20 @@ const useStyles = makeStyles({
textDecoration: 'none',
},
},
- close: {
+ acceptPreferences: {
+ bottom: '-20px',
+ cursor: 'pointer',
position: 'absolute',
- right: '12px',
- top: '12px',
+ right: '20px',
+ textDecoration: 'underline',
+
+ [`@media (min-width: ${screenSm}px)`]: {
+ bottom: '-10px',
+ },
+
+ '&:hover': {
+ textDecoration: 'none',
+ },
},
})
@@ -120,12 +134,16 @@ const CookiesBanner = () => {
const cookieBannerContent = (
-
closeCookiesBannerHandler()} className={classes.close}>
+
+ Accept preferences >
+
We use cookies to give you the best experience and to help improve our website. Please read our
{' '}
- Cookie Policy
+
+ Cookie Policy
+
{' '}
for more information. By clicking "Accept all", you agree to the storing of cookies on your device
to enhance site navigation, analyze site usage and provide customer support.
@@ -139,9 +157,7 @@ const CookiesBanner = () => {
name="Necessary"
onChange={() => setLocalNecessary((prev) => !prev)}
value={localNecessary}
- control={(
-
- )}
+ control={ }
/>
@@ -150,9 +166,7 @@ const CookiesBanner = () => {
name="Analytics"
onChange={() => setLocalAnalytics((prev) => !prev)}
value={localAnalytics}
- control={(
-
- )}
+ control={ }
/>
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
new file mode 100644
index 00000000..8429cf1f
--- /dev/null
+++ b/src/components/Footer/index.jsx
@@ -0,0 +1,95 @@
+// @flow
+import * as React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { useDispatch } from 'react-redux'
+import cn from 'classnames'
+import Link from '~/components/layout/Link'
+import { secondary, screenSm, sm } from '~/theme/variables'
+import { openCookieBanner } from '~/logic/cookies/store/actions/openCookieBanner'
+import GnoButtonLink from '~/components/layout/ButtonLink'
+
+const useStyles = makeStyles({
+ footer: {
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ margin: '0 auto',
+ maxWidth: '100%',
+ padding: `40px ${sm} 20px`,
+ width: `${screenSm}px`,
+ },
+ item: {
+ color: 'rgba(0, 0, 0, 0.54)',
+ fontSize: '13px',
+ },
+ link: {
+ color: secondary,
+ textDecoration: 'none',
+
+ '&:hover': {
+ textDecoration: 'underline',
+ },
+ },
+ sep: {
+ color: 'rgba(0, 0, 0, 0.54)',
+ margin: '0 10px',
+ },
+ buttonLink: {
+ padding: '0',
+ },
+})
+
+const appVersion = process.env.REACT_APP_APP_VERSION ? `v${process.env.REACT_APP_APP_VERSION} ` : 'Versions'
+
+const Footer = () => {
+ const date = new Date()
+ const classes = useStyles()
+ const dispatch = useDispatch()
+
+ const openCookiesHandler = () => {
+ dispatch(openCookieBanner(true))
+ }
+
+ return (
+
+
+ ©
+ {' '}
+ {date.getFullYear()}
+ {' '}
+ Gnosis
+
+ |
+
+ Terms
+
+ |
+
+ Privacy
+
+ |
+
+ Licenses
+
+ |
+
+ Imprint
+
+ |
+
+ Cookie Policy
+
+ -
+
+ Preferences
+
+ |
+
+ {appVersion}
+
+
+ )
+}
+
+export default Footer
diff --git a/src/components/Sidebar/LegalLinks.jsx b/src/components/Sidebar/LegalLinks.jsx
deleted file mode 100644
index 29becd1b..00000000
--- a/src/components/Sidebar/LegalLinks.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// @flow
-import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { useDispatch } from 'react-redux'
-import Block from '~/components/layout/Block'
-import Link from '~/components/layout/Link'
-import { sm, primary } from '~/theme/variables'
-import { openCookieBanner } from '~/logic/cookies/store/actions/openCookieBanner'
-import GnoButtonLink from '~/components/layout/ButtonLink'
-
-const useStyles = makeStyles({
- container: {
- padding: `${sm} 0`,
- },
- link: {
- color: primary,
- },
- buttonLink: {
- textDecoration: 'none',
- color: primary,
- },
-})
-
-type Props = {
- toggleSidebar: Function,
-}
-
-const appVersion = process.env.REACT_APP_APP_VERSION ? `v${process.env.REACT_APP_APP_VERSION}` : 'Versions'
-
-const LegalLinks = (props: Props) => {
- const classes = useStyles()
- const dispatch = useDispatch()
-
- const openCookiesHandler = () => {
- dispatch(openCookieBanner(true))
- props.toggleSidebar()
- }
-
- return (
-
-
- Terms
-
-
- Privacy
-
-
- Licenses
-
-
- Imprint
-
-
- Cookies
-
-
- {appVersion}
-
-
- )
-}
-
-export default LegalLinks
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index 5d6ea0eb..512f306d 100644
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -21,7 +21,6 @@ import {
import setDefaultSafe from '~/routes/safe/store/actions/setDefaultSafe'
import { sortedSafeListSelector } from './selectors'
import SafeList from './SafeList'
-import LegalLinks from './LegalLinks'
import useSidebarStyles from './style'
const { useState, useEffect, useMemo } = React
@@ -46,8 +45,8 @@ type SidebarProps = {
const filterBy = (filter: string, safes: List): List => safes.filter(
(safe: Safe) => !filter
- || safe.address.toLowerCase().includes(filter.toLowerCase())
- || safe.name.toLowerCase().includes(filter.toLowerCase()),
+ || safe.address.toLowerCase().includes(filter.toLowerCase())
+ || safe.name.toLowerCase().includes(filter.toLowerCase()),
)
const Sidebar = ({
@@ -137,7 +136,6 @@ const Sidebar = ({
defaultSafe={defaultSafe}
currentSafe={currentSafe}
/>
-
{children}
diff --git a/src/components/layout/PageFrame/index.jsx b/src/components/layout/PageFrame/index.jsx
index c3fdadd2..3d766d08 100644
--- a/src/components/layout/PageFrame/index.jsx
+++ b/src/components/layout/PageFrame/index.jsx
@@ -6,6 +6,7 @@ import { withStyles } from '@material-ui/core/styles'
import Backdrop from '~/components/layout/Backdrop'
import CookiesBanner from '~/components/CookiesBanner'
import Header from '~/components/Header'
+import Footer from '~/components/Footer'
import Img from '~/components/layout/Img'
import Notifier from '~/components/Notifier'
import SidebarProvider from '~/components/Sidebar'
@@ -67,6 +68,7 @@ const PageFrame = ({ children, classes, currentNetwork }: Props) => {
{children}
+