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

src/containers/node/BorisLayout/index.tsx

@@ -2,16 +2,11 @@ import React, { FC, useCallback, useEffect } from 'react';
 import { selectNode, selectNodeComments } from '~/redux/node/selectors';
 import { selectAuthIsTester, selectUser } from '~/redux/auth/selectors';
 import { useDispatch } from 'react-redux';
-import { NodeComments } from '~/components/node/NodeComments';
 import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import boris from '~/sprites/boris_robot.svg';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { useRandomPhrase } from '~/constants/phrases';
-import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import isBefore from 'date-fns/isBefore';
-import { Card } from '~/components/containers/Card';
-import { Footer } from '~/components/main/Footer';
 import { BorisStats } from '~/components/boris/BorisStats';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectBorisStats } from '~/redux/boris/selectors';
@@ -20,6 +15,10 @@ import { nodeLoadNode } from '~/redux/node/actions';
 import { borisLoadStats } from '~/redux/boris/actions';
 import { Container } from '~/containers/main/Container';
 import StickyBox from 'react-sticky-box/dist/esnext';
+import { BorisComments } from '~/components/boris/BorisComments';
+import { URLS } from '~/constants/urls';
+import { Route, Switch } from 'react-router-dom';
+import { BorisUIDemo } from '~/components/boris/BorisUIDemo';
 import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers';
 
 type IProps = {};
@@ -78,24 +77,18 @@ const BorisLayout: FC<IProps> = () => {
         </div>
 
         <div className={styles.container}>
-          <Card className={styles.content}>
-            <Group className={styles.grid}>
-              {user.is_user && <NodeCommentForm isBefore nodeId={node.current.id} />}
+          {
+            <Switch>
+              <Route path={`${URLS.BORIS}/ui`} component={BorisUIDemo} />
 
-              {node.is_loading_comments ? (
-                <NodeNoComments is_loading count={7} />
-              ) : (
-                <NodeComments
-                  comments={comments}
-                  count={node.comment_count}
-                  user={user}
-                  order="ASC"
-                />
-              )}
-            </Group>
-
-            <Footer />
-          </Card>
+              <BorisComments
+                isLoadingComments={node.is_loading_comments}
+                commentCount={node.comment_count}
+                node={node.current}
+                comments={node.comments}
+              />
+            </Switch>
+          }
 
           <Group className={styles.stats}>
             <StickyBox className={styles.sticky} offsetTop={72} offsetBottom={10}>

src/styles/_colors.scss

@@ -3,7 +3,7 @@
 $red: #ff3344;
 $yellow: #ffd60f;
 $dark_blue: #3c75ff;
-$blue: #3ca1ff;
+$blue: #582cd0;
 $green: #00d2b9;
 //$green: #00503c;
 $olive: #8bc12a;