(Fix) Basic mobile responsiveness (#532)

* (fix) header mobile version * (fix) send / receive responsive * (fix) footer overflowing * (fix) responsive settings menu * (fix) scrolling menu tabs * (fix) responsive tables * (fix) a few modal windows' responsive issues * (remove) unused files * (fix) sidebar responsive * (fix) load safe responsive * (fix) create safe responsiveness * (fix) text wrap * (fix) remove modal responsiveness * (fix) name wrap * (update) yarn.lock
5afe · Feb 6, 2020 · 165a088 · 165a088
1 parent 16b3dc0
commit 165a088
Show file tree

Hide file tree

Showing 37 changed files with 965 additions and 1,362 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,6 @@
     <title>Gnosis Safe Multisig</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" style="overflow: hidden;"></div>
   </body>
 </html>
diff --git a/src/components/CookiesBanner/index.jsx b/src/components/CookiesBanner/index.jsx
@@ -51,7 +51,6 @@ const useStyles = makeStyles({
     gridTemplateColumns: '1fr',
     paddingBottom: '30px',
     rowGap: '10px',
-
     [`@media (min-width: ${screenSm}px)`]: {
       gridTemplateColumns: '1fr 1fr 1fr',
       paddingBottom: '0',

diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
@@ -10,8 +10,10 @@ import GnoButtonLink from '~/components/layout/ButtonLink'
 
 const useStyles = makeStyles({
   footer: {
+    boxSizing: 'border-box',
     display: 'flex',
     flexDirection: 'row',
+    flexShrink: '1',
     flexWrap: 'wrap',
     justifyContent: 'center',
     margin: '0 auto',
@@ -54,11 +56,10 @@ const Footer = () => {
   return (
     <footer className={classes.footer}>
       <span className={classes.item}>
-        ©
-        {' '}
+©
         {date.getFullYear()}
         {' '}
-        Gnosis
+Gnosis
       </span>
       <span className={classes.sep}>|</span>
       <Link className={cn(classes.item, classes.link)} to="https://safe.gnosis.io/terms" target="_blank">
@@ -85,7 +86,11 @@ const Footer = () => {
         Preferences
       </GnoButtonLink>
       <span className={classes.sep}>|</span>
-      <Link className={cn(classes.item, classes.link)} to="https://github.com/gnosis/safe-react/releases" target="_blank">
+      <Link
+        className={cn(classes.item, classes.link)}
+        to="https://github.com/gnosis/safe-react/releases"
+        target="_blank"
+      >
         {appVersion}
       </Link>
     </footer>

diff --git a/src/components/Header/components/CircleDot.jsx b/src/components/Header/components/CircleDot.jsx
@@ -4,14 +4,19 @@ import { withStyles } from '@material-ui/core/styles'
 import Dot from '@material-ui/icons/FiberManualRecord'
 import Block from '~/components/layout/Block'
 import Img from '~/components/layout/Img'
-import { fancy, border, warning } from '~/theme/variables'
+import {
+  fancy, border, warning, screenSm,
+} from '~/theme/variables'
 
 const key = require('../assets/key.svg')
 const triangle = require('../assets/triangle.svg')
 
 const styles = () => ({
   root: {
-    display: 'flex',
+    display: 'none',
+    [`@media (min-width: ${screenSm}px)`]: {
+      display: 'flex',
+    },
   },
   dot: {
     position: 'relative',

diff --git a/src/components/Header/components/Layout.jsx b/src/components/Header/components/Layout.jsx
@@ -13,7 +13,7 @@ import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
 import Spacer from '~/components/Spacer'
 import {
-  border, sm, md, headerHeight,
+  border, sm, md, headerHeight, screenSm,
 } from '~/theme/variables'
 import Provider from './Provider'
 import NetworkLabel from './NetworkLabel'
@@ -30,26 +30,34 @@ type Props = Open & {
 const styles = () => ({
   root: {
     backgroundColor: 'white',
-    padding: 0,
-    boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
-    minWidth: '280px',
     borderRadius: sm,
+    boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
     marginTop: '11px',
+    minWidth: '280px',
+    padding: 0,
   },
   summary: {
-    borderBottom: `solid 2px ${border}`,
     alignItems: 'center',
-    height: headerHeight,
-    boxShadow: '0 2px 4px 0 rgba(212, 212, 211, 0.59)',
     backgroundColor: 'white',
-    zIndex: 1301,
+    borderBottom: `solid 2px ${border}`,
+    boxShadow: '0 2px 4px 0 rgba(212, 212, 211, 0.59)',
+    flexWrap: 'nowrap',
+    height: headerHeight,
     position: 'fixed',
     width: '100%',
+    zIndex: 1301,
   },
   logo: {
-    padding: `${sm} ${md}`,
     flexBasis: '95px',
-    flexGrow: 0,
+    flexShrink: '0',
+    flexGrow: '0',
+    maxWidth: '55px',
+    padding: sm,
+    [`@media (min-width: ${screenSm}px)`]: {
+      maxWidth: 'none',
+      paddingLeft: md,
+      paddingRight: md,
+    },
   },
   popper: {
     zIndex: 2000,
@@ -65,46 +73,46 @@ const Layout = openHoc(
     providerInfo,
     providerDetails,
   }: Props) => (
-    <Row className={classes.summary}>
-      <Col start="xs" middle="xs" className={classes.logo}>
-        <Link to="/">
-          <Img src={logo} height={32} alt="Gnosis Team Safe" />
-        </Link>
-      </Col>
-      <Divider />
-      <SafeListHeader />
-      <Divider />
-      <NetworkLabel />
-      <Spacer />
-      <Provider open={open} toggle={toggle} info={providerInfo}>
-        {(providerRef) => (
-          <Popper
-            open={open}
-            anchorEl={providerRef.current}
-            placement="bottom"
-            className={classes.popper}
-            popperOptions={{ positionFixed: true }}
-          >
-            {({ TransitionProps }) => (
-              <Grow {...TransitionProps}>
-                <>
-                  <ClickAwayListener
-                    onClickAway={clickAway}
-                    mouseEvent="onClick"
-                    touchEvent={false}
-                  >
-                    <List className={classes.root} component="div">
-                      {providerDetails}
-                    </List>
-                  </ClickAwayListener>
-                </>
-              </Grow>
-            )}
-          </Popper>
-        )}
-      </Provider>
-    </Row>
-  ),
+      <Row className={classes.summary}>
+        <Col start="xs" middle="xs" className={classes.logo}>
+          <Link to="/">
+            <Img src={logo} height={32} alt="Gnosis Team Safe" />
+          </Link>
+        </Col>
+        <Divider />
+        <SafeListHeader />
+        <Divider />
+        <NetworkLabel />
+        <Spacer />
+        <Provider open={open} toggle={toggle} info={providerInfo}>
+          {(providerRef) => (
+            <Popper
+              anchorEl={providerRef.current}
+              className={classes.popper}
+              open={open}
+              placement="bottom"
+              popperOptions={{ positionFixed: true }}
+            >
+              {({ TransitionProps }) => (
+                <Grow {...TransitionProps}>
+                  <>
+                    <ClickAwayListener
+                      onClickAway={clickAway}
+                      mouseEvent="onClick"
+                      touchEvent={false}
+                    >
+                      <List className={classes.root} component="div">
+                        {providerDetails}
+                      </List>
+                    </ClickAwayListener>
+                  </>
+                </Grow>
+              )}
+            </Popper>
+          )}
+        </Provider>
+      </Row>
+    ),
 )
 
 export default withStyles(styles)(Layout)
diff --git a/src/components/Header/components/NetworkLabel.jsx b/src/components/Header/components/NetworkLabel.jsx
@@ -5,7 +5,7 @@ import { getNetwork } from '~/config'
 import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
 import {
-  xs, sm, md, border,
+  xs, sm, md, border, screenSm,
 } from '~/theme/variables'
 
 const network = getNetwork()
@@ -14,14 +14,22 @@ const formattedNetwork = network[0].toUpperCase() + network.substring(1).toLower
 const useStyles = makeStyles({
   container: {
     flexGrow: 0,
-    padding: `0 ${md}`,
+    padding: `0 ${sm}`,
+    [`@media (min-width: ${screenSm}px)`]: {
+      paddingLeft: md,
+      paddingRight: md,
+    },
   },
   text: {
     background: border,
-    padding: `${xs} ${sm}`,
     borderRadius: '3px',
-    marginLeft: sm,
     lineHeight: 'normal',
+    margin: '0',
+    padding: `${xs} ${sm}`,
+
+    [`@media (min-width: ${screenSm}px)`]: {
+      marginLeft: '8px',
+    },
   },
 })
 

diff --git a/src/components/Header/components/Provider.jsx b/src/components/Header/components/Provider.jsx
@@ -7,7 +7,7 @@ import ExpandMore from '@material-ui/icons/ExpandMore'
 import Col from '~/components/layout/Col'
 import Divider from '~/components/layout/Divider'
 import { type Open } from '~/components/hoc/OpenHoc'
-import { sm, md } from '~/theme/variables'
+import { sm, md, screenSm } from '~/theme/variables'
 
 type Props = Open & {
   classes: Object,
@@ -18,22 +18,29 @@ type Props = Open & {
 
 const styles = () => ({
   root: {
-    height: '100%',
-    display: 'flex',
     alignItems: 'center',
-    flexBasis: '284px',
-    marginRight: '20px',
+    display: 'flex',
+    height: '100%',
+
+    [`@media (min-width: ${screenSm}px)`]: {
+      flexBasis: '284px',
+      marginRight: '20px',
+    },
   },
   provider: {
-    padding: `${sm} ${md}`,
     alignItems: 'center',
-    flex: '1 1 auto',
-    display: 'flex',
     cursor: 'pointer',
+    display: 'flex',
+    flex: '1 1 auto',
+    padding: sm,
+    [`@media (min-width: ${screenSm}px)`]: {
+      paddingLeft: md,
+      paddingRight: md,
+    },
   },
   expand: {
-    width: '30px',
     height: '30px',
+    width: '30px',
   },
 })
 

diff --git a/src/components/Header/components/ProviderInfo/ProviderAccessible.jsx b/src/components/Header/components/ProviderInfo/ProviderAccessible.jsx
@@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core/styles'
 import Dot from '@material-ui/icons/FiberManualRecord'
 import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
-import { connected as connectedBg, sm } from '~/theme/variables'
+import { screenSm, connected as connectedBg, sm } from '~/theme/variables'
 import Identicon from '~/components/Identicon'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import CircleDot from '~/components/Header/components/CircleDot'
@@ -21,23 +21,33 @@ const styles = () => ({
   network: {
     fontFamily: 'Averta, sans-serif',
   },
-  logo: {
+  identicon: {
+    display: 'none',
+    [`@media (min-width: ${screenSm}px)`]: {
+      display: 'block',
+    },
+  },
+  dot: {
+    backgroundColor: '#fff',
+    borderRadius: '15px',
+    color: connectedBg,
+    display: 'none',
     height: '15px',
-    width: '15px',
-    top: '12px',
     position: 'relative',
     right: '10px',
-    backgroundColor: '#ffffff',
-    borderRadius: '15px',
-    color: connectedBg,
+    top: '12px',
+    width: '15px',
+    [`@media (min-width: ${screenSm}px)`]: {
+      display: 'block',
+    },
   },
   account: {
-    paddingRight: sm,
+    alignItems: 'start',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'left',
-    alignItems: 'start',
     flexGrow: 1,
+    justifyContent: 'left',
+    paddingRight: sm,
   },
   address: {
     letterSpacing: '-0.5px',
@@ -56,8 +66,8 @@ const ProviderInfo = ({
     <>
       {connected && (
         <>
-          <Identicon address={identiconAddress} diameter={30} />
-          <Dot className={classes.logo} />
+          <Identicon className={classes.identicon} address={identiconAddress} diameter={30} />
+          <Dot className={classes.dot} />
         </>
       )}
       {!connected && <CircleDot keySize={14} circleSize={35} dotSize={16} dotTop={24} dotRight={11} mode="warning" />}

diff --git a/src/components/Header/components/ProviderInfo/ProviderDisconnected.jsx b/src/components/Header/components/ProviderInfo/ProviderDisconnected.jsx
@@ -17,15 +17,16 @@ const styles = () => ({
     fontFamily: 'Averta, sans-serif',
   },
   account: {
-    paddingRight: sm,
+    alignItems: 'start',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'start',
     flexGrow: 1,
+    justifyContent: 'center',
+    paddingRight: sm,
   },
   connect: {
     letterSpacing: '-0.5px',
+    whiteSpace: 'nowrap',
   },
 })