feat: Proper UI for item buttons

2 files changed, 29 insertions, 2 deletions

diff --git a/views/archive/item.php b/views/archive/item.php
index 4d3db12..f1d1f33 100644
--- a/views/archive/item.php
+++ b/views/archive/item.php
@@ -13,7 +13,10 @@
     <section name="itemButton" hidden>
         <form action="/list/update" method="GET">
             <input type="hidden" name="wid" value="<?= $page->WID ?>">
-            <input type="submit" value="+">
+            <button>
+                <!-- Tabler icons https://tabler.io/icons -->
+                <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="list-icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v5" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
+            </button>
         </form>
         <span><!-- Delete (when admin) button --></span>
     </section>
diff --git a/views/styles.css b/views/styles.css
index 6d0b257..142b530 100644
--- a/views/styles.css
+++ b/views/styles.css
@@ -44,7 +44,7 @@ h1 {
   text-align: center;
 }
 
-input {
+input, button {
   color: inherit;
 
   background-image: url(/paper.jpg);
@@ -319,6 +319,29 @@ hr.new-section {
   border-color: var(--dark-green);
 }
 
+.item [name=itemButton] {
+  border-left: 3px solid var(--dark-purple);
+  margin: -0.5em 0 -0.5em 0.5em;
+  padding: 0.5em 0 0.5em 0.5em;
+  display: flex;
+  flex-direction: column;
+}
+
+.item [name=itemButton] > * {
+  display: flex;
+  flex: 1;
+}
+
+.item [name=itemButton] input,
+.item [name=itemButton] button{
+  box-shadow: none;
+  padding: 0;
+}
+
+.list-icon {
+  color: var(--cherry);
+}
+
 /* User */
 .user-icon {
   height: 7em;
@@ -347,6 +370,7 @@ hr.new-section {
 #user-nav button {
   font-size: 1.3em;
   background-color: var(--dark-green);
+  background-image: none;
   border: none;
   color: inherit;
   padding: 0.3em;