diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
index 507c104ae..6d6e0f133 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 f838be30a..dcaec9cab 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 20e37873b..51c76fb86 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 894ab01c6..8737377fe 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 a45f0d3b6..0faa0ccd6 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 f36c050f6..a1e585ff4 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 545cec3ef..36596481e 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 411ab874e..94790e92a 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 ed707ad8a..e47dcff57 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'