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();
 }

src/sprites/Sprites.tsx

@@ -79,6 +79,16 @@ const Sprites: FC<{}> = () => (
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6 6-6z" />
     </g>
+
+    <g id="photo" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" />
+    </g>
+
+    <g id="image" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5.04-6.71l-2.75 3.54-1.96-2.36L6.5 17h11l-3.54-4.71z" />
+    </g>
   </svg>
 );
 

src/styles/global.scss

@@ -1,4 +1,4 @@
-@import "~raleway-cyrillic/raleway.css";
+@import '~raleway-cyrillic/raleway.css';
 
 html {
   min-height: 100vh;
@@ -7,24 +7,23 @@ html {
 body {
   background: darken($main_bg_color, 12%);
   min-height: 100vh;
-  background: url("http://vault48.org/pixmaps/texture.jpg");
+  background: url('http://vault48.org/pixmaps/texture.jpg');
   color: $main_text_color;
-  font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif;
+  font: $font_16_regular;
   -webkit-font-smoothing: antialiased;
-  font-size: 16px;
+  // font-size: 16px;
   fill: white;
   stroke: white;
 
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     height: 400px;
     width: 100%;
     top: 0;
     left: 0;
     z-index: -1;
-    background: url("http://vault48.org/pixmaps/texture_alt.jpg");
+    background: url('http://vault48.org/pixmaps/texture_alt.jpg');
     pointer-events: none;
   }
 }
@@ -80,4 +79,3 @@ body {
 :global(h2) {
   font: $font_24_bold;
 }
-