chore: Abstruct table style to variant.

packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTable.tsx

@@ -28,6 +28,7 @@ import {
   MarketTransactionsPaymentCell,
 } from "./MarketTransactionsTableCell";
 import { LangKeys } from "@constants/lang";
+import { TableVariant } from "@molecules/Table/_types";
 
 const table = createTable().setRowType<MarketTransaction>();
 
@@ -38,7 +39,7 @@ interface MarketTransactionsTableProps {
 export function MarketTransactionsTable({
   data,
 }: MarketTransactionsTableProps) {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
   const columns = useMarketTransactionsColumns();
 
   return (
@@ -46,9 +47,10 @@ export function MarketTransactionsTable({
       table={table}
       columns={columns}
       data={data}
+      variant={TableVariant.Primary}
       tableWrap={{
         verticalSpacing: "md",
-        className: cx(classes.root),
+        className: classes.root,
       }}
     />
   );
@@ -56,23 +58,10 @@ export function MarketTransactionsTable({
 
 const useStyles = createStyles(() => ({
   root: {
-    "thead tr": {
-      backgroundColor: "#F8F8F8",
-
-      th: {
-        fontSize: 10,
-        letterSpacing: "0.05em",
-        textTransform: "uppercase",
-        borderBottomColor: "#E8E7EC",
-        color: "#B7B6BD",
-        fontWeight: 700,
-      },
-    },
     "tbody tr": {
       td: {
         paddingTop: 22,
         paddingBottom: 22,
-        borderBottomColor: "#E8E7EC",
       },
     },
   },

packages/renderer/src/components/molecules/Table/Table.style.tsx

@@ -0,0 +1,23 @@
+import { createStyles } from "@mantine/core";
+
+export const useStyles = createStyles((theme) => ({
+  primary: {
+    "thead tr": {
+      backgroundColor: theme.colors.gray[0],
+
+      th: {
+        fontSize: 10,
+        letterSpacing: "0.05em",
+        textTransform: "uppercase",
+        borderBottomColor: theme.colors.gray[2],
+        color: theme.colors.gray[5],
+        fontWeight: 700,
+      },
+    },
+    "tbody tr": {
+      td: {
+        borderBottomColor: theme.colors.gray[2],
+      },
+    },
+  },
+}));

packages/renderer/src/components/molecules/Table/Table.tsx

@@ -21,12 +21,15 @@ import {
 } from "@tanstack/react-table";
 import { Table as MTable } from "@mantine/core";
 import type { TableProps } from "./_types";
+import { TableVariant } from "./_types";
 import { TableProvider } from "./use-table-context";
 import { TableHeader } from "./TableHeader";
 import { TableBody } from "./TableBody";
+import { useStyles } from "./Table.style";
 
 export function Table(props: TableProps) {
-  const { table, columns, data, tableWrap } = props;
+  const { classes, cx } = useStyles();
+  const { table, columns, data, tableWrap, variant } = props;
 
   const tableInstance = useTableInstance(table, {
     data,
@@ -36,7 +39,12 @@ export function Table(props: TableProps) {
   });
 
   return (
-    <MTable {...tableWrap}>
+    <MTable
+      {...tableWrap}
+      className={cx(tableWrap?.className, {
+        [classes.primary]: variant === TableVariant.Primary,
+      })}
+    >
       <TableProvider value={{ table: tableInstance, props }}>
         <TableHeader />
         <TableBody />

packages/renderer/src/components/molecules/Table/_types.tsx

@@ -29,4 +29,10 @@ export interface TableProps {
   rowSubComponent?: ({ row }: { row: Row<any> }) => React.ReactNode;
 
   tableWrap?: MTableProps;
+  variant?: TableVariant;
+}
+
+export enum TableVariant {
+  Default = "Default",
+  Primary = "Primary",
 }

packages/renderer/src/components/organisms/MarketsTransactions/MarketsTransactions.tsx

@@ -14,8 +14,8 @@
 //  limitations under the License.
 // =============================================================================
 
-import { useMarketsOffers } from "@hooks/haveno/useMarketsOffers";
 import { Loader } from "@mantine/core";
+import { useMarketsOffers } from "@hooks/haveno/useMarketsOffers";
 import { MarketTransactionsTable } from "@molecules/MarketTransactionsTable";
 import type { FC } from "react";