From 46c2aa9150e89a9b7ac6b188ff0a7a7c15ed7d45 Mon Sep 17 00:00:00 2001
From: J-Klinke <julianklinke@posteo.de>
Date: Sat, 6 Jul 2024 20:50:58 +0200
Subject: [PATCH 1/3] design revisited

---
 src/main/resources/static/add.css  |  2 +-
 src/main/resources/static/main.css | 27 +++++++++++++++++++++------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css
index e4cc24d..5bbac6e 100644
--- a/src/main/resources/static/add.css
+++ b/src/main/resources/static/add.css
@@ -128,7 +128,7 @@ form :has(#url) {
 #btn-bar {
     grid-column: 1 / 4;
     justify-content: end;
-    gap: 1rem;
+    gap: 1rem ;
 }
 
 /* button styling */
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index 0ed8d3a..a642afd 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -148,6 +148,14 @@ header {
     --icon-size: 2rem;
 }
 
+:is(.downvote-btn, .upvote-btn):disabled {
+    filter: brightness(1.75);
+}
+
+:is(.downvote-btn, .upvote-btn).isVoted {
+    filter: brightness(1.1);
+}
+
 .downvote-btn {
     transform: rotate(180deg);
 }
@@ -172,10 +180,6 @@ header {
     --icon-size: 1rem;
 }
 
-.isVoted {
-    filter: brightness(1.75);
-}
-
 .divider {
     width: .05rem;
     height: 1rem;
@@ -194,10 +198,21 @@ header {
     transition: filter ease-out 50ms;
 }
 
-.btn.flat:is(:hover, :focus-visible) {
+.btn.flat:is(:hover, :focus-visible):not(:disabled) {
     filter: brightness(1.5);
 }
 
-.btn.flat:active {
+.btn.flat:active:not(:disabled){
     filter: brightness(1.75);
 }
+
+select * {
+    background-color: var(--fg-color);
+    color: var(--text-color);
+
+}
+
+select::selection {
+    background-color: #554094;
+}
+

From 1888b91afeb309103e7078ccaf020dc26a3e7291 Mon Sep 17 00:00:00 2001
From: Elias Schriefer <schriefer@fim.uni-passau.de>
Date: Sun, 7 Jul 2024 19:47:56 +0200
Subject: [PATCH 2/3] Fix add page design

---
 src/main/resources/static/add.css  | 47 +++++++++++++++++++++++-------
 src/main/resources/static/add.html | 40 +++++++++++++------------
 2 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css
index 979d061..ffdc542 100644
--- a/src/main/resources/static/add.css
+++ b/src/main/resources/static/add.css
@@ -1,9 +1,18 @@
 @import url("main.css");
 
+main {
+    padding: var(--pad-main);
+    padding-top: 0;
+}
+
 form {
     display: grid;
-    grid-template-columns: 1fr 1fr auto;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
     gap: 1rem 2rem;
+
+    @container (width >= 50rem) {
+        grid-template-columns: 1fr 1fr auto;
+    }
 }
 
 form > * {
@@ -25,6 +34,8 @@ form :is(input[type=text], input[type=url], textarea) {
     padding: .5em;
     font-family: sans-serif;
     flex-grow: 1;
+    width: 100%;
+    min-width: 5rem;
 }
 
 /* focus outlines */
@@ -73,6 +84,8 @@ label:has(#is-dataset) {
     background-color: var(--fg-color);
     border-radius: .5lh;
     position: relative;
+    display: inline-block;
+    vertical-align: bottom;
 }
 
 #is-dataset-toggle::before {
@@ -91,6 +104,14 @@ label:has(#is-dataset) {
     filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
 }
 
+#is-dataset-toggle-container {
+    justify-content: center;
+
+    label::after {
+        content: none;
+    }
+}
+
 #is-dataset:focus-visible + #is-dataset-toggle {
     outline: 2px solid var(--accent-color);
 }
@@ -103,20 +124,17 @@ label:has(#is-dataset) {
     inset-inline: calc(2rem - .5lh - var(--switch-gap)) 0;
 }
 
-/* short description box */
-form :has(#short-description) {
-    grid-column: 1 / 2;
-}
-
 form :has(#url) {
-    grid-column: 2 / 4;
+    @container (width >= 50rem) {
+        grid-column: span 2;
+    }
 }
 
 /* full description box */
 #full-description-box {
-    grid-column: 1 / 4;
-    margin: 1rem 0;
+    grid-column: 1 / -1;
     align-items: start;
+    flex-direction: column;
 }
 
 #full-description {
@@ -126,7 +144,7 @@ form :has(#url) {
 
 /* button bar */
 #btn-bar {
-    grid-column: 1 / 4;
+    grid-column: -2 / -1;
     justify-content: end;
     gap: 1rem ;
 }
@@ -172,6 +190,11 @@ form :has(#url) {
     filter: var(--drop-shadow) grayscale(.5) brightness(.5);
 }
 
+.btn.full-width {
+    width: -moz-available;
+    width: -webkit-fill-available;
+}
+
 #category[value="new"] {
     display: none;
 }
@@ -184,6 +207,7 @@ label[for="category"] {
 
 span:has(#category) {
     gap: unset;
+    justify-content: center;
 }
 
 #new-category-group:not(.hidden) {
@@ -197,4 +221,7 @@ span:has(#category) {
     background-image: url("./sort.svg");
     background-size: contain;
     background-origin: content-box;
+    background-repeat: no-repeat;
+    min-width: 2rem;
+    padding: var(--gap-small)
 }
diff --git a/src/main/resources/static/add.html b/src/main/resources/static/add.html
index 3c9f9c8..65378d1 100644
--- a/src/main/resources/static/add.html
+++ b/src/main/resources/static/add.html
@@ -13,7 +13,7 @@
             <h1>Add new DataDash content</h1>
         </header>
 
-        <section>
+        <section id="add-content-section">
             <p>
                 Please add the following information about your dataset/API to
                 help users better find it and understand what it is about and
@@ -23,62 +23,64 @@
             <form>
                 <span>
                     <label for="title">Title</label>
-                    <input type="text" name="title" id="title" minlength="1" maxlength="50" required>
+                    <input type="text" name="title" id="title" size="3" minlength="1" maxlength="50" required>
                 </span>
 
                 <span id="author-box">
                     <label for="author">Author/provider</label>
-                    <input type="text" name="author" id="author" required>
+                    <input type="text" name="author" id="author" size="3" required>
                 </span>
 
-                <label>
-                    Dataset
-                    <input type="checkbox" name="is-dataset" id="is-dataset">
-                    <span id="is-dataset-toggle"></span>
-                    API
-                </label>
+                <span id="is-dataset-toggle-container">
+                    <label>
+                        Dataset
+                        <input type="checkbox" name="is-dataset" id="is-dataset">
+                        <span id="is-dataset-toggle"></span>
+                        API
+                    </label>
+                </span>
 
                 <span>
                     <label for="short-description">Short description</label>
-                    <input type="text" name="short-description" id="short-description" maxlength="100" required spellcheck="true">
+                    <input type="text" name="short-description" id="short-description" size="3" maxlength="100" required spellcheck="true">
                 </span>
 
                 <span>
                     <label for="url">URL</label>
-                    <input type="url" name="url" id="url" required>
+                    <input type="url" name="url" id="url" size="3" required>
                 </span>
 
                 <span>
                     <label for="terms-of-use">Terms of Use URL</label>
-                    <input type="url" name="terms-of-use" id="terms-of-use" required>
+                    <input type="url" name="terms-of-use" id="terms-of-use" size="3" required>
                 </span>
 
                 <span>
                     <label for="license">License</label>
-                    <input type="text" name="license" id="license" required>
+                    <input type="text" name="license" id="license" size="3" required>
                 </span>
 
                 <span>
                     <label for="category">Category</label>
-                    <select name="category" id="category" class="btn" required autocomplete="off">
+                    <select name="category" id="category" class="btn full-width" required autocomplete="off">
                         <option value="" selected disabled hidden>Category</option>
                         <option value="new">New category</option>
                         <hr>
                     </select>
                     <span id="new-category-group" class="hidden">
-                        <input type="text" id="new-category" size="2" required disabled autocomplete="off">
-                        <button id="change-category-btn" class="btn flat" title="change category"></button>
+                        <input type="text" id="new-category" size="3" required disabled autocomplete="off">
+                        <button id="change-category-btn" class="btn" title="change category"></button>
                     </span>
                 </span>
 
                 <span id="full-description-box">
                     <label for="full-description">Full description</label>
-                    <textarea name="full-description" id="full-description" spellcheck="true"></textarea>
+                    <textarea name="full-description" id="full-description" cols="3" spellcheck="true"></textarea>
                 </span>
 
                 <span id="btn-bar">
-                    <input type="submit" value="Add" id="btn-add" class="btn suggested" disabled>
-                    <input type="reset" value="Cancel" id="btn-cancel" class="btn">
+                    <input type="submit" value="Add" id="btn-add" class="btn suggested full-width" disabled>
+                    <input type="reset" value="Cancel" id="btn-cancel" class="btn full-width">
                 </span>
             </form>
         </section>

From 3fcb100199d6e17cd49a300cad7c82cb6c7f9820 Mon Sep 17 00:00:00 2001
From: Elias Schriefer <schriefer@fim.uni-passau.de>
Date: Mon, 8 Jul 2024 01:25:07 +0200
Subject: [PATCH 3/3] Add common button styling

---
 src/main/resources/static/add.css      |  45 +----------
 src/main/resources/static/buttons.css  | 106 +++++++++++++++++++++++++
 src/main/resources/static/details.css  |  40 +---------
 src/main/resources/static/details.html |  12 +--
 src/main/resources/static/details.js   |  59 +++++++-------
 src/main/resources/static/index.html   |  14 ++--
 src/main/resources/static/main.css     |  74 ++++++-----------
 7 files changed, 174 insertions(+), 176 deletions(-)
 create mode 100644 src/main/resources/static/buttons.css

diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css
index ffdc542..07fe2cb 100644
--- a/src/main/resources/static/add.css
+++ b/src/main/resources/static/add.css
@@ -43,7 +43,7 @@ form :is(input[type=text], input[type=url], textarea) {
     outline: 2px solid var(--accent-color);
 }
 
-.btn, #is-dataset-toggle {
+#is-dataset-toggle {
     transition: outline ease-in 100ms;
 }
 
@@ -150,51 +150,10 @@ form :has(#url) {
 }
 
 /* button styling */
-.btn {
-    padding: .5lh 1lh;
-    border: none;
-    border-radius: .5lh;
-    --btn-color: var(--fg-color);
-    background-color: var(--btn-color);
-    color: var(--text-color);
-    font-weight: bold;
-    font-size: 1rem;
-    transition: background-color 100ms, filter 200ms;
-    transition-timing-function: ease-out;
-    --drop-shadow-opacity: .5;
-    --drop-shadow-offset-y: 0;
-    --drop-shadow-blur: .25rem;
-    --drop-shadow: drop-shadow(
-        rgba(0, 0, 0, var(--drop-shadow-opacity))
-        0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
-    );
-    filter: var(--drop-shadow);
-}
-
-.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle {
+#is-dataset:focus-visible + #is-dataset-toggle {
     outline-offset: 2px;
 }
 
-.btn:not(:disabled):hover {
-    background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
-    --drop-shadow-opacity: .8;
-    --drop-shadow-offset-y: .25rem;
-    --drop-shadow-blur: .4rem;
-}
-
-.btn.suggested {
-    --btn-color: var(--accent-color);
-}
-
-.btn:disabled {
-    filter: var(--drop-shadow) grayscale(.5) brightness(.5);
-}
-
-.btn.full-width {
-    width: -moz-available;
-    width: -webkit-fill-available;
-}
-
 #category[value="new"] {
     display: none;
 }
diff --git a/src/main/resources/static/buttons.css b/src/main/resources/static/buttons.css
new file mode 100644
index 0000000..a01cbd8
--- /dev/null
+++ b/src/main/resources/static/buttons.css
@@ -0,0 +1,106 @@
+.btn {
+    padding: .5lh 1lh;
+    border: none;
+    border-radius: .5lh;
+
+    --btn-color: var(--fg-color);
+    /* color: var(--text-color); */
+    background-color: var(--btn-color);
+
+    font-weight: bold;
+    font-size: 1rem;
+
+    --transition-duration-short: 50ms;
+    --transition-duration-medium: 100ms;
+    --transition-duration-long: 200ms;
+    --transition-duration-bg-color: var(--transition-duration-medium);
+    --transition-duration-filter: var(--transition-duration-long);
+    --transition-duration-outline: var(--transition-duration-medium);
+    transition:
+        background-color ease-out var(--transition-duration-bg-color),
+        filter ease-out var(--transition-duration-filter),
+        outline ease-in var(--transition-duration-outline);
+
+    --drop-shadow-opacity: .5;
+    --drop-shadow-offset-y: 0;
+    --drop-shadow-blur: .25rem;
+    filter: var(--filter);
+    --filter:
+        brightness(var(--brightness, 1))
+        grayscale(var(--grayscale, 0));
+    cursor: pointer;
+
+    &:not(.flat) {
+        --drop-shadow: drop-shadow(
+            rgba(0, 0, 0, var(--drop-shadow-opacity))
+            0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
+        );
+
+        @supports (color: rgb(from black r g b / 0.5)) {
+            --drop-shadow: drop-shadow(
+                rgba(from var(--bg-color) r g b / var(--drop-shadow-opacity))
+                0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
+            );
+        }
+
+        filter: var(--filter) var(--drop-shadow);
+    }
+
+    &:not(:disabled):not(.flat):hover {
+        background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
+        --drop-shadow-opacity: .8;
+        --drop-shadow-offset-y: .25rem;
+        --drop-shadow-blur: .4rem;
+    }
+
+    &:where(:disabled) {
+        --brightness: .5;
+        --grayscale: .5;
+    }
+
+    &.suggested:not(.destructive) {
+        --btn-color: var(--accent-color);
+    }
+
+    &.destructive:not(.suggested) {
+        --btn-color: #861c1c;
+    }
+
+    &:focus-visible {
+        outline-offset: 2px;
+    }
+
+    &.icon {
+        --text-color: transparent;
+        background: var(--icon-url) no-repeat;
+        background-size: contain;
+        overflow: hidden;
+        width: var(--icon-size, 1rem);
+        height: var(--icon-size, 1rem);
+    }
+
+    &.flat {
+        border-radius: 0;
+        padding: 0;
+        --transition-duration-filter: var(--transition-duration-short);
+
+        &:not(:disabled) {
+            &:hover, &:focus-visible {
+                --brightness: 1.5;
+            }
+
+            &:active {
+                --brightness: 1.75;
+            }
+        }
+    }
+
+    /*
+        This class is just a hint, so this is on a best-effort basis.
+        If it works, it works, if not, then not.
+    */
+    &.full-width {
+        width: -moz-available;
+        width: -webkit-fill-available;
+    }
+}
diff --git a/src/main/resources/static/details.css b/src/main/resources/static/details.css
index 92d1372..18f1083 100644
--- a/src/main/resources/static/details.css
+++ b/src/main/resources/static/details.css
@@ -1,4 +1,4 @@
-@import url("./main.css");
+@import url("main.css");
 @import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');
 
 :root {
@@ -226,44 +226,6 @@ a {
     display: flex;
 }
 
-#delete-btn {
-    background: #861c1c;
-}
-
-/* button styling to be revisited */
-.btn {
-    padding: .5lh 1lh;
-    border: none;
-    border-radius: .5lh;
-    --btn-color: var(--fg-color);
-    background-color: var(--btn-color);
-    color: var(--text-color);
-    font-weight: bold;
-    font-size: 1rem;
-    transition: background-color 100ms, filter 200ms;
-    transition-timing-function: ease-out;
-    --drop-shadow-opacity: .5;
-    --drop-shadow-offset-y: 0;
-    --drop-shadow-blur: .25rem;
-    --drop-shadow: drop-shadow(
-            rgba(0, 0, 0, var(--drop-shadow-opacity))
-            0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
-    );
-    filter: var(--drop-shadow);
-}
-
-.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle {
-    outline-offset: 2px;
-}
-
-.btn:not(:disabled):hover {
-    background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
-    --drop-shadow-opacity: .8;
-    --drop-shadow-offset-y: .25rem;
-    --drop-shadow-blur: .4rem;
-}
-
-
 #nothing-found-bg {
     background-position-x: calc(50% + 3cqh);
 }
diff --git a/src/main/resources/static/details.html b/src/main/resources/static/details.html
index ff27926..9d14c0b 100644
--- a/src/main/resources/static/details.html
+++ b/src/main/resources/static/details.html
@@ -13,9 +13,9 @@
 <body>
     <template id="voting-template">
         <aside class="upvote">
-            <button class="upvote-btn btn flat">Upvote</button>
+            <button class="upvote-btn btn flat icon">Upvote</button>
             <span class="upvote-count">0</span>
-            <button class="downvote-btn btn flat">Downvote</button>
+            <button class="downvote-btn btn flat icon">Downvote</button>
         </aside>
     </template>
 
@@ -29,9 +29,9 @@
             </summary>
             <a id="url">https://example.com/dataset</a>
             <aside class="upvote">
-                <button disabled class="upvote-btn btn flat">Upvote</button>
+                <button disabled class="upvote-btn btn flat icon">Upvote</button>
                 <span class="upvote-count">0</span>
-                <button disabled class="downvote-btn btn flat">Downvote</button>
+                <button disabled class="downvote-btn btn flat icon">Downvote</button>
             </aside>
         </header>
         
@@ -60,8 +60,8 @@
             </p>
         </section>
         <section id="details-btns">
-            <button id="back-btn" class="btn">Back to main page</button>
-            <button id="delete-btn" class="hidden btn">Delete</button>
+            <button id="back-btn" class="btn suggested">Back to main page</button>
+            <button id="delete-btn" class="hidden btn destructive">Delete</button>
         </section>
     </main>
 
diff --git a/src/main/resources/static/details.js b/src/main/resources/static/details.js
index 3f80529..9a5cc97 100644
--- a/src/main/resources/static/details.js
+++ b/src/main/resources/static/details.js
@@ -18,25 +18,20 @@ const deleteButton = document.getElementById("delete-btn");
 
 let dataset = null;
 let currentRating = 0;
-let isRated = false;
 
 const currentLocation = new URL(location.href);
 if (currentLocation.searchParams.has("id")) {
     const id = currentLocation.searchParams.get("id");
-    const response = await fetch(`${currentLocation.origin}/api/v1/datasets/id/${id}`);
+    const response = await fetch(`/api/v1/datasets/id/${id}`);
 
     if (response.ok) {
         const data = await response.json();
         dataset = new Dataset(data);
         const upvoteComponent = dataset.createUpvoteComponent();
 
-        console.log(dataset.storageGet());
-        debugger
         if (dataset.storageGetKey("created-locally", false)) {
             deleteButton.classList.remove("hidden");
         }
-        isRated = dataset.storageGetKey("is-rated", false)
-
 
         title.innerText = dataset.title;
         title.dataset.type = dataset.type.toLowerCase();
@@ -74,20 +69,21 @@ backButton.addEventListener("click", () => {
     window.location.href = location.origin;
 })
 
-deleteButton.addEventListener("click", () => {
+deleteButton.addEventListener("click", async () => {
     if (dataset != null) {
-        fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id, {
-            method: 'DELETE'
-        }).then(resp => {
-            if (resp.ok) {
-                window.location.href = location.origin;
-            }
-        });
+        const response = await fetch(
+            `/api/v1/datasets/id/${dataset.id}`,
+            { method: 'DELETE' }
+        );
+
+        if (response.ok) {
+            window.location.href = location.origin;
+        }
     }
 });
 
 rating.addEventListener("mousemove", (event) => {
-    if (!isRated) {
+    if (!dataset.storageGetKey("is-rated", false)) {
         let bounds = rating.getBoundingClientRect();
         currentRating = Math.round(((event.clientX - bounds.left) / bounds.width) * 5);
         console.log(currentRating);
@@ -100,22 +96,21 @@ rating.addEventListener("mouseleave", () => {
     rating.value = dataset.rating;
 });
 
-rating.addEventListener("click", () => {
-    if (!isRated) {
-        fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id + "/stars?stars=" + currentRating, {
-            method: 'PUT'
-        }).then(resp => {
-            if (resp.ok) {
-                dataset.storageSetKey("is-rated", true);
-                isRated = true;
-                fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id)
-                    .then(resp => resp.json())
-                    .then((data) => {
-                        dataset = new Dataset(data);
-                        ratingText.innerText = parseFloat(dataset.rating).toFixed(1);
-                        rating.value = dataset.rating;
-                });
-            }
-        });
+rating.addEventListener("click", async () => {
+    if (!dataset.storageGetKey("is-rated", false)) {
+        const starsResponse = await fetch(
+            `/api/v1/datasets/id/${dataset.id}/stars?stars=${currentRating}`,
+            { method: 'PUT' }
+        );
+
+        if (starsResponse.ok) {
+            dataset.storageSetKey("is-rated", true);
+            const response = await fetch(`/api/v1/datasets/id/${dataset.id}`);
+            const data = await response.json();
+
+            dataset = new Dataset(data);
+            ratingText.innerText = parseFloat(dataset.rating).toFixed(1);
+            rating.value = dataset.rating;
+        }
     }
 })
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index 88979c4..07cd93d 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -13,7 +13,7 @@
     <script type="module" src="main.js" defer></script>
 </head>
 <body>
-    <div id="add-btn" title="Add a new API entry"></div>
+    <div id="add-btn" class="btn flat icon" title="Add a new API entry"></div>
     <main>
         <header>
             <h1>Welcome to DataDash</h1>
@@ -29,16 +29,16 @@
                     </div>
                 </div>
                 <aside class="upvote">
-                    <button class="upvote-btn btn flat">Upvote</button>
+                    <button class="upvote-btn btn flat icon">Upvote</button>
                     <span class="upvote-count">0</span>
-                    <button class="downvote-btn btn flat">Downvote</button>
+                    <button class="downvote-btn btn flat icon">Downvote</button>
                 </aside>
             </li>
         </template>
 
         <section id="tool-bar">
-            <button class="btn flat" id="reset-tools-btn" title="Reset search results">Reset</button>
-            <select id="sort-btn" class="btn flat" title="Sort entries">Sort by
+            <button class="btn flat icon" id="reset-tools-btn" title="Reset search results">Reset</button>
+            <select id="sort-btn" class="btn flat icon" title="Sort entries">Sort by
                 <option id="default-sort">Date newest-oldest</option>
                 <option>Date oldest-newest</option>
                 <option>Author A-Z</option>
@@ -51,7 +51,7 @@
                 <option>Upvotes ↓</option>
             </select>
             <div class="divider"></div>
-            <select class="btn flat" id="filter-btn" title="Filter entries">Filter
+            <select class="btn flat icon" id="filter-btn" title="Filter entries">Filter
                 <option id="default-filter">None</option>
                 <optgroup label="Standard categories">
                     <option>Dataset</option>
@@ -61,7 +61,7 @@
                 </optgroup>
             </select>
             <input type="search" name="query" id="search-entry" placeholder="Search">
-            <button class="btn flat" id="search-btn" title="Search entries">Search</button>
+            <button class="btn flat icon" id="search-btn" title="Search entries">Search</button>
         </section>
 
         <section id="recents">
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index a642afd..e755baf 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -1,3 +1,5 @@
+@import url("buttons.css");
+
 :root {
     --bg-color: #222;
     --fg-color: #555;
@@ -13,11 +15,17 @@
     --corner-radius: 1rem;
     font-size: 12pt;
     font-family: sans-serif;
+    scrollbar-gutter: stable both-edges;
+    scrollbar-color: var(--fg-color) var(--bg-color);
+}
+
+* {
+    color: var(--text-color, white);
 }
 
 body {
     background-color: var(--bg-color, black);
-    color: var(--text-color, white);
+    /* color: var(--text-color, white); */
     margin: 0;
 }
 
@@ -34,18 +42,22 @@ header {
 }
 
 #add-btn {
-    width: 7rem;
-    height: 7rem;
+    --icon-size: 7rem;
+    --icon-url: linear-gradient(135deg, pink, darkblue);
     content: url("add-button-mask.svg");
-    background: linear-gradient(135deg, pink, darkblue);
     clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
-
-    cursor: pointer;
-
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
+
+    &:hover, &:focus-visible {
+        --brightness: 1.2;
+    }
+
+    &:active {
+        --brightness: 1.3;
+    }
 }
 
 #tool-bar {
@@ -131,29 +143,13 @@ header {
 }
 
 /* Buttons */
-.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #reset-tools-btn {
-    background: var(--icon-url) no-repeat;
-    background-size: contain;
-    border: none;
-    width: var(--icon-size);
-    height: var(--icon-size);
-    padding: 0;
-    overflow: hidden;
-    color: transparent;
-    cursor: pointer;
-}
-
-.downvote-btn, .upvote-btn{
+.downvote-btn, .upvote-btn {
     --icon-url: url(triangle.svg);
     --icon-size: 2rem;
-}
 
-:is(.downvote-btn, .upvote-btn):disabled {
-    filter: brightness(1.75);
-}
-
-:is(.downvote-btn, .upvote-btn).isVoted {
-    filter: brightness(1.1);
+    &:disabled {
+        --brightness: 1.75;
+    }
 }
 
 .downvote-btn {
@@ -162,22 +158,18 @@ header {
 
 #search-btn {
     --icon-url: url(looking-glass.svg);
-    --icon-size: 1rem;
 }
 
 #filter-btn {
     --icon-url: url(filter.svg);
-    --icon-size: 1rem;
 }
 
 #reset-tools-btn {
     --icon-url: url(reset.svg);
-    --icon-size: 1rem;
 }
 
 #sort-btn {
     --icon-url: url(sort.svg);
-    --icon-size: 1rem;
 }
 
 .divider {
@@ -186,24 +178,8 @@ header {
     background-color: var(--bg-color);
 }
 
-#add-btn:is(:hover, :focus-visible) {
-    filter: brightness(1.2);
-}
-
-#add-btn:active {
-    filter: brightness(1.3);
-}
-
-.btn.flat {
-    transition: filter ease-out 50ms;
-}
-
-.btn.flat:is(:hover, :focus-visible):not(:disabled) {
-    filter: brightness(1.5);
-}
-
-.btn.flat:active:not(:disabled){
-    filter: brightness(1.75);
+:is(.upvote-btn, .downvote-btn).isVoted {
+    --brightness: 1.1;
 }
 
 select * {