Add full background height to asset detail (#2256)

centrifuge · Jul 2, 2024 · 22b57c9 · 22b57c9
1 parent 8f2279d
commit 22b57c9
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 18 deletions.
diff --git a/centrifuge-app/src/components/PageSummary.tsx b/centrifuge-app/src/components/PageSummary.tsx
@@ -14,7 +14,7 @@ export const PageSummary: React.FC<Props> = ({ data, children }) => {
   const theme = useTheme()
   return (
     <Shelf
-      bg={theme.colors.backgroundSecondary}
+      bg={theme.colors.backgroundPrimary}
       gap="6"
       pl={[2, 6]}
       py="3"

diff --git a/centrifuge-app/src/pages/Loan/index.tsx b/centrifuge-app/src/pages/Loan/index.tsx
@@ -16,7 +16,7 @@ import {
 } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useParams, useRouteMatch } from 'react-router'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import usdcLogo from '../../assets/images/usdc-logo.svg'
 import { AssetSummary } from '../../components/AssetSummary'
 import AssetPerformanceChart from '../../components/Charts/AssetPerformanceChart'
@@ -49,14 +49,28 @@ import { TransactionTable } from './TransactionTable'
 import { TransferDebtForm } from './TransferDebtForm'
 import { formatNftAttribute } from './utils'
 
+const FullHeightLayoutBase = styled(LayoutBase)`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+`
+
+const FullHeightStack = styled(Stack)`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`
+
 export default function LoanPage() {
   return (
-    <LayoutBase>
-      <Loan />
-    </LayoutBase>
+    <FullHeightLayoutBase>
+      <FullHeightStack>
+        <Loan />
+      </FullHeightStack>
+    </FullHeightLayoutBase>
   )
 }
-
 function isTinlakeLoan(loan: LoanType | TinlakeLoan): loan is TinlakeLoan {
   return loan.poolId.startsWith('0x')
 }
@@ -132,7 +146,7 @@ function Loan() {
   const originationDate = loan && 'originationDate' in loan ? new Date(loan?.originationDate).toISOString() : undefined
 
   return (
-    <Stack>
+    <FullHeightStack>
       <Box mt={2} ml={2}>
         <RouterLinkButton to={`${basePath}/${poolId}/assets`} small icon={IconChevronLeft} variant="tertiary">
           {poolMetadata?.pool?.name ?? 'Pool assets'}
@@ -179,7 +193,7 @@ function Loan() {
       {loan &&
         pool &&
         (loan.pricing.maturityDate || templateMetadata?.keyAttributes?.length || 'oracle' in loan.pricing) && (
-          <LayoutSection bg={theme.colors.backgroundSecondary} pt={2} pb={4}>
+          <LayoutSection bg={theme.colors.backgroundSecondary} pt={2} pb={4} flex={1}>
             <Grid height="fit-content" gridTemplateColumns={['1fr', '66fr 34fr']} gap={[2, 2]}>
               <React.Suspense fallback={<Spinner />}>
                 <AssetPerformanceChart pool={pool} poolId={poolId} loanId={loanId} />
@@ -307,6 +321,6 @@ function Loan() {
           </Shelf>
         </PageSection>
       ) : null}
-    </Stack>
+    </FullHeightStack>
   )
 }
diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx
@@ -3,7 +3,7 @@ import { Box, Button, Card, Grid, IconFileText, Stack, Text, TextWithPlaceholder
 import Decimal from 'decimal.js-light'
 import * as React from 'react'
 import { useParams } from 'react-router'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { InvestRedeemProps } from '../../../components/InvestRedeem/InvestRedeem'
 import { InvestRedeemDrawer } from '../../../components/InvestRedeem/InvestRedeemDrawer'
 import { IssuerDetails, ReportDetails } from '../../../components/IssuerSection'
@@ -43,14 +43,35 @@ export type Token = {
   yield30DaysAnnualized?: string | null
 }
 
+const FullHeightLayoutBase = styled(LayoutBase)`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+`
+
+const FullHeightStack = styled(Stack)`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`
+
+const FullHeightLayoutSection = styled(LayoutSection)`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`
+
 export function PoolDetailOverviewTab() {
   return (
-    <LayoutBase>
-      <PoolDetailHeader />
-      <LoadBoundary>
-        <PoolDetailOverview />
-      </LoadBoundary>
-    </LayoutBase>
+    <FullHeightLayoutBase>
+      <FullHeightStack>
+        <PoolDetailHeader />
+        <LoadBoundary>
+          <PoolDetailOverview />
+        </LoadBoundary>
+      </FullHeightStack>
+    </FullHeightLayoutBase>
   )
 }
 
@@ -107,7 +128,7 @@ export function PoolDetailOverview() {
     .reverse()
 
   return (
-    <LayoutSection bg={theme.colors.backgroundSecondary} pt={2} pb={4}>
+    <FullHeightLayoutSection bg={theme.colors.backgroundSecondary} pt={2} pb={4}>
       <Grid height="fit-content" gridTemplateColumns={['1fr', '1fr', '66fr minmax(275px, 33fr)']} gap={[2, 2, 3]}>
         <React.Suspense fallback={<Spinner />}>
           <PoolPerformance />
@@ -197,7 +218,7 @@ export function PoolDetailOverview() {
           </React.Suspense>
         </>
       )}
-    </LayoutSection>
+    </FullHeightLayoutSection>
   )
 }