make settings better clickable

graphhopper · Nov 15, 2023 · 4a9cf44 · 4a9cf44
1 parent 4af4de6
commit 4a9cf44
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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>
     )
 }