diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx index dd247b24..fdf091da 100644 --- a/src/components/AppLayout/Header/components/Layout.tsx +++ b/src/components/AppLayout/Header/components/Layout.tsx @@ -21,6 +21,21 @@ import { useStateHandler } from 'src/logic/hooks/useStateHandler' import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg' import { NETWORK_NAMES } from 'src/utils/constants' import { getNetworkInfo } from 'src/config' +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: { @@ -61,9 +76,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', }, }) @@ -72,6 +86,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => { const { clickAway: clickAwayNetworks, open: openNetworks, toggle: toggleNetworks } = useStateHandler() const networkInfo = getNetworkInfo() console.log(networkInfo) + return ( @@ -124,8 +139,10 @@ const Layout = ({ classes, providerDetails, providerInfo }) => { {NETWORK_NAMES.map((network) => ( - - + + + + ))} 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,