Add custom checkbox with correct styling

src/components/checkbox.scss

@@ -0,0 +1,41 @@
+.custom-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  label {
+    pointer-events: none;
+  }
+
+  &:hover {
+    svg {
+      .outline {
+        display: block;
+      }
+    }
+  }
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.4;
+  }
+
+  svg {
+    margin-right: 6px;
+
+    .outline {
+      display: none;
+    }
+
+    .checkmark {
+      display: none;
+    }
+
+    &.checked {
+      .checkmark {
+        display: block;
+      }
+    }
+  }
+}

src/components/checkbox.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { clsx } from "clsx";
+
+import CheckboxSVG from "../assets/images/checkbox.svg";
+
+import "./checkbox.scss";
+
+interface ICheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label: string;
+  disabled?: boolean;
+}
+
+// Checkbox component that uses custom CheckoboxSVG instead of the default input style.
+export const Checkbox = ({ checked, onChange, label, disabled }: ICheckboxProps) => {
+  const handleClick = () => {
+    onChange(!checked);
+  };
+
+  return (
+    <div className={clsx("custom-checkbox", { disabled })} onClick={handleClick}>
+      <CheckboxSVG className={clsx("checkbox-icon", { checked })} />
+      <label>{label}</label>
+    </div>
+  );
+}

src/grasp-seasons/components/seasons.tsx

@@ -22,6 +22,7 @@
 import PauseIcon from "../../assets/images/pause-icon.svg";
 
 import "./seasons.scss";
+import { Checkbox } from "../../components/checkbox";
 
 const ANIM_SPEED = 0.02;
 const DAILY_ROTATION_ANIM_SPEED = 0.0003;
@@ -133,7 +134,7 @@
   const playStopLabel = mainAnimationStarted ? t("~STOP", simLang) : t("~ORBIT_BUTTON", simLang);
 
   // Log helpers
   const logCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
     log(capitalize(event.target.name) + "CheckboxChanged", {
       value: event.target.checked
     });
@@ -195,11 +196,6 @@
     });
   };
 
-  const handleSimCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setSimState(prevState => ({ ...prevState, [event.target.name as any as keyof ISimState]: event.target.checked }));
-    logCheckboxChange(event);
-  };
-
   const handleLatSliderChange = (event: any, ui: any) => {
     setSimState(prevState => ({ ...prevState, lat: ui.value }));
     setLatitude(formatLatLongNumber(ui.value));
@@ -284,15 +280,12 @@
                 { playStopLabel }
               </button>
             </div>
-            <label>
-              <input
-                type="checkbox"
-                name="dailyRotation"
-                checked={simState.dailyRotation}
-                onChange={handleSimCheckboxChange}
-              />
-              { t("~DAILY_ROTATION", simLang) }
-            </label>
+            <Checkbox
+              checked={simState.dailyRotation}
+              onChange={checked => setSimState(prevState => ({ ...prevState, dailyRotation: checked }))}
+              label={ t("~DAILY_ROTATION", simLang) }
+              disabled={!mainAnimationStarted}
+            />
           </div>
           <div className="tilt-slider">
             <label>{ t("~TILT_VIEW", simLang) }</label>