From fd6aec4f08292932c3da5c7cd269b74a18a78daf Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 12 May 2021 15:28:39 +0300
Subject: [PATCH] Switcher: Add animation (#1079)

---
 src/components/left/main/LeftMainHeader.tsx |  1 +
 src/components/ui/Switcher.scss             | 18 ++++++++++++++++++
 src/components/ui/Switcher.tsx              |  3 +++
 src/styles/index.scss                       |  4 +++-
 src/util/switchTheme.ts                     |  4 ++--
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/left/main/LeftMainHeader.tsx b/src/components/left/main/LeftMainHeader.tsx
index 8330563ce..88a8ae489 100644
--- a/src/components/left/main/LeftMainHeader.tsx
+++ b/src/components/left/main/LeftMainHeader.tsx
@@ -203,6 +203,7 @@ const LeftMainHeader: FC<OwnProps & StateProps & DispatchProps> = ({
               id="darkmode"
               label="Toggle Dark Mode"
               checked={theme === 'dark'}
+              noAnimation
             />
           </MenuItem>
           <MenuItem
diff --git a/src/components/ui/Switcher.scss b/src/components/ui/Switcher.scss
index 2f2f332af..a69b92859 100644
--- a/src/components/ui/Switcher.scss
+++ b/src/components/ui/Switcher.scss
@@ -13,6 +13,18 @@
     pointer-events: none;
   }
 
+  body.animation-level-0 &,
+  &.no-animation {
+    .widget,
+    .widget::after {
+      transition: none !important;
+    }
+
+    .widget:active:after {
+      width: 1.125rem;
+    }
+  }
+
   input {
     height: 0;
     width: 0;
@@ -31,6 +43,7 @@
     display: inline-block;
     border-radius: .5rem;
     position: relative;
+    transition: background .2s ease-in;
   }
 
   .widget:after {
@@ -42,6 +55,7 @@
     height: 1.125rem;
     background: var(--color-background);
     border-radius: .75rem;
+    transition: 0.2s ease-out;
     border: .125rem solid var(--color-gray);
   }
 
@@ -54,4 +68,8 @@
     transform: translateX(calc(-100% + 1.125rem));
     border-color: var(--color-primary);
   }
+
+  .widget:active:after {
+    width: 1.25rem;
+  }
 }
diff --git a/src/components/ui/Switcher.tsx b/src/components/ui/Switcher.tsx
index 1af4f94af..e84594cac 100644
--- a/src/components/ui/Switcher.tsx
+++ b/src/components/ui/Switcher.tsx
@@ -13,6 +13,7 @@ type OwnProps = {
   checked?: boolean;
   disabled?: boolean;
   inactive?: boolean;
+  noAnimation?: boolean;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   onCheck?: (isChecked: boolean) => void;
 };
@@ -25,6 +26,7 @@ const Switcher: FC<OwnProps> = ({
   checked = false,
   disabled,
   inactive,
+  noAnimation,
   onChange,
   onCheck,
 }) => {
@@ -42,6 +44,7 @@ const Switcher: FC<OwnProps> = ({
     'Switcher',
     disabled && 'disabled',
     inactive && 'inactive',
+    noAnimation && 'no-animation',
   );
 
   return (
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b027840f2..b8b7a700a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -83,7 +83,9 @@ body.cursor-grabbing, body.cursor-grabbing * {
   box-sizing: border-box;
 }
 
-.disable-animations #root * {
+.no-animations #root *,
+.no-animations #root *::before,
+.no-animations #root *::after {
   transition: none !important;
 }
 
diff --git a/src/util/switchTheme.ts b/src/util/switchTheme.ts
index f5cd8f757..8c9111558 100644
--- a/src/util/switchTheme.ts
+++ b/src/util/switchTheme.ts
@@ -36,7 +36,7 @@ export default (theme: ISettings['theme'], withAnimation: boolean) => {
 
   document.documentElement.classList.remove(`theme-${isDarkTheme ? 'light' : 'dark'}`);
   if (isInitialized) {
-    document.documentElement.classList.add('disable-animations');
+    document.documentElement.classList.add('no-animations');
   }
   document.documentElement.classList.add(`theme-${theme}`);
   if (themeColorTag) {
@@ -44,7 +44,7 @@ export default (theme: ISettings['theme'], withAnimation: boolean) => {
   }
 
   setTimeout(() => {
-    document.documentElement.classList.remove('disable-animations');
+    document.documentElement.classList.remove('no-animations');
   }, ENABLE_ANIMATION_DELAY_MS);
 
   isInitialized = true;