#23 added superpowers switch

src/components/boris/BorisSuperpowers/index.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Toggle } from '~/components/input/Toggle';
+
+interface IProps {
+  active?: boolean;
+  onChange?: (val: boolean) => void;
+}
+
+const BorisSuperpowers: FC<IProps> = ({ active, onChange }) => (
+  <div className={styles.wrap}>
+    <div className={styles.toggle}>
+      <Toggle value={active} handler={onChange} />
+    </div>
+
+    <div className={styles.left}>
+      <div className={styles.title}>Суперспособности</div>
+      {active ? (
+        <div className={styles.subtitle}>Включи, чтобы видеть будущее</div>
+      ) : (
+        <div className={styles.subtitle}>Ты видишь всё, что скрыто</div>
+      )}
+    </div>
+  </div>
+);
+
+export { BorisSuperpowers };

src/components/boris/BorisSuperpowers/styles.module.scss

@@ -0,0 +1,19 @@
+@import "~/styles/variables";
+
+.wrap {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: $gap;
+  align-items: center;
+}
+
+.title {
+  font: $font_14_semibold;
+  color: white;
+  text-transform: uppercase;
+}
+
+.subtitle {
+  font: $font_12_regular;
+  color: transparentize(white, 0.5);
+}

src/components/boris/Superpower/index.tsx

@@ -0,0 +1,16 @@
+import React, { FC, memo } from 'react';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectAuthIsTester, selectUser } from '~/redux/auth/selectors';
+
+interface IProps {}
+
+const Superpower: FC<IProps> = memo(({ children }) => {
+  const user = useShallowSelect(selectUser);
+  const is_tester = useShallowSelect(selectAuthIsTester);
+
+  if (!user || !is_tester) return null;
+
+  return <>{children}</>;
+});
+
+export { Superpower };

src/components/editors/EditorPublicSwitch/index.tsx

@@ -2,6 +2,7 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
 import { IEditorComponentProps } from '~/redux/node/types';
 import { usePopper } from 'react-popper';
 import { Button } from '~/components/input/Button';
+import { Superpower } from '~/components/boris/Superpower';
 
 interface IProps extends IEditorComponentProps {}
 
@@ -11,24 +12,22 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
     setData,
   ]);
 
-  if (process.env.REACT_APP_LAB_ENABLED !== '1') {
-    return null;
-  }
-
   return (
-    <Button
-      color={data.is_promoted ? 'primary' : 'secondary'}
-      type="button"
-      iconLeft={data.is_promoted ? 'waves' : 'lab'}
-      size="giant"
-      label={
-        data.is_promoted
-          ? 'Доступно всем на главной странице'
-          : 'Видно только сотрудникам в лаборатории'
-      }
-      onClick={onChange}
-      round
-    />
+    <Superpower>
+      <Button
+        color={data.is_promoted ? 'primary' : 'secondary'}
+        type="button"
+        iconLeft={data.is_promoted ? 'waves' : 'lab'}
+        size="giant"
+        label={
+          data.is_promoted
+            ? 'Доступно всем на главной странице'
+            : 'Видно только сотрудникам в лаборатории'
+        }
+        onClick={onChange}
+        round
+      />
+    </Superpower>
   );
 };
 

src/components/input/Toggle/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC, useCallback } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface IProps {
+  value?: boolean;
+  handler?: (val: boolean) => void;
+}
+
+const Toggle: FC<IProps> = ({ value, handler }) => {
+  const onClick = useCallback(() => {
+    if (!handler) {
+      return;
+    }
+
+    handler(!value);
+  }, [value, handler]);
+
+  return (
+    <button
+      type="button"
+      className={classNames(styles.toggle, { [styles.active]: value })}
+      onClick={onClick}
+    />
+  );
+};
+
+export { Toggle };

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

@@ -0,0 +1,35 @@
+@import "~/styles/variables.scss";
+
+.toggle {
+  height: 24px;
+  width: 48px;
+  border-radius: 12px;
+  background-color: transparentize(white, 0.9);
+  display: flex;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    height: 18px;
+    width: 18px;
+    border-radius: 11px;
+    background-color: darken(white, 50%);
+    transform: translate(0, 0);
+    transition: transform 0.25s, color 0.25s, background-color;
+  }
+
+  &.active {
+    background-color: $wisegreen;
+
+    &::after {
+      transform: translate(24px, 0);
+      background-color: white;
+    }
+  }
+}

src/components/main/Header/index.tsx

@@ -21,6 +21,7 @@ import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IState } from '~/redux/store';
 import isBefore from 'date-fns/isBefore';
+import { Superpower } from '~/components/boris/Superpower';
 
 const mapStateToProps = (state: IState) => ({
   user: pick(['username', 'is_user', 'photo', 'last_seen_boris'])(selectUser(state)),
@@ -89,14 +90,14 @@ const HeaderUnconnected: FC<IProps> = memo(
               ФЛОУ
             </Link>
 
-            {is_user && process.env.REACT_APP_LAB_ENABLED === '1' && (
+            <Superpower>
               <Link
                 className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
                 to={URLS.LAB}
               >
                 ЛАБ
               </Link>
-            )}
+            </Superpower>
 
             <Link
               className={classNames(styles.item, {