Switcher: Add animation (#1079)

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

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;
+  }
 }

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 (

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;
 }
 

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;