From a8c6a6457a4d56a96645c5ca4b09ab5f1dfc4e33 Mon Sep 17 00:00:00 2001
From: Ozan Gulle <ozangulle@gmail.com>
Date: Mon, 13 Jan 2025 21:51:47 +0100
Subject: [PATCH] feat(ui): unify input styles on different pages

---
 resources/public/css/custom.css            | 27 ++--------------------
 resources/templates/admin-categories.html  |  6 ++---
 resources/templates/admin-languages.html   |  4 ++--
 resources/templates/admin-preferences.html |  6 ++---
 resources/templates/admin.html             | 12 +++++-----
 resources/templates/statistics.html        |  6 ++---
 resources/templates/watcher.html           |  6 ++---
 resources/templates/watchers.html          |  4 ++--
 8 files changed, 24 insertions(+), 47 deletions(-)

diff --git a/resources/public/css/custom.css b/resources/public/css/custom.css
index b54855e..e2f5841 100644
--- a/resources/public/css/custom.css
+++ b/resources/public/css/custom.css
@@ -1,13 +1,13 @@
 .nav-button {
     border-bottom: solid;
-    border-bottom-color: rgb(59 7 100);
+    border-bottom-color: black;
     border-bottom-width: thick;
     text-transform: uppercase;
 }
 
 .sub-nav-button {
     border-bottom: solid;
-    border-bottom-color: rgb(59 7 100);
+    border-bottom-color: black;
     border-bottom-width: thick;
     text-transform: uppercase;
     font-size: 0.9em;
@@ -16,26 +16,3 @@
 .flex-container {
     display: flex;
 }
-
-/* Pagination links */
-/*.pagination a {
-  color: black;
-  float: left;
-  padding: 8px 16px;
-  text-decoration: none;
-  transition: background-color .3s;
-}*/
-
-/* Style the active/current link */
-/*.pagination a.active {
-  background-color: dodgerblue;
-  color: white;
-}*/
-
-/* Add a grey background color on mouse-over */
-/*.pagination a:hover:not(.active) {background-color: #ddd;} 
-
-.html-email {
-    width: 100%;
-    height: 100%;
-}*/
diff --git a/resources/templates/admin-categories.html b/resources/templates/admin-categories.html
index 9a1d83c..e4a2ffd 100644
--- a/resources/templates/admin-categories.html
+++ b/resources/templates/admin-categories.html
@@ -12,7 +12,7 @@ <h3 class="uppercase text-lg my-8">Manage Categories</h3>
       <td>
         <form action="/admin/categories/{{category.id}}" id="{{category.id}}" method="DELETE">
           <input name="method" type="hidden" value="DELETE">
-          <button class="rounded-none px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white" type="submit">X</button>
+          <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm rounded-lg" type="submit">X</button>
         </form>
       </td>
 
@@ -27,7 +27,7 @@ <h3 class="uppercase text-lg my-8">Manage Categories</h3>
 </table>
 <h3 class="uppercase text-lg my-8">New Category</h3>
 <form action="/admin/categories" method="POST">
-  <input class="pr-4" name="name" value="">
-  <button class="rounded-none px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white" type="submit">Add category</button></form>
+  <input class="mr-4 border-2 ring-1 text-gray-700 focus:text-gray-700 focus:border-gray-200 focus:ring-gray-200" name="name" value="">
+  <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm rounded-lg" type="submit">Add category</button></form>
 
 {% endblock %}
diff --git a/resources/templates/admin-languages.html b/resources/templates/admin-languages.html
index 0a8cccb..6dedbb8 100644
--- a/resources/templates/admin-languages.html
+++ b/resources/templates/admin-languages.html
@@ -6,7 +6,7 @@ <h3 class="uppercase text-lg my-8">Language Detection</h3>
 
 <form action="/metadata/languages" id="detect" method="post">
   <input type="hidden" name="redirect-url" value="/admin/languages"</input>
-  <button class="rounded-none ml-3 px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white" type="submit" form="detect">Detect Languages</button>
+  <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm rounded-lg" type="submit" form="detect">Detect Languages</button>
 </form>
 
 <h3 class="uppercase text-lg my-8">Language Preferences</h3>
@@ -25,7 +25,7 @@ <h3 class="uppercase text-lg my-8">Language Preferences</h3>
     {% for preference in language-preferences %}
     <tr><td>{{preference.language}}</td><td><input {% if preference.use_in_training = 1 %}checked{% endif %} form="preferences" name="use" type="checkbox" value="{{preference.language}}"></td></tr>
     {% endfor %}
-    <tr><th><button class="rounded-none ml-3 px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white"  form="preferences">Send</button></th></tr>
+    <tr><th><button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm rounded-lg"  form="preferences">Send</button></th></tr>
 </tbody></table>
 
 </form>
diff --git a/resources/templates/admin-preferences.html b/resources/templates/admin-preferences.html
index 88a664f..1dd563e 100644
--- a/resources/templates/admin-preferences.html
+++ b/resources/templates/admin-preferences.html
@@ -9,13 +9,13 @@ <h3 class="uppercase text-lg my-10">Preferences</h3>
     <input type="hidden" name="redirect-url" value="/admin/preferences"</input>
     <div>
       <label class="block mb-2 text-sm font-medium text-gray-900"  for="language-detection-threshold">Language Detection Threshold</label>
-      <input class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-purple-900 focus:border-purple-900 block p-2.5" name="language-detection-threshold" value="{{language-detection-threshold}}">
+      <input class="mr-4 text-gray-700 focus:text-gray-700 focus:border-gray-200 focus:ring-gray-200" name="language-detection-threshold" value="{{language-detection-threshold}}">
     </div>
     <div>
       <label class="block mb-2 text-sm font-medium text-gray-900" for="categorization-threshold">Categorization Threshold</label>
-      <input class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-purple-900 focus:border-purple-900 block p-2.5" name="categorization-threshold" value="{{categorization-threshold}}">
+      <input class="mr-4 text-gray-700 focus:text-gray-700 focus:border-gray-200 focus:ring-gray-200" name="categorization-threshold" value="{{categorization-threshold}}">
     </div>
   </div>
-  <button class="rounded-none px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white" type="send">Save</button>
+  <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium rounded-lg text-sm" type="send">Save</button>
  </form>
 {% endblock %}
diff --git a/resources/templates/admin.html b/resources/templates/admin.html
index afc3cd6..cc00814 100644
--- a/resources/templates/admin.html
+++ b/resources/templates/admin.html
@@ -16,27 +16,27 @@ <h4 class="text-l mt-16 mb-2">Parse E-Mails</h4>
     <form action="emails/parse" enctype="multipart/form-data" method="POST">
       <input name="redirect-url" type="hidden" value="/admin" />
       <input name="filename" type="file" />
-      <button class="rounded-none px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white" type="submit">Parse Mbox</button>
+      <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm rounded-lg" type="submit">Parse Mbox</button>
     </form>
   </div>
 </div>
 
   <h4 class="text-l mt-16 mb-2">Danger Zone</h4>
-  <div class="flex-container">
+  <div class="flex-wrap flex gap-4">
     <form action="/admin/database" id="db-delete" method="DELETE">
       <input name="method" type="hidden" value="DELETE" />
-      <button class="rounded-none px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white" type="submit">Delete Database</button>
+      <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm rounded-lg" type="submit">Delete Database</button>
     </form>
     <form action="/admin/database" method="POST" value="post">
-      <button class="rounded-none mx-3 px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white" type="submit">Create Database</button>
+      <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm rounded-lg" type="submit">Create Database</button>
     </form>
     <form action="/admin/training" id="training-delete" method="DELETE">
       <input name="method" type="hidden" value="DELETE" />
-      <button class="rounded-none px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white" type="submit">Delete Training Data</button>
+      <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm rounded-lg" type="submit">Delete Training Data</button>
     </form>
     <form action="/admin/models" id="models-delete" method="DELETE">
       <input name="method" type="hidden" value="DELETE" />
-      <button class="rounded-none ml-3 px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white" type="submit">Delete Models</button>
+      <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm rounded-lg" type="submit">Delete Models</button>
     </form>
   </div>
 
diff --git a/resources/templates/statistics.html b/resources/templates/statistics.html
index 2b5abef..b6d3539 100644
--- a/resources/templates/statistics.html
+++ b/resources/templates/statistics.html
@@ -16,19 +16,19 @@ <h3 class="uppercase text-lg my-8 mx-16">Filter</h3>
 <form action="{{interval-filter.url}}" method="GET">
   <div class="flex flex-row justify-start content-center">
     <div class="w-32 mx-16">
-      <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-purple-900 focus:border-purple-900 block w-full p-2.5" name="interval" autocomplete="off">
+      <select class="block mr-4 bg-gray-50 border border-gray-200 text-gray-700 focus:bg-gray-700 focus:ring-gray-200 focus:border-gray-200 focus:text-white text-sm rounded-lg block w-full p-2.5 w-full" name="interval" autocomplete="off">
         <option value="yearly" {% if interval-filter.selected-interval = yearly %}selected{% endif %}>yearly</option>
         <option value="monthly" {% if interval-filter.selected-interval = monthly %}selected{% endif %}>monthly</option>
       </select>
     </div>
     <div class="mx-4">
-      <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-purple-900 focus:border-purple-900 block w-full p-2.5" name="year" autocomplete="off">
+      <select class="block mr-4 bg-gray-50 border border-gray-200 text-gray-700 focus:bg-gray-700 focus:ring-gray-200 focus:border-gray-200 focus:text-white text-sm rounded-lg block w-full p-2.5 w-full" name="year" autocomplete="off">
         {% for year in interval-filter.years %}
         <option {% if interval-filter.selected-year = year %}selected{% endif %} value="{{year}}">{{year}}</option>
         {% endfor %}
       </select>
     </div>
-    <button class="rounded-none ml-3 px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white"  type="submit">Apply</button>
+    <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium text-sm"  type="submit">Apply</button>
   </div>
 </form>
 
diff --git a/resources/templates/watcher.html b/resources/templates/watcher.html
index e24b141..6916ddf 100644
--- a/resources/templates/watcher.html
+++ b/resources/templates/watcher.html
@@ -6,13 +6,13 @@ <h3 class="uppercase text-lg my-8">Imap Watcher for {{host}} - {{user}}</h3>
 <div class="flex flex-nowrap">
   <form id="parse" action="/watchers/{{id}}" method="POST">
     <label for="move">Move e-mails after categorization</label>
-    <input name="move" type="checkbox">
-    <select class="my-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="folder">
+    <input class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-200 rounded focus:ring-blue-500 focus:ring-2" name="move" type="checkbox">
+    <select class="block mr-4 my-2 bg-gray-50 border border-gray-200 text-gray-700 focus:bg-gray-700 focus:ring-gray-200 focus:border-gray-200 focus:text-white text-sm rounded-lg block w-full p-2.5 w-full" name="folder">
       {% for folder in folders %}
       <option value="{{folder}}">{{folder}}</option>
       {% endfor %}
     </select>
-    <button form="parse" class="my-2 rounded-none px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white">Parse E-mails</button>
+    <button form="parse" class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium rounded-lg text-sm">Parse E-mails</button>
   </form>
 </div>
 
diff --git a/resources/templates/watchers.html b/resources/templates/watchers.html
index cbaac27..e312081 100644
--- a/resources/templates/watchers.html
+++ b/resources/templates/watchers.html
@@ -16,12 +16,12 @@ <h3 class="uppercase text-lg my-8">IMAP Clients</h3>
     {% for watcher in watchers %}
     <tr class="border-btext-slate-700">
       <td class="text-left">
-        <a class="border-b-2 rounded-none px-4 py-2 border-purple-900 hover:bg-purple-900 hover:text-white" href="/watchers/{{watcher.id}}">{{watcher.string}}</a>
+        <a class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium rounded-lg text-sm" href="/watchers/{{watcher.id}}">{{watcher.string}}</a>
       </td>
       <td class="text-center">{{watcher.logged-in}}</td>
       <td class="text-center">{{watcher.folder-open}}</td>
       <td class="text-center">
-        <button class="rounded-none px-4 py-2 ring-2 ring-purple-900 hover:bg-purple-900 hover:text-white"><a href="/watchers/{{watcher.id}}/restart">Restart</a></button>
+        <button class="px-4 py-2 text-white bg-gray-700 hover:bg-gray-900 font-medium rounded-lg text-sm"><a href="/watchers/{{watcher.id}}/restart">Restart</a></button>
       </td>
     </tr>
     {% endfor %}