fixed commentform buttons

src/components/input/Button/index.tsx

@@ -8,7 +8,7 @@ type IButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 > & {
-  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
+  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
   iconLeft?: IIcon;
   iconRight?: IIcon;
   seamless?: boolean;
@@ -19,6 +19,7 @@ type IButtonProps = DetailedHTMLProps<
   non_submitting?: boolean;
   is_loading?: boolean;
   stretchy?: boolean;
+  iconOnly?: boolean;
 };
 
 export const Button: FC<IButtonProps> = ({
@@ -36,6 +37,7 @@ export const Button: FC<IButtonProps> = ({
   title,
   stretchy,
   disabled,
+  iconOnly,
   ...props
 }) =>
   createElement(
@@ -49,7 +51,7 @@ export const Button: FC<IButtonProps> = ({
         disabled,
         is_loading,
         stretchy,
-        icon: (iconLeft || iconRight) && !title && !children,
+        icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
         has_icon_left: !!iconLeft,
         has_icon_right: !!iconRight,
       }),
@@ -57,7 +59,7 @@ export const Button: FC<IButtonProps> = ({
     },
     [
       iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
-      title ? <span key={1}>{title}</span> : (children && <span key={1}>{children}</span>) || null,
+      title ? <span>{title}</span> : children || null,
       iconRight && <Icon icon={iconRight} size={20} key={2} />,
     ]
   );

src/components/input/Button/styles.scss

@@ -27,10 +27,12 @@
   stroke: white;
   user-select: none;
 
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
 
+  position: relative;
+
   filter: grayscale(0);
 
   transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
@@ -38,6 +40,22 @@
 
   @include outer_shadow();
 
+  input {
+    color: red;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    opacity: 0;
+  }
+
+  svg {
+    fill: white;
+    stroke: white;
+  }
+
   span {
     flex: 1;
   }
@@ -89,14 +107,22 @@
 
   &:global(.disabled),
   &:global(.grey) {
-    opacity: 0.3;
-    background: lighten(black, 2%);
+    background: transparentize(white, 0.9);
+    // background: lighten(white, 0.5);
     // filter: grayscale(100%);
   }
 
+  &:global(.disabled) {
+    opacity: 0.3;
+  }
+
   &:global(.icon) {
     padding-left: 10px;
     padding-right: 10px;
+
+    svg {
+      margin: 0;
+    }
   }
 
   &:global(.is_loading) {
@@ -138,6 +164,15 @@
   height: 28px;
   border-radius: $radius / 2;
 }
+.small {
+  height: 32px;
+  // border-radius: $radius / 2;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
 .normal {
   height: 38px;
 }

src/components/input/ButtonGroup/index.tsx

@@ -0,0 +1,6 @@
+import React, { HTMLAttributes } from 'react';
+import * as styles from './styles.scss';
+
+type IProps = HTMLAttributes<HTMLDivElement> & {};
+
+export const ButtonGroup = ({ children }: IProps) => <div className={styles.wrap}>{children}</div>;

src/components/input/ButtonGroup/styles.scss

@@ -0,0 +1,21 @@
+.wrap {
+  display: flex;
+  flex-direction: row;
+
+  & > * {
+    border-radius: 0;
+    box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
+
+    &:last-child {
+      border-radius: 0 $input_radius $input_radius 0;
+
+      &.small {
+        border-radius: 0 3px 3px 0;
+      }
+    }
+
+    &:first-child {
+      border-radius: $input_radius 0 0 $input_radius;
+    }
+  }
+}

src/components/node/CommentForm/index.tsx

@@ -19,6 +19,7 @@ import { IState } from '~/redux/store';
 import { getFileType } from '~/utils/uploader';
 import { selectUser } from '~/redux/auth/selectors';
 import { getURL } from '~/utils/dom';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -133,14 +134,21 @@ const CommentFormUnconnected: FC<IProps> = ({
         </div>
 
         <Group horizontal className={styles.buttons}>
-          <input type="file" onInput={onInputChange} multiple accept="image/*" />
-          <input type="file" onInput={onInputChange} multiple accept="audio/*" />
+          <ButtonGroup>
+            <Button iconLeft="image" size="small" grey iconOnly>
+              <input type="file" onInput={onInputChange} multiple accept="image/*" />
+            </Button>
+
+            <Button iconRight="enter" size="small" grey iconOnly>
+              <input type="file" onInput={onInputChange} multiple accept="audio/*" />
+            </Button>
+          </ButtonGroup>
 
           <Filler />
 
           {is_sending_comment && <LoaderCircle size={20} />}
 
-          <Button size="mini" grey iconRight="enter" disabled={is_sending_comment}>
+          <Button size="small" grey iconRight="enter" disabled={is_sending_comment}>
             Сказать
           </Button>
         </Group>

src/components/node/CommentForm/styles.scss

@@ -19,10 +19,4 @@
   padding: $gap / 2;
   border-radius: 0 0 $radius $radius;
   flex-wrap: wrap;
-
-  svg {
-    fill: transparentize(white, 0.9);
-  }
-
-  // @include outer_shadow();
 }