Add feedback 25/10

- Fix chart to calculate domain instead of rounding - remove junior from tooltip tranche if only one tranche - fix borders - adjust pool list to use grid system (easier to maintain than flex) - remove underline from tooltip for ratings
centrifuge · Oct 25, 2024 · 226fd0a · 226fd0a
1 parent fb41f55
commit 226fd0a
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 68 deletions.
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -276,11 +276,6 @@ function PoolPerformanceChart() {
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)}
                 yAxisId="right"
                 orientation="right"
-                domain={
-                  selectedTabIndex === 0
-                    ? ['auto', 'auto']
-                    : [(dataMin: number) => [Math.round(dataMin)], (dataMax: number) => [Math.round(dataMax)]]
-                }
               />
               <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
               <Tooltip
@@ -290,11 +285,13 @@ function PoolPerformanceChart() {
                       <TooltipContainer>
                         <TooltipTitle>{formatDate(payload[0].payload.day)}</TooltipTitle>
                         {payload.map(({ name, value }, index) => {
+                          const hasSeniorTranche = payload.length >= 3
+
                           const labelMap: Record<string, string> = {
                             nav: 'NAV',
-                            juniorTokenPrice: 'Junior Token Price',
+                            juniorTokenPrice: hasSeniorTranche ? 'Junior Token Price' : 'Token Price',
                             seniorTokenPrice: 'Senior Token Price',
-                            juniorAPY: 'Junior APY',
+                            juniorAPY: hasSeniorTranche ? 'Junior APY' : 'APY',
                             seniorAPY: 'Senior APY',
                             default: 'Cash',
                           }

diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -51,6 +51,7 @@ export type DataTableProps<T = any> = {
   pageSize?: number
   page?: number
   headerStyles?: React.CSSProperties
+  hideBorder?: boolean
 } & GroupedProps
 
 export type OrderBy = 'asc' | 'desc'
@@ -101,6 +102,7 @@ export const DataTable = <T extends Record<string, any>>({
   page = 1,
   headerStyles,
   scrollable = false,
+  hideBorder,
 }: DataTableProps<T>) => {
   const [orderBy, setOrderBy] = React.useState<Record<string, OrderBy>>(
     defaultSortKey ? { [defaultSortKey]: defaultSortOrder } : {}
@@ -127,7 +129,7 @@ export const DataTable = <T extends Record<string, any>>({
   return (
     <TableGrid gridTemplateColumns={templateColumns} gridAutoRows="auto" gap={0} rowGap={0} scrollable={scrollable}>
       {showHeader && (
-        <HeaderRow styles={headerStyles} scrollable={scrollable}>
+        <HeaderRow styles={headerStyles} scrollable={scrollable} hideBorder={hideBorder}>
           {columns.map((col, i) => (
             <HeaderCol key={i} align={col?.align} isLabel={col.isLabel}>
               <Text variant="body3">
@@ -151,6 +153,7 @@ export const DataTable = <T extends Record<string, any>>({
           to={onRowClicked ? onRowClicked(row) : undefined}
           key={keyField ? row[keyField] : i}
           tabIndex={onRowClicked ? 0 : undefined}
+          hideBorder={hideBorder}
         >
           {columns.map((col, index) => (
             <DataCol variant="body2" align={col?.align} key={index} isLabel={col.isLabel}>
@@ -168,6 +171,7 @@ export const DataTable = <T extends Record<string, any>>({
             to={onRowClicked ? onRowClicked(row) : undefined}
             key={keyField ? row[keyField] : i}
             tabIndex={onRowClicked ? 0 : undefined}
+            hideBorder={hideBorder}
           >
             {columns.map((col, index) => (
               <DataCol
@@ -185,7 +189,7 @@ export const DataTable = <T extends Record<string, any>>({
       })}
       {/* summary row is not included in sorting */}
       {summary && (
-        <DataRow data-testId={`row-summary-${groupIndex ?? 0}`}>
+        <DataRow data-testId={`row-summary-${groupIndex ?? 0}`} hideBorder={hideBorder}>
           {columns.map((col, i) => (
             <DataCol variant="body2" key={`${col.sortKey}-${i}`} align={col?.align}>
               {col.cell(summary, i)}
@@ -217,37 +221,37 @@ const Row = styled('div')`
   display: grid;
   grid-template-columns: subgrid;
   grid-column: start / end;
-  box-shadow: ${({ theme }) => `-1px 0 0 0 ${theme.colors.borderPrimary}, 1px 0 0 0 ${theme.colors.borderPrimary}`};
 `
 
-const HeaderRow = styled(Row)<{ styles?: any; scrollable?: boolean }>(({ styles, scrollable }) =>
-  css({
-    backgroundColor: 'backgroundSecondary',
-    borderStyle: 'solid',
-    borderWidth: '1px 0',
-    borderColor: 'borderPrimary',
-    position: scrollable ? 'sticky' : 'static',
-    top: scrollable ? 0 : 'auto',
-    zIndex: scrollable ? 10 : 'auto',
-    borderTopLeftRadius: '8px',
-    borderTopRightRadius: '8px',
-    ...styles,
-  })
+const HeaderRow = styled(Row)<{ styles?: any; scrollable?: boolean; hideBorder?: boolean }>(
+  ({ styles, scrollable, hideBorder }) =>
+    css({
+      backgroundColor: 'backgroundSecondary',
+      borderStyle: 'solid',
+      borderWidth: hideBorder ? 0 : 1,
+      borderColor: hideBorder ? 'transparent' : 'borderPrimary',
+      position: scrollable ? 'sticky' : 'static',
+      top: scrollable ? 0 : 'auto',
+      zIndex: scrollable ? 10 : 'auto',
+      borderTopLeftRadius: hideBorder ? 0 : '8px',
+      borderTopRightRadius: hideBorder ? 0 : '8px',
+      ...styles,
+    })
 )
 
 export const DataRow = styled(Row)<any>`
-  ${({ hoverable, as: comp }) =>
+  ${({ hoverable, as: comp, hideBorder }) =>
     css({
       width: '100%',
       borderBottomStyle: 'solid',
-      borderBottomWidth: '1px',
-      borderBottomColor: 'borderPrimary',
+      borderBottomWidth: hideBorder ? 0 : '1px',
+      borderBottomColor: hideBorder ? 'transparent' : 'borderPrimary',
       borderLeftStyle: 'solid',
-      borderLeftWidth: '1px',
-      borderLeftColor: 'borderPrimary',
+      borderLeftWidth: hideBorder ? 0 : '1px',
+      borderLeftColor: hideBorder ? 'transparent' : 'borderPrimary',
       borderRightStyle: 'solid',
-      borderRightWidth: '1px',
-      borderRightColor: 'borderPrimary',
+      borderRightWidth: hideBorder ? 0 : '1px',
+      borderRightColor: hideBorder ? 'transparent' : 'borderPrimary',
       backgroundColor: 'transparent',
       // using a&:hover caused the background sometimes not to update when switching themes
       '&:hover':

diff --git a/centrifuge-app/src/components/LayoutBase/BasePadding.tsx b/centrifuge-app/src/components/LayoutBase/BasePadding.tsx
@@ -5,7 +5,7 @@ type BaseSectionProps = BoxProps & {
   children: React.ReactNode
 }
 
-export const BASE_PADDING = [2, 2, 3, 3, 5]
+export const BASE_PADDING = [2, 2, 2, 2, 5]
 
 export function BasePadding({ children, ...boxProps }: BaseSectionProps) {
   return (

diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -147,7 +147,7 @@ export const WalletInner = styled(Stack)`
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;
     height: 50px;
-    margin-right: 30px;
+    margin-right: 20px;
     margin-top: 15px;
   }
 `

diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -21,24 +21,14 @@ const StyledRouterTextLink = styled(RouterTextLink)`
 const StyledCard = styled(Card)`
   width: 100%;
   max-width: 100%;
-  margin-right: 12px;
-  margin-bottom: 12px;
   padding: 12px;
-  border: 1px solid rgba(207, 207, 207, 0.5);
+  border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
   height: 350px;
 
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.textPrimary};
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }
-
-  @media (min-width: ${({ theme }) => theme.breakpoints['M']}) {
-    width: auto;
-  }
-
-  @media (min-width: ${({ theme }) => theme.breakpoints['XL']}) {
-    width: auto;
-  }
 `
 
 const StyledText = styled(Text)`

diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
@@ -1,6 +1,6 @@
 import Centrifuge, { Pool, PoolMetadata } from '@centrifuge/centrifuge-js'
 import { useCentrifuge } from '@centrifuge/centrifuge-react'
-import { Box, IconChevronRight, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Grid, IconChevronRight, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useLocation } from 'react-router'
 import styled from 'styled-components'
@@ -81,31 +81,26 @@ export function PoolList() {
     <Stack>
       <Stack>
         <Box overflow="auto">
-          <Box as="ul" role="list" display="flex" flexWrap="wrap">
+          <Grid columns={[1, 2, 2, 3]} as="ul" role="list" gap={3}>
             {metadataIsLoading
               ? Array(6)
                   .fill(true)
                   .map((_, index) => (
-                    <Box as="li" key={index} width={isLarge ? '33%' : isMedium ? '48%' : '100%'}>
+                    <Box as="li" key={index}>
                       <PoolCard />
                     </Box>
                   ))
               : filteredPools.map((pool) => (
-                  <PoolCardBox
-                    as="li"
-                    key={pool.poolId}
-                    status={pool.status}
-                    width={isLarge ? '33%' : isMedium ? '48%' : '100%'}
-                  >
+                  <PoolCardBox as="li" key={pool.poolId} status={pool.status}>
                     <PoolCard {...pool} />
                   </PoolCardBox>
                 ))}
-          </Box>
+          </Grid>
         </Box>
       </Stack>
       {!metadataIsLoading && archivedPools.length > 0 && (
         <>
-          <StyledBox display="flex" alignItems="center" marginBottom={1} as="button">
+          <StyledBox display="flex" alignItems="center" marginTop={2} marginBottom={2} as="button">
             <Text
               style={{ cursor: 'pointer' }}
               color="textSecondary"
@@ -124,22 +119,15 @@ export function PoolList() {
 }
 
 function ArchivedPools({ pools }: { pools: PoolCardProps[] }) {
-  const isMedium = useIsAboveBreakpoint('M')
-  const isLarge = useIsAboveBreakpoint('L')
   return (
     <Stack gap={1} overflow="auto">
-      <Box as="ul" role="list" display="flex" flexWrap="wrap">
+      <Grid columns={[1, 2, 2, 3]} as="ul" role="list" gap={3}>
         {pools.map((pool) => (
-          <PoolCardBox
-            as="li"
-            key={pool.poolId}
-            status={pool.status}
-            width={isLarge ? '33%' : isMedium ? '48%' : '100%'}
-          >
+          <PoolCardBox as="li" key={pool.poolId} status={pool.status}>
             <PoolCard {...pool} isArchive />
           </PoolCardBox>
         ))}
-      </Box>
+      </Grid>
     </Stack>
   )
 }

diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -332,12 +332,13 @@ const AvailableNetworks = ({ poolId }: { poolId: string }) => {
   )
 }
 
-export const RatingPill = ({ agency, reportUrl, reportFile, value, size }: RatingType) => {
+export const RatingPill = ({ agency, reportUrl, reportFile, value }: RatingType) => {
   const theme = useTheme()
   const cent = useCentrifuge()
   return (
     <Box key={`${agency}-${reportUrl}`}>
       <Tooltip
+        triggerStyle={{ textDecoration: 'none' }}
         bodyWidth="maxContent"
         body={
           <TooltipBody

diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
@@ -150,7 +150,13 @@ export const TrancheTokenCards = ({
 
   return (
     <Shelf gap={3}>
-      <Box marginY={2} backgroundColor="white" borderRadius="card" width="100%" overflow="auto">
+      <Box
+        marginY={2}
+        backgroundColor="white"
+        width="100%"
+        overflow="auto"
+        borderBottom={`1px solid ${theme.colors.borderPrimary}`}
+      >
         <DataTable
           headerStyles={{
             backgroundColor: 'white',
@@ -159,6 +165,7 @@ export const TrancheTokenCards = ({
           }}
           columns={columns}
           data={dataTable}
+          hideBorder
         />
       </Box>
     </Shelf>

diff --git a/fabric/src/components/Tooltip/index.tsx b/fabric/src/components/Tooltip/index.tsx
@@ -15,6 +15,7 @@ export type TooltipProps = TextProps & {
   delay?: number
   bodyWidth?: string | number
   bodyPadding?: string | number
+  triggerStyle?: React.CSSProperties
 }
 
 const StyledTrigger = styled(Text)`
@@ -79,6 +80,7 @@ export function Tooltip({
   delay = 1000,
   bodyWidth,
   bodyPadding,
+  triggerStyle,
   ...textProps
 }: TooltipProps) {
   const triggerRef = React.useRef<HTMLButtonElement>(null)
@@ -92,7 +94,7 @@ export function Tooltip({
 
   return (
     <>
-      <StyledTrigger ref={triggerRef} {...triggerProps} tabIndex={0} {...textProps}>
+      <StyledTrigger ref={triggerRef} {...triggerProps} tabIndex={0} {...textProps} style={triggerStyle}>
         {children}
       </StyledTrigger>
       {state.isOpen && (

diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
@@ -31,7 +31,7 @@ const colors = {
   backgroundThumbnail: grayScale[500],
   backgroundInverted: grayScale[800],
 
-  borderPrimary: grayScale[50],
+  borderPrimary: grayScale[100],
   borderSecondary: grayScale[300],
 
   statusDefault,