From a40e401005ce07d4bfa82d82587b7ef6c4a14f97 Mon Sep 17 00:00:00 2001
From: gronod <gordon@i3omb.com>
Date: Sun, 23 Aug 2026 09:38:10 +0100
Subject: [PATCH 1/7] feat: add ICCery logo to main screen and about modal

---
 src/assets/ICCery-logo.svg | 47 ++++++++++++++++++++++++++++++++++++++
 src/index.html             |  5 +++-
 src/styles/main.css        | 18 ++++++++++++---
 3 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/ICCery-logo.svg

diff --git a/src/assets/ICCery-logo.svg b/src/assets/ICCery-logo.svg
new file mode 100644
index 0000000..ec2b139
--- /dev/null
+++ b/src/assets/ICCery-logo.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 160" width="100%" height="100%">
+  <defs>
+    <clipPath id="coneClip">
+      <path d="M 50 82 L 110 82 L 80 142 Z" />
+    </clipPath>
+    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#00AEEF" />
+      <stop offset="100%" stop-color="#0066CC" />
+    </linearGradient>
+  </defs>
+
+  <!-- Drop Shadow -->
+  <ellipse cx="80" cy="145" rx="25" ry="5" fill="#1E293B" opacity="0.1" />
+
+  <!-- Ice Cream Cone (Waffle) -->
+  <path d="M 50 82 L 110 82 L 80 142 Z" fill="#FAD7A1" stroke="#E59866" stroke-width="2.5" stroke-linejoin="round"/>
+  <g clip-path="url(#coneClip)" stroke="#E59866" stroke-width="2">
+    <line x1="40" y1="80" x2="120" y2="160" />
+    <line x1="55" y1="80" x2="135" y2="160" />
+    <line x1="70" y1="80" x2="150" y2="160" />
+    <line x1="85" y1="80" x2="165" y2="160" />
+
+    <line x1="120" y1="80" x2="40" y2="160" />
+    <line x1="105" y1="80" x2="25" y2="160" />
+    <line x1="90" y1="80" x2="10" y2="160" />
+    <line x1="75" y1="80" x2="-5" y2="160" />
+  </g>
+
+  <!-- CMYK Scoops (C, M, Y) -->
+  <circle cx="63" cy="72" r="22" fill="#00BCEB" stroke="#ffffff" stroke-width="2.5"/>
+  <circle cx="97" cy="72" r="22" fill="#EC008C" stroke="#ffffff" stroke-width="2.5"/>
+  <circle cx="80" cy="48" r="22" fill="#FFED00" stroke="#ffffff" stroke-width="2.5"/>
+
+  <!-- Black (Key) Cherry -->
+  <path d="M 80 23 Q 92 12 96 16" fill="none" stroke="#1E293B" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="80" cy="24" r="7" fill="#1E293B" stroke="#ffffff" stroke-width="1.5"/>
+
+  <!-- Highlights on scoops for 3D effect -->
+  <circle cx="58" cy="67" r="4" fill="#ffffff" opacity="0.35"/>
+  <circle cx="92" cy="67" r="4" fill="#ffffff" opacity="0.35"/>
+  <circle cx="75" cy="43" r="4" fill="#ffffff" opacity="0.45"/>
+  <circle cx="78" cy="22" r="1.5" fill="#ffffff" opacity="0.6"/>
+
+  <!-- Text: ICCery -->
+  <text font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="58" font-weight="800" x="140" y="105" fill="#1E293B" letter-spacing="-1">ICC<tspan fill="url(#textGrad)">ery</tspan></text>
+</svg>
diff --git a/src/index.html b/src/index.html
index 5ef676d..a245e23 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,7 +14,7 @@
     <div class="app-container">
       <aside class="sidebar">
         <div class="brand">
-          <h1>ICCery</h1>
+          <img src="./assets/ICCery-logo.svg" alt="ICCery" class="main-logo" />
           <div class="brand-actions">
             <button id="openAboutBtn" class="icon-btn" title="About" style="display: flex; align-items: center; justify-content: center;">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -363,6 +363,9 @@
     <!-- About Dialog -->
     <dialog id="aboutDialog" class="settings-modal about-modal">
       <div class="modal-content">
+        <div class="about-logo-container">
+          <img src="./assets/ICCery-logo.svg" alt="ICCery Logo" class="about-logo" />
+        </div>
         <h2>About ICCery</h2>
         <p><strong>Version:</strong> <span id="aboutVersion">v0.1.0</span> &bull; <strong>Build Date:</strong> <span id="aboutBuildDate">August 2026</span></p>
         <p><strong>Copyright &copy; 2026 Gordon Bolton. All rights reserved.</strong></p>
diff --git a/src/styles/main.css b/src/styles/main.css
index 64b91ec..6ee023e 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -41,9 +41,21 @@ body {
   gap: 8px;
 }
 
-.brand h1 {
-  margin: 0;
-  font-size: 1.5rem;
+.main-logo {
+  height: 2rem;
+  max-width: 200px;
+  object-fit: contain;
+}
+
+.about-logo-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.about-logo {
+  height: 4rem;
+  object-fit: contain;
 }
 
 .stepper {
-- 
2.39.5


From 68437b371d347b828e6e2fa935964fa0addba44e Mon Sep 17 00:00:00 2001
From: gronod <gordon@i3omb.com>
Date: Sun, 23 Aug 2026 09:40:34 +0100
Subject: [PATCH 2/7] fix: change ICC text to white and increase logo size

---
 src/assets/ICCery-logo.svg | 2 +-
 src/styles/main.css        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/assets/ICCery-logo.svg b/src/assets/ICCery-logo.svg
index ec2b139..2b7b7e2 100644
--- a/src/assets/ICCery-logo.svg
+++ b/src/assets/ICCery-logo.svg
@@ -43,5 +43,5 @@
   <circle cx="78" cy="22" r="1.5" fill="#ffffff" opacity="0.6"/>
 
   <!-- Text: ICCery -->
-  <text font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="58" font-weight="800" x="140" y="105" fill="#1E293B" letter-spacing="-1">ICC<tspan fill="url(#textGrad)">ery</tspan></text>
+  <text font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="58" font-weight="800" x="140" y="105" fill="#ffffff" letter-spacing="-1">ICC<tspan fill="url(#textGrad)">ery</tspan></text>
 </svg>
diff --git a/src/styles/main.css b/src/styles/main.css
index 6ee023e..5574d98 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -42,7 +42,7 @@ body {
 }
 
 .main-logo {
-  height: 2rem;
+  height: 2.8rem;
   max-width: 200px;
   object-fit: contain;
 }
@@ -54,7 +54,7 @@ body {
 }
 
 .about-logo {
-  height: 4rem;
+  height: 5.5rem;
   object-fit: contain;
 }
 
-- 
2.39.5


From a33697ac3ed4915fe2803f56f345459bfbe33d3b Mon Sep 17 00:00:00 2001
From: gronod <gordon@i3omb.com>
Date: Sun, 23 Aug 2026 09:42:12 +0100
Subject: [PATCH 3/7] style: enlarge main logo by 15% and make header icons
 light grey

---
 src/styles/main.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index 5574d98..7b858a9 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -42,8 +42,8 @@ body {
 }
 
 .main-logo {
-  height: 2.8rem;
-  max-width: 200px;
+  height: 3.22rem;
+  max-width: 230px;
   object-fit: contain;
 }
 
@@ -683,10 +683,13 @@ button.danger:hover {
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
+  color: #d1d5db;
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 .icon-btn:hover {
   background: var(--border-color);
+  color: #ffffff;
 }
 
 .settings-modal {
-- 
2.39.5


From 4a4d2eec0b7bce07a619b988ccc98fa3a29bd9c3 Mon Sep 17 00:00:00 2001
From: gronod <gordon@i3omb.com>
Date: Sun, 23 Aug 2026 09:44:28 +0100
Subject: [PATCH 4/7] style: fix select dropdown and option styling in dark
 mode

---
 src/styles/main.css | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index 7b858a9..0896850 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,4 +1,5 @@
 :root {
+  color-scheme: dark;
   --bg-color: #1e1e1e;
   --panel-color: #252526;
   --text-color: #d4d4d4;
@@ -129,13 +130,34 @@ button.primary:hover {
   margin-bottom: 8px;
 }
 
+select,
 .form-group select {
-  padding: 8px;
-  background-color: var(--panel-color);
-  color: var(--text-color);
+  padding: 8px 12px;
+  background-color: var(--bg-color);
+  color: #ffffff;
   border: 1px solid var(--border-color);
   border-radius: 4px;
-  width: 200px;
+  width: 100%;
+  max-width: 320px;
+  color-scheme: dark;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+select:focus,
+.form-group select:focus {
+  outline: 1px solid var(--accent-color);
+  border-color: var(--accent-color);
+}
+
+select option {
+  background-color: var(--panel-color);
+  color: #ffffff;
+}
+
+select option:checked {
+  background-color: var(--accent-color);
+  color: #ffffff;
 }
 
 @keyframes fadeIn {
-- 
2.39.5


From 04e431a871da6320f60a11f5d22c9b3f7b55bada Mon Sep 17 00:00:00 2001
From: gronod <gordon@i3omb.com>
Date: Sun, 23 Aug 2026 09:52:26 +0100
Subject: [PATCH 5/7] style: enlarge main logo by 10% and swap settings/about
 button order

---
 src/index.html      | 12 ++++++------
 src/styles/main.css |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/index.html b/src/index.html
index a245e23..ec2934b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,6 +16,12 @@
         <div class="brand">
           <img src="./assets/ICCery-logo.svg" alt="ICCery" class="main-logo" />
           <div class="brand-actions">
+            <button id="openSettingsBtn" class="icon-btn" title="Settings" style="display: flex; align-items: center; justify-content: center;">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="3"></circle>
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+              </svg>
+            </button>
             <button id="openAboutBtn" class="icon-btn" title="About" style="display: flex; align-items: center; justify-content: center;">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="12" cy="12" r="10"></circle>
@@ -23,12 +29,6 @@
                 <line x1="12" y1="8" x2="12.01" y2="8"></line>
               </svg>
             </button>
-            <button id="openSettingsBtn" class="icon-btn" title="Settings" style="display: flex; align-items: center; justify-content: center;">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="3"></circle>
-                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-              </svg>
-            </button>
           </div>
         </div>
         <nav class="stepper">
diff --git a/src/styles/main.css b/src/styles/main.css
index 0896850..28e0919 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -43,8 +43,8 @@ body {
 }
 
 .main-logo {
-  height: 3.22rem;
-  max-width: 230px;
+  height: 3.54rem;
+  max-width: 250px;
   object-fit: contain;
 }
 
-- 
2.39.5


From 75fc176880ec633325df2432cee6f11dd0a14abc Mon Sep 17 00:00:00 2001
From: gronod <gordon@i3omb.com>
Date: Sun, 23 Aug 2026 09:57:37 +0100
Subject: [PATCH 6/7] style: increase main screen logo size by 25%

---
 src/styles/main.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index 28e0919..2138a74 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -43,8 +43,8 @@ body {
 }
 
 .main-logo {
-  height: 3.54rem;
-  max-width: 250px;
+  height: 4.42rem;
+  max-width: 310px;
   object-fit: contain;
 }
 
-- 
2.39.5


From 9ac7b265721bb5d4ac7b29167af305a60f3a5740 Mon Sep 17 00:00:00 2001
From: gronod <gordon@i3omb.com>
Date: Sun, 23 Aug 2026 09:59:47 +0100
Subject: [PATCH 7/7] style: fix sidebar icon overflow and content vertical
 spacing

---
 src/styles/main.css | 38 +++++++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index 2138a74..6b644d1 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -22,7 +22,7 @@ body {
 }
 
 .sidebar {
-  width: 250px;
+  width: 270px;
   background-color: var(--panel-color);
   border-right: 1px solid var(--border-color);
   display: flex;
@@ -30,22 +30,29 @@ body {
 }
 
 .brand {
-  padding: 20px;
+  padding: 14px 16px;
   border-bottom: 1px solid var(--border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 10px;
+  min-width: 0;
 }
 
 .brand-actions {
   display: flex;
-  gap: 8px;
+  gap: 6px;
+  flex-shrink: 0;
 }
 
 .main-logo {
   height: 4.42rem;
-  max-width: 310px;
+  max-width: 175px;
+  width: 100%;
   object-fit: contain;
+  object-position: left center;
+  flex-shrink: 1;
+  min-width: 0;
 }
 
 .about-logo-container {
@@ -88,7 +95,7 @@ body {
 
 .content {
   flex: 1;
-  padding: 40px;
+  padding: 24px 32px;
   overflow-y: auto;
 }
 
@@ -103,6 +110,7 @@ body {
 
 h2 {
   margin-top: 0;
+  margin-bottom: 6px;
   color: #fff;
 }
 
@@ -110,11 +118,11 @@ button.primary {
   background-color: var(--accent-color);
   color: white;
   border: none;
-  padding: 10px 20px;
-  font-size: 1rem;
+  padding: 9px 18px;
+  font-size: 0.95rem;
   border-radius: 4px;
   cursor: pointer;
-  margin-top: 20px;
+  margin-top: 14px;
 }
 
 button.primary:hover {
@@ -122,12 +130,20 @@ button.primary:hover {
 }
 
 .form-group {
-  margin: 20px 0;
+  margin: 14px 0;
+}
+
+.form-group:first-child {
+  margin-top: 0;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
 }
 
 select,
@@ -172,7 +188,7 @@ select option:checked {
 .form-container {
   max-width: 600px;
   background: var(--panel-color);
-  padding: 20px;
+  padding: 16px 20px;
   border-radius: 8px;
   border: 1px solid var(--border-color);
 }
-- 
2.39.5