fix styles and add links for each network

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

@@ -20,6 +20,21 @@ import { useStateHandler } from 'src/logic/hooks/useStateHandler'
 
 import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
 import { NETWORKSNAMES } from 'src/utils/constants'
+import styled from 'styled-components'
+
+const StyledDivider = styled(Divider)`
+  margin: 0;
+`
+const StyledLink = styled.a`
+  margin: 0;
+  text-decoration: none;
+  display: block;
+  padding: 12px 0;
+
+  :hover {
+    background-color: ${({ theme }) => theme.colors.background};
+  }
+`
 
 const styles = () => ({
   root: {
@@ -60,9 +75,8 @@ const styles = () => ({
     borderRadius: sm,
     boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
     marginTop: '11px',
-    minWidth: '200px',
+    minWidth: '180px',
-    paddingTop: md,
+    padding: '0',
-    paddingBottom: md,
   },
 })
 
@@ -73,8 +87,10 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
   const networkList = NETWORKSNAMES.map((network) => {
     return (
       <>
-        <NetworkLabel networkName={network} />
+        <StyledLink href="#">
-        <Divider />
+          <NetworkLabel networkName={network} />
+        </StyledLink>
+        <StyledDivider />
       </>
     )
   })

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

@@ -16,7 +16,7 @@ const styles = () => ({
     height: '100%',
 
     [`@media (min-width: ${screenSm}px)`]: {
-      flexBasis: '200px',
+      flexBasis: '180px',
       marginRight: '20px',
     },
   },
@@ -25,7 +25,7 @@ const styles = () => ({
     cursor: 'pointer',
     display: 'flex',
     flex: '1 1 auto',
-    padding: sm,
+    /* padding: sm, */
     justifyContent: 'space-between',
     [`@media (min-width: ${screenSm}px)`]: {
       paddingRight: sm,