From b81c21009450f20cec6253ed826dd7479dc171be Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Fri, 7 Jul 2023 08:52:33 +0700
Subject: [PATCH 1/2] fix: make the optimized table dark mode friendly

---
 src/renderer/components/OptimizeTable/index.tsx    | 14 ++++++++++++--
 .../components/OptimizeTable/styles.module.css     | 12 +++++++++++-
 .../QueryResultViewer/QueryResultTable.tsx         |  7 ++++---
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/OptimizeTable/index.tsx b/src/renderer/components/OptimizeTable/index.tsx
index 260089d..09a5430 100644
--- a/src/renderer/components/OptimizeTable/index.tsx
+++ b/src/renderer/components/OptimizeTable/index.tsx
@@ -10,7 +10,12 @@ import styles from './styles.module.css';
 
 interface OptimizeTableProps {
   data: unknown[][];
-  headers: { name: string; initialSize: number; resizable?: boolean }[];
+  headers: {
+    name: string;
+    initialSize: number;
+    resizable?: boolean;
+    icon?: ReactElement;
+  }[];
   renderCell: (y: number, x: number) => ReactElement;
   rowHeight: number;
   renderAhead: number;
@@ -235,7 +240,7 @@ export default function OptimizeTable({
     return (
       <div
         ref={containerRef}
-        className={styles.tableContainer}
+        className={`${styles.tableContainer} scroll`}
         onScroll={onScroll}
       >
         <div
@@ -256,6 +261,11 @@ export default function OptimizeTable({
               <tr>
                 {headers.map((header, idx) => (
                   <th key={header.name}>
+                    {header.icon && (
+                      <div className={styles.tableHeaderIcon}>
+                        {header.icon}
+                      </div>
+                    )}
                     <div className={styles.tableCellContent}>{header.name}</div>
                     {header.resizable && (
                       <ResizeHandler idx={idx} onResize={onHeaderResize} />
diff --git a/src/renderer/components/OptimizeTable/styles.module.css b/src/renderer/components/OptimizeTable/styles.module.css
index a910c78..fe1ec06 100644
--- a/src/renderer/components/OptimizeTable/styles.module.css
+++ b/src/renderer/components/OptimizeTable/styles.module.css
@@ -41,6 +41,16 @@
   padding: 0px 10px;
   height: 35px;
   line-height: 35px;
+  background: var(--color-surface);
+  text-align: left;
+  display: flex;
+  flex-direction: row;
+}
+
+.tableHeaderIcon {
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
 }
 
 .resizer {
@@ -50,7 +60,7 @@
   bottom: 0;
   width: 3px;
   cursor: col-resize;
-  background: #800;
+  background: var(--color-critical);
   opacity: 0;
 }
 
diff --git a/src/renderer/screens/DatabaseScreen/QueryResultViewer/QueryResultTable.tsx b/src/renderer/screens/DatabaseScreen/QueryResultViewer/QueryResultTable.tsx
index eeddb4c..1c4c3c7 100644
--- a/src/renderer/screens/DatabaseScreen/QueryResultViewer/QueryResultTable.tsx
+++ b/src/renderer/screens/DatabaseScreen/QueryResultViewer/QueryResultTable.tsx
@@ -9,6 +9,7 @@ import { useContextMenu } from 'renderer/contexts/ContextMenuProvider';
 import { useQueryResultChange } from 'renderer/contexts/QueryResultChangeProvider';
 import { useTableCellManager } from './TableCellManager';
 import OptimizeTable from 'renderer/components/OptimizeTable';
+import Icon from 'renderer/components/Icon';
 
 interface QueryResultTableProps {
   result: QueryResult;
@@ -86,7 +87,9 @@ function QueryResultTable({ result, page, pageSize }: QueryResultTableProps) {
     return result.headers.map((header, idx) => ({
       name: header.name || '',
       resizable: true,
-      // icon: header?.schema?.primaryKey ? <Icon.GreenKey /> : undefined,
+      icon: header?.schema?.primaryKey ? (
+        <Icon.GreenKey size="sm" />
+      ) : undefined,
       initialSize: Math.max(
         header.name.length * 10,
         getInitialSizeByHeaderType(idx, header)
@@ -110,8 +113,6 @@ function QueryResultTable({ result, page, pageSize }: QueryResultTableProps) {
     [data, updatableTables, page, pageSize]
   );
 
-  console.log(headerMemo, result.rows);
-
   return (
     <div className={styles.container} onContextMenu={handleContextMenu}>
       <OptimizeTable

From efd9901a49cc819ec4aa29ee8d73ecb911351fc1 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Fri, 7 Jul 2023 08:55:24 +0700
Subject: [PATCH 2/2] fix: duplicated background color

---
 src/renderer/components/OptimizeTable/styles.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/components/OptimizeTable/styles.module.css b/src/renderer/components/OptimizeTable/styles.module.css
index fe1ec06..eb5ab1b 100644
--- a/src/renderer/components/OptimizeTable/styles.module.css
+++ b/src/renderer/components/OptimizeTable/styles.module.css
@@ -36,7 +36,6 @@
 .tableContainer th {
   position: sticky;
   top: 0;
-  background: #fff;
   user-select: none;
   padding: 0px 10px;
   height: 35px;