From 07aee8347ddd131efaf1c1b0ec9b869198f79389 Mon Sep 17 00:00:00 2001
From: FeTetra <fetetra@protonmail.com>
Date: Thu, 26 Sep 2024 01:07:10 -0400
Subject: [PATCH] Fix UI inconsistencies in checkboxes

---
 .../Pages/SlotSettingsPage.cshtml             | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/ProjectLighthouse.Servers.Website/Pages/SlotSettingsPage.cshtml b/ProjectLighthouse.Servers.Website/Pages/SlotSettingsPage.cshtml
index 85384367..1cb19be1 100644
--- a/ProjectLighthouse.Servers.Website/Pages/SlotSettingsPage.cshtml
+++ b/ProjectLighthouse.Servers.Website/Pages/SlotSettingsPage.cshtml
@@ -61,30 +61,30 @@ function onSubmit(){
                     <textarea name="description" id="description" spellcheck="false" placeholder="Description">@HttpUtility.HtmlDecode(Model.Slot.Description)</textarea>
                 </div>
                 <div class="ui divider"></div>
-                <label class="ui red label" for="initiallyLocked">
+                <label class="ui button label" id="labelInitiallyLocked" for="checkboxInitiallyLocked">
                     <i class="lock icon"></i>
                     Locked
-                    <input type="checkbox" name="initiallyLocked" id="initiallyLocked" style="margin-left: 5px;" @(Model.Slot.InitiallyLocked ? "checked" : "") value="true">
+                    <input type="checkbox" name="initiallyLocked" id="checkboxInitiallyLocked" style="margin-left: 5px;" onchange="onCheckboxChange(this)" @(Model.Slot.InitiallyLocked ? "checked" : "") value="true">
                 </label>
-                <label class="ui green label" for="shareable">
+                <label class="ui button label" id="labelShareable" for="checkboxShareable">
                     <i class="check icon"></i>
                     Copyable
-                    <input type="checkbox" name="shareable" id="shareable" style="margin-left: 5px;" @(Model.Slot.Shareable == 1 ? "checked" : "") value="1">
+                    <input type="checkbox" name="shareable" id="checkboxShareable" style="margin-left: 5px;" onchange="onCheckboxChange(this)" @(Model.Slot.Shareable == 1 ? "checked" : "") value="1">
                 </label>
                 @if (Model.Slot.GameVersion != GameVersion.LittleBigPlanet1)
                 {
-                    <label class="ui blue label" for="subLevel">
+                    <label class="ui button label" id="labelSubLevel" for="checkboxSubLevel">
                         <i class="arrow circle down icon"></i>
                         Sub Level
-                        <input type="checkbox" name="subLevel" id="subLevel" style="margin-left: 5px;" @(Model.Slot.SubLevel ? "checked" : "") value="true">
+                        <input type="checkbox" name="subLevel" id="checkboxSubLevel" style="margin-left: 5px;" onchange="onCheckboxChange(this)" @(Model.Slot.SubLevel ? "checked" : "") value="true">
                     </label>
                 }
                 else
                 {
-                    <label class="ui yellow label" for="lbp1Only">
+                    <label class="ui button label" id="labelLbp1Only" for="checkboxLbp1Only">
                         <i class="eye icon"></i>
                         LBP1 Only
-                        <input type="checkbox" name="lbp1Only" id="lbp1Only" style="margin-left: 5px;" @(Model.Slot.Lbp1Only ? "checked" : "") value="true">
+                        <input type="checkbox" name="lbp1Only" id="checkboxLbp1Only" style="margin-left: 5px;" onchange="onCheckboxChange(this)" @(Model.Slot.Lbp1Only ? "checked" : "") value="true">
                     </label>
                 }
                 <div class="ui divider fitted hidden"></div>
@@ -134,6 +134,15 @@ function onSubmit(){
   function onHoverStart(btn){          
       generateRandomSkew(btn);
   }
+  function onCheckboxChange(checkbox) {
+      const labelId = checkbox.id.replace('checkbox', 'label');
+      const label = document.getElementById(labelId);
+      if (checkbox.checked) {
+          label.classList.add('selected');
+      } else {
+          label.classList.remove('selected');
+      }
+  }
   function generateRandomSkew(element){
       let rand = Math.random() * 6 - 3; 
       element.style.setProperty("--skew", "rotate(" + rand + "deg)");