From 40af254e5c94bb492be0f76b36b01f2322ff7c14 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 5 Mar 2021 17:50:28 +0700
Subject: [PATCH] replaced div with button

---
 .../editors/EditorPublicSwitch/index.tsx      | 29 +++++++++----------
 src/components/input/Button/index.tsx         |  3 ++
 .../input/Button/styles.module.scss           |  3 ++
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/editors/EditorPublicSwitch/index.tsx b/src/components/editors/EditorPublicSwitch/index.tsx
index d8f9f889..be6feed0 100644
--- a/src/components/editors/EditorPublicSwitch/index.tsx
+++ b/src/components/editors/EditorPublicSwitch/index.tsx
@@ -1,9 +1,7 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
-import styles from './styles.module.scss';
-import { Icon } from '~/components/input/Icon';
 import { IEditorComponentProps } from '~/redux/node/types';
-import classNames from 'classnames';
 import { usePopper } from 'react-popper';
+import { Button } from '~/components/input/Button';
 
 interface IProps extends IEditorComponentProps {}
 
@@ -29,20 +27,19 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
   useEffect(() => console.log(pop), [pop]);
 
   return (
-    <div
-      className={classNames(styles.wrap, { [styles.promoted]: data.is_promoted })}
-      onClick={onChange}
-    >
-      <div className={styles.tooltip} ref={tooltip}>
-        {data.is_promoted
+    <Button
+      color={data.is_promoted ? 'primary' : 'secondary'}
+      type="button"
+      iconLeft={data.is_promoted ? 'waves' : 'lab'}
+      size="giant"
+      label={
+        data.is_promoted
           ? 'Доступно всем на главной странице'
-          : 'Видно только сотрудникам в лаборатории'}
-      </div>
-
-      <div className={styles.icon}>
-        {data.is_promoted ? <Icon size={24} icon="waves" /> : <Icon size={24} icon="lab" />}
-      </div>
-    </div>
+          : 'Видно только сотрудникам в лаборатории'
+      }
+      onClick={onChange}
+      round
+    />
   );
 };
 
diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx
index 8c263770..1f2a02a6 100644
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@@ -28,6 +28,7 @@ type IButtonProps = DetailedHTMLProps<
   stretchy?: boolean;
   iconOnly?: boolean;
   label?: string;
+  round?: boolean;
 };
 
 const Button: FC<IButtonProps> = memo(
@@ -48,6 +49,7 @@ const Button: FC<IButtonProps> = memo(
     iconOnly,
     label,
     ref,
+    round,
     ...props
   }) => {
     const tooltip = useRef<HTMLSpanElement | null>(null);
@@ -75,6 +77,7 @@ const Button: FC<IButtonProps> = memo(
           icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
           has_icon_left: !!iconLeft,
           has_icon_right: !!iconRight,
+          round,
         }),
         ...props,
       },
diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index 676bb62d..667007bd 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/src/components/input/Button/styles.module.scss
@@ -202,14 +202,17 @@
 .normal {
   height: 38px;
 }
+
 .big {
   height: 40px;
 }
+
 .giant {
   height: 50px;
   padding: 0 15px;
   min-width: 50px;
 }
+
 .disabled {
   opacity: 0.5;
 }