From 00a1f4f12c5eebccebcea1285662e68de67b66fb Mon Sep 17 00:00:00 2001
From: Elias Schriefer <schriefer@fim.uni-passau.de>
Date: Tue, 18 Jun 2024 15:40:39 +0200
Subject: [PATCH] Fix button styling for 'add' page

---
 src/main/resources/static/add.css       |  1 +
 src/main/resources/static/main.css      |  8 +++++--
 src/main/resources/templates/index.html | 30 ++++++++++++-------------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css
index 4361843..a4b4b92 100644
--- a/src/main/resources/static/add.css
+++ b/src/main/resources/static/add.css
@@ -66,6 +66,7 @@ label:has(#is-dataset) {
     box-sizing: border-box;
     background-color: var(--text-color);
     transition: inset-inline ease-out 50ms;
+    filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
 }
 
 #is-dataset:not(:checked) + #is-dataset-toggle::before {
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index ece21e9..3c2d591 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -147,10 +147,14 @@ header {
     filter: brightness(1.3);
 }
 
-.btn:is(:hover, :focus-visible) {
+.btn.flat {
+    transition: filter ease-out 50ms;
+}
+
+.btn.flat:is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-.btn:active {
+.btn.flat:active {
     filter: brightness(1.75);
 }
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 2ac398e..0a7587d 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -15,12 +15,12 @@
         </header>
 
         <section id="tool-bar">
-            <select id="sort-btn" title="Sort entries">Sort by
+            <select id="sort-btn" class="btn flat" title="Sort entries">Sort by
                 <option>Option 1</option>
                 <option>Option 2</option>
             </select>
             <div class="divider"></div>
-            <select class="btn" id="filter-btn" title="Filter entries">Filter
+            <select class="btn flat" id="filter-btn" title="Filter entries">Filter
                 <optgroup label="Standard categories">
                     <option>Option 1</option>
                     <option>Option 2</option>
@@ -30,7 +30,7 @@
                 </optgroup>
             </select>
             <input type="search" name="query" id="search-entry" placeholder="Search">
-            <button class="btn" id="search-btn" title="Search entries">Search</button>
+            <button class="btn flat" id="search-btn" title="Search entries">Search</button>
         </section>
 
         <section id="recents">
@@ -46,9 +46,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -60,9 +60,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -74,9 +74,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -88,9 +88,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
                 <li class="dataset">
@@ -102,9 +102,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
             </ul>
@@ -121,9 +121,9 @@
                         </div>
                     </div>
                     <aside class="upvote">
-                        <button class="upvote-btn btn">Upvote</button>
+                        <button class="upvote-btn btn flat">Upvote</button>
                         <span class="upvote-count">0</span>
-                        <button class="downvote-btn btn">Downvote</button>
+                        <button class="downvote-btn btn flat">Downvote</button>
                     </aside>
                 </li>
             </ul>