ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: change style of mobile pool buttons and menu (#7020)

Browse Source 
* fix: menu flyout alignment overridden on mobile

* fix: change button order, sizing

* Replace deprecated media queries and text components
This commit is contained in:
gnewfield 2023-07-28 13:22:48 -04:00 committed by GitHub
parent f55062f9a9
commit 0aafcdf885
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Menu/index.tsx
View File

@ -53,11 +53,6 @@ const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
: css`
left: 0rem;
`};
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
bottom: unset;
right: 0;
left: unset;
`};
`
const MenuItem = styled(ExternalLink)`

44
src/pages/Pool/index.tsx
View File

@ -29,49 +29,41 @@ const PageWrapper = styled(AutoColumn)`
max-width: 870px;
width: 100%;
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
@media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
max-width: 800px;
`};
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
max-width: 500px;
`};
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
padding-top: 48px;
}
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
@media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
max-width: 500px;
padding-top: 20px;
}
`
const TitleRow = styled(RowBetween)`
color: ${({ theme }) => theme.textSecondary};
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
@media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
flex-wrap: wrap;
gap: 12px;
width: 100%;
`};
}
`
const ButtonRow = styled(RowFixed)`
& > *:not(:last-child) {
margin-left: 8px;
}
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
@media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
width: 100%;
flex-direction: row;
justify-content: space-between;
flex-direction: row-reverse;
`};
}
`
const PoolMenu = styled(Menu)`
margin-left: 0;
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
@media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
flex: 1 1 auto;
width: 49%;
right: 0px;
`};
width: 50%;
}
a {
width: 100%;
@ -93,7 +85,7 @@ const MoreOptionsButton = styled(ButtonGray)`
margin-right: 8px;
`
const MoreOptionsText = styled(ThemedText.DeprecatedBody)`
const MoreOptionsText = styled(ThemedText.BodyPrimary)`
align-items: center;
display: flex;
`
@ -127,10 +119,10 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`
font-size: 16px;
padding: 6px 8px;
width: fit-content;
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
@media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
flex: 1 1 auto;
width: 100%;
`};
width: 50%;
}
`
const MainContentWrapper = styled.main`
@ -180,12 +172,12 @@ function WrongNetworkCard() {
<MainContentWrapper>
<ErrorContainer>
<ThemedText.DeprecatedBody color={theme.textTertiary} textAlign="center">
<ThemedText.BodyPrimary color={theme.textTertiary} textAlign="center">
<NetworkIcon strokeWidth={1.2} />
<div data-testid="pools-unsupported-err">
<Trans>Your connected network is unsupported.</Trans>
</div>
</ThemedText.DeprecatedBody>
</ThemedText.BodyPrimary>
</ErrorContainer>
</MainContentWrapper>
</AutoColumn>
@ -301,12 +293,12 @@ export default function Pool() {
/>
) : (
<ErrorContainer>
<ThemedText.DeprecatedBody color={theme.textTertiary} textAlign="center">
<ThemedText.BodyPrimary color={theme.textTertiary} textAlign="center">
<InboxIcon strokeWidth={1} style={{ marginTop: '2em' }} />
<div>
<Trans>Your active V3 liquidity positions will appear here.</Trans>
</div>
</ThemedText.DeprecatedBody>
</ThemedText.BodyPrimary>
{!showConnectAWallet && closedPositions.length > 0 && (
<ButtonText
style={{ marginTop: '.5rem' }}