fix: fix page layout

cowprotocol · Dec 19, 2024 · a92d512 · a92d512
1 parent b31ecfe
commit a92d512
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 52 deletions.
diff --git 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: Props) => {
 
   return (
     <ExternalLink href={url} target="_blank" rel="noopener noreferrer" className={className}>
-      <span>{label}</span>
+      <TokenSymbol token={{ symbol: label }} length={24} />
       {showLogo && <LogoWrapper title={`Open it on ${CHAIN_INFO[networkId].explorerTitle}`} src={LOGO_MAP.etherscan} />}
     </ExternalLink>
   )

diff --git 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<Props>): React.ReactNode {
       <StyledImg address={imageAddress} network={network} />
       {isNativeToken(erc20.address) ? (
         // There's nowhere to link when it's a native token, so, only display the symbol
-        <NativeWrapper>{erc20.symbol}</NativeWrapper>
+        <NativeWrapper>
+          <TokenSymbol length={24} token={erc20} />
+        </NativeWrapper>
       ) : (
         <BlockExplorerLink identifier={erc20.address} type="token" label={tokenLabel} networkId={network} />
       )}

diff --git 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
@@ -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<Props> = ({ header = defaultHeader, footer
     <StaticGlobalStyle />
     <ThemeProvider>
       <ThemedGlobalStyle />
-      <PageWrapper>
-        {header}
-        <MainContent>
-          {children}
-        </MainContent>
-        {footer}
-      </PageWrapper>
+      {header}
+      {children}
+      {footer}
     </ThemeProvider>
   </>
 )

diff --git 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
@@ -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
@@ -35,7 +35,6 @@ export const StaticGlobalStyle = createGlobalStyle`
     box-sizing: border-box;
     overscroll-behavior-y: none;
     scroll-behavior: smooth;
-    overflow-x: hidden;
   }
 
   *, *:before, *:after {