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'
import ClaimPopup from './ClaimPopup'
import PopupItem from './PopupItem'
const MobilePopupWrapper = styled.div<{ height: string | number }>`
const MobilePopupWrapper = styled.div`
position: relative;
max-width: 100%;
height: ${({ height }) => height};
margin: ${({ height }) => (height ? '0 auto;' : 0)};
margin-bottom: ${({ height }) => (height ? '20px' : 0)};
margin: 0 auto;
display: none;
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: block;
padding-top: 20px;
......@@ -74,16 +72,18 @@ export default function Popups() {
<PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
))}
</FixedPopupColumn>
<MobilePopupWrapper height={activePopups?.length > 0 ? 'fit-content' : 0}>
<MobilePopupInner>
{activePopups // reverse so new items up front
.slice(0)
.reverse()
.map((item) => (
<PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
))}
</MobilePopupInner>
</MobilePopupWrapper>
{activePopups?.length > 0 && (
<MobilePopupWrapper>
<MobilePopupInner>
{activePopups // reverse so new items up front
.slice(0)
.reverse()
.map((item) => (
<PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
))}
</MobilePopupInner>
</MobilePopupWrapper>
)}
</>
)
}
src/components/swap/styleds.tsx
View file @ a60a85db
......@@ -12,7 +12,6 @@ export const PageWrapper = styled.div`
padding: 68px 8px 0px;
max-width: 480px;
width: 100%;
height: 100vh;
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
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() {
const theme = useTheme()
return (
<div style={{ height: '100vh' }}>
<>
<PageWrapper>
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="lg" style={{ width: '100%' }}>
......@@ -189,7 +189,7 @@ function WrongNetworkCard() {
</AutoColumn>
</PageWrapper>
<SwitchLocaleLink />
</div>
</>
)
}
......@@ -263,86 +263,84 @@ export default function Pool() {
return (
<Trace page={PageName.POOL_PAGE} shouldLogImpression>
<div style={{ height: '100vh' }}>
<PageWrapper>
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="lg" style={{ width: '100%' }}>
<TitleRow padding="0">
<ThemedText.LargeHeader>
<Trans>Pools</Trans>
</ThemedText.LargeHeader>
<ButtonRow>
{showV2Features && (
<PoolMenu
menuItems={menuItems}
flyoutAlignment={FlyoutAlignment.LEFT}
ToggleUI={(props: any) => (
<MoreOptionsButton {...props}>
<MoreOptionsText>
<Trans>More</Trans>
<ChevronDown size={15} />
</MoreOptionsText>
</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>
<PageWrapper>
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="lg" style={{ width: '100%' }}>
<TitleRow padding="0">
<ThemedText.LargeHeader>
<Trans>Pools</Trans>
</ThemedText.LargeHeader>
<ButtonRow>
{showV2Features && (
<PoolMenu
menuItems={menuItems}
flyoutAlignment={FlyoutAlignment.LEFT}
ToggleUI={(props: any) => (
<MoreOptionsButton {...props}>
<MoreOptionsText>
<Trans>More</Trans>
<ChevronDown size={15} />
</MoreOptionsText>
</MoreOptionsButton>
)}
</ErrorContainer>
/>
)}
</MainContentWrapper>
<HideSmall>
<CTACards />
</HideSmall>
</AutoColumn>
<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>
<HideSmall>
<CTACards />
</HideSmall>
</AutoColumn>
</PageWrapper>
<SwitchLocaleLink />
</div>
</AutoColumn>
</PageWrapper>
<SwitchLocaleLink />
</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