From 4a9cf445e9b3008d04c69cf3eb20d701826ad1ac Mon Sep 17 00:00:00 2001
From: Peter <graphhopper@gmx.de>
Date: Wed, 15 Nov 2023 22:10:35 +0100
Subject: [PATCH] make settings better clickable

---
 package-lock.json                  |  4 ++--
 src/sidebar/SettingsBox.module.css | 11 ++++++++++-
 src/sidebar/SettingsBox.tsx        |  8 ++++----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d14d73c1..9078937d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "graphhopper-maps",
-    "version": "0.6",
+    "version": "0.7",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "graphhopper-maps",
-            "version": "0.6",
+            "version": "0.7",
             "license": "Apache-2.0",
             "dependencies": {
                 "custom-model-editor": "github:graphhopper/custom-model-editor#3a46b6981d170b7eb70d621bbb92caed149e5a97",
diff --git a/src/sidebar/SettingsBox.module.css b/src/sidebar/SettingsBox.module.css
index 527faefa..b4365577 100644
--- a/src/sidebar/SettingsBox.module.css
+++ b/src/sidebar/SettingsBox.module.css
@@ -9,7 +9,7 @@
     display: flex;
     flex-direction: column;
     align-items: start;
-    gap: 0rem;
+    gap: 0;
     margin: 0.2rem 0.5rem 1.5rem 0;
 }
 
@@ -41,6 +41,15 @@
     height: 2rem;
 }
 
+.settingsCheckbox label {
+    padding-left: 3px;
+}
+
+.settingsCheckbox:hover label,
+.settingsCheckbox:hover input {
+    cursor: pointer;
+}
+
 .infoLine {
     padding: 10px 2px 0 0;
     display: flex;
diff --git a/src/sidebar/SettingsBox.tsx b/src/sidebar/SettingsBox.tsx
index e53b0da4..bff7512f 100644
--- a/src/sidebar/SettingsBox.tsx
+++ b/src/sidebar/SettingsBox.tsx
@@ -5,7 +5,7 @@ import { tr } from '@/translation/Translation'
 import PlainButton from '@/PlainButton'
 import OnIcon from '@/sidebar/toggle_on.svg'
 import OffIcon from '@/sidebar/toggle_off.svg'
-import { useContext } from 'react'
+import { useContext, useState } from 'react'
 import { SettingsContext } from '@/contexts/SettingsContext'
 
 export default function SettingsBox() {
@@ -79,9 +79,9 @@ function SettingsToggle({ title, enabled, onClick }: { title: string; enabled: b
 
 function SettingsCheckbox({ title, enabled, onClick }: { title: string; enabled: boolean; onClick: () => void }) {
     return (
-        <div className={styles.settingsCheckbox}>
-            <input type="checkbox" checked={enabled} onClick={onClick}></input>
-            <label>{title}</label>
+        <div className={styles.settingsCheckbox} onClick={onClick}>
+            <input type="checkbox" checked={enabled}></input>
+            <label style={{ color: enabled ? '#5b616a' : 'gray' }}>{title}</label>
         </div>
     )
 }