diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
index 6d6e0f1332..bd96597727 100644
--- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
+++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -276,11 +276,6 @@ function PoolPerformanceChart() {
tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)}
yAxisId="right"
orientation="right"
- domain={
- selectedTabIndex === 0
- ? ['auto', 'auto']
- : [(dataMin: number) => [Math.round(dataMin)], (dataMax: number) => [Math.round(dataMax)]]
- }
/>
{formatDate(payload[0].payload.day)}
{payload.map(({ name, value }, index) => {
+ const hasSeniorTranche = payload.length >= 3
+
const labelMap: Record = {
nav: 'NAV',
- juniorTokenPrice: 'Junior Token Price',
+ juniorTokenPrice: hasSeniorTranche ? 'Junior Token Price' : 'Token Price',
seniorTokenPrice: 'Senior Token Price',
- juniorAPY: 'Junior APY',
+ juniorAPY: hasSeniorTranche ? 'Junior APY' : 'APY',
seniorAPY: 'Senior APY',
default: 'Cash',
}
diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
index bf28c0b8ad..90f907b61e 100644
--- a/centrifuge-app/src/components/DataTable.tsx
+++ b/centrifuge-app/src/components/DataTable.tsx
@@ -51,6 +51,7 @@ export type DataTableProps = {
pageSize?: number
page?: number
headerStyles?: React.CSSProperties
+ hideBorder?: boolean
} & GroupedProps
export type OrderBy = 'asc' | 'desc'
@@ -101,6 +102,7 @@ export const DataTable = >({
page = 1,
headerStyles,
scrollable = false,
+ hideBorder,
}: DataTableProps) => {
const [orderBy, setOrderBy] = React.useState>(
defaultSortKey ? { [defaultSortKey]: defaultSortOrder } : {}
@@ -127,7 +129,7 @@ export const DataTable = >({
return (
{showHeader && (
-
+
{columns.map((col, i) => (
@@ -151,6 +153,7 @@ export const DataTable = >({
to={onRowClicked ? onRowClicked(row) : undefined}
key={keyField ? row[keyField] : i}
tabIndex={onRowClicked ? 0 : undefined}
+ hideBorder={hideBorder}
>
{columns.map((col, index) => (
@@ -168,6 +171,7 @@ export const DataTable = >({
to={onRowClicked ? onRowClicked(row) : undefined}
key={keyField ? row[keyField] : i}
tabIndex={onRowClicked ? 0 : undefined}
+ hideBorder={hideBorder}
>
{columns.map((col, index) => (
>({
})}
{/* summary row is not included in sorting */}
{summary && (
-
+
{columns.map((col, i) => (
{col.cell(summary, i)}
@@ -217,37 +221,37 @@ const Row = styled('div')`
display: grid;
grid-template-columns: subgrid;
grid-column: start / end;
- box-shadow: ${({ theme }) => `-1px 0 0 0 ${theme.colors.borderPrimary}, 1px 0 0 0 ${theme.colors.borderPrimary}`};
`
-const HeaderRow = styled(Row)<{ styles?: any; scrollable?: boolean }>(({ styles, scrollable }) =>
- css({
- backgroundColor: 'backgroundSecondary',
- borderStyle: 'solid',
- borderWidth: '1px 0',
- borderColor: 'borderPrimary',
- position: scrollable ? 'sticky' : 'static',
- top: scrollable ? 0 : 'auto',
- zIndex: scrollable ? 10 : 'auto',
- borderTopLeftRadius: '8px',
- borderTopRightRadius: '8px',
- ...styles,
- })
+const HeaderRow = styled(Row)<{ styles?: any; scrollable?: boolean; hideBorder?: boolean }>(
+ ({ styles, scrollable, hideBorder }) =>
+ css({
+ backgroundColor: 'backgroundSecondary',
+ borderStyle: 'solid',
+ borderWidth: hideBorder ? 0 : 1,
+ borderColor: hideBorder ? 'transparent' : 'borderPrimary',
+ position: scrollable ? 'sticky' : 'static',
+ top: scrollable ? 0 : 'auto',
+ zIndex: scrollable ? 10 : 'auto',
+ borderTopLeftRadius: hideBorder ? 0 : '8px',
+ borderTopRightRadius: hideBorder ? 0 : '8px',
+ ...styles,
+ })
)
export const DataRow = styled(Row)`
- ${({ hoverable, as: comp }) =>
+ ${({ hoverable, as: comp, hideBorder }) =>
css({
width: '100%',
borderBottomStyle: 'solid',
- borderBottomWidth: '1px',
- borderBottomColor: 'borderPrimary',
+ borderBottomWidth: hideBorder ? 0 : '1px',
+ borderBottomColor: hideBorder ? 'transparent' : 'borderPrimary',
borderLeftStyle: 'solid',
- borderLeftWidth: '1px',
- borderLeftColor: 'borderPrimary',
+ borderLeftWidth: hideBorder ? 0 : '1px',
+ borderLeftColor: hideBorder ? 'transparent' : 'borderPrimary',
borderRightStyle: 'solid',
- borderRightWidth: '1px',
- borderRightColor: 'borderPrimary',
+ borderRightWidth: hideBorder ? 0 : '1px',
+ borderRightColor: hideBorder ? 'transparent' : 'borderPrimary',
backgroundColor: 'transparent',
// using a&:hover caused the background sometimes not to update when switching themes
'&:hover':
diff --git a/centrifuge-app/src/components/LayoutBase/BasePadding.tsx b/centrifuge-app/src/components/LayoutBase/BasePadding.tsx
index 54e8662da8..7758741aba 100644
--- a/centrifuge-app/src/components/LayoutBase/BasePadding.tsx
+++ b/centrifuge-app/src/components/LayoutBase/BasePadding.tsx
@@ -5,7 +5,7 @@ type BaseSectionProps = BoxProps & {
children: React.ReactNode
}
-export const BASE_PADDING = [2, 2, 3, 3, 5]
+export const BASE_PADDING = [2, 2, 2, 2, 5]
export function BasePadding({ children, ...boxProps }: BaseSectionProps) {
return (
diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
index dcaec9cabf..9faef617e6 100644
--- a/centrifuge-app/src/components/LayoutBase/styles.tsx
+++ b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -147,7 +147,7 @@ export const WalletInner = styled(Stack)`
@media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
justify-content: flex-end;
height: 50px;
- margin-right: 30px;
+ margin-right: 20px;
margin-top: 15px;
}
`
diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
index 7df44ae0d0..1e97b551cc 100644
--- a/centrifuge-app/src/components/PoolCard/index.tsx
+++ b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -21,24 +21,14 @@ const StyledRouterTextLink = styled(RouterTextLink)`
const StyledCard = styled(Card)`
width: 100%;
max-width: 100%;
- margin-right: 12px;
- margin-bottom: 12px;
padding: 12px;
- border: 1px solid rgba(207, 207, 207, 0.5);
+ border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
height: 350px;
&:hover {
border: 1px solid ${({ theme }) => theme.colors.textPrimary};
box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}
-
- @media (min-width: ${({ theme }) => theme.breakpoints['M']}) {
- width: auto;
- }
-
- @media (min-width: ${({ theme }) => theme.breakpoints['XL']}) {
- width: auto;
- }
`
const StyledText = styled(Text)`
diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
index 39b9ffe8ec..0aac5b5e68 100644
--- a/centrifuge-app/src/components/PoolList.tsx
+++ b/centrifuge-app/src/components/PoolList.tsx
@@ -1,6 +1,6 @@
import Centrifuge, { Pool, PoolMetadata } from '@centrifuge/centrifuge-js'
import { useCentrifuge } from '@centrifuge/centrifuge-react'
-import { Box, IconChevronRight, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Grid, IconChevronRight, Shelf, Stack, Text } from '@centrifuge/fabric'
import * as React from 'react'
import { useLocation } from 'react-router'
import styled from 'styled-components'
@@ -81,31 +81,26 @@ export function PoolList() {
-
+
{metadataIsLoading
? Array(6)
.fill(true)
.map((_, index) => (
-
+
))
: filteredPools.map((pool) => (
-
+
))}
-
+
{!metadataIsLoading && archivedPools.length > 0 && (
<>
-
+
-
+
{pools.map((pool) => (
-
+
))}
-
+
)
}
diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
index 0307b399c4..4b82baa2a5 100644
--- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
+++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -332,12 +332,13 @@ const AvailableNetworks = ({ poolId }: { poolId: string }) => {
)
}
-export const RatingPill = ({ agency, reportUrl, reportFile, value, size }: RatingType) => {
+export const RatingPill = ({ agency, reportUrl, reportFile, value }: RatingType) => {
const theme = useTheme()
const cent = useCentrifuge()
return (
-
+
diff --git a/fabric/src/components/Tooltip/index.tsx b/fabric/src/components/Tooltip/index.tsx
index ae0b10090f..725f0e8455 100644
--- a/fabric/src/components/Tooltip/index.tsx
+++ b/fabric/src/components/Tooltip/index.tsx
@@ -15,6 +15,7 @@ export type TooltipProps = TextProps & {
delay?: number
bodyWidth?: string | number
bodyPadding?: string | number
+ triggerStyle?: React.CSSProperties
}
const StyledTrigger = styled(Text)`
@@ -79,6 +80,7 @@ export function Tooltip({
delay = 1000,
bodyWidth,
bodyPadding,
+ triggerStyle,
...textProps
}: TooltipProps) {
const triggerRef = React.useRef(null)
@@ -92,7 +94,7 @@ export function Tooltip({
return (
<>
-
+
{children}
{state.isOpen && (
diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
index e47dcff574..389ec224f3 100644
--- a/fabric/src/theme/tokens/theme.ts
+++ b/fabric/src/theme/tokens/theme.ts
@@ -31,7 +31,7 @@ const colors = {
backgroundThumbnail: grayScale[500],
backgroundInverted: grayScale[800],
- borderPrimary: grayScale[50],
+ borderPrimary: grayScale[100],
borderSecondary: grayScale[300],
statusDefault,