From 3588f9df164f4f8abee4495e95a0f43712b48e88 Mon Sep 17 00:00:00 2001
From: Jonni Liljamo <jonni@liljamo.com>
Date: Tue, 3 Oct 2023 13:45:25 +0300
Subject: [PATCH] feat: tixe-input css class

---
 input.css                        |  6 +++++
 static/styles.css                | 46 +++++++++++++++-----------------
 template/templates/index.tmpl    |  4 +--
 template/templates/linkedit.tmpl |  4 +--
 template/templates/settings.tmpl |  2 +-
 template/templates/tags.tmpl     |  2 +-
 6 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/input.css b/input.css
index 8aa14f2..13be507 100644
--- a/input.css
+++ b/input.css
@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+	.tixe-input {
+		@apply p-1 border-2 rounded-md placeholder-slate-400 focus:outline-none;
+	}
+}
+
 .scribble {
   stroke-dasharray: 24;
   stroke-dashoffset: 24;
diff --git a/static/styles.css b/static/styles.css
index 4b70067..17c303c 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -534,6 +534,27 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.tixe-input {
+  border-radius: 0.375rem;
+  border-width: 2px;
+  padding: 0.25rem;
+}
+
+.tixe-input::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-placeholder-opacity));
+}
+
+.tixe-input::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-placeholder-opacity));
+}
+
+.tixe-input:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -880,26 +901,6 @@ video {
   color: transparent;
 }
 
-.placeholder-slate-400::-moz-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-placeholder-opacity));
-}
-
-.placeholder-slate-400::placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-placeholder-opacity));
-}
-
-.placeholder-slate-800::-moz-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(30 41 59 / var(--tw-placeholder-opacity));
-}
-
-.placeholder-slate-800::placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(30 41 59 / var(--tw-placeholder-opacity));
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -975,11 +976,6 @@ video {
   text-decoration-line: underline;
 }
 
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
 .group\/summary[open] .group-open\/summary\:rotate-90 {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
diff --git a/template/templates/index.tmpl b/template/templates/index.tmpl
index 4416082..b13a674 100644
--- a/template/templates/index.tmpl
+++ b/template/templates/index.tmpl
@@ -12,11 +12,11 @@
 	<form class="flex flex-col p-1 origin-top group-open/summary:animate-[newlink_300ms_ease-in-out]" action="/api/link/new" method="POST">
 		<p class="text-sm" for="visual">Visual</p>
 		<div class="flex gap-2">
-			<input class="w-full h-8 p-1 border-2 rounded-md placeholder-slate-400 focus:outline-none" type="text" placeholder="..." name="visual" id="visual"/>
+			<input class="tixe-input h-8 w-full" type="text" placeholder="..." name="visual" id="visual"/>
 		</div>
 		<p class="text-sm" for="link">Link</p>
 		<div class="flex gap-2">
-			<input class="w-full h-8 p-1 border-2 rounded-md placeholder-slate-400 focus:outline-none" type="text" placeholder="..." name="link" id="link"/>
+			<input class="tixe-input h-8 w-full" type="text" placeholder="..." name="link" id="link"/>
 			<button class="group/submit w-fit h-8 p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
 				<svg class="absolute h-5 w-5 stroke-emerald-600 group-hover/submit:stroke-emerald-700 transition-colors" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke-width="1.5" stroke-linecap="round"/>
diff --git a/template/templates/linkedit.tmpl b/template/templates/linkedit.tmpl
index 8eff06b..6acf8a5 100644
--- a/template/templates/linkedit.tmpl
+++ b/template/templates/linkedit.tmpl
@@ -31,7 +31,7 @@
 	<form class="flex flex-col" action="/api/link/{{ .data.Id }}/visual" method="POST">
 		<p class="text-sm" for="visual">Visual</p>
 		<div class="flex gap-2">
-			<input class="w-full p-1 border-2 rounded-md placeholder-slate-800 focus:outline-none" type="text" value="{{ .data.Visual }}" name="visual" id="visual"/>
+			<input class="tixe-input w-full" type="text" value="{{ .data.Visual }}" name="visual" id="visual"/>
 			<button class="w-fit p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
 				Update
 			</button>
@@ -40,7 +40,7 @@
 	<form class="flex flex-col" action="/api/link/{{ .data.Id }}/link" method="POST">
 		<p class="text-sm" for="link">Link</p>
 		<div class="flex gap-2">
-			<input class="w-full p-1 border-2 rounded-md placeholder-slate-800 focus:outline-none" type="text" value="{{ .data.Link }}" name="link" id="link"/>
+			<input class="tixe-input w-full" type="text" value="{{ .data.Link }}" name="link" id="link"/>
 			<button class="w-fit p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
 				Update
 			</button>
diff --git a/template/templates/settings.tmpl b/template/templates/settings.tmpl
index 8dd422a..884e0b4 100644
--- a/template/templates/settings.tmpl
+++ b/template/templates/settings.tmpl
@@ -9,7 +9,7 @@
 <form class="flex flex-col" action="/api/settings/user/display_name" method="POST">
 	<p class="text-sm" for="display_name">Display Name</p>
 	<div class="flex gap-2">
-		<input class="w-full p-1 border-2 rounded-md placeholder-slate-800 focus:outline-none" type="text" placeholder="{{ .user.DisplayName }}" name="display_name" id="display_name"/>
+		<input class="tixe-input w-full" type="text" placeholder="{{ .user.DisplayName }}" name="display_name" id="display_name"/>
 		<button class="w-fit p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
 			Update
 		</button>
diff --git a/template/templates/tags.tmpl b/template/templates/tags.tmpl
index 7a5c8dd..8991936 100644
--- a/template/templates/tags.tmpl
+++ b/template/templates/tags.tmpl
@@ -9,7 +9,7 @@
 <form class="flex flex-col" action="/api/tags/new" method="POST">
 	<p class="text-sm" for="tag">New Tag</p>
 	<div class="flex gap-2">
-		<input class="w-full h-8 p-1 border-2 rounded-md placeholder-slate-400 focus:outline-none" type="text" placeholder="..." name="tag" id="tag"/>
+		<input class="tixe-input h-8 w-full" type="text" placeholder="..." name="tag" id="tag"/>
 		<button class="group w-fit h-8 p-1 border-2 rounded-md drop-shadow-md bg-slate-50 hover:bg-slate-200 transition-colors" type="submit">
 			<svg class="absolute h-5 w-5 stroke-emerald-600 group-hover:stroke-emerald-700 transition-colors" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke-width="1.5" stroke-linecap="round"/>
-- 
2.44.1