From 226fd0a429481dae672bd7e993271fe71153e8c9 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Fri, 25 Oct 2024 10:15:32 +0200 Subject: [PATCH] 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 --- .../Charts/PoolPerformanceChart.tsx | 11 ++-- centrifuge-app/src/components/DataTable.tsx | 50 ++++++++++--------- .../src/components/LayoutBase/BasePadding.tsx | 2 +- .../src/components/LayoutBase/styles.tsx | 2 +- .../src/components/PoolCard/index.tsx | 12 +---- centrifuge-app/src/components/PoolList.tsx | 30 ++++------- .../components/PoolOverview/KeyMetrics.tsx | 3 +- .../PoolOverview/TrancheTokenCards.tsx | 9 +++- fabric/src/components/Tooltip/index.tsx | 4 +- fabric/src/theme/tokens/theme.ts | 2 +- 10 files changed, 57 insertions(+), 68 deletions(-) diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index 6d6e0f1332..bd96597727 100644 --- 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)]] - } /> {formatDate(payload[0].payload.day)} {payload.map(({ name, value }, index) => { + const hasSeniorTranche = payload.length >= 3 + const labelMap: Record = { 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 index bf28c0b8ad..90f907b61e 100644 --- a/centrifuge-app/src/components/DataTable.tsx +++ b/centrifuge-app/src/components/DataTable.tsx @@ -51,6 +51,7 @@ export type DataTableProps = { pageSize?: number page?: number headerStyles?: React.CSSProperties + hideBorder?: boolean } & GroupedProps export type OrderBy = 'asc' | 'desc' @@ -101,6 +102,7 @@ export const DataTable = >({ page = 1, headerStyles, scrollable = false, + hideBorder, }: DataTableProps) => { const [orderBy, setOrderBy] = React.useState>( defaultSortKey ? { [defaultSortKey]: defaultSortOrder } : {} @@ -127,7 +129,7 @@ export const DataTable = >({ return ( {showHeader && ( - + {columns.map((col, i) => ( @@ -151,6 +153,7 @@ export const DataTable = >({ to={onRowClicked ? onRowClicked(row) : undefined} key={keyField ? row[keyField] : i} tabIndex={onRowClicked ? 0 : undefined} + hideBorder={hideBorder} > {columns.map((col, index) => ( @@ -168,6 +171,7 @@ export const DataTable = >({ to={onRowClicked ? onRowClicked(row) : undefined} key={keyField ? row[keyField] : i} tabIndex={onRowClicked ? 0 : undefined} + hideBorder={hideBorder} > {columns.map((col, index) => ( >({ })} {/* summary row is not included in sorting */} {summary && ( - + {columns.map((col, i) => ( {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)` - ${({ 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 index 54e8662da8..7758741aba 100644 --- 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 index dcaec9cabf..9faef617e6 100644 --- 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 index 7df44ae0d0..1e97b551cc 100644 --- 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 index 39b9ffe8ec..0aac5b5e68 100644 --- 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() { - + {metadataIsLoading ? Array(6) .fill(true) .map((_, index) => ( - + )) : filteredPools.map((pool) => ( - + ))} - + {!metadataIsLoading && archivedPools.length > 0 && ( <> - + - + {pools.map((pool) => ( - + ))} - + ) } diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index 0307b399c4..4b82baa2a5 100644 --- 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 ( - + diff --git a/fabric/src/components/Tooltip/index.tsx b/fabric/src/components/Tooltip/index.tsx index ae0b10090f..725f0e8455 100644 --- 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(null) @@ -92,7 +94,7 @@ export function Tooltip({ return ( <> - + {children} {state.isOpen && ( diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts index e47dcff574..389ec224f3 100644 --- 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,