From cc52e382c077e91d73b424b3f5f9d47ccc9d82d0 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 27 Dec 2021 10:54:20 +0300
Subject: [PATCH] Fine-tuning styles

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

diff --git a/src/renderer/components/switch/switch.module.scss b/src/renderer/components/switch/switch.module.scss
index 0d6891eaf3..dcde6b5b6c 100644
--- a/src/renderer/components/switch/switch.module.scss
+++ b/src/renderer/components/switch/switch.module.scss
@@ -19,28 +19,15 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-/* Based on switch component from https://github.com/argyleink/gui-challenges */
-
 .Switch {
   --thumb-size: 2rem;
-  --thumb: hsl(0 0% 100%);
-  --thumb-highlight: hsl(0 0% 100% / 25%);
+  --thumb-color: hsl(0 0% 100%);
+  --thumb-color-highlight: hsl(0 0% 100% / 25%);
 
   --track-size: calc(var(--thumb-size) * 2);
   --track-padding: 2px;
-  --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
-  */
+  --track-color-inactive: hsl(80 0% 35%);
+  --track-color-active: hsl(110, 60%, 60%);
 
   display: flex;
   align-items: center;
@@ -63,7 +50,6 @@
 
     appearance: none;
     pointer-events: none;
-    touch-action: pan-y;
     border: none;
     outline-offset: 5px;
     box-sizing: content-box;
@@ -103,12 +89,32 @@
     }
 
     &:disabled {
-      cursor: not-allowed;
+      --track-color-inactive: hsl(80 0% 30%);
       --thumb-color: transparent;
 
       &::before {
         cursor: not-allowed;
-        box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 50%);
+        box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 40%);
+      }
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px var(--blue);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+:global(.theme-light) {
+  .Switch {
+    --thumb-highlight: hsl(0 0% 0% / 25%);
+
+    & > input {
+      &:disabled {
+        --track-color-inactive: hsl(80 0% 80%);
       }
     }
   }
diff --git a/src/renderer/components/switch/switch.tsx b/src/renderer/components/switch/switch.tsx
index 1ff66bd0dd..926d39d6a2 100644
--- a/src/renderer/components/switch/switch.tsx
+++ b/src/renderer/components/switch/switch.tsx
@@ -22,6 +22,7 @@
 import styles from "./switch.module.scss";
 
 import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { cssNames } from "../../utils";
 
 interface Props extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   onClick?: () => void;
@@ -39,7 +40,12 @@ export function Switch({ children, onClick, ...settings }: Props) {
   };
 
   return (
-    <label htmlFor={id} className={styles.Switch} onClick={onLabelClick}>
+    <label
+      htmlFor={id}
+      className={cssNames(styles.Switch, { [styles.disabled]: settings.disabled })}
+      onClick={onLabelClick}
+      data-testid="switch"
+    >
       {children}
       <input type="checkbox" role="switch" id={id} {...settings}/>
     </label>