Merge branch 'feat/pools-overview-redesign-1473' into pools-filter

centrifuge-app/src/components/CardTotalValueLocked.tsx

@@ -1,5 +1,6 @@
-import { Box, Card, Stack, Text, TextWithPlaceholder, Tooltip } from '@centrifuge/fabric'
+import { Box, Stack, Text, TextWithPlaceholder, Tooltip } from '@centrifuge/fabric'
 import * as React from 'react'
+import { useTheme } from 'styled-components'
 import { config } from '../config'
 import { formatDate } from '../utils/date'
 import { Dec } from '../utils/Decimal'
@@ -9,6 +10,7 @@ import { DataPoint, TotalValueLocked } from './Charts/TotalValueLocked'
 import { tooltipText } from './Tooltips'
 
 export function CardTotalValueLocked() {
+  const { colors } = useTheme()
   const [hovered, setHovered] = React.useState<DataPoint | undefined>(undefined)
   const [, listedTokens] = useListedPools()
 
@@ -36,7 +38,19 @@ export function CardTotalValueLocked() {
   }, [listedTokens])
 
   return (
-    <Card role="article" variant="interactive" p={3} pb={chartHeight * 0.6} position="relative">
+    <Box
+      role="article"
+      borderRadius="card"
+      borderStyle="solid"
+      borderWidth={1}
+      borderColor="borderSecondary"
+      p={3}
+      pb={chartHeight * 0.6}
+      position="relative"
+      style={{
+        boxShadow: `0px 3px 2px -2px ${colors.borderPrimary}`,
+      }}
+    >
       <Stack style={{ pointerEvents: 'none' }}>
         {hovered ? (
           <>
@@ -73,6 +87,6 @@ export function CardTotalValueLocked() {
       >
         <TotalValueLocked setHovered={setHovered} chainTVL={totalValueLocked} />
       </Box>
-    </Card>
+    </Box>
   )
 }

centrifuge-app/src/components/LayoutBase/index.tsx

@@ -0,0 +1,55 @@
+import { WalletMenu } from '@centrifuge/centrifuge-react'
+import * as React from 'react'
+import { Footer } from '../Footer'
+import { LogoLink } from '../LogoLink'
+import { Menu } from '../Menu'
+import { OnboardingStatus } from '../OnboardingStatus'
+import { SidePanelProps } from '../SidePanel'
+import {
+  FooterContainer,
+  HeaderBackground,
+  Inner,
+  LogoContainer,
+  MainContainer,
+  Root,
+  ToolbarContainer,
+  WalletContainer,
+} from './styles'
+
+type LayoutBaseProps = {
+  children?: React.ReactNode
+  sidePanel?: React.ReactElement<SidePanelProps>
+}
+
+const PADDING_MAIN = [2, 2, 3, 5, 10]
+
+export function LayoutBase({ children, sidePanel }: LayoutBaseProps) {
+  return (
+    <Root>
+      <Inner>
+        <HeaderBackground />
+
+        <LogoContainer>
+          <LogoLink />
+        </LogoContainer>
+
+        <WalletContainer pr={PADDING_MAIN}>
+          <WalletMenu menuItems={[<OnboardingStatus />]} />
+        </WalletContainer>
+
+        <ToolbarContainer as="aside">
+          <Menu />
+        </ToolbarContainer>
+
+        <MainContainer as="main" px={PADDING_MAIN} pt={[2, 3, 7, 10]} pb={4}>
+          {children}
+        </MainContainer>
+
+        <FooterContainer>
+          <Footer />
+        </FooterContainer>
+      </Inner>
+      {sidePanel}
+    </Root>
+  )
+}

centrifuge-app/src/components/LayoutBase/styles.tsx

@@ -0,0 +1,165 @@
+import { Box, Grid, Stack } from '@centrifuge/fabric'
+import styled from 'styled-components'
+
+const HEADER_HEIGHT = 60
+const TOOLBAR_HEIGHT = 50
+const LAYOUT_MAX_WIDTH = 1800
+const SIDEBAR_WIDTH = 80
+const SIDEBAR_WIDTH_EXTENDED = 220
+
+// the main breakpoint to switch from stacked to columns layout
+const BREAK_POINT_COLUMNS = 'M'
+// breakpoint from minimal to extended left sidebar width
+const BREAK_POINT_SIDEBAR_EXTENDED = 'L'
+
+export const Root = styled(Box)`
+  position: relative;
+  min-height: 100vh;
+
+  @supports (min-height: 100dvh) {
+    min-height: 100dvh;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+    height: 100vh;
+    overflow: auto;
+
+    @supports (height: 100dvh) {
+      height: 100dvh;
+    }
+  }
+`
+
+export const Inner = styled(Grid)`
+  max-width: ${LAYOUT_MAX_WIDTH}px;
+  min-height: 100%;
+
+  align-items: start;
+  grid-template-rows: 0px ${HEADER_HEIGHT}px 1fr auto ${TOOLBAR_HEIGHT}px;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'header-background header-background'
+    'logo wallet'
+    'main main'
+    'footer footer'
+    'toolbar toolbar';
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+    grid-template-rows: ${HEADER_HEIGHT}px minmax(max-content, 1fr) auto;
+    grid-template-columns: ${SIDEBAR_WIDTH}px 1fr;
+    grid-template-areas:
+      'logo wallet'
+      'toolbar main'
+      'footer main';
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_SIDEBAR_EXTENDED]}) {
+    grid-template-columns: ${SIDEBAR_WIDTH_EXTENDED}px 1fr;
+  }
+`
+
+export const HeaderBackground = styled(Box)`
+  z-index: ${({ theme }) => theme.zIndices.header};
+  position: sticky;
+  top: 0;
+  left: 0;
+
+  grid-area: header-background;
+  width: 100%;
+  height: ${HEADER_HEIGHT}px;
+
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary};
+  border-bottom: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+    display: none;
+  }
+`
+
+export const ToolbarContainer = styled(Box)`
+  z-index: ${({ theme }) => theme.zIndices.header};
+  grid-area: toolbar;
+  position: sticky;
+  left: 0;
+  bottom: 0;
+  height: ${TOOLBAR_HEIGHT}px;
+
+  border-top: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`};
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+    top: ${({ theme }) => theme.space[4] + HEADER_HEIGHT}px;
+    bottom: auto;
+    height: auto;
+
+    border-top: 0;
+    background-color: transparent;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_SIDEBAR_EXTENDED]}) {
+    padding: ${({ theme }) => theme.space[2]}px;
+  }
+`
+
+export const LogoContainer = styled(Stack)`
+  z-index: ${({ theme }) => theme.zIndices.header};
+  position: sticky;
+  top: 0;
+
+  grid-area: logo;
+  height: ${HEADER_HEIGHT}px;
+  padding-left: ${({ theme }) => theme.space[2]}px;
+  justify-content: center;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+    justify-content: start;
+    padding-top: ${({ theme }) => theme.space[2]}px;
+  }
+`
+
+export const WalletContainer = styled(Stack)`
+  z-index: ${({ theme }) => theme.zIndices.header};
+  position: sticky;
+  top: 0;
+
+  grid-area: wallet;
+  justify-self: end;
+  align-self: center;
+  justify-content: center;
+
+  min-width: 200px;
+  height: ${HEADER_HEIGHT}px;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints['S']}) {
+    min-width: 250px;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+    justify-content: start;
+    padding-top: ${({ theme }) => theme.space[2]}px;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_SIDEBAR_EXTENDED]}) {
+    min-width: 350px;
+    padding-top: ${({ theme }) => theme.space[3]}px;
+  }
+`
+
+export const MainContainer = styled(Box)`
+  grid-area: main;
+  align-self: stretch;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+    margin-top: calc(${HEADER_HEIGHT}px * -1);
+    border-left: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`};
+  }
+`
+
+export const FooterContainer = styled(Box)`
+  grid-area: footer;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
+    position: sticky;
+    bottom: 0;
+  }
+`

centrifuge-app/src/components/LogoLink-deprecated.tsx

@@ -0,0 +1,19 @@
+import { Box } from '@centrifuge/fabric'
+import { Link } from 'react-router-dom'
+import { config } from '../config'
+import { useIsAboveBreakpoint } from '../utils/useIsAboveBreakpoint'
+
+const [LogoMark, WordMark] = config.logo
+
+export function LogoLink() {
+  const isMedium = useIsAboveBreakpoint('M')
+  const isXLarge = useIsAboveBreakpoint('XL')
+
+  return (
+    <Link to="/">
+      <Box color="textPrimary" width={[80, 80, 36, 36, 120]}>
+        {isMedium && !isXLarge ? <LogoMark /> : <WordMark />}
+      </Box>
+    </Link>
+  )
+}

centrifuge-app/src/components/LogoLink.tsx

@@ -7,13 +7,11 @@ const [LogoMark, WordMark] = config.logo
 
 export function LogoLink() {
   const isMedium = useIsAboveBreakpoint('M')
-  const isXLarge = useIsAboveBreakpoint('XL')
+  const isLarge = useIsAboveBreakpoint('L')
 
   return (
-    <Link to="/">
-      <Box color="textPrimary" width={[80, 80, 36, 36, 120]}>
-        {isMedium && !isXLarge ? <LogoMark /> : <WordMark />}
-      </Box>
-    </Link>
+    <Box as={Link} to="/" display="block" width={[80, 80, 36, 108]}>
+      {isMedium && !isLarge ? <LogoMark /> : <WordMark />}
+    </Box>
   )
 }