diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx index 6d9e3801..8e569762 100644 --- a/src/components/input/Button/index.tsx +++ b/src/components/input/Button/index.tsx @@ -1,18 +1,8 @@ import classnames from 'classnames'; -import React, { - ButtonHTMLAttributes, - DetailedHTMLProps, - FC, - createElement, - memo, - useRef, - useEffect, - useMemo, -} from 'react'; +import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, 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 = memo( iconLeft, iconRight, children, - seamless = false, - transparent = false, - is_loading, title, stretchy, disabled, @@ -57,17 +41,14 @@ const Button: FC = 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 ( diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss index 118131c7..fe57ddd9 100644 --- a/src/components/input/Button/styles.module.scss +++ b/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; - } -}