From 7da5fdb10c1a35050d1606cb78da92151bf8212f Mon Sep 17 00:00:00 2001
From: Christian Ditaputratama <ditatompel@gmail.com>
Date: Mon, 4 Nov 2024 23:49:06 +0700
Subject: [PATCH] chore: Change css class `thead .th-filter` to `.frameless`

---
 internal/handler/views/remote_nodes.templ    | 10 +++++-----
 internal/handler/views/remote_nodes_templ.go | 10 +++++-----
 internal/handler/views/src/css/main.css      | 10 ++++++----
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/internal/handler/views/remote_nodes.templ b/internal/handler/views/remote_nodes.templ
index 6ce08ef..17e13c9 100644
--- a/internal/handler/views/remote_nodes.templ
+++ b/internal/handler/views/remote_nodes.templ
@@ -85,7 +85,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
 								name="host"
 								value={ fmt.Sprintf("%s", q.Host) }
 								autocomplete="off"
-								class="th-filter"
+								class="frameless"
 								placeholder="Filter Host / IP"
 								hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"host"})) }
 								hx-push-url="true"
@@ -98,7 +98,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
 							<select
 								id="nettype"
 								name="nettype"
-								class="th-filter"
+								class="frameless"
 								autocomplete="off"
 								hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"nettype"})) }
 								hx-trigger="change"
@@ -116,7 +116,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
 							<select
 								id="protocol"
 								name="protocol"
-								class="th-filter"
+								class="frameless"
 								autocomplete="off"
 								hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"protocol"})) }
 								hx-trigger="change"
@@ -134,7 +134,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
 							<select
 								id="cc"
 								name="cc"
-								class="th-filter"
+								class="frameless"
 								autocomplete="off"
 								hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"cc"})) }
 								hx-trigger="change"
@@ -156,7 +156,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
 							<select
 								id="status"
 								name="status"
-								class="th-filter"
+								class="frameless"
 								autocomplete="off"
 								hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"status"})) }
 								hx-trigger="change"
diff --git a/internal/handler/views/remote_nodes_templ.go b/internal/handler/views/remote_nodes_templ.go
index abe89be..638bb9d 100644
--- a/internal/handler/views/remote_nodes_templ.go
+++ b/internal/handler/views/remote_nodes_templ.go
@@ -146,7 +146,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" autocomplete=\"off\" class=\"th-filter\" placeholder=\"Filter Host / IP\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" autocomplete=\"off\" class=\"frameless\" placeholder=\"Filter Host / IP\" hx-get=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -159,7 +159,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-push-url=\"true\" hx-trigger=\"keyup changed delay:0.4s\" hx-target=\"#tbl_nodes\" hx-swap=\"outerHTML\"></td><td><select id=\"nettype\" name=\"nettype\" class=\"th-filter\" autocomplete=\"off\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-push-url=\"true\" hx-trigger=\"keyup changed delay:0.4s\" hx-target=\"#tbl_nodes\" hx-swap=\"outerHTML\"></td><td><select id=\"nettype\" name=\"nettype\" class=\"frameless\" autocomplete=\"off\" hx-get=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -218,7 +218,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td><select id=\"protocol\" name=\"protocol\" class=\"th-filter\" autocomplete=\"off\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td><select id=\"protocol\" name=\"protocol\" class=\"frameless\" autocomplete=\"off\" hx-get=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -277,7 +277,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
 				return templ_7745c5c3_Err
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td><select id=\"cc\" name=\"cc\" class=\"th-filter\" autocomplete=\"off\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td><select id=\"cc\" name=\"cc\" class=\"frameless\" autocomplete=\"off\" hx-get=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -366,7 +366,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
 				}
 			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td colspan=\"2\"><select id=\"status\" name=\"status\" class=\"th-filter\" autocomplete=\"off\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td colspan=\"2\"><select id=\"status\" name=\"status\" class=\"frameless\" autocomplete=\"off\" hx-get=\"")
 		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 a774b38..acec5b5 100644
--- a/internal/handler/views/src/css/main.css
+++ b/internal/handler/views/src/css/main.css
@@ -26,6 +26,12 @@ 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;
 }
 
+/* forms */
+input.frameless,
+select.frameless {
+  @apply block w-full text-neutral-400 placeholder-neutral-500 bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-neutral-700 text-sm focus:border-t-transparent focus:border-x-transparent focus:border-b-orange-400 focus:ring-0 focus:ring-orange-400 disabled:opacity-50 disabled:pointer-events-none;
+}
+
 /* table */
 table.dt {
   @apply min-w-full divide-y divide-neutral-700;
@@ -36,10 +42,6 @@ table.dt thead {
 table.dt thead tr th {
   @apply px-3 py-3 text-start text-xs font-semibold uppercase text-neutral-200;
 }
-thead input.th-filter,
-thead select.th-filter {
-  @apply block w-full text-neutral-400 placeholder-neutral-500 bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-neutral-700 text-sm focus:border-t-transparent focus:border-x-transparent focus:border-b-orange-400 focus:ring-0 focus:ring-orange-400;
-}
 table.dt tbody {
   @apply divide-y divide-neutral-700;
 }