added buttons

src/components/input/Button/index.tsx

@@ -1,20 +1,63 @@
-import * as React from 'react';
+import classnames from 'classnames';
+import * as styles from './styles.scss';
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+import { Icon } from '~/components/input/Icon';
+import { IIcon } from "~/redux/types";
 
-const style = require('./style.scss');
+type IButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
+  iconLeft?: IIcon;
+  iconRight?: IIcon;
+  seamless?: boolean;
+  transparent?: boolean;
+  title?: string;
+  red?: boolean,
+  grey?: boolean,
+  non_submitting?: boolean;
+  is_loading?: boolean;
+};
 
-interface IButtonProps {
+export const Button: FC<IButtonProps> = ({
-  children?: string,
+  className = '',
-  label?: string,
+  size = 'normal',
-
+  iconLeft,
-  onClick?: React.MouseEventHandler,
+  iconRight,
-}
-
-export const Button: React.FunctionComponent<IButtonProps> = ({
   children,
-  label,
+  seamless = false,
-  onClick = () => {},
+  transparent = false,
+  non_submitting = false,
+  red = false,
+  grey = false,
+  is_loading,
+  title,
+  ...props
 }) => (
-  <div className={style.container} onClick={onClick}>
+  React.createElement(
-    {label || children || ''}
+    (seamless || non_submitting) ? 'div' : 'button',
-  </div>
+    {
+      className: classnames(
+        styles.button,
+        className,
+        styles[size],
+        {
+          red,
+          grey,
+          seamless,
+          transparent,
+          disabled: props.disabled,
+          icon: (iconLeft || iconRight) && !title && !children,
+          is_loading,
+        }),
+      children: [
+        iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
+        (
+          title
+            ? <span key={1}>{title}</span>
+            : (children && <span key={1}>{children}</span>) || null
+        ),
+        iconRight && <Icon icon={iconRight} size={20} key={2} />,
+      ],
+      ...props,
+    },
+  )
 );

src/components/input/Button/style.scss

@@ -1,15 +0,0 @@
-.container {
-  height: $input_height;
-  border-radius: $input_radius;
-  display: flex;
-  background: $button_bg_color;
-  align-items: center;
-  justify-content: center;
-  text-transform: uppercase;
-  font-weight: 600;
-  font-size: $text_small;
-  cursor: pointer;
-  flex: 1;
-
-  @include outer_shadow();
-}

src/components/input/Button/styles.scss

@@ -0,0 +1,118 @@
+@keyframes pulse {
+  0% { opacity: 1; }
+  100% { opacity: 0.3; }
+}
+
+.button {
+  height: $input_height;
+  border: none;
+  box-sizing: border-box;
+  padding: 0 30px;
+  color: white;
+  text-transform: uppercase;
+  font: $font_14_semibold;
+
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+
+  background: $button_bg_color;
+  border-radius: $input_radius;
+
+  fill: white;
+  stroke: white;
+  user-select: none;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  // box-shadow: transparentize(#E933A5, 0.6) 0 2px 8px;
+  box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+  filter: grayscale(0);
+
+  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+    box-shadow: transparentize(#E933A5, 0.4) 0 2px 8px;
+
+    &:global(.disabled) {
+      box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+      cursor: auto;
+    }
+
+    &:active {
+      box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+    }
+  }
+
+  &: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(.disabled), &:global(.grey) {
+    opacity: 0.3;
+    //background: black;
+    filter: grayscale(100%);
+  }
+
+  &:global(.icon) {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  &:global(.is_loading) {
+    span, svg {
+      animation: pulse 0.25s infinite alternate;
+    }
+  }
+
+  > * {
+    margin: 0 5px;
+
+    &:first-child { margin-left: 0; }
+    &:last-child { margin-right: 0; }
+  }
+}
+
+.micro { height: 20px; font: $font_12_semibold; padding: 0 15px;}
+.mini { height: 28px; }
+.normal { height: 38px; }
+.big { height: 40px; }
+.giant { height: 50px; padding: 0 15px; min-width: 50px; }
+.disabled {
+  opacity: 0.5;
+}
+.icon_left {
+  margin-right: 10px;
+  width: 20px;
+  height: 20px;
+}
+
+.icon_right {
+  margin-left: 10px;
+  width: 20px;
+  height: 20px;
+}