replaced div with button

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
+    <Button
-      className={classNames(styles.wrap, { [styles.promoted]: data.is_promoted })}
+      color={data.is_promoted ? 'primary' : 'secondary'}
-      onClick={onChange}
+      type="button"
-    >
+      iconLeft={data.is_promoted ? 'waves' : 'lab'}
-      <div className={styles.tooltip} ref={tooltip}>
+      size="giant"
-        {data.is_promoted
+      label={
+        data.is_promoted
           ? 'Доступно всем на главной странице'
-          : 'Видно только сотрудникам в лаборатории'}
+          : 'Видно только сотрудникам в лаборатории'
-      </div>
+      }
-
+      onClick={onChange}
-      <div className={styles.icon}>
+      round
-        {data.is_promoted ? <Icon size={24} icon="waves" /> : <Icon size={24} icon="lab" />}
+    />
-      </div>
-    </div>
   );
 };
 

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

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