From a92d512d8360cb6171a549f2b19d973908d3f119 Mon Sep 17 00:00:00 2001 From: Alexandr Kazachenko Date: Thu, 19 Dec 2024 17:55:25 +0500 Subject: [PATCH] fix: fix page layout --- .../BlockExplorerLink/BlockExplorerLink.tsx | 8 ++--- .../components/common/TokenDisplay/index.tsx | 6 +++- .../layout/GenericLayout/Footer/index.tsx | 18 +++++------ .../components/layout/GenericLayout/index.tsx | 32 +++---------------- .../src/explorer/pages/Home/index.tsx | 4 +-- apps/explorer/src/explorer/styled.ts | 9 ++---- apps/explorer/src/theme/styles/global.ts | 1 - 7 files changed, 26 insertions(+), 52 deletions(-) diff --git a/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx b/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx index c70a23322c..6942fc0ee4 100644 --- a/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx +++ b/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx @@ -1,9 +1,9 @@ -import React, { ReactElement } from 'react' +import React from 'react' import { CHAIN_INFO } from '@cowprotocol/common-const' import { BlockExplorerLinkType, getBlockExplorerUrl } from '@cowprotocol/common-utils' import { SupportedChainId } from '@cowprotocol/cow-sdk' -import { ExternalLink } from '@cowprotocol/ui' +import { ExternalLink, TokenSymbol } from '@cowprotocol/ui' import LogoWrapper, { LOGO_MAP } from 'components/common/LogoWrapper' import { abbreviateString } from 'utils' @@ -24,7 +24,7 @@ export interface Props { /** * label to replace textContent generated from identifier */ - label?: string | ReactElement | void + label?: string | void /** * Use the URL as a label @@ -58,7 +58,7 @@ export const BlockExplorerLink: React.FC = (props: Props) => { return ( - {label} + {showLogo && } ) diff --git a/apps/explorer/src/components/common/TokenDisplay/index.tsx b/apps/explorer/src/components/common/TokenDisplay/index.tsx index 780c76af20..353ecac1d4 100644 --- a/apps/explorer/src/components/common/TokenDisplay/index.tsx +++ b/apps/explorer/src/components/common/TokenDisplay/index.tsx @@ -1,3 +1,5 @@ +import { TokenSymbol } from '@cowprotocol/ui' + import { TokenErc20 } from '@gnosis.pm/dex-js' import { BlockExplorerLink } from 'components/common/BlockExplorerLink' import TokenImg from 'components/common/TokenImg' @@ -51,7 +53,9 @@ export function TokenDisplay(props: Readonly): React.ReactNode { {isNativeToken(erc20.address) ? ( // There's nowhere to link when it's a native token, so, only display the symbol - {erc20.symbol} + + + ) : ( )} diff --git a/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx b/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx index 10f6fda93f..a5f67cb87f 100644 --- a/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx +++ b/apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx @@ -16,25 +16,23 @@ const FooterStyled = styled.footer` align-items: center; box-sizing: border-box; font-size: 1.2rem; + flex: 1 1 auto; color: ${({ theme }): string => theme.textSecondary2}; width: 100%; justify-content: space-around; - padding: 1rem; - height: 4rem; - position: fixed; - left: 0; - bottom: 0; - z-index: 10; + margin: auto auto 0; + height: auto; + padding: 3rem 1rem 4rem 1rem; + max-height: 4rem; ${Media.upToMedium()} { - position: relative; - margin: 0; + margin: 0 auto; flex-flow: column wrap; padding: 1.6rem 1.6rem 4rem; justify-content: flex-start; gap: 1.6rem; - height: auto; - max-height: none; + bottom: initial; + max-height: initial; } > a { diff --git a/apps/explorer/src/components/layout/GenericLayout/index.tsx b/apps/explorer/src/components/layout/GenericLayout/index.tsx index d2a4f88e87..d950862f08 100644 --- a/apps/explorer/src/components/layout/GenericLayout/index.tsx +++ b/apps/explorer/src/components/layout/GenericLayout/index.tsx @@ -1,30 +1,10 @@ import { PropsWithChildren } from 'react' -import { Media } from '@cowprotocol/ui' - -import styled from 'styled-components/macro' -import { StaticGlobalStyle, ThemedGlobalStyle, ThemeProvider } from 'theme' +import { ThemeProvider, StaticGlobalStyle, ThemedGlobalStyle } from 'theme' import { Footer } from './Footer' import { Header } from './Header' -const PageWrapper = styled.div` - display: flex; - flex-direction: column; - min-height: 100vh; - width: 100%; -` - -const MainContent = styled.main` - flex: 1; - padding-bottom: 5rem; - width: 100%; - - ${Media.upToMedium()} { - padding-bottom: 0; - } -` - export type Props = PropsWithChildren<{ header?: React.ReactNode | null footer?: React.ReactNode | null @@ -38,13 +18,9 @@ export const GenericLayout: React.FC = ({ header = defaultHeader, footer - - {header} - - {children} - - {footer} - + {header} + {children} + {footer} ) diff --git a/apps/explorer/src/explorer/pages/Home/index.tsx b/apps/explorer/src/explorer/pages/Home/index.tsx index 438ae3a344..99f93fdeeb 100644 --- a/apps/explorer/src/explorer/pages/Home/index.tsx +++ b/apps/explorer/src/explorer/pages/Home/index.tsx @@ -17,11 +17,11 @@ import { Wrapper as WrapperMod } from '../styled' const Wrapper = styled(WrapperMod)` max-width: 100%; - height: calc(100vh - 10rem); + min-height: calc(100vh - 10rem); padding: 0; ${Media.upToMedium()} { - height: 50vh; + min-height: 50vh; } ${Media.upToSmall()} { diff --git a/apps/explorer/src/explorer/styled.ts b/apps/explorer/src/explorer/styled.ts index 0d634f1a3f..9cc3752198 100644 --- a/apps/explorer/src/explorer/styled.ts +++ b/apps/explorer/src/explorer/styled.ts @@ -29,12 +29,9 @@ export const GlobalStyle = createGlobalStyle` html, body, #root { - display: block; - max-width: 100vw; - overflow-x: hidden; - margin: 0; - padding: 0; - position: relative; + display: flex; + flex-direction: column; + flex-grow: 1; ${ScrollBarStyle} } diff --git a/apps/explorer/src/theme/styles/global.ts b/apps/explorer/src/theme/styles/global.ts index 1ec5905bb2..1472b3226e 100644 --- a/apps/explorer/src/theme/styles/global.ts +++ b/apps/explorer/src/theme/styles/global.ts @@ -35,7 +35,6 @@ export const StaticGlobalStyle = createGlobalStyle` box-sizing: border-box; overscroll-behavior-y: none; scroll-behavior: smooth; - overflow-x: hidden; } *, *:before, *:after {