Skip to content

I
interface
Commit a60a85db authored by Mike Grabowski's avatar Mike Grabowski Committed by GitHub
Browse files
Options

fix: layout padding/margin & overflow (#5707) 

* chore: fix

* chore: tweaks
parent ad2472ea
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 204 additions and 225 deletions
src/components/Popups/index.tsx
View file @ a60a85db
...@@ -9,14 +9,12 @@ import { AutoColumn } from '../Column' ...@@ -9,14 +9,12 @@ import { AutoColumn } from '../Column'
import ClaimPopup from './ClaimPopup' import ClaimPopup from './ClaimPopup'
import PopupItem from './PopupItem' import PopupItem from './PopupItem'
const MobilePopupWrapper = styled.div<{ height: string | number }>` const MobilePopupWrapper = styled.div`
position: relative; position: relative;
max-width: 100%; max-width: 100%;
height: ${({ height }) => height}; margin: 0 auto;
margin: ${({ height }) => (height ? '0 auto;' : 0)};
margin-bottom: ${({ height }) => (height ? '20px' : 0)};
display: none; display: none;
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall` ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: block; display: block;
padding-top: 20px; padding-top: 20px;
...@@ -74,16 +72,18 @@ export default function Popups() { ...@@ -74,16 +72,18 @@ export default function Popups() {
<PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} /> <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
))} ))}
</FixedPopupColumn> </FixedPopupColumn>
<MobilePopupWrapper height={activePopups?.length > 0 ? 'fit-content' : 0}> {activePopups?.length > 0 && (
<MobilePopupInner> <MobilePopupWrapper>
{activePopups // reverse so new items up front <MobilePopupInner>
.slice(0) {activePopups // reverse so new items up front
.reverse() .slice(0)
.map((item) => ( .reverse()
<PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} /> .map((item) => (
))} <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
</MobilePopupInner> ))}
</MobilePopupWrapper> </MobilePopupInner>
</MobilePopupWrapper>
)}
</> </>
) )
} }
src/components/swap/styleds.tsx
View file @ a60a85db
...@@ -12,7 +12,6 @@ export const PageWrapper = styled.div` ...@@ -12,7 +12,6 @@ export const PageWrapper = styled.div`
padding: 68px 8px 0px; padding: 68px 8px 0px;
max-width: 480px; max-width: 480px;
width: 100%; width: 100%;
height: 100vh;
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
padding-top: 48px; padding-top: 48px;
......
src/pages/App.tsx
View file @ a60a85db
This diff is collapsed.
src/pages/Pool/index.tsx
View file @ a60a85db
...@@ -165,7 +165,7 @@ function WrongNetworkCard() { ...@@ -165,7 +165,7 @@ function WrongNetworkCard() {
const theme = useTheme() const theme = useTheme()
return ( return (
<div style={{ height: '100vh' }}> <>
<PageWrapper> <PageWrapper>
<AutoColumn gap="lg" justify="center"> <AutoColumn gap="lg" justify="center">
<AutoColumn gap="lg" style={{ width: '100%' }}> <AutoColumn gap="lg" style={{ width: '100%' }}>
...@@ -189,7 +189,7 @@ function WrongNetworkCard() { ...@@ -189,7 +189,7 @@ function WrongNetworkCard() {
</AutoColumn> </AutoColumn>
</PageWrapper> </PageWrapper>
<SwitchLocaleLink /> <SwitchLocaleLink />
</div> </>
) )
} }
...@@ -263,86 +263,84 @@ export default function Pool() { ...@@ -263,86 +263,84 @@ export default function Pool() {
return ( return (
<Trace page={PageName.POOL_PAGE} shouldLogImpression> <Trace page={PageName.POOL_PAGE} shouldLogImpression>
<div style={{ height: '100vh' }}> <PageWrapper>
<PageWrapper> <AutoColumn gap="lg" justify="center">
<AutoColumn gap="lg" justify="center"> <AutoColumn gap="lg" style={{ width: '100%' }}>
<AutoColumn gap="lg" style={{ width: '100%' }}> <TitleRow padding="0">
<TitleRow padding="0"> <ThemedText.LargeHeader>
<ThemedText.LargeHeader> <Trans>Pools</Trans>
<Trans>Pools</Trans> </ThemedText.LargeHeader>
</ThemedText.LargeHeader> <ButtonRow>
<ButtonRow> {showV2Features && (
{showV2Features && ( <PoolMenu
<PoolMenu menuItems={menuItems}
menuItems={menuItems} flyoutAlignment={FlyoutAlignment.LEFT}
flyoutAlignment={FlyoutAlignment.LEFT} ToggleUI={(props: any) => (
ToggleUI={(props: any) => ( <MoreOptionsButton {...props}>
<MoreOptionsButton {...props}> <MoreOptionsText>
<MoreOptionsText> <Trans>More</Trans>
<Trans>More</Trans> <ChevronDown size={15} />
<ChevronDown size={15} /> </MoreOptionsText>
</MoreOptionsText> </MoreOptionsButton>
</MoreOptionsButton>
)}
/>
)}
<ResponsiveButtonPrimary data-cy="join-pool-button" id="join-pool-button" as={Link} to="/add/ETH">
+ <Trans>New Position</Trans>
</ResponsiveButtonPrimary>
</ButtonRow>
</TitleRow>
<MainContentWrapper>
{positionsLoading ? (
<PositionsLoadingPlaceholder />
) : filteredPositions && closedPositions && filteredPositions.length > 0 ? (
<PositionList
positions={filteredPositions}
setUserHideClosedPositions={setUserHideClosedPositions}
userHideClosedPositions={userHideClosedPositions}
/>
) : (
<ErrorContainer>
<ThemedText.DeprecatedBody 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>
{!showConnectAWallet && closedPositions.length > 0 && (
<ButtonText
style={{ marginTop: '.5rem' }}
onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}
>
<Trans>Show closed positions</Trans>
</ButtonText>
)}
{showConnectAWallet && (
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.CONNECT_WALLET_BUTTON_CLICKED}
properties={{ received_swap_quote: false }}
element={ElementName.CONNECT_WALLET_BUTTON}
>
<ButtonPrimary
style={{ marginTop: '2em', marginBottom: '2em', padding: '8px 16px' }}
onClick={toggleWalletModal}
>
<Trans>Connect a wallet</Trans>
</ButtonPrimary>
</TraceEvent>
)} )}
</ErrorContainer> />
)} )}
</MainContentWrapper> <ResponsiveButtonPrimary data-cy="join-pool-button" id="join-pool-button" as={Link} to="/add/ETH">
<HideSmall> + <Trans>New Position</Trans>
<CTACards /> </ResponsiveButtonPrimary>
</HideSmall> </ButtonRow>
</AutoColumn> </TitleRow>
<MainContentWrapper>
{positionsLoading ? (
<PositionsLoadingPlaceholder />
) : filteredPositions && closedPositions && filteredPositions.length > 0 ? (
<PositionList
positions={filteredPositions}
setUserHideClosedPositions={setUserHideClosedPositions}
userHideClosedPositions={userHideClosedPositions}
/>
) : (
<ErrorContainer>
<ThemedText.DeprecatedBody 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>
{!showConnectAWallet && closedPositions.length > 0 && (
<ButtonText
style={{ marginTop: '.5rem' }}
onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}
>
<Trans>Show closed positions</Trans>
</ButtonText>
)}
{showConnectAWallet && (
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.CONNECT_WALLET_BUTTON_CLICKED}
properties={{ received_swap_quote: false }}
element={ElementName.CONNECT_WALLET_BUTTON}
>
<ButtonPrimary
style={{ marginTop: '2em', marginBottom: '2em', padding: '8px 16px' }}
onClick={toggleWalletModal}
>
<Trans>Connect a wallet</Trans>
</ButtonPrimary>
</TraceEvent>
)}
</ErrorContainer>
)}
</MainContentWrapper>
<HideSmall>
<CTACards />
</HideSmall>
</AutoColumn> </AutoColumn>
</PageWrapper> </AutoColumn>
<SwitchLocaleLink /> </PageWrapper>
</div> <SwitchLocaleLink />
</Trace> </Trace>
) )
} }
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