From 983da98f4f1f3f43ef64f1eed2aef502257b2535 Mon Sep 17 00:00:00 2001 From: Katty Barroso <51223655+kattylucy@users.noreply.github.com> Date: Wed, 16 Oct 2024 09:52:45 +0200 Subject: [PATCH] Add shadow background to nav bar (#2502) * Add shadow background to nav bar * Wrap text if too long to avoid overflow * Match target with design * Update color for status info * Update margins sidebar * Fix hard coded text * Add margin top * Cleanup --- .../Charts/PoolPerformanceChart.tsx | 2 +- .../src/components/LayoutBase/styles.tsx | 12 ++++----- .../src/components/Menu/PageLink.tsx | 3 ++- centrifuge-app/src/components/Menu/Toggle.tsx | 4 ++- .../src/components/PoolCard/index.tsx | 27 +++++++++++++------ .../components/PoolOverview/KeyMetrics.tsx | 11 +++++--- .../PoolOverview/TrancheTokenCards.tsx | 5 +++- centrifuge-app/src/components/Tooltips.tsx | 4 +-- fabric/src/theme/tokens/theme.ts | 4 +-- 9 files changed, 45 insertions(+), 27 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/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx index f838be30a6..dcaec9cabf 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; @@ -149,6 +148,7 @@ export const WalletInner = styled(Stack)` justify-content: flex-end; height: 50px; margin-right: 30px; + margin-top: 15px; } ` @@ -182,8 +182,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; @@ -203,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; } ` 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}; diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index a45f0d3b66..0faa0ccd67 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 = { @@ -56,9 +57,16 @@ 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', + name: 'New Silver Series 2', tranches: [ { name: 'Junior', apr: '15%', minInvestment: '-' }, { name: 'Senior', apr: '7%', minInvestment: '5K' }, @@ -144,12 +152,15 @@ export function PoolCard({ if (isApr && poolId === NS3_POOL_ID) { return ( - + {text} - - Target - + ) } @@ -273,13 +284,13 @@ export function PoolCard({ Asset type - {assetClass ?? '-'} + {assetClass ?? '-'} Investor type - + {isTinlakePool ? tinlakeTranches[tinlakeKey].investorType : metaData?.pool?.investorType ?? '-'} - + 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 ( 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' ? ( 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'