#23 changed toggle colors

src/components/boris/BorisSuperpowers/index.tsx

@@ -19,7 +19,7 @@ const BorisSuperpowers: FC<IProps> = ({ active, onChange }) => {
   return (
     <div className={styles.wrap}>
       <div className={styles.toggle}>
-        <Toggle value={active} handler={onChange} />
+        <Toggle value={active} handler={onChange} color="primary" />
       </div>
 
       <div className={styles.left} onClick={onToggle}>

src/components/editors/EditorPublicSwitch/index.tsx

@@ -1,7 +1,8 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useCallback } from 'react';
 import { IEditorComponentProps } from '~/redux/node/types';
-import { usePopper } from 'react-popper';
 import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+import styles from './styles.module.scss';
 import { Superpower } from '~/components/boris/Superpower';
 
 interface IProps extends IEditorComponentProps {}
@@ -15,9 +16,8 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
   return (
     <Superpower>
       <Button
-        color={data.is_promoted ? 'primary' : 'secondary'}
+        color={data.is_promoted ? 'primary' : 'lab'}
         type="button"
-        iconLeft={data.is_promoted ? 'waves' : 'lab'}
         size="giant"
         label={
           data.is_promoted
@@ -25,8 +25,17 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
             : 'Видно только сотрудникам в лаборатории'
         }
         onClick={onChange}
+        className={styles.button}
         round
-      />
+      >
+        {data.is_promoted ? (
+          <Icon icon="waves" size={24} />
+        ) : (
+          <div className={styles.lab_wrapper}>
+            <Icon icon="lab" size={24} />
+          </div>
+        )}
+      </Button>
     </Superpower>
   );
 };

src/components/input/Toggle/index.tsx

@@ -2,12 +2,15 @@ import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 
+type ToggleColor = 'primary' | 'secondary' | 'lab' | 'danger';
+
 interface IProps {
   value?: boolean;
   handler?: (val: boolean) => void;
+  color?: ToggleColor;
 }
 
-const Toggle: FC<IProps> = ({ value, handler }) => {
+const Toggle: FC<IProps> = ({ value, handler, color = 'primary' }) => {
   const onClick = useCallback(() => {
     if (!handler) {
       return;
@@ -19,7 +22,7 @@ const Toggle: FC<IProps> = ({ value, handler }) => {
   return (
     <button
       type="button"
-      className={classNames(styles.toggle, { [styles.active]: value })}
+      className={classNames(styles.toggle, { [styles.active]: value }, styles[color])}
       onClick={onClick}
     />
   );

src/components/input/Toggle/styles.module.scss

@@ -25,11 +25,26 @@
   }
 
   &.active {
-    background-color: $wisegreen;
 
     &::after {
       transform: translate(24px, 0);
       background-color: white;
     }
+
+    &.primary {
+      background-color: $wisegreen;
+    }
+
+    &.secondary {
+      background-color: transparentize(white, 0.85);
+    }
+
+    &.lab {
+      background-color: $blue;
+    }
+
+    &.danger {
+      background-color: $red;
+    }
   }
 }