Add pool overview design feedback

centrifuge · Oct 9, 2024 · c88f2cf · c88f2cf
1 parent d7d8215
commit c88f2cf
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 37 deletions.
diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx
@@ -27,10 +27,29 @@ type IssuerSectionProps = {
   metadata: Partial<PoolMetadata> | undefined
 }
 
+const StyledBox = styled(Box)`
+  padding: 30px 20px;
+  &:hover {
+    background: ${SUBTLE_GRAY};
+    border-radius: 0px;
+  }
+`
+
+const HoverBox = styled(StyledBox)`
+  padding: 8px 22px;
+  border-radius: 4px;
+  background-color: ${SUBTLE_GRAY};
+  &:hover {
+    a {
+      color: ${({ theme }) => theme.colors.textGold};
+    }
+  }
+`
+
 const reportLinks = [
   { label: 'Balance sheet', href: '/balance-sheet', icon: <IconBalanceSheet color="white" /> },
   { label: 'Profit & loss', href: '/profit-and-loss', icon: <IconProfitAndLoss color="white" /> },
-  { label: 'Cashflow statement', href: '/cash-flow-statement', icon: <IconCashflow color="white" /> },
+  { label: 'Cash flow statement', href: '/cash-flow-statement', icon: <IconCashflow color="white" /> },
 ]
 
 const StyledRouterTextLink = styled(RouterTextLink)`
@@ -54,32 +73,29 @@ export function ReportDetails({ metadata }: IssuerSectionProps) {
         <Text color="white" variant="heading4">
           Reports
         </Text>
-        <Box backgroundColor={SUBTLE_GRAY} padding="8px 22px" borderRadius="4px">
+        <HoverBox backgroundColor={SUBTLE_GRAY}>
           <StyledRouterTextLink to={`${pathname}/reporting`}>View all</StyledRouterTextLink>
-        </Box>
+        </HoverBox>
       </Box>
 
-      <Box marginY={2} backgroundColor={SUBTLE_GRAY} padding={2} borderRadius={10}>
+      <Box marginY={2} backgroundColor={SUBTLE_GRAY} borderRadius={10}>
         {reportLinks.map((link, i) => (
-          <Box
-            borderBottom={i === reportLinks.length - 1 ? null : `2px solid ${SUBTLE_GRAY}`}
-            display="flex"
-            alignItems="center"
-            justifyContent="space-between"
-            paddingY={3}
-          >
-            <Box display="flex" alignItems="center">
-              {link.icon}
-              <StyledRouterTextLink
-                style={{ marginLeft: 8 }}
-                to={`${pathname}/reporting${link.href}`}
-                key={`${link.label}-${i}`}
-              >
-                {link.label}
-              </StyledRouterTextLink>
-            </Box>
-            <IconChevronRight color="white" />
-          </Box>
+          <StyledRouterTextLink to={`${pathname}/reporting${link.href}`} key={`${link.label}-${i}`}>
+            <StyledBox
+              borderBottom={i === reportLinks.length - 1 ? null : `2px solid ${SUBTLE_GRAY}`}
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Box display="flex" alignItems="center">
+                {link.icon}
+                <Text color="white" style={{ marginLeft: 4 }}>
+                  {link.label}
+                </Text>
+              </Box>
+              <IconChevronRight color="white" />
+            </StyledBox>
+          </StyledRouterTextLink>
         ))}
       </Box>
 
@@ -109,7 +125,7 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) {
       show: !!metadata?.pool?.issuer.email,
     },
     {
-      label: 'Executive Summary',
+      label: 'Executive summary',
       show: !!metadata?.pool?.links.executiveSummary,
       onClick: () => setIsDialogOpen(true),
     },

diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -204,7 +204,7 @@ export const ContentWrapper = styled.div`
   }
 
   @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
-    margin-left: 14vw;
+    margin-left: 15vw;
     width: calc(100% - 15vw);
     margin-top: 0;
   }

diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -1,7 +1,6 @@
 import { CurrencyBalance, DailyTrancheState, Price } from '@centrifuge/centrifuge-js'
 import { NetworkIcon, formatBalanceAbbreviated } from '@centrifuge/centrifuge-react'
 import { Box, Card, IconArrowRightWhite, IconMoody, IconSp, Shelf, Stack, Text, Tooltip } from '@centrifuge/fabric'
-import { BN } from 'bn.js'
 import capitalize from 'lodash/capitalize'
 import startCase from 'lodash/startCase'
 import { useMemo } from 'react'
@@ -66,18 +65,14 @@ export const KeyMetrics = ({ poolId }: Props) => {
   const poolFees = usePoolFees(poolId)
   const tranchesIds = pool.tranches.map((tranche) => tranche.id)
   const dailyTranches = useDailyTranchesStates(tranchesIds)
-  const totalNav = pool.nav.total.toFloat()
   const theme = useTheme()
   const averageMaturity = useAverageMaturity(poolId)
 
-  const pendingFees = useMemo(() => {
-    return new CurrencyBalance(
-      poolFees?.map((f) => f.amounts.pending).reduce((acc, f) => acc.add(f), new BN(0)) ?? new BN(0),
-      pool.currency.decimals
+  const expenseRatio = useMemo(() => {
+    return (
+      poolFees?.map((f) => f.amounts?.percentOfNav.toPercent().toNumber()).reduce((acc, f) => acc + (f ?? 0), 0) ?? 0
     )
-  }, [poolFees, pool.currency.decimals])
-
-  const expenseRatio = (pendingFees.toFloat() / totalNav) * 100
+  }, [poolFees])
 
   const tranchesAPY = useMemo(() => {
     const thirtyDayAPY = getTodayValue(dailyTranches)
@@ -186,7 +181,7 @@ export const KeyMetrics = ({ poolId }: Props) => {
 
     {
       metric: <Tooltips type="expenseRatio" size="med" />,
-      value: expenseRatio ? `${formatBalance(expenseRatio * 100, '', 2)}%` : '-',
+      value: expenseRatio ? `${formatBalance(expenseRatio, '', 2)}%` : '-',
     },
   ]
 
@@ -201,7 +196,6 @@ export const KeyMetrics = ({ poolId }: Props) => {
         </Box>
         <Box marginTop={2}>
           {metrics.map(({ metric, value }, index) => {
-            console.log(metric, value)
             return (
               <Box key={index} display="flex" justifyContent="space-between" paddingY={1}>
                 <Text color="textSecondary" variant="body2" textOverflow="ellipsis" whiteSpace="nowrap">

diff --git a/centrifuge-app/src/components/Tooltips.tsx b/centrifuge-app/src/components/Tooltips.tsx
@@ -339,7 +339,7 @@ export const tooltipText = {
     body: 'The target APY for the tranche.',
   },
   expenseRatio: {
-    label: 'Expense Ratio',
+    label: 'Expense ratio',
     body: 'The operating expenses of the fund as a percentage of the total NAV',
   },
 }