Pool overview page redesign (#2402)

* Remove alternative theme * Refactor base layout * Add fixes to pools * Update menu * Bug fixes * Calculate YoY * Fix linter errors * Design fixes * Add review feedback * Fix storybook colors * TS feeback * Add margin transaction history
centrifuge · Sep 3, 2024 · 6908e7b · 6908e7b
1 parent 663eb16
commit 6908e7b
Show file tree

Hide file tree

Showing 74 changed files with 613 additions and 842 deletions.
diff --git a/centrifuge-app/src/components/CardTotalValueLocked.tsx b/centrifuge-app/src/components/CardTotalValueLocked.tsx
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -79,7 +79,7 @@ function PoolPerformanceChart() {
         }
         return { day: new Date(day.timestamp), nav: Number(nav), price: Number(price) }
       }) || [],
-    [isSingleTranche, truncatedPoolStates]
+    [isSingleTranche, truncatedPoolStates, todayAssetValue, todayPrice]
   )
 
   const today = {

diff --git a/centrifuge-app/src/components/DebugFlags/config.ts b/centrifuge-app/src/components/DebugFlags/config.ts
@@ -38,7 +38,6 @@ export type Key =
   | 'persistDebugFlags'
   | 'showUnusedFlags'
   | 'allowInvestBelowMin'
-  | 'alternativeTheme'
   | 'editPoolConfig'
   | 'editPoolVisibility'
   | 'showAdvancedAccounts'
@@ -59,11 +58,6 @@ export const flagsConfig = {
     default: false,
     type: 'checkbox',
   },
-  alternativeTheme: {
-    alwaysShow: true,
-    default: false,
-    type: 'checkbox',
-  },
   convertAddress: {
     Component: ConvertAddressDialogWithButton,
     alwaysShow: true,

diff --git a/centrifuge-app/src/components/DemoBanner.tsx b/centrifuge-app/src/components/DemoBanner.tsx
@@ -25,14 +25,14 @@ export const DemoBanner = () => {
       isOpen={isOpen}
       onClose={() => onClose()}
       title={
-        <Text as="h3" color="textInverted" variant="heading4">
+        <Text as="h3" color="white" variant="heading4">
           Welcome to the demo environment of the Centrifuge App. All data and wallet transactions are not real as this
           is purely a testing environment. Read{' '}
           <Text
             target="_blank"
             as="a"
             href="https://centrifuge.hackmd.io/@Anna/H1ylqpRQj"
-            color="textInverted"
+            color="white"
             variant="heading4"
             display="inline"
             textDecoration="underline"

diff --git a/centrifuge-app/src/components/Footer.tsx b/centrifuge-app/src/components/Footer.tsx
@@ -1,38 +1,37 @@
 import { Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
-import styled, { useTheme } from 'styled-components'
+import styled from 'styled-components'
 import { InvestmentDisclaimerDialog } from './Dialogs/InvestmentDisclaimerDialog'
 
 export const Footer = () => {
-  const theme = useTheme()
   const [isDialogOpen, setIsDialogOpen] = React.useState(false)
 
   return (
     <>
       <InvestmentDisclaimerDialog open={isDialogOpen} onClose={() => setIsDialogOpen(false)} />
-      <Stack as="footer" px={2} py="12px" gap={1} width="100%" background={theme.colors.backgroundPrimary}>
+      <Stack as="footer" gap={1} width="100%">
         <UnstyledLink href="mailto:support@centrifuge.io">
-          <Text textOverflow="ellipsis" variant="body4">
+          <Text textOverflow="ellipsis" variant="body4" color="textInverted">
             Need help?
           </Text>
         </UnstyledLink>
         <UnstyledLink href="https://docs.centrifuge.io/">
-          <Text textOverflow="ellipsis" variant="body4">
+          <Text textOverflow="ellipsis" variant="body4" color="textInverted">
             Documentation
           </Text>
         </UnstyledLink>
         <UntyledButton onClick={() => setIsDialogOpen(true)}>
-          <Text textOverflow="ellipsis" variant="body4">
+          <Text textOverflow="ellipsis" variant="body4" color="textInverted">
             Investment disclaimer
           </Text>
         </UntyledButton>
         <UnstyledLink target="_blank" href="https://centrifuge.io/data-privacy-policy/">
-          <Text textOverflow="ellipsis" variant="body4">
+          <Text textOverflow="ellipsis" variant="body4" color="textInverted">
             Data privacy policy
           </Text>
         </UnstyledLink>
         <UnstyledLink target="_blank" href="https://centrifuge.io/imprint/">
-          <Text textOverflow="ellipsis" variant="body4">
+          <Text textOverflow="ellipsis" variant="body4" color="textInverted">
             Imprint
           </Text>
         </UnstyledLink>

diff --git a/centrifuge-app/src/components/LayoutBase/LayoutSection.tsx b/centrifuge-app/src/components/LayoutBase/LayoutSection.tsx
@@ -12,7 +12,7 @@ type Props = {
 
 export function LayoutSection({ title, titleAddition, subtitle, headerRight, children, ...boxProps }: Props) {
   return (
-    <BasePadding as="section" gap={2} {...boxProps}>
+    <BasePadding as="section" gap={2} pt={20} pb={20} {...boxProps}>
       {(title || titleAddition || subtitle || headerRight) && (
         <Shelf justifyContent="space-between" as="header" maxWidth="mainContent">
           <Stack>

diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx
@@ -1,66 +1,51 @@
 import { WalletMenu } from '@centrifuge/centrifuge-react'
 import { Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
+import { Outlet } from 'react-router'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { Footer } from '../Footer'
-import { LoadBoundary } from '../LoadBoundary'
-import { LogoLink } from '../LogoLink'
+import { LogoLink } from '../LogoLink-deprecated'
 import { Menu } from '../Menu'
 import { BasePadding } from './BasePadding'
 import {
+  ContentWrapper,
   FooterContainer,
-  HeaderBackground,
   Inner,
   LogoContainer,
-  MainContainer,
   Root,
   ToolbarContainer,
   WalletContainer,
   WalletInner,
   WalletPositioner,
 } from './styles'
 
-type LayoutBaseProps = {
-  children?: React.ReactNode
-  gap?: number | number[]
-}
-
-export function LayoutBase({ children, gap }: LayoutBaseProps) {
+export function LayoutBase(): JSX.Element {
   const isMedium = useIsAboveBreakpoint('M')
-
   return (
     <Root>
+      <WalletContainer>
+        <WalletPositioner>
+          <WalletInner>
+            <WalletMenu />
+          </WalletInner>
+        </WalletPositioner>
+      </WalletContainer>
       <Inner>
-        <HeaderBackground />
-
         <LogoContainer>
-          <LogoLink />
+          <LogoLink></LogoLink>
         </LogoContainer>
-
-        <WalletContainer px={[2, 2, 3, 3, 5]}>
-          <WalletPositioner>
-            <WalletInner minWidth={[200, 264]}>
-              <WalletMenu />
-            </WalletInner>
-          </WalletPositioner>
-        </WalletContainer>
-
         <ToolbarContainer as="aside">
           <Menu />
         </ToolbarContainer>
-
-        <LoadBoundary>
-          <MainContainer as="main" gap={gap}>
-            {children}
-          </MainContainer>
-        </LoadBoundary>
-
         {isMedium && (
           <FooterContainer>
             <Footer />
           </FooterContainer>
         )}
       </Inner>
+      <ContentWrapper>
+        <Outlet />
+      </ContentWrapper>
     </Root>
   )
 }