fix: make the optimized table dark mode friendly (#29)

* fix: make the optimized table dark mode friendly

* fix: duplicated background color

Author: invisal

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} />

src/renderer/components/OptimizeTable/styles.module.css

@@ -36,11 +36,20 @@
 .tableContainer th {
   position: sticky;
   top: 0;
-  background: #fff;
   user-select: none;
   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 +59,7 @@
   bottom: 0;
   width: 3px;
   cursor: col-resize;
-  background: #800;
+  background: var(--color-critical);
   opacity: 0;
 }
 

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