From 9431c2bb71b6657a50f317e3caf163c96916cc57 Mon Sep 17 00:00:00 2001
From: J-Klinke <julianklinke@posteo.de>
Date: Fri, 14 Jun 2024 15:30:50 +0200
Subject: [PATCH] added searchbar

---
 src/main/resources/static/main.css      | 26 ++++++++++++++++++-------
 src/main/resources/templates/index.html |  1 +
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index df0f484..62eb72d 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -29,12 +29,14 @@ header {
 #tool-bar {
     display: flex;
     flex-direction: row;
+    float: right;
 }
 
 #search-bar {
     background-color: var(--fg-color, darkgrey);
     padding: .5rem 1rem;
     width: 100%;
+    border-radius: 1.5rem;
 }
 
 #search-entry {
@@ -75,27 +77,37 @@ header {
     align-items: center;
     gap: .5em;
 }
-
-.upvote-btn, .downvote-btn {
-    background: url(triangle.svg) no-repeat;
+/* Buttons */
+.upvote-btn, .downvote-btn, .search-btn {
+    background: var(--icon-url) no-repeat;
     background-size: contain;
     border: none;
-    width: 2em;
-    height: 2em;
+    width: var(--icon-size);
+    height: var(--icon-size);
     padding: 0;
     overflow: hidden;
     color: transparent;
     cursor: pointer;
 }
 
+.downvote-btn, .upvote-btn{
+    --icon-url: url(triangle.svg);
+    --icon-size: 2rem;
+}
+
 .downvote-btn {
     transform: rotate(180deg);
 }
 
-:is(.upvote-btn, .downvote-btn):is(:hover, :focus-visible) {
+.search-btn {
+    --icon-url: url(looking-glass.svg);
+    --icon-size: 1rem;
+}
+
+:is(.upvote-btn, .downvote-btn, .search-btn):is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn):active {
+:is(.upvote-btn, .downvote-btn, .search-btn):active {
     filter: brightness(1.75);
 }
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index d4b06bd..7654302 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -16,6 +16,7 @@
         <section id="tool-bar">
             <div id="search-bar">
                 <input type="search" name="query" id="search-entry" placeholder="Search">
+                <button class="search-btn">Search</button>
             </div>
         </section>