#23 lost fixes

src/components/input/Button/index.tsx

@@ -1,30 +1,20 @@
 import classnames from 'classnames';
-import React, {
-  ButtonHTMLAttributes,
-  DetailedHTMLProps,
-  FC,
-  createElement,
-  memo,
-  useRef,
-} 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';
 
 type IButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 > & {
   size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
-  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray';
+  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab';
   iconLeft?: IIcon;
   iconRight?: IIcon;
-  seamless?: boolean;
-  transparent?: boolean;
   title?: string;
-  non_submitting?: boolean;
-  is_loading?: boolean;
   stretchy?: boolean;
   iconOnly?: boolean;
   label?: string;
@@ -39,10 +29,6 @@ const Button: FC<IButtonProps> = memo(
     iconLeft,
     iconRight,
     children,
-    seamless = false,
-    transparent = false,
-    non_submitting = false,
-    is_loading,
     title,
     stretchy,
     disabled,
@@ -52,45 +38,27 @@ const Button: FC<IButtonProps> = memo(
     round,
     ...props
   }) => {
-    const tooltip = useRef<HTMLSpanElement | null>(null);
-    const pop = usePopper(tooltip?.current?.parentElement, tooltip.current, {
-      placement: 'top',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 5],
-          },
-        },
-      ],
-    });
-
-    return createElement(
-      seamless || non_submitting ? 'div' : 'button',
-      {
-        className: classnames(styles.button, className, styles[size], styles[color], {
-          seamless,
-          transparent,
+    const computedClassName = useMemo(
+      () =>
+        classnames(styles.button, className, styles[size], styles[color], {
           disabled,
-          is_loading,
           stretchy,
           icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
           has_icon_left: !!iconLeft,
           has_icon_right: !!iconRight,
           round,
         }),
-        ...props,
-      },
-      [
-        iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />,
-        title ? <span>{title}</span> : children || null,
-        iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />,
-        !!label && (
-          <span ref={tooltip} className={styles.tooltip} style={pop.styles.popper} key="tooltip">
-            {label}
-          </span>
-        ),
-      ]
+      [round, disabled, className, stretchy, iconLeft, iconRight, size, color]
+    );
+
+    return (
+      <Tippy content={label || ''} enabled={!!label}>
+        <button className={computedClassName} {...props}>
+          {iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />}
+          {!!title ? <span>{title}</span> : children}
+          {iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />}
+        </button>
+      </Tippy>
     );
   }
 );

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

@@ -34,11 +34,9 @@
   align-items: center;
   justify-content: center;
 
-  position: relative;
-
   filter: grayscale(0);
 
-  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
+  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
   opacity: 0.8;
 
   @include outer_shadow();
@@ -79,30 +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;
-    color: $red;
-  }
-
   &:global(.stretchy) {
     flex: 1;
   }
@@ -111,8 +85,6 @@
   &:global(.grey) {
     background: transparentize(white, 0.9);
     color: white;
-    // background: lighten(white, 0.5);
-    // filter: grayscale(100%);
   }
 
   &:global(.disabled) {
@@ -145,14 +117,6 @@
     padding-right: $gap;
   }
 
-  &.primary {
-    background: $red_gradient;
-  }
-
-  &.secondary {
-    background: $green_gradient;
-  }
-
   &.outline {
     background: transparent;
     box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
@@ -184,32 +148,58 @@
   font: $font_12_semibold;
   padding: 0 15px;
   border-radius: $radius / 2;
+
+  &:global(.round) {
+    border-radius: 10px;
+  }
 }
+
 .mini {
   height: 28px;
   border-radius: $radius / 2;
+
+  &:global(.round) {
+    border-radius: 14px;
+  }
 }
+
 .small {
   height: 32px;
-  // border-radius: $radius / 2;
 
   svg {
     width: 24px;
     height: 24px;
   }
+
+  &:global(.round) {
+    border-radius: 16px;
+  }
 }
+
 .normal {
   height: 38px;
+
+  &:global(.round) {
+    border-radius: 19px;
+  }
 }
 
 .big {
   height: 40px;
+
+  &:global(.round) {
+    border-radius: 20px;
+  }
 }
 
 .giant {
   height: 50px;
   padding: 0 15px;
   min-width: 50px;
+
+  &:global(.round) {
+    border-radius: 25px;
+  }
 }
 
 .disabled {
@@ -228,20 +218,14 @@
   height: 20px;
 }
 
-.tooltip {
-  padding: 5px 10px;
-  background-color: darken($content_bg, 4%);
-  z-index: 2;
-  border-radius: $input_radius;
-  text-transform: none;
-  opacity: 0;
-  pointer-events: none;
-  touch-action: none;
-  transition: opacity 0.1s;
-  border: 1px solid transparentize(white, 0.9);
-
-  .button:hover & {
-    opacity: 1;
-    font: $font_14_semibold;
-  }
+.primary {
+  background: $red;
+}
+
+.secondary {
+  background: $wisegreen;
+}
+
+.lab {
+  background: $blue;
 }