From 148035ed0dc98baf12d7879c3d4f349ee24b5e8f Mon Sep 17 00:00:00 2001
From: J-Klinke <julianklinke@posteo.de>
Date: Fri, 14 Jun 2024 16:51:55 +0200
Subject: [PATCH 1/5] improved toolbar, implemented filter

---
 src/main/resources/static/filter.svg    | 49 +++++++++++++++++++++++++
 src/main/resources/static/main.css      | 18 +++++----
 src/main/resources/templates/index.html | 11 +++++-
 3 files changed, 69 insertions(+), 9 deletions(-)
 create mode 100644 src/main/resources/static/filter.svg

diff --git a/src/main/resources/static/filter.svg b/src/main/resources/static/filter.svg
new file mode 100644
index 0000000..d90e5c0
--- /dev/null
+++ b/src/main/resources/static/filter.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="1.29333in" height="1.31in"
+     viewBox="0 0 388 393">
+  <path id="Selection"
+        fill="#222" stroke="#222" stroke-width="1"
+        d="M 13.00,0.53
+           C 13.00,0.53 46.00,0.00 46.00,0.00
+             46.00,0.00 109.00,0.00 109.00,0.00
+             109.00,0.00 303.00,0.00 303.00,0.00
+             303.00,0.00 367.00,0.00 367.00,0.00
+             379.06,0.02 388.86,5.38 387.90,19.00
+             387.38,26.49 382.97,30.02 378.00,35.00
+             378.00,35.00 360.00,53.00 360.00,53.00
+             360.00,53.00 277.00,136.00 277.00,136.00
+             277.00,136.00 257.00,156.00 257.00,156.00
+             249.62,163.38 246.02,164.34 246.00,175.00
+             246.00,175.00 246.00,317.00 246.00,317.00
+             246.00,317.00 246.00,370.00 246.00,370.00
+             245.98,381.68 241.23,394.14 227.00,392.66
+             217.40,391.67 208.57,380.57 202.00,374.00
+             202.00,374.00 164.00,336.00 164.00,336.00
+             152.71,324.71 145.03,320.93 145.00,304.00
+             145.00,304.00 145.00,177.00 145.00,177.00
+             144.99,174.35 145.19,171.43 143.98,169.00
+             142.58,166.21 137.39,161.39 135.00,159.00
+             135.00,159.00 118.00,142.00 118.00,142.00
+             118.00,142.00 35.00,59.00 35.00,59.00
+             35.00,59.00 13.00,37.04 13.00,37.04
+             9.44,33.64 4.50,30.22 2.09,26.00
+             -3.75,15.77 2.41,3.93 13.00,0.53 Z
+           M 328.00,35.00
+           C 328.00,35.00 61.00,35.00 61.00,35.00
+             65.72,41.59 84.13,59.13 91.00,66.00
+             91.00,66.00 149.00,124.00 149.00,124.00
+             149.00,124.00 167.00,142.00 167.00,142.00
+             170.31,145.31 175.43,149.89 177.43,154.00
+             179.72,158.68 179.99,163.91 180.00,169.00
+             180.00,169.00 180.00,295.00 180.00,295.00
+             180.00,297.09 179.88,300.06 180.60,302.00
+             182.02,305.85 190.74,313.74 194.00,317.00
+             199.15,322.15 205.21,328.85 211.00,333.00
+             211.00,333.00 211.00,166.00 211.00,166.00
+             211.01,160.84 211.17,156.76 213.56,152.00
+             215.57,147.97 219.79,144.21 223.00,141.00
+             223.00,141.00 241.00,123.00 241.00,123.00
+             241.00,123.00 298.00,66.00 298.00,66.00
+             304.87,59.13 323.28,41.59 328.00,35.00 Z" />
+</svg>
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index 62eb72d..706751a 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -30,12 +30,9 @@ header {
     display: flex;
     flex-direction: row;
     float: right;
-}
-
-#search-bar {
+    gap: .5rem;
     background-color: var(--fg-color, darkgrey);
     padding: .5rem 1rem;
-    width: 100%;
     border-radius: 1.5rem;
 }
 
@@ -44,6 +41,9 @@ header {
     border: none;
     color: var(--text-color);
 }
+#search-entry:focus-visible {
+    outline: none;
+}
 
 .datasets {
     padding-inline: var(--pad-datasets);
@@ -78,7 +78,7 @@ header {
     gap: .5em;
 }
 /* Buttons */
-.upvote-btn, .downvote-btn, .search-btn {
+.upvote-btn, .downvote-btn, .search-btn, .filter-btn {
     background: var(--icon-url) no-repeat;
     background-size: contain;
     border: none;
@@ -103,11 +103,15 @@ header {
     --icon-url: url(looking-glass.svg);
     --icon-size: 1rem;
 }
+.filter-btn{
+    --icon-url: url(filter.svg);
+    --icon-size: 1rem;
+}
 
-:is(.upvote-btn, .downvote-btn, .search-btn):is(:hover, :focus-visible) {
+:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn, .search-btn):active {
+:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):active {
     filter: brightness(1.75);
 }
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 7654302..b65b530 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -14,10 +14,17 @@
         </header>
 
         <section id="tool-bar">
-            <div id="search-bar">
+                <select class="filter-btn">Filter
+                    <optgroup label="Standard categories">
+                        <option>Option 1</option>
+                        <option>Option 2</option>
+                    </optgroup>
+                    <optgroup label="User categories">
+                        <option>user category</option>
+                    </optgroup>
+                </select>
                 <input type="search" name="query" id="search-entry" placeholder="Search">
                 <button class="search-btn">Search</button>
-            </div>
         </section>
 
         <section id="recents">

From 5a682e1800b63e2849d08f8a66b945a08475a76e Mon Sep 17 00:00:00 2001
From: J-Klinke <julianklinke@posteo.de>
Date: Mon, 17 Jun 2024 15:11:16 +0200
Subject: [PATCH 2/5] basic implementation of add button

---
 src/main/resources/static/main.css      | 9 +++++++++
 src/main/resources/templates/index.html | 4 ++++
 2 files changed, 13 insertions(+)

diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index 706751a..d3c8a35 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -7,11 +7,13 @@
     --min-card-size: 60ch;
     --corner-radius: 1rem;
     font-size: 12pt;
+    font-family: sans-serif;
 }
 
 body {
     background-color: var(--bg-color, black);
     color: var(--text-color, white);
+    margin: 0;
 }
 
 main {
@@ -26,6 +28,13 @@ header {
     margin-inline: .75rem;
 }
 
+#add-btn {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
 #tool-bar {
     display: flex;
     flex-direction: row;
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index cc670ee..efc3f69 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -7,6 +7,10 @@
     <link rel="stylesheet" href="main.css">
 </head>
 <body>
+    <svg  id="add-btn" width="100" height="100">
+        <polygon onclick="console.log('ahhhh')" points="0, 0, 0, 100, 100, 0" fill="yellow" />
+        <text x="25" y="25" >+</text>
+    </svg>
     <main>
         <header>
             <h1>Welcome to DataDash</h1>

From b721973d05b99121b64310f029571aa2984ea475 Mon Sep 17 00:00:00 2001
From: J-Klinke <julianklinke@posteo.de>
Date: Mon, 17 Jun 2024 15:42:20 +0200
Subject: [PATCH 3/5] implemented sort-by, implemented divider, fixed class/id
 in css

---
 src/main/resources/static/main.css      | 20 ++++++--
 src/main/resources/static/sort.svg      | 61 +++++++++++++++++++++++++
 src/main/resources/templates/index.html | 29 +++++++-----
 3 files changed, 93 insertions(+), 17 deletions(-)
 create mode 100644 src/main/resources/static/sort.svg

diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index d3c8a35..1f1581a 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -87,7 +87,7 @@ header {
     gap: .5em;
 }
 /* Buttons */
-.upvote-btn, .downvote-btn, .search-btn, .filter-btn {
+.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn {
     background: var(--icon-url) no-repeat;
     background-size: contain;
     border: none;
@@ -108,19 +108,29 @@ header {
     transform: rotate(180deg);
 }
 
-.search-btn {
+#search-btn {
     --icon-url: url(looking-glass.svg);
     --icon-size: 1rem;
 }
-.filter-btn{
+#filter-btn {
     --icon-url: url(filter.svg);
     --icon-size: 1rem;
 }
 
-:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):is(:hover, :focus-visible) {
+#sort-btn {
+    --icon-url: url(sort.svg);
+    --icon-size: 1rem;
+}
+
+.divider {
+    width: .05rem;
+    background-color: #222;
+}
+
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):active {
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):active {
     filter: brightness(1.75);
 }
diff --git a/src/main/resources/static/sort.svg b/src/main/resources/static/sort.svg
new file mode 100644
index 0000000..a259268
--- /dev/null
+++ b/src/main/resources/static/sort.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="1.2in" height="1.05333in"
+     viewBox="0 0 360 316">
+  <path id="Selection"
+        fill="#222" stroke="#222" stroke-width="1"
+        d="M 64.00,85.00
+           C 64.00,85.00 43.62,121.00 43.62,121.00
+             40.24,127.21 33.18,140.58 27.99,144.58
+             16.02,153.82 -0.96,144.07 0.10,129.00
+             0.58,122.10 5.78,114.81 9.25,109.00
+             9.25,109.00 17.50,94.00 17.50,94.00
+             17.50,94.00 27.91,76.00 27.91,76.00
+             27.91,76.00 34.83,65.00 34.83,65.00
+             34.83,65.00 62.26,17.00 62.26,17.00
+             67.57,7.75 71.45,-0.78 84.00,0.10
+             94.23,0.81 97.72,8.22 102.17,16.00
+             102.17,16.00 108.62,27.00 108.62,27.00
+             108.62,27.00 125.76,57.00 125.76,57.00
+             125.76,57.00 130.48,64.00 130.48,64.00
+             130.48,64.00 150.17,99.00 150.17,99.00
+             155.14,107.71 165.61,121.95 164.90,132.00
+             164.00,144.90 148.83,152.55 138.00,145.30
+             131.19,140.74 124.40,125.60 119.70,118.00
+             119.70,118.00 100.00,84.00 100.00,84.00
+             100.00,84.00 100.00,263.00 100.00,263.00
+             100.00,263.00 100.00,289.00 100.00,289.00
+             100.00,293.06 100.34,300.37 99.20,304.00
+             96.71,311.96 89.10,316.47 81.00,315.90
+             68.82,315.05 65.02,305.63 65.00,295.00
+             65.00,295.00 65.00,152.00 65.00,152.00
+             65.00,152.00 65.00,108.00 65.00,108.00
+             65.00,101.39 65.72,91.06 64.00,85.00 Z
+           M 260.00,232.00
+           C 260.00,232.00 260.00,53.00 260.00,53.00
+             260.00,53.00 260.00,27.00 260.00,27.00
+             260.00,22.94 259.66,15.63 260.80,12.00
+             263.29,4.04 270.90,-0.47 279.00,0.10
+             291.18,0.95 294.98,10.37 295.00,21.00
+             295.00,21.00 295.00,164.00 295.00,164.00
+             295.00,164.00 295.00,208.00 295.00,208.00
+             295.00,214.61 294.28,224.94 296.00,231.00
+             296.00,231.00 316.38,195.00 316.38,195.00
+             319.76,188.79 326.82,175.42 332.01,171.42
+             343.98,162.18 360.96,171.93 359.90,187.00
+             359.42,193.90 354.22,201.19 350.75,207.00
+             350.75,207.00 342.50,222.00 342.50,222.00
+             342.50,222.00 332.09,240.00 332.09,240.00
+             332.09,240.00 325.17,251.00 325.17,251.00
+             325.17,251.00 297.74,299.00 297.74,299.00
+             292.43,308.25 288.55,316.78 276.00,315.90
+             265.77,315.19 262.28,307.78 257.83,300.00
+             257.83,300.00 251.38,289.00 251.38,289.00
+             251.38,289.00 234.24,259.00 234.24,259.00
+             234.24,259.00 229.52,252.00 229.52,252.00
+             229.52,252.00 209.83,217.00 209.83,217.00
+             204.86,208.29 194.39,194.05 195.10,184.00
+             196.00,171.10 211.17,163.45 222.00,170.70
+             228.81,175.26 235.60,190.40 240.30,198.00
+             240.30,198.00 260.00,232.00 260.00,232.00 Z" />
+</svg>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index efc3f69..995a140 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DataDash</title>
-    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="../static/main.css">
 </head>
 <body>
     <svg  id="add-btn" width="100" height="100">
@@ -18,17 +18,22 @@
         </header>
 
         <section id="tool-bar">
-                <select class="filter-btn">Filter
-                    <optgroup label="Standard categories">
-                        <option>Option 1</option>
-                        <option>Option 2</option>
-                    </optgroup>
-                    <optgroup label="User categories">
-                        <option>user category</option>
-                    </optgroup>
-                </select>
-                <input type="search" name="query" id="search-entry" placeholder="Search">
-                <button class="search-btn">Search</button>
+            <select id="sort-btn">Sort by
+                <option>Option 1</option>
+                <option>Option 2</option>
+            </select>
+            <div class="divider"></div>
+            <select id="filter-btn">Filter
+                <optgroup label="Standard categories">
+                    <option>Option 1</option>
+                    <option>Option 2</option>
+                </optgroup>
+                <optgroup label="User categories">
+                    <option>user category</option>
+                </optgroup>
+            </select>
+            <input type="search" name="query" id="search-entry" placeholder="Search">
+            <button id="search-btn">Search</button>
         </section>
 
         <section id="recents">

From 1fe7a2ca29238dd85c0dbf4022602c7ce98c9859 Mon Sep 17 00:00:00 2001
From: J-Klinke <julianklinke@posteo.de>
Date: Mon, 17 Jun 2024 15:49:50 +0200
Subject: [PATCH 4/5] changed css path to be correct

---
 src/main/resources/templates/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 995a140..b1677be 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DataDash</title>
-    <link rel="stylesheet" href="../static/main.css">
+    <link rel="stylesheet" href="main.css">
 </head>
 <body>
     <svg  id="add-btn" width="100" height="100">

From d5889341e6fa1cd633f8e914cf2ec2be1ab0d794 Mon Sep 17 00:00:00 2001
From: J-Klinke <julianklinke@posteo.de>
Date: Tue, 18 Jun 2024 11:43:14 +0200
Subject: [PATCH 5/5] proper add button implementation

---
 src/main/resources/static/add-button-mask.svg | 105 ++++++++++++++++++
 src/main/resources/static/main.css            |  17 ++-
 src/main/resources/templates/index.html       |   5 +-
 3 files changed, 119 insertions(+), 8 deletions(-)
 create mode 100644 src/main/resources/static/add-button-mask.svg

diff --git a/src/main/resources/static/add-button-mask.svg b/src/main/resources/static/add-button-mask.svg
new file mode 100644
index 0000000..221de76
--- /dev/null
+++ b/src/main/resources/static/add-button-mask.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="1.70667in" height="1.70667in"
+     viewBox="0 0 512 512">
+  <path id="Selection"
+        fill="#222" stroke="#222" stroke-width="1"
+        d="M 343.00,167.00
+           C 343.00,167.00 459.00,51.00 459.00,51.00
+             459.00,51.00 493.00,17.00 493.00,17.00
+             498.17,11.83 505.67,2.99 512.00,0.00
+             512.00,0.00 512.00,512.00 512.00,512.00
+             512.00,512.00 0.00,512.00 0.00,512.00
+             0.00,512.00 23.83,487.00 23.83,487.00
+             23.83,487.00 58.00,452.00 58.00,452.00
+             58.00,452.00 107.00,403.00 107.00,403.00
+             107.00,403.00 136.00,374.00 136.00,374.00
+             137.97,372.03 145.89,364.80 146.29,362.58
+             146.69,360.29 142.68,354.93 141.35,353.00
+             141.35,353.00 125.66,330.00 125.66,330.00
+             125.66,330.00 80.32,263.00 80.32,263.00
+             80.32,263.00 69.89,247.83 69.89,247.83
+             68.45,245.69 65.56,242.71 65.91,240.00
+             66.25,237.36 70.15,233.86 72.00,232.00
+             72.00,232.00 92.00,212.42 92.00,212.42
+             96.05,209.82 99.54,213.00 103.00,215.28
+             103.00,215.28 127.00,231.61 127.00,231.61
+             127.00,231.61 144.00,242.96 144.00,242.96
+             144.00,242.96 194.00,277.00 194.00,277.00
+             194.00,277.00 210.00,287.95 210.00,287.95
+             211.56,289.01 214.71,291.60 216.58,291.58
+             219.48,291.55 227.66,282.34 230.00,280.00
+             230.00,280.00 210.00,261.00 210.00,261.00
+             210.00,261.00 178.00,229.00 178.00,229.00
+             178.00,229.00 146.00,197.00 146.00,197.00
+             146.00,197.00 127.00,177.00 127.00,177.00
+             143.52,160.48 160.02,138.08 186.00,139.36
+             201.99,140.15 214.55,147.35 227.00,156.83
+             246.44,171.64 266.00,194.88 269.19,220.00
+             270.40,229.48 267.55,235.32 266.00,244.00
+             266.00,244.00 307.00,203.00 307.00,203.00
+             307.00,203.00 287.00,184.00 287.00,184.00
+             287.00,184.00 255.00,152.00 255.00,152.00
+             255.00,152.00 223.00,120.00 223.00,120.00
+             223.00,120.00 204.00,100.00 204.00,100.00
+             219.55,84.45 234.07,64.73 257.58,62.38
+             275.04,60.64 290.72,69.69 304.00,79.83
+             324.38,95.39 345.96,120.97 346.68,148.00
+             346.85,154.54 344.43,160.73 343.00,167.00 Z
+           M 315.00,164.00
+           C 316.37,161.28 318.16,158.01 318.65,155.00
+             320.22,145.40 311.79,134.05 306.22,127.00
+             297.46,115.92 292.28,110.47 281.00,101.83
+             268.92,92.58 259.85,85.59 245.00,94.00
+             247.97,100.29 255.94,106.94 261.00,112.00
+             261.00,112.00 294.00,145.00 294.00,145.00
+             299.40,150.40 308.55,160.95 315.00,164.00 Z
+           M 237.00,242.00
+           C 239.18,238.69 241.42,235.05 241.78,231.00
+             242.25,225.48 239.16,219.09 236.49,214.42
+             230.27,203.54 220.92,194.72 212.00,186.01
+             208.24,182.34 204.16,178.87 200.01,175.64
+             190.44,168.17 176.54,162.65 167.00,173.00
+             167.00,173.00 212.00,218.00 212.00,218.00
+             212.00,218.00 237.00,242.00 237.00,242.00 Z
+           M 343.00,167.00
+           C 343.00,167.00 342.00,167.00 342.00,167.00
+             342.00,167.00 343.00,168.00 343.00,168.00
+             343.00,168.00 343.00,167.00 343.00,167.00 Z
+           M 266.00,244.00
+           C 266.00,244.00 265.00,244.00 265.00,244.00
+             265.00,244.00 266.00,245.00 266.00,245.00
+             266.00,245.00 266.00,244.00 266.00,244.00 Z
+           M 100.00,245.00
+           C 100.00,245.00 99.00,245.00 99.00,245.00
+             99.00,245.00 100.00,246.00 100.00,246.00
+             100.00,246.00 100.00,245.00 100.00,245.00 Z
+           M 265.00,245.00
+           C 265.00,245.00 264.00,245.00 264.00,245.00
+             264.00,245.00 265.00,246.00 265.00,246.00
+             265.00,246.00 265.00,245.00 265.00,245.00 Z
+           M 101.00,246.00
+           C 101.00,246.00 100.00,246.00 100.00,246.00
+             100.00,246.00 101.00,247.00 101.00,247.00
+             101.00,247.00 101.00,246.00 101.00,246.00 Z
+           M 102.00,247.00
+           C 102.00,247.00 101.00,247.00 101.00,247.00
+             101.00,247.00 102.00,248.00 102.00,248.00
+             102.00,248.00 102.00,247.00 102.00,247.00 Z
+           M 146.00,278.00
+           C 146.00,278.00 122.00,261.20 122.00,261.20
+             117.33,257.51 107.29,249.51 102.00,248.00
+             102.00,248.00 122.98,278.00 122.98,278.00
+             124.77,280.69 130.15,288.87 133.09,289.66
+             137.56,290.87 144.36,281.48 146.00,278.00 Z
+           M 167.00,293.00
+           C 167.00,293.00 154.01,305.00 154.01,305.00
+             154.01,305.00 149.32,312.00 149.32,312.00
+             149.32,312.00 154.21,321.00 154.21,321.00
+             154.21,321.00 168.00,341.00 168.00,341.00
+             174.28,338.03 183.78,327.33 189.00,322.00
+             190.79,320.17 194.48,317.02 193.66,314.13
+             193.08,312.05 188.76,309.50 187.00,308.16
+             187.00,308.16 167.00,293.00 167.00,293.00 Z" />
+</svg>
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index 1f1581a..0711eca 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -29,12 +29,19 @@ header {
 }
 
 #add-btn {
+    width: 7rem;
+    height: 7rem;
+    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;
 }
-
 #tool-bar {
     display: flex;
     flex-direction: row;
@@ -50,6 +57,7 @@ header {
     border: none;
     color: var(--text-color);
 }
+
 #search-entry:focus-visible {
     outline: none;
 }
@@ -124,13 +132,14 @@ header {
 
 .divider {
     width: .05rem;
-    background-color: #222;
+    height: 1rem;
+    background-color: var(--bg-color);
 }
 
-:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):is(:hover, :focus-visible) {
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):active {
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active {
     filter: brightness(1.75);
 }
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index b1677be..172c714 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -7,10 +7,7 @@
     <link rel="stylesheet" href="main.css">
 </head>
 <body>
-    <svg  id="add-btn" width="100" height="100">
-        <polygon onclick="console.log('ahhhh')" points="0, 0, 0, 100, 100, 0" fill="yellow" />
-        <text x="25" y="25" >+</text>
-    </svg>
+    <div onclick="console.log('add')" id="add-btn"></div>
     <main>
         <header>
             <h1>Welcome to DataDash</h1>