From bab7dd806d8f95cb77c5c7ee0e0e37467b9371b9 Mon Sep 17 00:00:00 2001
From: Mstiekema <github@mstiekema.nl>
Date: Thu, 12 Oct 2023 12:30:07 +0200
Subject: [PATCH] Fixed category buttons, added single source of truth for
 board color

---
 src/static/base.css             |  3 +++
 src/static/js/products.js       | 25 ++++++++++++++-----------
 src/views/base/base.css         |  3 +--
 src/views/base/base.html        |  1 +
 src/views/idle/idle.css         |  3 ++-
 src/views/idle/idle.html        |  1 +
 src/views/products/products.css |  8 ++++++++
 src/views/register/register.css |  2 +-
 8 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 src/static/base.css

diff --git a/src/static/base.css b/src/static/base.css
new file mode 100644
index 0000000..20cac9e
--- /dev/null
+++ b/src/static/base.css
@@ -0,0 +1,3 @@
+:root {
+	--board-color: #61518f;
+}
diff --git a/src/static/js/products.js b/src/static/js/products.js
index 2b2fdb2..636469c 100644
--- a/src/static/js/products.js
+++ b/src/static/js/products.js
@@ -37,22 +37,25 @@ ipcRenderer.on('getProducts', (event, arg) => {
         // Create category HTML
         let category = categories[i];
         let parser = new DOMParser();
+        // A body gets inserted which does something weird with the buttons
         document.getElementById("categoryList").firstElementChild.append(parser.parseFromString(
-          `<a class="ui red basic button category_button" href="#${category.name.toLowerCase()}_header">${category.name}</a>`
-        , 'text/html').body);
+          `<a class="ui basic button category_button" href="#${category.name.toLowerCase()}_header">${category.name}</a>`
+        , 'text/html').body.firstChild);
         document.getElementById("productList").append(parser.parseFromString(
           `
-          <a class="category_headers" id="${category.name.toLowerCase()}_header"></a>
-          <h1 class="ui horizontal divider header">
-            ${category.name}
-          </h1>
-          <section id="${category.name.toLowerCase()}" class="ui five column grid products"></section>
+          <article>
+            <a class="category_headers" id="${category.name.toLowerCase()}_header"></a>
+            <h1 class="ui horizontal divider header">
+              ${category.name}
+            </h1>
+            <section id="${category.name.toLowerCase()}" class="ui five column grid products"></section>
+          </article>
           `
-        , 'text/html').body);
-  
-        let products = categories[i].products.sort((a, b) => (a.name > b.name) ? 1 : -1)
+        , 'text/html').body.firstChild);
+
+        let products = category.products.sort((a, b) => (a.name > b.name) ? 1 : -1)
         for (let j = 0; j < products.length; j++) {
-          renderProduct(products[j], categories[i]);
+          renderProduct(products[j], category);
         }
       }
     }
diff --git a/src/views/base/base.css b/src/views/base/base.css
index 3c4e350..8294087 100644
--- a/src/views/base/base.css
+++ b/src/views/base/base.css
@@ -8,7 +8,7 @@ body {
 .menu {
 	height: 100px;
 	margin-bottom: 0 !important;
-	background-color: #61518f !important;
+	background-color: var(--board-color) !important;
 }
 
 .menu > span {
@@ -38,7 +38,6 @@ body {
 }
 
 /* Default components */
-
 main {
 	height: calc(100% - 100px);
 	position: relative;
diff --git a/src/views/base/base.html b/src/views/base/base.html
index 631951f..d00df14 100644
--- a/src/views/base/base.html
+++ b/src/views/base/base.html
@@ -10,6 +10,7 @@
 
   <!-- CSS Imports -->
   <link rel="stylesheet" type="text/css" href="../../../src/semantic/dist/semantic.min.css">
+  <link rel="stylesheet" type="text/css" href="../../static/base.css">
   <link rel="stylesheet" type="text/css" href="./base.css">
   <link rel="stylesheet" type="text/css" href="../products/products.css">
 </head>
diff --git a/src/views/idle/idle.css b/src/views/idle/idle.css
index f24ebc2..5e28687 100644
--- a/src/views/idle/idle.css
+++ b/src/views/idle/idle.css
@@ -1,10 +1,11 @@
 body {
-  background-color: #61518f;
+  background-color: var(--board-color);
 }
 
 #logo {
   display: block;
 }
+
 #description{
   text-align: center;
   color: #ffffff;
diff --git a/src/views/idle/idle.html b/src/views/idle/idle.html
index 8644abd..15fabdb 100644
--- a/src/views/idle/idle.html
+++ b/src/views/idle/idle.html
@@ -10,6 +10,7 @@
 
   <!-- CSS Imports -->
   <link rel="stylesheet" type="text/css" href="../../../src/semantic/dist/semantic.min.css">
+  <link rel="stylesheet" type="text/css" href="../../static/base.css">
   <link rel="stylesheet" type="text/css" href="./idle.css">
 </head>
 <body>
diff --git a/src/views/products/products.css b/src/views/products/products.css
index 20fb795..36f629b 100644
--- a/src/views/products/products.css
+++ b/src/views/products/products.css
@@ -4,10 +4,17 @@
   padding: 20px;
   z-index: 1;
   background-color: #f8f8f4;
+  text-align: center;
+}
+
+#categoryList > section {
+  width: 100%;
 }
 
 .category_button {
   font-size: 20px !important;
+  color: var(--board-color) !important;
+  box-shadow: 0 0 0 1px var(--board-color) inset !important;
 }
 
 #productList {
@@ -28,6 +35,7 @@
 
 #purchase {
   width: 100%;
+  background-color: var(--board-color);
 }
 
 #cartTitle {
diff --git a/src/views/register/register.css b/src/views/register/register.css
index aa2310f..7a901ea 100644
--- a/src/views/register/register.css
+++ b/src/views/register/register.css
@@ -1,5 +1,5 @@
 body {
-	background-color: #61518f;
+	background-color: var(--board-color);
 }
 #title {
   position: relative;