From 2885a996fbc326d7b1f4179bbd7c0ce707c79bf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20W=C4=99c=C5=82awski?= <r.weclawski@gmail.com>
Date: Sat, 6 Jan 2024 01:51:09 +0100
Subject: [PATCH] improve game settings table

---
 optimal-settings-frontend/package-lock.json         |  8 ++++----
 optimal-settings-frontend/package.json              |  2 +-
 .../app/games/[slug]/components/SettingsTable.tsx   |  8 +++++---
 optimal-settings-frontend/src/components/Table.tsx  |  6 +++++-
 .../src/components/TableCell.tsx                    | 13 +++++++++++--
 5 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/optimal-settings-frontend/package-lock.json b/optimal-settings-frontend/package-lock.json
index 07d23bc..a3c487b 100644
--- a/optimal-settings-frontend/package-lock.json
+++ b/optimal-settings-frontend/package-lock.json
@@ -33,7 +33,7 @@
         "eslint-config-prettier": "^9.0.0",
         "postcss": "^8",
         "prettier": "3.0.3",
-        "tailwindcss": "^3",
+        "tailwindcss": "3.4.1",
         "typescript": "^5"
       }
     },
@@ -7008,9 +7008,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.4.tgz",
-      "integrity": "sha512-JXZNOkggUAc9T5E7nCrimoXHcSf9h3NWFe5sh36CGD/3M5TRLuQeFnQoDsit2uVTqgoOZHLx5rTykLUu16vsMQ==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
+      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
diff --git a/optimal-settings-frontend/package.json b/optimal-settings-frontend/package.json
index c92836e..3529dad 100644
--- a/optimal-settings-frontend/package.json
+++ b/optimal-settings-frontend/package.json
@@ -36,7 +36,7 @@
     "eslint-config-prettier": "^9.0.0",
     "postcss": "^8",
     "prettier": "3.0.3",
-    "tailwindcss": "^3",
+    "tailwindcss": "3.4.1",
     "typescript": "^5"
   }
 }
diff --git a/optimal-settings-frontend/src/app/games/[slug]/components/SettingsTable.tsx b/optimal-settings-frontend/src/app/games/[slug]/components/SettingsTable.tsx
index 0dba724..0a89663 100644
--- a/optimal-settings-frontend/src/app/games/[slug]/components/SettingsTable.tsx
+++ b/optimal-settings-frontend/src/app/games/[slug]/components/SettingsTable.tsx
@@ -9,12 +9,14 @@ type SettingsTable = {
 
 export default function SettingsTable({ settings }: SettingsTable) {
   return (
-    <Table striped border="border">
+    <Table striped border="border" tableLayout="fixed">
       <TableBody>
         {settings.map(([key, value]) => (
           <TableRow key={key}>
-            <TableCell type="th">{key}</TableCell>
-            <TableCell>{value}</TableCell>
+            <TableCell type="th" border="border">
+              {key}
+            </TableCell>
+            <TableCell border="border">{value}</TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/optimal-settings-frontend/src/components/Table.tsx b/optimal-settings-frontend/src/components/Table.tsx
index 7734169..47a6a83 100644
--- a/optimal-settings-frontend/src/components/Table.tsx
+++ b/optimal-settings-frontend/src/components/Table.tsx
@@ -5,6 +5,7 @@ type Table = {
   pinColumns?: boolean;
   striped?: boolean;
   textAlignment?: "left" | "center" | "right";
+  tableLayout?: "auto" | "fixed";
   children: React.ReactNode;
 };
 
@@ -15,6 +16,7 @@ export default function Table({
   pinColumns,
   striped,
   textAlignment,
+  tableLayout,
   children,
 }: Table) {
   let tableClasses = "table";
@@ -38,7 +40,9 @@ export default function Table({
   }
   return (
     <div className="overflow-x-auto">
-      <table className={tableClasses}>{children}</table>
+      <table className={tableClasses} style={{ tableLayout: tableLayout }}>
+        {children}
+      </table>
     </div>
   );
 }
diff --git a/optimal-settings-frontend/src/components/TableCell.tsx b/optimal-settings-frontend/src/components/TableCell.tsx
index 6f9a4cb..dcd1853 100644
--- a/optimal-settings-frontend/src/components/TableCell.tsx
+++ b/optimal-settings-frontend/src/components/TableCell.tsx
@@ -1,9 +1,18 @@
 type TableCell = {
   type?: "th" | "td";
+  border?: "border" | "border-2" | "border-4" | "border-8";
   children: React.ReactNode;
 };
 
-export default function TableCell({ type = "td", children }: TableCell) {
+export default function TableCell({
+  type = "td",
+  border,
+  children,
+}: TableCell) {
   const Cell = type;
-  return <Cell>{children}</Cell>;
+  let cellClasses = "";
+  if (border) {
+    cellClasses += ` ${border} border-base-300`;
+  }
+  return <Cell className={cellClasses}>{children}</Cell>;
 }