From 347b70018d0a8446b87873a06790eefd3186bee4 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Sat, 25 Dec 2021 20:38:06 +0300
Subject: [PATCH] Add onClick event

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/switch/switch.module.scss      | 24 ++++++++++++-------
 src/renderer/components/switch/switch.tsx     | 19 +++++++++++----
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/switch/switch.module.scss b/src/renderer/components/switch/switch.module.scss
index d4e54a205b..0d6891eaf3 100644
--- a/src/renderer/components/switch/switch.module.scss
+++ b/src/renderer/components/switch/switch.module.scss
@@ -22,19 +22,25 @@
 /* Based on switch component from https://github.com/argyleink/gui-challenges */
 
 .Switch {
-  --thumb: hsl(0 0% 5%);
-  --thumb-highlight: hsl(0 0% 100% / 25%);
-  --track-inactive: hsl(80 0% 35%);
-  --track-active: hsl(85 75% 60%);
-
   --thumb-size: 2rem;
   --thumb: hsl(0 0% 100%);
-  --thumb-highlight: hsl(0 0% 0% / 25%);
+  --thumb-highlight: hsl(0 0% 100% / 25%);
 
   --track-size: calc(var(--thumb-size) * 2);
   --track-padding: 2px;
-  --track-inactive: hsl(80 0% 80%);
-  --track-active: rgb(85, 70%, 40%);
+  --track-inactive: hsl(80 0% 35%);
+  --track-active: hsl(110, 60%, 60%);
+
+  --thumb-color: var(--thumb);
+  --thumb-color-highlight: var(--thumb-highlight);
+  --track-color-inactive: var(--track-inactive);
+  --track-color-active: var(--track-active);
+
+  /* TODO: change vars for light theme
+    --thumb-highlight
+    --track-active
+    --track-inactive
+  */
 
   display: flex;
   align-items: center;
@@ -42,6 +48,8 @@
   justify-content: space-between;
   cursor: pointer;
   user-select: none;
+  color: var(--textColorAccent);
+  font-weight: 500;
 
   & > input {
     --thumb-position: 0%;
diff --git a/src/renderer/components/switch/switch.tsx b/src/renderer/components/switch/switch.tsx
index 313058e728..7dd90af74c 100644
--- a/src/renderer/components/switch/switch.tsx
+++ b/src/renderer/components/switch/switch.tsx
@@ -21,18 +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(props: Props) {
+export function Switch({ children, ...settings }: Props) {
   const id = `switch-${Date.now()}`;
 
+  const onClick = () => {
+    if (settings.disabled) {
+      return;
+    }
+
+    settings.onClick?.();
+  };
+
   return (
-    <label htmlFor={id} className={styles.Switch}>
-      {props.children}
-      <input type="checkbox" role="switch" id={id} {...props}/>
+    <label htmlFor={id} className={styles.Switch} onClick={onClick}>
+      {children}
+      <input type="checkbox" role="switch" id={id} {...settings} readOnly/>
     </label>
   );
 }