Merge branch 'feature/#512-network-switching' of github.com:gnosis/safe-react into feature/#512-network-switching

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

@@ -5,7 +5,7 @@ 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 { Divider, Icon } from '@gnosis.pm/safe-react-components'
 
 import Provider from './Provider'
 import NetworkSelector from './NetworkSelector'
@@ -29,8 +29,9 @@ const StyledDivider = styled(Divider)`
 const StyledLink = styled.a`
   margin: 0;
   text-decoration: none;
-  display: block;
-  padding: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 14px 16px 14px 0;
 
   :hover {
     background-color: ${({ theme }) => theme.colors.background};
@@ -141,6 +142,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
                         <React.Fragment key={network.name}>
                           <StyledLink href="#">
                             <NetworkLabel networkName={network.name} />
+                            <Icon type="check" size="md" color="primary" />
                           </StyledLink>
                           <StyledDivider />
                         </React.Fragment>

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

@@ -24,7 +24,8 @@ const useStyles = makeStyles({
     lineHeight: 'normal',
     margin: '0',
     padding: `${xs} ${sm}`,
-    width: 'fit-content',
+    minWidth: '70px',
+    textAlign: 'center',
   },
 })
 

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

@@ -25,7 +25,6 @@ const styles = () => ({
     cursor: 'pointer',
     display: 'flex',
     flex: '1 1 auto',
-    /* padding: sm, */
     justifyContent: 'space-between',
     [`@media (min-width: ${screenSm}px)`]: {
       paddingRight: sm,