From 6efa763e731f843b36793c8e5e46991c43fa3dcd Mon Sep 17 00:00:00 2001
From: Christian Ditaputratama <ditatompel@gmail.com>
Date: Thu, 31 Oct 2024 23:08:05 +0700
Subject: [PATCH] style: Styling base datatable CSS

---
 internal/handler/views/remote_nodes.templ    |  2 +-
 internal/handler/views/remote_nodes_templ.go |  2 +-
 internal/handler/views/src/css/main.css      | 21 ++++++++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/internal/handler/views/remote_nodes.templ b/internal/handler/views/remote_nodes.templ
index 6225f9d..45d1d56 100644
--- a/internal/handler/views/remote_nodes.templ
+++ b/internal/handler/views/remote_nodes.templ
@@ -50,7 +50,7 @@ templ TableNodes(data monero.Nodes, q monero.QueryNodes, p paging.Pagination) {
 			@DtRowPerPage("/remote-nodes", "#tbl_nodes", q.Limit, q)
 		</div>
 		<div class="overflow-x-auto">
-			<table class="table-striped table-hover">
+			<table class="dt">
 				<thead>
 					<tr>
 						<th scope="col">Host:Port</th>
diff --git a/internal/handler/views/remote_nodes_templ.go b/internal/handler/views/remote_nodes_templ.go
index 3698a26..342dd55 100644
--- a/internal/handler/views/remote_nodes_templ.go
+++ b/internal/handler/views/remote_nodes_templ.go
@@ -81,7 +81,7 @@ func TableNodes(data monero.Nodes, q monero.QueryNodes, p paging.Pagination) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"overflow-x-auto\"><table class=\"table-striped table-hover\"><thead><tr><th scope=\"col\">Host:Port</th><th scope=\"col\">Nettype</th><th scope=\"col\">Protocol</th><th scope=\"col\">Country</th><th scope=\"col\">Status</th><th scope=\"col\">Estimate Fee</th><th scope=\"col\">Uptime</th><th scope=\"col\">Check</th></tr></thead> <tbody>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"overflow-x-auto\"><table class=\"dt\"><thead><tr><th scope=\"col\">Host:Port</th><th scope=\"col\">Nettype</th><th scope=\"col\">Protocol</th><th scope=\"col\">Country</th><th scope=\"col\">Status</th><th scope=\"col\">Estimate Fee</th><th scope=\"col\">Uptime</th><th scope=\"col\">Check</th></tr></thead> <tbody>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/handler/views/src/css/main.css b/internal/handler/views/src/css/main.css
index d8681a6..440cd17 100644
--- a/internal/handler/views/src/css/main.css
+++ b/internal/handler/views/src/css/main.css
@@ -26,6 +26,27 @@ button.copy-input {
   @apply px-2 shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-transparent bg-orange-600 text-white hover:brightness-125 focus:outline-none focus:bg-orange-700 disabled:opacity-50 disabled:pointer-events-none;
 }
 
+/* table */
+table.dt {
+  @apply min-w-full divide-y divide-neutral-700;
+}
+table.dt thead {
+  @apply bg-neutral-800;
+}
+table.dt thead tr th {
+  @apply px-3 py-3 text-start text-xs font-semibold uppercase text-neutral-200;
+}
+table.dt tbody {
+  @apply divide-y divide-neutral-700;
+}
+table.dt tbody tr {
+  @apply odd:bg-neutral-900 even:bg-neutral-800;
+}
+table.dt tbody tr th,
+table.dt tbody tr td {
+  @apply px-3 py-2;
+}
+
 /* pagination */
 nav.pagination button.active {
   @apply py-1.5 px-2 inline-flex items-center gap-x-2 text-sm font-bold rounded-lg border border-orange-500 bg-orange-500 text-white shadow-sm hover:brightness-125 disabled:opacity-90 disabled:pointer-events-none;