Skip to content

I
interface
Commit 6779c1a0 authored by David Walsh's avatar David Walsh Committed by GitHub
Browse files
Options

Fix #3117 - Open networks menu upon hover (#3378)

parent f79ef124
Hide whitespace changes
Inline Side-by-side
Showing with 22 additions and 17 deletions
src/components/Header/NetworkSelector.tsx
View file @ 6779c1a0
...@@ -51,6 +51,16 @@ const FlyoutHeader = styled.div` ...@@ -51,6 +51,16 @@ const FlyoutHeader = styled.div`
font-weight: 400; font-weight: 400;
` `
const FlyoutMenu = styled.div` const FlyoutMenu = styled.div`
position: absolute;
top: 54px;
width: 272px;
z-index: 99;
padding-top: 10px;
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
top: 40px;
}
`
const FlyoutMenuContents = styled.div`
align-items: flex-start; align-items: flex-start;
background-color: ${({ theme }) => theme.bg0}; background-color: ${({ theme }) => theme.bg0};
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
...@@ -61,16 +71,9 @@ const FlyoutMenu = styled.div` ...@@ -61,16 +71,9 @@ const FlyoutMenu = styled.div`
font-size: 16px; font-size: 16px;
overflow: auto; overflow: auto;
padding: 16px; padding: 16px;
position: absolute;
top: 64px;
width: 272px;
z-index: 99;
& > *:not(:last-child) { & > *:not(:last-child) {
margin-bottom: 12px; margin-bottom: 12px;
} }
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
top: 50px;
}
` `
const FlyoutRow = styled.div<{ active: boolean }>` const FlyoutRow = styled.div<{ active: boolean }>`
align-items: center; align-items: center;
...@@ -305,21 +308,23 @@ export default function NetworkSelector() { ...@@ -305,21 +308,23 @@ export default function NetworkSelector() {
} }
return ( return (
<SelectorWrapper ref={node as any}> <SelectorWrapper ref={node as any} onMouseEnter={toggle} onMouseLeave={toggle}>
<SelectorControls onClick={toggle} interactive> <SelectorControls interactive>
<SelectorLogo interactive src={info.logoUrl} /> <SelectorLogo interactive src={info.logoUrl} />
<SelectorLabel>{info.label}</SelectorLabel> <SelectorLabel>{info.label}</SelectorLabel>
<StyledChevronDown /> <StyledChevronDown />
</SelectorControls> </SelectorControls>
{open && ( {open && (
<FlyoutMenu onMouseLeave={toggle}> <FlyoutMenu>
<FlyoutHeader> <FlyoutMenuContents>
<Trans>Select a network</Trans> <FlyoutHeader>
</FlyoutHeader> <Trans>Select a network</Trans>
<Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.MAINNET} /> </FlyoutHeader>
<Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.POLYGON} /> <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.MAINNET} />
<Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.OPTIMISM} /> <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.POLYGON} />
<Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.ARBITRUM_ONE} /> <Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.OPTIMISM} />
<Row onSelectChain={handleChainSwitch} targetChain={SupportedChainId.ARBITRUM_ONE} />
</FlyoutMenuContents>
</FlyoutMenu> </FlyoutMenu>
)} )}
</SelectorWrapper> </SelectorWrapper>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment