From 5120396971d0b35e2fa05857ca353c9953442cd5 Mon Sep 17 00:00:00 2001
From: Kyler <kylerolsen17@gmail.com>
Date: Fri, 11 Jul 2025 01:41:04 -0600
Subject: [PATCH] Refactor class input layout and enhance checkbox styling

---
 www/index.css  | 29 ++++++++++++++++++++++++++++-
 www/index.html | 26 ++++++++++++++++++--------
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/www/index.css b/www/index.css
index 27782c5..acf919b 100644
--- a/www/index.css
+++ b/www/index.css
@@ -110,10 +110,33 @@ body[mode="dark"] a {
     color: #3399ff;
 }
 
-.no-classes {
+.input-group {
+    margin-top: 4px;
+    display: inline-block;
+}
+
+input[type="checkbox"] {
     display: none;
 }
 
+input[type="checkbox"] + label {
+    border: #121212 1px solid;
+    border-radius: 4px;
+    padding: 2px 4px;
+}
+
+body[mode="dark"] input[type="checkbox"] + label {
+    border-color: #808080;
+}
+
+input[type="checkbox"]:checked + label {
+    background-color: #99bbff;
+}
+
+body[mode="dark"] input[type="checkbox"]:checked + label {
+    background-color: #3366cc;
+}
+
 .error-message {
     color: red;
     font-weight: bold;
@@ -127,3 +150,7 @@ body[mode="dark"] .error-message {
 .error-message.hidden {
     display: none;
 }
+
+.no-classes {
+    display: none;
+}
diff --git a/www/index.html b/www/index.html
index 21cc99d..d342665 100644
--- a/www/index.html
+++ b/www/index.html
@@ -36,14 +36,24 @@
                 <em>Please enter the class information below:</em>
                 <!-- <br/><small>Class name is just a label, this app doesn't have the college class schedule.</small> -->
             </p>
-            <label for="class-name">Class Name </label><input type="text" id="class-name" placeholder="Enter Class Name">
-            <label for="Mon">M</label><input type="checkbox" id="Mon">
-            <label for="Tue">T</label><input type="checkbox" id="Tue">
-            <label for="Wed">W</label><input type="checkbox" id="Wed">
-            <label for="Thu">Th</label><input type="checkbox" id="Thu">
-            <label for="Fri">F</label><input type="checkbox" id="Fri">
-            <label for="time">Time </label><input type="time" id="time">
-            <button id="add-class">Add Class</button>
+            <div>
+                <span class="input-group">
+                    <label for="class-name">Class Name </label>
+                    <input type="text" id="class-name" placeholder="Enter Class Name">
+                </span>
+                <span class="input-group">
+                    <span>Days </span>
+                    <input type="checkbox" id="Mon"><label for="Mon">M</label>
+                    <input type="checkbox" id="Tue"><label for="Tue">T</label>
+                    <input type="checkbox" id="Wed"><label for="Wed">W</label>
+                    <input type="checkbox" id="Thu"><label for="Thu">Th</label>
+                    <input type="checkbox" id="Fri"><label for="Fri">F</label>
+                </span>
+                <span class="input-group">
+                    <label for="time">Time </label><input type="time" id="time">
+                    <button id="add-class">Add Class</button>
+                </span>
+            </div>
             <p class="error-message hidden">
                 Please enter a class time and select at least one day.
             </p>