From fb4a4a3cced7aacf7adc237608c2d52b5f34aa23 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Wed, 16 Oct 2024 05:49:47 +0200 Subject: [PATCH 1/8] Add shadow background to nav bar --- centrifuge-app/src/components/Menu/PageLink.tsx | 3 ++- centrifuge-app/src/components/Menu/Toggle.tsx | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/centrifuge-app/src/components/Menu/PageLink.tsx b/centrifuge-app/src/components/Menu/PageLink.tsx index 20e37873bd..51c76fb866 100644 --- a/centrifuge-app/src/components/Menu/PageLink.tsx +++ b/centrifuge-app/src/components/Menu/PageLink.tsx @@ -3,6 +3,7 @@ import { Link, LinkProps, useLocation } from 'react-router-dom' import styled from 'styled-components' import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint' import { prefetchRoute } from '../Root' +import { LIGHT_BACKGROUND } from './Toggle' import { baseButton, primaryButton } from './styles' const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>` @@ -12,7 +13,7 @@ const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>` color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)}; font-size: 14px; font-weight: 500; - background-color: transparent; + background-color: ${({ isActive }) => (isActive ? LIGHT_BACKGROUND : 'transparent')}; border-radius: 4px; &:hover { color: ${({ theme }) => theme.colors.textGold}; diff --git a/centrifuge-app/src/components/Menu/Toggle.tsx b/centrifuge-app/src/components/Menu/Toggle.tsx index 894ab01c63..8737377fe0 100644 --- a/centrifuge-app/src/components/Menu/Toggle.tsx +++ b/centrifuge-app/src/components/Menu/Toggle.tsx @@ -2,6 +2,8 @@ import { Text } from '@centrifuge/fabric' import styled from 'styled-components' import { baseButton, primaryButton } from './styles' +export const LIGHT_BACKGROUND = 'rgba(145, 150, 155, 0.13)' + export const Toggle = styled(Text)<{ isActive?: boolean; stacked?: boolean }>` ${baseButton} ${primaryButton} @@ -10,7 +12,7 @@ export const Toggle = styled(Text)<{ isActive?: boolean; stacked?: boolean }>` stacked ? '1fr' : `${theme.sizes.iconSmall}px 1fr ${theme.sizes.iconSmall}px`}; color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)}; border-radius: 4px; - background-color: transparent; + background-color: ${({ isActive }) => (isActive ? LIGHT_BACKGROUND : 'transparent')}; &:hover { color: ${({ theme }) => theme.colors.textGold}; From fabd5ce05ae81824240566665d79d616cc2dcbd1 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Wed, 16 Oct 2024 07:25:34 +0200 Subject: [PATCH 2/8] Wrap text if too long to avoid overflow --- centrifuge-app/src/components/PoolCard/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index a45f0d3b66..5183fab350 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -56,6 +56,13 @@ const StyledCard = styled(Card)` } ` +const StyledText = styled(Text)` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 70%; +` + const tinlakeTranches = { NS2: { name: 'New Silver 3', @@ -273,13 +280,13 @@ export function PoolCard({ Asset type - {assetClass ?? '-'} + {assetClass ?? '-'} Investor type - + {isTinlakePool ? tinlakeTranches[tinlakeKey].investorType : metaData?.pool?.investorType ?? '-'} - + From 1b8488663349d07783383b2394c4453347ab9dea Mon Sep 17 00:00:00 2001 From: katty barroso Date: Wed, 16 Oct 2024 07:36:23 +0200 Subject: [PATCH 3/8] Match target with design --- .../src/components/Charts/PoolPerformanceChart.tsx | 2 +- centrifuge-app/src/components/PoolCard/index.tsx | 12 ++++++++---- centrifuge-app/src/components/Tooltips.tsx | 4 ++-- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index 507c104aef..6d6e0f1332 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -481,7 +481,7 @@ function CustomLegend({ {hasType(item) ? ( - + ) : ( diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index 5183fab350..a95254d792 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -7,6 +7,7 @@ import { daysBetween } from '../../utils/date' import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting' import { CardHeader } from '../ListItemCardStyles' import { RouterTextLink } from '../TextLink' +import { Tooltips } from '../Tooltips' import { PoolStatus, PoolStatusKey } from './PoolStatus' export type InnerMetadata = { @@ -151,12 +152,15 @@ export function PoolCard({ if (isApr && poolId === NS3_POOL_ID) { return ( - + {text} - - Target - + ) } diff --git a/centrifuge-app/src/components/Tooltips.tsx b/centrifuge-app/src/components/Tooltips.tsx index 411ab874ec..94790e92a8 100644 --- a/centrifuge-app/src/components/Tooltips.tsx +++ b/centrifuge-app/src/components/Tooltips.tsx @@ -348,7 +348,7 @@ export type TooltipsProps = { type?: keyof typeof tooltipText label?: string | React.ReactNode props?: any - size?: 'med' | 'sm' + size?: 'med' | 'sm' | 'xs' color?: string } & Partial> @@ -359,7 +359,7 @@ export function Tooltips({ type, label: labelOverride, size = 'sm', props, color {typeof label === 'string' ? ( From f982b6ee6f5b4aaf23f9af619cfc16eba09b5855 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Wed, 16 Oct 2024 08:05:15 +0200 Subject: [PATCH 4/8] Update color for status info --- fabric/src/theme/tokens/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts index ed707ad8a9..e47dcff574 100644 --- a/fabric/src/theme/tokens/theme.ts +++ b/fabric/src/theme/tokens/theme.ts @@ -1,14 +1,14 @@ import { black, blueScale, gold, grayScale, yellowScale } from './colors' const statusDefault = grayScale[800] -const statusInfo = blueScale[500] +const statusInfo = yellowScale[800] const statusOk = '#519b10' const statusWarning = yellowScale[800] const statusCritical = '#d43f2b' const statusPromote = '#f81071' const statusDefaultBg = grayScale[100] -const statusInfoBg = blueScale[50] +const statusInfoBg = yellowScale[100] const statusOkBg = '#f1f7ec' const statusWarningBg = yellowScale[50] const statusCriticalBg = '#fcf0ee' From f93081158b2d64f1bd6beab3c636307cc654987e Mon Sep 17 00:00:00 2001 From: katty barroso Date: Wed, 16 Oct 2024 08:14:28 +0200 Subject: [PATCH 5/8] Update margins sidebar --- centrifuge-app/src/components/LayoutBase/styles.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx index f838be30a6..d733c50d3f 100644 --- a/centrifuge-app/src/components/LayoutBase/styles.tsx +++ b/centrifuge-app/src/components/LayoutBase/styles.tsx @@ -47,12 +47,13 @@ export const Inner = styled(Grid)` background-color: ${({ theme }) => theme.colors.backgroundInverted}; overflow: visible; height: 100vh; + padding-right: 0px; } @media (min-width: ${({ theme }) => theme.breakpoints['L']}) { width: 15vw; background-color: ${({ theme }) => theme.colors.backgroundInverted}; - padding-left: 12px; + padding-left: 20px; padding-right: 20px; height: 100vh; } @@ -66,8 +67,6 @@ export const MobileBar = styled(Box)` z-index: 3; background-color: ${({ theme }) => theme.colors.backgroundInverted}; padding: 1rem; - border-top: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`}; - display: flex; justify-content: space-between; align-items: center; @@ -182,8 +181,6 @@ export const ToolbarContainer = styled(Box)` bottom: 0; width: 100%; - border-top: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`}; - @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) { top: ${({ theme }) => theme.space[4] + HEADER_HEIGHT}px; bottom: auto; From 2470f91c2649fba11ef0f8a589262b2c86e474d6 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Wed, 16 Oct 2024 09:06:45 +0200 Subject: [PATCH 6/8] Fix hard coded text --- centrifuge-app/src/components/PoolCard/index.tsx | 4 +++- .../src/components/PoolOverview/KeyMetrics.tsx | 11 +++++++---- .../src/components/PoolOverview/TrancheTokenCards.tsx | 5 ++++- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index a95254d792..5e76091da5 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -66,7 +66,7 @@ const StyledText = styled(Text)` const tinlakeTranches = { NS2: { - name: 'New Silver 3', + name: 'New Silver Series 2', tranches: [ { name: 'Junior', apr: '15%', minInvestment: '-' }, { name: 'Senior', apr: '7%', minInvestment: '5K' }, @@ -148,6 +148,8 @@ export function PoolCard({ (key) => tinlakeTranches[key as TinlakeTranchesKey].name === name ) || 'none') as TinlakeTranchesKey + console.log(tinlakeKey, name) + const renderText = (text: string, isApr?: boolean) => { if (isApr && poolId === NS3_POOL_ID) { return ( diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index f36c050f6e..a1e585ff4f 100644 --- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx +++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx @@ -36,9 +36,9 @@ type Tranche = Pick & { type TinlakeDataKey = keyof typeof tinlakeData const tinlakeData = { - '0x53b2d22d07E069a3b132BfeaaD275b10273d381E': '7% - 15% target', - '0x55d86d51Ac3bcAB7ab7d2124931FbA106c8b60c7': '4% - 15% target', - '0x90040F96aB8f291b6d43A8972806e977631aFFdE': '4% - 15% target', + '0x53b2d22d07E069a3b132BfeaaD275b10273d381E': '7% - 15%', + '0x55d86d51Ac3bcAB7ab7d2124931FbA106c8b60c7': '4% - 15%', + '0x90040F96aB8f291b6d43A8972806e977631aFFdE': '4% - 15%', } const getTodayValue = (data: DailyTrancheStateArr | null | undefined): DailyTrancheStateArr | undefined => { @@ -117,7 +117,10 @@ export const KeyMetrics = ({ poolId }: Props) => { value: `${capitalize(startCase(metadata?.pool?.asset?.class))} - ${metadata?.pool?.asset?.subClass}`, }, { - metric: centrifugeTargetAPYs[poolId as keyof typeof centrifugeTargetAPYs] ? 'Target APY' : '30-day APY', + metric: + centrifugeTargetAPYs[poolId as keyof typeof centrifugeTargetAPYs] || tinlakeData[poolId as TinlakeDataKey] + ? 'Target APY' + : '30-day APY', value: tinlakeData[poolId as TinlakeDataKey] ? tinlakeData[poolId as TinlakeDataKey] : centrifugeTargetAPYs[poolId as keyof typeof centrifugeTargetAPYs] diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx index 545cec3efe..36596481e6 100644 --- a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx +++ b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx @@ -20,6 +20,8 @@ type Row = { trancheId: string } +const NS2 = '0x53b2d22d07E069a3b132BfeaaD275b10273d381E' + export const TrancheTokenCards = ({ trancheTokens, poolId, @@ -41,6 +43,7 @@ export const TrancheTokenCards = ({ const calculateApy = (trancheToken: Token) => { if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy) + if (poolId === NS2 && trancheToken.seniority === 0) return '15%' if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0] if (poolId === NS3_POOL_ID && trancheToken.seniority === 0) return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0] @@ -68,7 +71,7 @@ export const TrancheTokenCards = ({ }, }, { - header: 'APY', + header: poolId === DYF_POOL_ID || poolId === NS3_POOL_ID ? 'Target' : 'APY', align: 'left', cell: (row: Row) => { return ( From bc46bacd9ce1fcf1c5f0dfaa2bf970a01f10f830 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Wed, 16 Oct 2024 09:13:15 +0200 Subject: [PATCH 7/8] Add margin top --- centrifuge-app/src/components/LayoutBase/styles.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx index d733c50d3f..dcaec9cabf 100644 --- a/centrifuge-app/src/components/LayoutBase/styles.tsx +++ b/centrifuge-app/src/components/LayoutBase/styles.tsx @@ -148,6 +148,7 @@ export const WalletInner = styled(Stack)` justify-content: flex-end; height: 50px; margin-right: 30px; + margin-top: 15px; } ` @@ -200,12 +201,12 @@ export const ContentWrapper = styled.div` theme.breakpoints['L']}) { margin-left: 7vw; width: calc(100% - 7vw); - margin-top: 0; + margin-top: 10px; } @media (min-width: ${({ theme }) => theme.breakpoints['L']}) { margin-left: 15vw; width: calc(100% - 15vw); - margin-top: 0; + margin-top: 10px; } ` From ba4d7ddb36fa4cca712e2af4b4943702d22bf243 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Wed, 16 Oct 2024 09:41:47 +0200 Subject: [PATCH 8/8] Cleanup --- centrifuge-app/src/components/PoolCard/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index 5e76091da5..0faa0ccd67 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -148,8 +148,6 @@ export function PoolCard({ (key) => tinlakeTranches[key as TinlakeTranchesKey].name === name ) || 'none') as TinlakeTranchesKey - console.log(tinlakeKey, name) - const renderText = (text: string, isApr?: boolean) => { if (isApr && poolId === NS3_POOL_ID) { return (