From 23b335ce77230ffa7bd49fe0d6310db30acae408 Mon Sep 17 00:00:00 2001
From: Maxim Kuznetsov <maxim.kyznetsov@gmail.com>
Date: Wed, 13 Dec 2023 19:23:22 +0300
Subject: [PATCH] fix: Apply theme colors for switch component

---
 src/app.tsx                                    | 10 ++++++++++
 src/components/toogle-switch/toggle-switch.tsx | 11 +++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 9030c74f..ccf438f6 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -5,6 +5,8 @@ import { Header, HelpPanel } from "./components";
 import {
   color_brand_primary,
   color_brand_quaternary,
+  color_brand_tertiary,
+  dim_brand_tertinary,
   color_canvas_primary,
   color_canvas_secondary,
   dim_canvas_primary,
@@ -75,6 +77,10 @@ const THEMES: AppThemes = {
       validateTileOk: color_brand_secondary_dark,
       validateTileWarning: color_accent_tertiary,
       filtrationImage: color_brand_quaternary,
+      switchDisabledBackground: hilite_canvas_primary,
+      switchDisabledBackgroundHovered: dim_canvas_primary,
+      switchCheckedBackground: color_brand_tertiary,
+      switchCheckedBackgroundHovered: dim_brand_tertinary,
     },
     name: Theme.Dark,
   },
@@ -106,6 +112,10 @@ const THEMES: AppThemes = {
       validateTileOk: color_brand_secondary,
       validateTileWarning: color_accent_primary,
       filtrationImage: color_canvas_secondary,
+      switchDisabledBackground: dim_canvas_secondary,
+      switchDisabledBackgroundHovered: color_canvas_secondary_inverted,
+      switchCheckedBackground: color_brand_tertiary,
+      switchCheckedBackgroundHovered: dim_brand_tertinary,
     },
     name: Theme.Light,
   },
diff --git a/src/components/toogle-switch/toggle-switch.tsx b/src/components/toogle-switch/toggle-switch.tsx
index eebcfa35..23892695 100644
--- a/src/components/toogle-switch/toggle-switch.tsx
+++ b/src/components/toogle-switch/toggle-switch.tsx
@@ -37,7 +37,7 @@ const Slider = styled.span`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(250, 250, 250, 0.2);
+  background-color: ${({ theme }) => theme.colors.switchDisabledBackground};
   transition: 0.4s;
   border-radius: 8px;
   &::after {
@@ -54,9 +54,16 @@ const Slider = styled.span`
     transition: 0.4s;
     border-radius: 8px;
   }
+  &:hover {
+    background-color: ${({ theme }) =>
+      theme.colors.switchDisabledBackgroundHovered};
+  }
 
   ${Input}:checked + & {
-    background: #4f52cc;
+    background: ${({ theme }) => theme.colors.switchCheckedBackground};
+    &:hover {
+      background: ${({ theme }) => theme.colors.switchCheckedBackgroundHovered};
+    }
   }
 
   ${Input}:checked + &::before {