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
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
...@@ -64,29 +64,18 @@ initializeAnalytics(ANALYTICS_DUMMY_KEY, OriginApplication.INTERFACE, { ...@@ -64,29 +64,18 @@ initializeAnalytics(ANALYTICS_DUMMY_KEY, OriginApplication.INTERFACE, {
isProductionEnv: isProductionEnv(), isProductionEnv: isProductionEnv(),
}) })
const AppWrapper = styled.div`
display: flex;
flex-flow: column;
align-items: flex-start;
height: 100%;
`
const BodyWrapper = styled.div` const BodyWrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; padding: ${({ theme }) => theme.navHeight}px 0px 5rem 0px;
padding: 72px 0px 0px 0px;
align-items: center; align-items: center;
flex: 1; flex: 1;
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
padding: 52px 0px 16px 0px;
`};
` `
const MobileBottomBar = styled.div` const MobileBottomBar = styled.div`
z-index: ${Z_INDEX.sticky}; z-index: ${Z_INDEX.sticky};
position: sticky; position: fixed;
display: flex; display: flex;
bottom: 0; bottom: 0;
right: 0; right: 0;
...@@ -114,10 +103,6 @@ const HeaderWrapper = styled.div<{ transparent?: boolean }>` ...@@ -114,10 +103,6 @@ const HeaderWrapper = styled.div<{ transparent?: boolean }>`
z-index: ${Z_INDEX.sticky}; z-index: ${Z_INDEX.sticky};
` `
const Marginer = styled.div`
margin-top: 5rem;
`
function getCurrentPageFromLocation(locationPathname: string): PageName | undefined { function getCurrentPageFromLocation(locationPathname: string): PageName | undefined {
switch (true) { switch (true) {
case locationPathname.startsWith('/swap'): case locationPathname.startsWith('/swap'):
...@@ -205,128 +190,125 @@ export default function App() { ...@@ -205,128 +190,125 @@ export default function App() {
<ErrorBoundary> <ErrorBoundary>
<DarkModeQueryParamReader /> <DarkModeQueryParamReader />
<ApeModeQueryParamReader /> <ApeModeQueryParamReader />
<AppWrapper> <Trace page={currentPage}>
<Trace page={currentPage}> <HeaderWrapper transparent={isHeaderTransparent}>
<HeaderWrapper transparent={isHeaderTransparent}> <NavBar />
<NavBar /> </HeaderWrapper>
</HeaderWrapper> <BodyWrapper>
<BodyWrapper> <Popups />
<Popups /> <Polling />
<Polling /> <TopLevelModals />
<TopLevelModals /> <Suspense fallback={<Loader />}>
<Suspense fallback={<Loader />}> {isLoaded ? (
{isLoaded ? ( <Routes>
<Routes> <Route path="/" element={<Landing />} />
<Route path="/" element={<Landing />} /> <Route path="tokens" element={<Tokens />}>
<Route path="tokens" element={<Tokens />}> <Route path=":chainName" />
<Route path=":chainName" /> </Route>
</Route> <Route path="tokens/:chainName/:tokenAddress" element={<TokenDetails />} />
<Route path="tokens/:chainName/:tokenAddress" element={<TokenDetails />} /> <Route
<Route path="vote/*"
path="vote/*" element={
element={ <Suspense fallback={<LazyLoadSpinner />}>
<Suspense fallback={<LazyLoadSpinner />}> <Vote />
<Vote /> </Suspense>
</Suspense> }
} />
/> <Route path="create-proposal" element={<Navigate to="/vote/create-proposal" replace />} />
<Route path="create-proposal" element={<Navigate to="/vote/create-proposal" replace />} /> <Route path="claim" element={<OpenClaimAddressModalAndRedirectToSwap />} />
<Route path="claim" element={<OpenClaimAddressModalAndRedirectToSwap />} /> <Route path="uni" element={<Earn />} />
<Route path="uni" element={<Earn />} /> <Route path="uni/:currencyIdA/:currencyIdB" element={<Manage />} />
<Route path="uni/:currencyIdA/:currencyIdB" element={<Manage />} />
<Route path="send" element={<RedirectPathToSwapOnly />} /> <Route path="send" element={<RedirectPathToSwapOnly />} />
<Route path="swap" element={<Swap />} /> <Route path="swap" element={<Swap />} />
<Route path="pool/v2/find" element={<PoolFinder />} /> <Route path="pool/v2/find" element={<PoolFinder />} />
<Route path="pool/v2" element={<PoolV2 />} /> <Route path="pool/v2" element={<PoolV2 />} />
<Route path="pool" element={<Pool />} /> <Route path="pool" element={<Pool />} />
<Route path="pool/:tokenId" element={<PositionPage />} /> <Route path="pool/:tokenId" element={<PositionPage />} />
<Route path="add/v2" element={<RedirectDuplicateTokenIdsV2 />}> <Route path="add/v2" element={<RedirectDuplicateTokenIdsV2 />}>
<Route path=":currencyIdA" /> <Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" /> <Route path=":currencyIdA/:currencyIdB" />
</Route> </Route>
<Route path="add" element={<RedirectDuplicateTokenIds />}> <Route path="add" element={<RedirectDuplicateTokenIds />}>
{/* this is workaround since react-router-dom v6 doesn't support optional parameters any more */} {/* this is workaround since react-router-dom v6 doesn't support optional parameters any more */}
<Route path=":currencyIdA" /> <Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" /> <Route path=":currencyIdA/:currencyIdB" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount" /> <Route path=":currencyIdA/:currencyIdB/:feeAmount" />
</Route> </Route>
<Route path="increase" element={<AddLiquidity />}> <Route path="increase" element={<AddLiquidity />}>
<Route path=":currencyIdA" /> <Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" /> <Route path=":currencyIdA/:currencyIdB" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount" /> <Route path=":currencyIdA/:currencyIdB/:feeAmount" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount/:tokenId" /> <Route path=":currencyIdA/:currencyIdB/:feeAmount/:tokenId" />
</Route> </Route>
<Route path="remove/v2/:currencyIdA/:currencyIdB" element={<RemoveLiquidity />} /> <Route path="remove/v2/:currencyIdA/:currencyIdB" element={<RemoveLiquidity />} />
<Route path="remove/:tokenId" element={<RemoveLiquidityV3 />} /> <Route path="remove/:tokenId" element={<RemoveLiquidityV3 />} />
<Route path="migrate/v2" element={<MigrateV2 />} /> <Route path="migrate/v2" element={<MigrateV2 />} />
<Route path="migrate/v2/:address" element={<MigrateV2Pair />} /> <Route path="migrate/v2/:address" element={<MigrateV2Pair />} />
<Route path="about" element={<About />} /> <Route path="about" element={<About />} />
<Route path="*" element={<RedirectPathToSwapOnly />} /> <Route path="*" element={<RedirectPathToSwapOnly />} />
<Route <Route
path="/nfts" path="/nfts"
element={ element={
// TODO: replace loading state during Apollo migration // TODO: replace loading state during Apollo migration
<Suspense fallback={null}> <Suspense fallback={null}>
<NftExplore /> <NftExplore />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="/nfts/asset/:contractAddress/:tokenId" path="/nfts/asset/:contractAddress/:tokenId"
element={ element={
<Suspense fallback={<AssetDetailsLoading />}> <Suspense fallback={<AssetDetailsLoading />}>
<Asset /> <Asset />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="/nfts/profile" path="/nfts/profile"
element={ element={
<Suspense fallback={<ProfilePageLoadingSkeleton />}> <Suspense fallback={<ProfilePageLoadingSkeleton />}>
<Profile /> <Profile />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="/nfts/collection/:contractAddress" path="/nfts/collection/:contractAddress"
element={ element={
<Suspense fallback={<CollectionPageSkeleton />}> <Suspense fallback={<CollectionPageSkeleton />}>
<Collection /> <Collection />
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="/nfts/collection/:contractAddress/activity" path="/nfts/collection/:contractAddress/activity"
element={ element={
<Suspense fallback={<CollectionPageSkeleton />}> <Suspense fallback={<CollectionPageSkeleton />}>
<Collection /> <Collection />
</Suspense> </Suspense>
} }
/> />
</Routes> </Routes>
) : ( ) : (
<Loader /> <Loader />
)} )}
</Suspense> </Suspense>
<Marginer /> </BodyWrapper>
</BodyWrapper> <MobileBottomBar>
<MobileBottomBar> <PageTabs />
<PageTabs /> <Box marginY="4">
<Box marginY="4"> <MenuDropdown />
<MenuDropdown /> </Box>
</Box> </MobileBottomBar>
</MobileBottomBar> </Trace>
</Trace>
</AppWrapper>
</ErrorBoundary> </ErrorBoundary>
) )
} }
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