fix NetworkSelector styles

src/components/AppLayout/Header/components/Layout.tsx

@@ -5,9 +5,11 @@ import Popper from '@material-ui/core/Popper'
 import { withStyles } from '@material-ui/core/styles'
 import * as React from 'react'
 import { Link } from 'react-router-dom'
+import { Divider } from '@gnosis.pm/safe-react-components'
 
 import Provider from './Provider'
 import NetworkSelector from './NetworkSelector'
+import NetworkLabel from './NetworkLabel'
 
 import Spacer from 'src/components/Spacer'
 import Col from 'src/components/layout/Col'
@@ -52,6 +54,15 @@ const styles = () => ({
   popper: {
     zIndex: 2000,
   },
+  network: {
+    backgroundColor: 'white',
+    borderRadius: sm,
+    boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
+    marginTop: '11px',
+    minWidth: '180px',
+    paddingTop: md,
+    paddingBottom: md,
+  },
 })
 
 const Layout = ({ classes, providerDetails, providerInfo }) => {
@@ -107,8 +118,14 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
               <Grow {...TransitionProps}>
                 <>
                   <ClickAwayListener mouseEvent="onClick" onClickAway={clickAwayNetworks} touchEvent={false}>
-                    <List className={classes.root} component="div">
-                      Networks list
+                    <List className={classes.network} component="div">
+                      <NetworkLabel />
+                      <Divider />
+                      <NetworkLabel />
+                      <Divider />
+                      <NetworkLabel />
+                      <Divider />
+                      <NetworkLabel />
                     </List>
                   </ClickAwayListener>
                 </>

src/components/AppLayout/Header/components/NetworkLabel.tsx

@@ -25,9 +25,9 @@ const useStyles = makeStyles({
     margin: '0',
     padding: `${xs} ${sm}`,
 
-    [`@media (min-width: ${screenSm}px)`]: {
+    /* [`@media (min-width: ${screenSm}px)`]: {
       marginLeft: '8px',
-    },
+    }, */
   },
 })
 

src/components/AppLayout/Header/components/NetworkSelector.tsx

@@ -16,18 +16,18 @@ const styles = () => ({
     height: '100%',
 
     [`@media (min-width: ${screenSm}px)`]: {
-      flexBasis: '284px' /* should be 184px */,
+      flexBasis: '180px',
       marginRight: '20px',
     },
   },
-  provider: {
+  networkList: {
     alignItems: 'center',
     cursor: 'pointer',
     display: 'flex',
     flex: '1 1 auto',
     padding: sm,
+    justifyContent: 'space-between',
     [`@media (min-width: ${screenSm}px)`]: {
-      paddingLeft: sm,
       paddingRight: sm,
     },
   },
@@ -52,7 +52,7 @@ class NetworkSelector extends React.Component<any> {
     return (
       <>
         <div className={classes.root} ref={this.myRef}>
-          <Col className={classes.provider} end="sm" middle="xs" onClick={toggle}>
+          <Col className={classes.networkList} end="sm" middle="xs" onClick={toggle}>
             <NetworkLabel />
             <IconButton className={classes.expand} disableRipple>
               {open ? <ExpandLess /> : <ExpandMore />}

src/components/AppLayout/Header/components/Provider.tsx

@@ -16,7 +16,6 @@ const styles = () => ({
 
     [`@media (min-width: ${screenSm}px)`]: {
       flexBasis: '284px',
-      marginRight: '20px',
     },
   },
   provider: {