Add padding to data tables

centrifuge · Oct 7, 2024 · 8a3bbc1 · 8a3bbc1
1 parent 7998e86
commit 8a3bbc1
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 12 deletions.
diff --git a/centrifuge-app/src/components/Report/AssetList.tsx b/centrifuge-app/src/components/Report/AssetList.tsx
@@ -1,5 +1,5 @@
 import { Pool } from '@centrifuge/centrifuge-js'
-import { Text } from '@centrifuge/fabric'
+import { Box, Text } from '@centrifuge/fabric'
 import { useContext, useEffect, useMemo } from 'react'
 import { useBasePath } from '../../../src/utils/useBasePath'
 import { formatDate } from '../../utils/date'
@@ -308,7 +308,9 @@ export function AssetList({ pool }: { pool: Pool }) {
   }
 
   return data.length > 0 ? (
-    <DataTable data={data} columns={columns} hoverable defaultSortKey="maturity-date" defaultSortOrder="desc" />
+    <Box padding={2}>
+      <DataTable data={data} columns={columns} hoverable defaultSortKey="maturity-date" defaultSortOrder="desc" />
+    </Box>
   ) : (
     <UserFeedback reportType="Assets" />
   )

diff --git a/centrifuge-app/src/components/Report/AssetTransactions.tsx b/centrifuge-app/src/components/Report/AssetTransactions.tsx
@@ -1,6 +1,6 @@
 import { Pool } from '@centrifuge/centrifuge-js'
 import { formatBalance, useGetExplorerUrl } from '@centrifuge/centrifuge-react'
-import { IconAnchor, IconExternalLink, Text } from '@centrifuge/fabric'
+import { Box, IconAnchor, IconExternalLink, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { formatDate } from '../../utils/date'
 import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
@@ -156,7 +156,9 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
   }
 
   return data.length > 0 ? (
-    <DataTable data={data} columns={columns} hoverable />
+    <Box padding={2}>
+      <DataTable data={data} columns={columns} hoverable />
+    </Box>
   ) : (
     <UserFeedback reportType="Asset transactions" />
   )

diff --git a/centrifuge-app/src/components/Report/FeeTransactions.tsx b/centrifuge-app/src/components/Report/FeeTransactions.tsx
@@ -1,5 +1,5 @@
 import { Pool } from '@centrifuge/centrifuge-js'
-import { Text } from '@centrifuge/fabric'
+import { Box, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { formatDate } from '../../utils/date'
 import { formatBalance } from '../../utils/formatting'
@@ -123,7 +123,9 @@ export function FeeTransactions({ pool }: { pool: Pool }) {
   }
 
   return data.length > 0 ? (
-    <DataTable data={data} columns={columns} hoverable />
+    <Box padding={2}>
+      <DataTable data={data} columns={columns} hoverable />
+    </Box>
   ) : (
     <UserFeedback reportType="Fee transactions" />
   )

diff --git a/centrifuge-app/src/components/Report/InvestorList.tsx b/centrifuge-app/src/components/Report/InvestorList.tsx
@@ -169,7 +169,9 @@ export function InvestorList({ pool }: { pool: Pool }) {
   }
 
   return data.length > 0 ? (
-    <DataTable data={data} columns={columns} hoverable defaultSortKey="value[3]" />
+    <Box padding={2}>
+      <DataTable data={data} columns={columns} hoverable defaultSortKey="value[3]" />
+    </Box>
   ) : (
     <UserFeedback reportType="InvestorList" />
   )

diff --git a/centrifuge-app/src/components/Report/InvestorTransactions.tsx b/centrifuge-app/src/components/Report/InvestorTransactions.tsx
@@ -265,7 +265,9 @@ export function InvestorTransactions({ pool }: { pool: Pool }) {
   }
 
   return data.length > 0 ? (
-    <DataTable data={data} columns={columns} hoverable />
+    <Box padding={1}>
+      <DataTable data={data} columns={columns} hoverable />
+    </Box>
   ) : (
     <UserFeedback reportType="Investor transactions" />
   )

diff --git a/centrifuge-app/src/components/Report/OracleTransactions.tsx b/centrifuge-app/src/components/Report/OracleTransactions.tsx
@@ -1,5 +1,5 @@
 import { Pool } from '@centrifuge/centrifuge-js'
-import { Text } from '@centrifuge/fabric'
+import { Box, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { formatDate } from '../../utils/date'
 import { formatBalance } from '../../utils/formatting'
@@ -95,7 +95,9 @@ export function OracleTransactions({ pool }: { pool: Pool }) {
   }
 
   return data.length > 0 ? (
-    <DataTable data={data} columns={columns} hoverable />
+    <Box padding={2}>
+      <DataTable data={data} columns={columns} hoverable />
+    </Box>
   ) : (
     <UserFeedback reportType="Oracle transactions" />
   )

diff --git a/centrifuge-app/src/components/Report/TokenPrice.tsx b/centrifuge-app/src/components/Report/TokenPrice.tsx
@@ -1,5 +1,5 @@
 import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
-import { Text } from '@centrifuge/fabric'
+import { Box, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { formatDate } from '../../utils/date'
 import { formatBalance, formatPercentage } from '../../utils/formatting'
@@ -293,7 +293,9 @@ export function TokenPrice({ pool }: { pool: Pool }) {
   }
 
   return poolStates?.length > 0 ? (
-    <DataTable data={priceRecords} columns={columns} hoverable />
+    <Box padding={2}>
+      <DataTable data={priceRecords} columns={columns} hoverable />
+    </Box>
   ) : (
     <UserFeedback reportType="Token price" />
   )