From 8a3bbc149a168b6ec8b709e86d4413944da4e6cb Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Mon, 7 Oct 2024 16:38:11 +0200
Subject: [PATCH] Add padding to data tables

---
 centrifuge-app/src/components/Report/AssetList.tsx          | 6 ++++--
 centrifuge-app/src/components/Report/AssetTransactions.tsx  | 6 ++++--
 centrifuge-app/src/components/Report/FeeTransactions.tsx    | 6 ++++--
 centrifuge-app/src/components/Report/InvestorList.tsx       | 4 +++-
 .../src/components/Report/InvestorTransactions.tsx          | 4 +++-
 centrifuge-app/src/components/Report/OracleTransactions.tsx | 6 ++++--
 centrifuge-app/src/components/Report/TokenPrice.tsx         | 6 ++++--
 7 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/centrifuge-app/src/components/Report/AssetList.tsx b/centrifuge-app/src/components/Report/AssetList.tsx
index e6afbab5c..240959d1f 100644
--- 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
index f16dfbc1a..f8847f1b8 100644
--- 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
index c2768bd26..549f3737b 100644
--- 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
index 51ac75119..93e9db448 100644
--- 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
index 63cf36a21..45a38b1ba 100644
--- 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
index 68779175f..a752ddf15 100644
--- 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
index 2443dee3d..23214ec81 100644
--- 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" />
   )