onClick fine-tunings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/application.tsx

@@ -135,7 +135,9 @@ export const Application = observer(() => {
 
       <section id="other">
         <SubTitle title="Start-up"/>
-        <Switch checked={userStore.openAtLogin}>Automatically start Lens on login</Switch>
+        <Switch checked={userStore.openAtLogin} onChange={v => userStore.openAtLogin = v.target.checked}>
+          Automatically start Lens on login
+        </Switch>
         {/* <FormSwitch
           control={
             <Switcher

src/renderer/components/switch/switch.tsx

@@ -21,27 +21,27 @@
 
 import styles from "./switch.module.scss";
 
-import React, { DetailedHTMLProps,  InputHTMLAttributes } from "react";
+import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
 
 interface Props extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   onClick?: () => void;
 }
 
-export function Switch({ children, ...settings }: Props) {
+export function Switch({ children, onClick, ...settings }: Props) {
   const id = `switch-${Date.now()}`;
 
-  const onClick = () => {
+  const onLabelClick = () => {
-    if (settings.disabled) {
+    if (settings.disabled || !onClick) {
       return;
     }
 
-    settings.onClick?.();
+    onClick();
   };
 
   return (
-    <label htmlFor={id} className={styles.Switch} onClick={onClick}>
+    <label htmlFor={id} className={styles.Switch} onClick={onLabelClick}>
       {children}
-      <input type="checkbox" role="switch" id={id} {...settings} readOnly/>
+      <input type="checkbox" role="switch" id={id} {...settings}/>
     </label>
   );
 }