address pr feedback

centrifuge · Dec 5, 2023 · a0a7719 · a0a7719
1 parent ef8433b
commit a0a7719
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx
@@ -80,11 +80,13 @@ export function CardPortfolioValue() {
         </Stack>
 
         <Stack gap={1}>
-          <Shelf justifyContent="flex-end" pr="8px">
+          <Shelf justifyContent="flex-end" pr="20px">
             {rangeFilters.map((rangeFilter, index) => (
               <>
                 <RangeFilterButton gap={1} onClick={() => setRange(rangeFilter)}>
-                  <Text variant="body3">{rangeFilter.label}</Text>
+                  <Text variant="body3">
+                    <Text variant={rangeFilter.value === range.value && 'emphasized'}>{rangeFilter.label}</Text>
+                  </Text>
                   <Box
                     width="100%"
                     backgroundColor={rangeFilter.value === range.value ? '#000000' : '#E0E0E0'}

diff --git a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx
@@ -139,7 +139,7 @@ export function InvestedTokens({ canInvestRedeem = false, address }: { canInvest
   return tokens.length ? (
     <Stack as="article" gap={2}>
       <Text as="h2" variant="heading2">
-        Portfolio
+        Holdings
       </Text>
       <DataTable columns={columns} data={tokens} defaultSortKey="position" />
     </Stack>

diff --git a/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx
@@ -50,7 +50,6 @@ export function PortfolioValue({ rangeValue }: { rangeValue: string }) {
         margin={{
           top: 35,
           right: 20,
-          left: 20,
           bottom: 0,
         }}
         data={dailyPortfolioValue?.reverse()}
@@ -86,9 +85,8 @@ export function PortfolioValue({ rangeValue }: { rangeValue: string }) {
           }}
           label={{
             value: 'USD',
-            angle: -90,
-            position: 'insideLeft',
-            offset: -10,
+            position: 'top',
+            offset: 15,
             fontSize: '12px',
           }}
         />

diff --git a/centrifuge-app/src/pages/Portfolio/index.tsx b/centrifuge-app/src/pages/Portfolio/index.tsx
@@ -1,8 +1,8 @@
-import { Stack, Text } from '@centrifuge/fabric'
+import { Box, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useTheme } from 'styled-components'
 import { LayoutBase } from '../../components/LayoutBase'
-import { BasePadding } from '../../components/LayoutBase/BasePadding'
+import { BasePadding, BASE_PADDING } from '../../components/LayoutBase/BasePadding'
 import { PoolList } from '../../components/PoolList'
 import { AssetAllocation } from '../../components/Portfolio/AssetAllocation'
 import { CardPortfolioValue } from '../../components/Portfolio/CardPortfolioValue'
@@ -32,7 +32,7 @@ function Portfolio() {
   return (
     <>
       <Stack gap={2}>
-        <BasePadding backgroundColor={theme.colors.backgroundSecondary} gap={4} pb={10}>
+        <BasePadding backgroundColor={theme.colors.backgroundSecondary} gap={4} pb={3}>
           <Stack as="header" gap={1}>
             <Text as="h1" variant="heading1">
               Your portfolio
@@ -41,11 +41,12 @@ function Portfolio() {
               Track and manage your portfolio
             </Text>
           </Stack>
-
           <CardPortfolioValue />
         </BasePadding>
-        <BasePadding gap={3}>
+        <Box pt={1} px={BASE_PADDING}>
           <InvestedTokens address={address} />
+        </Box>
+        <BasePadding gap={3}>
           <Transactions onlyMostRecent address={address} />
           <AssetAllocation address={address} />
         </BasePadding>