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
centrifuge · Oct 16, 2024 · 983da98 · 983da98
1 parent 8090b2b
commit 983da98
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 27 deletions.
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -481,7 +481,7 @@ function CustomLegend({
                 <Dot color={item.color} />
                 {hasType(item) ? (
                   <Text variant="body3" style={{ lineHeight: 1.8 }}>
-                    <Tooltips type={item.type} label={item.label} color="textSecondary" />
+                    <Tooltips type={item.type} label={item.label} color="textSecondary" size="sm" />
                   </Text>
                 ) : (
                   <Text color="textSecondary" variant="body3" style={{ lineHeight: 1.8 }}>

diff --git 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
@@ -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
@@ -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
@@ -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 (
         <Box display="flex">
-          <Text fontWeight={500} as="h2" variant={isOneTranche ? 'heading1' : 'body1'} style={{ width: 35 }}>
+          <Text
+            fontWeight={500}
+            as="h2"
+            variant={isOneTranche ? 'heading1' : 'body1'}
+            style={{ width: 35, marginRight: 4 }}
+          >
             {text}
           </Text>
-          <Text variant="label2" style={{ alignSelf: 'flex-end', marginLeft: '4px' }}>
-            Target
-          </Text>
+          <Tooltips type="targetAPY" color="textSecondary" label="Target" size="xs" />
         </Box>
       )
     }
@@ -273,13 +284,13 @@ export function PoolCard({
 
         <Box display="flex" justifyContent="space-between" mt={1}>
           <Text variant="body3">Asset type</Text>
-          <Text variant="body3">{assetClass ?? '-'}</Text>
+          <StyledText variant="body3">{assetClass ?? '-'}</StyledText>
         </Box>
         <Box display="flex" justifyContent="space-between">
           <Text variant="body3">Investor type</Text>
-          <Text variant="body3">
+          <StyledText variant="body3">
             {isTinlakePool ? tinlakeTranches[tinlakeKey].investorType : metaData?.pool?.investorType ?? '-'}
-          </Text>
+          </StyledText>
         </Box>
       </StyledCard>
     </RouterTextLink>

diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -36,9 +36,9 @@ type Tranche = Pick<DailyTrancheState, 'id'> & {
 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
@@ -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
@@ -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<Pick<TextProps, 'style' | 'body'>>
 
@@ -359,7 +359,7 @@ export function Tooltips({ type, label: labelOverride, size = 'sm', props, color
       {typeof label === 'string' ? (
         <Text
           textAlign="left"
-          variant={size === 'sm' ? 'label2' : 'label1'}
+          variant={size === 'sm' ? 'label2' : size === 'xs' ? 'body4' : 'label1'}
           color={size === 'sm' && !color ? 'textPrimary' : 'textSecondary'}
           fontWeight={size === 'sm' ? 'inherit' : 400}
         >

diff --git 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'