From bde79a83646cda3592a097ccff966ebba66079df Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 2 Dec 2019 16:58:03 +0700
Subject: [PATCH] better gray buttons

---
 src/components/input/Button/index.tsx        | 8 +-------
 src/components/input/Button/styles.scss      | 4 ++++
 src/components/node/CommentForm/index.tsx    | 6 +++---
 src/components/profile/MessageForm/index.tsx | 2 +-
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx
index 6b40b9b7..853311f6 100644
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@@ -9,14 +9,12 @@ type IButtonProps = DetailedHTMLProps<
   HTMLButtonElement
 > & {
   size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
-  color?: 'primary' | 'secondary' | 'outline' | 'link';
+  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray';
   iconLeft?: IIcon;
   iconRight?: IIcon;
   seamless?: boolean;
   transparent?: boolean;
   title?: string;
-  red?: boolean;
-  grey?: boolean;
   non_submitting?: boolean;
   is_loading?: boolean;
   stretchy?: boolean;
@@ -34,8 +32,6 @@ const Button: FC<IButtonProps> = memo(
     seamless = false,
     transparent = false,
     non_submitting = false,
-    red = false,
-    grey = false,
     is_loading,
     title,
     stretchy,
@@ -47,8 +43,6 @@ const Button: FC<IButtonProps> = memo(
       seamless || non_submitting ? 'div' : 'button',
       {
         className: classnames(styles.button, className, styles[size], styles[color], {
-          red,
-          grey,
           seamless,
           transparent,
           disabled,
diff --git a/src/components/input/Button/styles.scss b/src/components/input/Button/styles.scss
index fded59e7..07761529 100644
--- a/src/components/input/Button/styles.scss
+++ b/src/components/input/Button/styles.scss
@@ -161,6 +161,10 @@
     }
   }
 
+  &.gray {
+    background: lighten($content_bg, 8%);
+  }
+
   &.link {
     background: transparent;
     color: white;
diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx
index d9c86db7..2a790b6e 100644
--- a/src/components/node/CommentForm/index.tsx
+++ b/src/components/node/CommentForm/index.tsx
@@ -231,11 +231,11 @@ const CommentFormUnconnected: FC<IProps> = ({
 
         <Group horizontal className={styles.buttons}>
           <ButtonGroup>
-            <Button iconLeft="image" size="small" grey iconOnly>
+            <Button iconLeft="image" size="small" color="gray" iconOnly>
               <input type="file" onInput={onInputChange} multiple accept="image/*" />
             </Button>
 
-            <Button iconRight="enter" size="small" grey iconOnly>
+            <Button iconRight="enter" size="small" color="gray" iconOnly>
               <input type="file" onInput={onInputChange} multiple accept="audio/*" />
             </Button>
           </ButtonGroup>
@@ -244,7 +244,7 @@ const CommentFormUnconnected: FC<IProps> = ({
 
           {is_sending_comment && <LoaderCircle size={20} />}
 
-          <Button size="small" grey iconRight="enter" disabled={is_sending_comment}>
+          <Button size="small" color="gray" iconRight="enter" disabled={is_sending_comment}>
             Сказать
           </Button>
         </Group>
diff --git a/src/components/profile/MessageForm/index.tsx b/src/components/profile/MessageForm/index.tsx
index 7149f5f7..732614e8 100644
--- a/src/components/profile/MessageForm/index.tsx
+++ b/src/components/profile/MessageForm/index.tsx
@@ -69,7 +69,7 @@ const MessageFormUnconnected: FC<IProps> = ({
 
           <Button
             size="small"
-            grey
+            color="gray"
             iconRight="enter"
             disabled={is_sending_messages}
             onClick={onSubmit}