Add nav bar style changes

centrifuge · Oct 15, 2024 · 716c711 · 716c711
1 parent 1d3a10d
commit 716c711
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 13 deletions.
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -174,7 +174,7 @@ function PoolPerformanceChart() {
           seniorAPY: formattedSeniorAPY,
         }
       }) || [],
-    [truncatedPoolStates, todayAssetValue, pool, range]
+    [truncatedPoolStates, todayAssetValue, pool, range, todayJuniorApy, todaySeniorApy]
   )
 
   const today = {

diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -52,7 +52,8 @@ export const Inner = styled(Grid)`
   @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
     width: 15vw;
     background-color: ${({ theme }) => theme.colors.backgroundInverted};
-    padding-left: 16px;
+    padding-left: 12px;
+    padding-right: 20px;
     height: 100vh;
   }
 `
@@ -100,7 +101,7 @@ export const LogoContainer = styled(Stack)`
 
   height: ${HEADER_HEIGHT}px;
   justify-content: center;
-  padding-left: 12px;
+  padding-left: 8px;
 
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
       theme.breakpoints['L']}) {
@@ -111,7 +112,7 @@ export const LogoContainer = styled(Stack)`
 
   @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
     justify-content: start;
-    padding-top: ${({ theme }) => theme.space[2]}px;
+    padding-top: ${({ theme }) => theme.space[3]}px;
   }
 `
 
@@ -166,6 +167,7 @@ export const FooterContainer = styled(Box)`
   position: sticky;
   bottom: 0;
   width: 100%;
+  padding-left: 4px;
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     position: sticky;

diff --git a/centrifuge-app/src/components/Menu/PageLink.tsx b/centrifuge-app/src/components/Menu/PageLink.tsx
@@ -9,13 +9,14 @@ const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
   ${baseButton}
   ${primaryButton}
   grid-template-columns: ${({ stacked, theme }) => (stacked ? '1fr' : `${theme.sizes.iconSmall}px 1fr`)};
-  color: ${({ isActive, theme }) =>
-    isActive ? theme.colors.textGold : theme.colors.textInverted}; /* Example styling */
+  color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)};
   font-size: 14px;
   font-weight: 500;
   background-color: transparent;
+  border-radius: 4px;
   &:hover {
     color: ${({ theme }) => theme.colors.textGold};
+    background-color: rgba(145, 150, 155, 0.13);
   }
 `
 

diff --git a/centrifuge-app/src/components/Menu/Toggle.tsx b/centrifuge-app/src/components/Menu/Toggle.tsx
@@ -9,8 +9,11 @@ export const Toggle = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
   grid-template-columns: ${({ stacked, theme }) =>
     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;
+
   &:hover {
-    color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)};
+    color: ${({ theme }) => theme.colors.textGold};
+    background-color: rgba(145, 150, 155, 0.13);
   }
 `
diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -171,7 +171,7 @@ export function PoolCard({
         }
       })
       .reverse()
-  }, [calculateApy, getTinlakeMinInvestment])
+  }, [calculateApy, getTinlakeMinInvestment, isTinlakePool, metaData?.tranches, tinlakeObjKey, tranches])
 
   return (
     <RouterTextLink to={`${poolId}`} style={{ textDecoration: 'none' }}>

diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
@@ -80,7 +80,7 @@ export const TrancheTokenCards = ({
         ),
       },
     ]
-  }, [pool, poolId, isTinlakePool, daysSinceCreation])
+  }, [pool, poolId, isTinlakePool, daysSinceCreation, metadata])
 
   const columns = useMemo(() => {
     return columnConfig.map((col, index) => {

diff --git a/centrifuge-app/src/components/Report/PoolReportPage.tsx b/centrifuge-app/src/components/Report/PoolReportPage.tsx
@@ -34,10 +34,6 @@ function PoolDetailReporting({ poolId, isReportingTab }: { poolId: string; isRep
   const pool = usePool(poolId) as Pool
   const contentWrapperRef = React.useRef<HTMLDivElement>(null)
 
-  if (!poolId || !pool) {
-    return <Spinner mt={2} />
-  }
-
   // We want to scroll within the table and not the page,
   // this way we can keep the filters on top of the page while scrolling on the table
   React.useEffect(() => {
@@ -54,6 +50,10 @@ function PoolDetailReporting({ poolId, isReportingTab }: { poolId: string; isRep
     }
   }, [isReportingTab])
 
+  if (!poolId || !pool) {
+    return <Spinner mt={2} />
+  }
+
   return (
     <div ref={contentWrapperRef}>
       <React.Suspense fallback={<Spinner mt={2} />}>