diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx index 01c7a978..fe7e0446 100644 --- a/src/components/AppLayout/Header/components/Layout.tsx +++ b/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', - paddingTop: md, - paddingBottom: md, + minWidth: '180px', + padding: '0', }, }) @@ -73,8 +87,10 @@ const Layout = ({ classes, providerDetails, providerInfo }) => { const networkList = NETWORKSNAMES.map((network) => { return ( <> - - + + + + ) }) diff --git a/src/components/AppLayout/Header/components/NetworkSelector.tsx b/src/components/AppLayout/Header/components/NetworkSelector.tsx index afee105c..e3b4cdb1 100644 --- a/src/components/AppLayout/Header/components/NetworkSelector.tsx +++ b/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,