#23 cleaned button props

src/components/input/Button/index.tsx

@@ -1,18 +1,8 @@
 import classnames from 'classnames';
-import React, {
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
-  ButtonHTMLAttributes,
-  DetailedHTMLProps,
-  FC,
-  createElement,
-  memo,
-  useRef,
-  useEffect,
-  useMemo,
-} from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
-import { usePopper } from 'react-popper';
 import Tippy from '@tippy.js/react';
 import 'tippy.js/dist/tippy.css';
 
@@ -24,10 +14,7 @@ type IButtonProps = DetailedHTMLProps<
   color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray';
   iconLeft?: IIcon;
   iconRight?: IIcon;
-  seamless?: boolean;
-  transparent?: boolean;
   title?: string;
-  is_loading?: boolean;
   stretchy?: boolean;
   iconOnly?: boolean;
   label?: string;
@@ -42,9 +29,6 @@ const Button: FC<IButtonProps> = memo(
     iconLeft,
     iconRight,
     children,
-    seamless = false,
-    transparent = false,
-    is_loading,
     title,
     stretchy,
     disabled,
@@ -57,17 +41,14 @@ const Button: FC<IButtonProps> = memo(
     const computedClassName = useMemo(
       () =>
         classnames(styles.button, className, styles[size], styles[color], {
-          seamless,
-          transparent,
           disabled,
-          is_loading,
           stretchy,
           icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
           has_icon_left: !!iconLeft,
           has_icon_right: !!iconRight,
           round,
         }),
-      [seamless, round, disabled, className, is_loading, stretchy, iconLeft, iconRight, size, color]
+      [round, disabled, className, stretchy, iconLeft, iconRight, size, color]
     );
 
     return (

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

@@ -34,8 +34,6 @@
   align-items: center;
   justify-content: center;
 
-  position: relative;
-
   filter: grayscale(0);
 
   transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
@@ -79,24 +77,6 @@
     }
   }
 
-  &:global(.seamless) {
-    background: transparent;
-    color: black;
-    box-shadow: none;
-    fill: black;
-    stroke: black;
-    padding: 0;
-  }
-
-  &:global(.transparent) {
-    background: transparent;
-    color: white;
-    box-shadow: transparentize(black, 0.5) 0 0 4px;
-    padding: 0;
-    fill: black;
-    stroke: black;
-  }
-
   &:global(.red) {
     fill: $red;
     stroke: $red;
@@ -111,8 +91,6 @@
   &:global(.grey) {
     background: transparentize(white, 0.9);
     color: white;
-    // background: lighten(white, 0.5);
-    // filter: grayscale(100%);
   }
 
   &:global(.disabled) {
@@ -189,6 +167,7 @@
     border-radius: 10px;
   }
 }
+
 .mini {
   height: 28px;
   border-radius: $radius / 2;
@@ -197,6 +176,7 @@
     border-radius: 14px;
   }
 }
+
 .small {
   height: 32px;
 
@@ -251,20 +231,3 @@
   width: 20px;
   height: 20px;
 }
-
-.tooltip {
-  padding: 5px 10px;
-  background-color: darken($content_bg, 4%);
-  z-index: 2;
-  border-radius: $input_radius;
-  text-transform: none;
-  touch-action: none;
-  transition: opacity 0.1s;
-  border: 1px solid transparentize(white, 0.9);
-  //visibility: hidden;
-
-  .button:hover & {
-    visibility: visible;
-    font: $font_14_semibold;
-  }
-}