comment form

src/components/input/Button/index.tsx

@@ -1,12 +1,12 @@
 import classnames from 'classnames';
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement } from 'react';
 import * as styles from './styles.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
 
 type IButtonProps = DetailedHTMLProps<
-ButtonHTMLAttributes<HTMLButtonElement>,
-HTMLButtonElement
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
 > & {
   size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
   iconLeft?: IIcon;
@@ -35,26 +35,29 @@ export const Button: FC<IButtonProps> = ({
   is_loading,
   title,
   stretchy,
+  disabled,
   ...props
-}) => React.createElement(seamless || non_submitting ? 'div' : 'button', {
-  className: classnames(styles.button, className, styles[size], {
-    red,
-    grey,
-    seamless,
-    transparent,
-    disabled: props.disabled,
-    icon: (iconLeft || iconRight) && !title && !children,
-    is_loading,
-    stretchy
-  }),
-  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
-});
+}) =>
+  createElement(
+    seamless || non_submitting ? 'div' : 'button',
+    {
+      className: classnames(styles.button, className, styles[size], {
+        red,
+        grey,
+        seamless,
+        transparent,
+        disabled,
+        is_loading,
+        stretchy,
+        icon: (iconLeft || iconRight) && !title && !children,
+        has_icon_left: !!iconLeft,
+        has_icon_right: !!iconRight,
+      }),
+      ...props,
+    },
+    [
+      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} />,
+    ]
+  );

src/components/input/Button/styles.scss

@@ -85,8 +85,8 @@
   &:global(.disabled),
   &:global(.grey) {
     opacity: 0.3;
-    //background: black;
-    filter: grayscale(100%);
+    background: lighten(black, 2%);
+    // filter: grayscale(100%);
   }
 
   &:global(.icon) {
@@ -101,6 +101,16 @@
     }
   }
 
+  &:global(.has_icon_left) {
+    padding-left: $gap;
+    padding-right: $gap;
+  }
+
+  &:global(.has_icon_right) {
+    padding-left: $gap;
+    padding-right: $gap;
+  }
+
   > * {
     margin: 0 5px;
 
@@ -117,9 +127,11 @@
   height: 20px;
   font: $font_12_semibold;
   padding: 0 15px;
+  border-radius: $radius / 2;
 }
 .mini {
   height: 28px;
+  border-radius: $radius / 2;
 }
 .normal {
   height: 38px;
@@ -135,6 +147,7 @@
 .disabled {
   opacity: 0.5;
 }
+
 .icon_left {
   margin-right: 10px;
   width: 20px;