From 4e7464a6fbecce7ece335ece3990f395d457d527 Mon Sep 17 00:00:00 2001
From: frozenhelium <fren.ankit@gmail.com>
Date: Mon, 25 Jan 2021 15:53:52 +0545
Subject: [PATCH] Simplify button styling

---
 components/Action/Button/index.js    | 171 +++++++++++++--------------
 components/Action/Button/styles.scss | 120 ++++++++-----------
 2 files changed, 132 insertions(+), 159 deletions(-)

diff --git a/components/Action/Button/index.js b/components/Action/Button/index.js
index 8bd18de8a..02653ecbc 100644
--- a/components/Action/Button/index.js
+++ b/components/Action/Button/index.js
@@ -18,6 +18,7 @@ eslint css-modules/no-unused-class: [
     }
 ]
 */
+
 import styles from './styles.scss';
 
 const propTypes = {
@@ -99,34 +100,42 @@ const defaultProps = {
     onClickParams: undefined,
 };
 
-/**
- * Basic button component
- */
-class Button extends React.PureComponent {
-    static propTypes = propTypes;
-
-    static defaultProps = defaultProps;
-
-    componentWillUnmount() {
-        if (this.changeTimeout) {
-            clearTimeout(this.changeTimeout);
+function Button(props) {
+    const {
+        onClick,
+        onClickParams,
+        changeDelay,
+        iconName,
+        children,
+        disabled,
+        pending,
+        type,
+        buttonType,
+        className: classNameFromProps,
+        smallHorizontalPadding,
+        smallVerticalPadding,
+        transparent,
+
+        ...otherProps
+    } = props;
+
+    const changeTimeoutRef = React.useRef(null);
+
+    React.useEffect(() => (
+        () => {
+            window.clearTimeout(changeTimeoutRef.current);
         }
-    }
+    ), []);
 
-    handleClick = (e) => {
-        clearTimeout(this.changeTimeout);
-        const {
-            onClick,
-            onClickParams,
-            changeDelay,
-        } = this.props;
+    const handleClick = React.useCallback((e) => {
+        clearTimeout(changeTimeoutRef.current);
 
         if (!onClick) {
             return;
         }
 
 
-        this.changeTimeout = setTimeout(
+        changeTimeoutRef.current = window.setTimeout(
             () => {
                 onClick({
                     event: e,
@@ -135,76 +144,58 @@ class Button extends React.PureComponent {
             },
             changeDelay,
         );
-    }
-
-    render() {
-        const {
-            iconName,
-            children,
-            disabled,
-            pending,
-            type,
-            buttonType,
-            className: classNameFromProps,
-            smallHorizontalPadding,
-            smallVerticalPadding,
-            transparent,
-
-            onClick, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
-            onClickParams, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
-            changeDelay, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
-            ...otherProps
-        } = this.props;
-
-        const buttonClassName = _cs(
-            classNameFromProps,
-            'button',
-            styles.button,
-            buttonType,
-            buttonType && styles[buttonType],
-            iconName && children && 'with-icon-and-children',
-            iconName && children && styles.withIconAndChildren,
-
-            smallHorizontalPadding && 'small-horizontal-padding',
-            smallHorizontalPadding && styles.smallHorizontalPadding,
-            smallVerticalPadding && 'small-vertical-padding',
-            smallVerticalPadding && styles.smallVerticalPadding,
-
-            transparent && 'transparent',
-            transparent && styles.transparent,
-        );
-
-        const iconClassName = _cs(
-            'icon',
-            styles.icon,
-            // pending && styles.pendingIcon,
-        );
-
-        /* eslint-disable react/button-has-type */
-        return (
-            <button
-                className={buttonClassName}
-                disabled={disabled || pending}
-                onClick={this.handleClick}
-                type={type}
-                {...otherProps}
-            >
-                {pending ? (
-                    <Spinner
-                        className={styles.spinner}
-                        size="small"
-                    />
-                ) : (
-                    <Icon
-                        name={iconName}
-                        className={iconClassName}
-                    />
-                )}
-                { children }
-            </button>
-        );
-        /* eslint-enable react/button-has-type */
-    }
+    }, [onClick, changeDelay, onClickParams]);
+
+    const buttonClassName = _cs(
+        classNameFromProps,
+        'button',
+        styles.button,
+        buttonType,
+        buttonType && styles[buttonType],
+        iconName && children && 'with-icon-and-children',
+        iconName && children && styles.withIconAndChildren,
+
+        smallHorizontalPadding && 'small-horizontal-padding',
+        smallHorizontalPadding && styles.smallHorizontalPadding,
+        smallVerticalPadding && 'small-vertical-padding',
+        smallVerticalPadding && styles.smallVerticalPadding,
+
+        transparent && 'transparent',
+        transparent && styles.transparent,
+    );
+
+    const iconClassName = _cs(
+        'icon',
+        styles.icon,
+    );
+
+    /* eslint-disable react/button-has-type */
+    return (
+        <button
+            className={buttonClassName}
+            disabled={disabled || pending}
+            onClick={handleClick}
+            type={type}
+            {...otherProps}
+        >
+            {pending ? (
+                <Spinner
+                    className={styles.spinner}
+                    size="small"
+                />
+            ) : (
+                <Icon
+                    name={iconName}
+                    className={iconClassName}
+                />
+            )}
+            { children }
+        </button>
+    );
+    /* eslint-enable react/button-has-type */
 }
 
+Button.propTypes = propTypes;
+Button.defaultProps = defaultProps;
+
 export default FaramActionElement(Button);
diff --git a/components/Action/Button/styles.scss b/components/Action/Button/styles.scss
index f77698873..68b619ba6 100644
--- a/components/Action/Button/styles.scss
+++ b/components/Action/Button/styles.scss
@@ -1,9 +1,5 @@
 @import '../../../stylesheets/utils';
 
-:root {
-    --radius-button-border: 2px;
-}
-
 @mixin button-props($base-color) {
     // border: var(--width-separator-thin) solid var(--color-separator-light);
     // color: var(--color-text);
@@ -35,113 +31,99 @@
 }
 
 .button {
-    border: var(--width-separator-thin) solid var(--color-separator-light);
+    --background-color: transparent;
+    --color: var(--color-text);
+    --border-color: transparent;
+
+    border: var(--width-separator-thin) solid var(--border-color);
     border-radius: var(--radius-button-border);
-    background-color: transparent;
+    background-color: var(--background-color);
     padding: var(--spacing-small) var(--spacing-small-alt);
     text-transform: uppercase;
+    color: var(--color);
     font-family: inherit;
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-bold);
 
-    &:not(:disabled) {
-        cursor: pointer;
+    &:disabled {
+        --background-color: var(--color-background-disabled);
+        --color: var(--color-text-disabled);
+        --border-color: var(--color-separator-light);
     }
 
     &:not(:disabled) {
-        &:active {
-            // @include shadow-button-active;
-            transform: translateY(1px);
-        }
-    }
-
-    &:not(.transparent) {
-        &:not(:disabled) {
-            // @include shadow-button;
-        }
+        cursor: pointer;
 
         &.button-default {
-            background-color: var(--color-foreground);
-            color: var(--color-text);
-
-            &:focus {
-                // @include outline-button(var(--color-separator-alt));
-            }
-
-            &:not(:disabled) {
-                border: var(--width-separator-thin) solid var(--color-separator-alt);
-
-                &:hover {
-                    background-color: var(--color-background-hover);
-                    // color: var(--color-text);
-                    // background-color: get-hover-color($base-color);
-                }
-            }
-            // @include button-props(var(--color-foreground-alt));
+            --color: var(--color-text);
         }
 
         &.button-accent {
-            @include button-props(var(--color-accent));
+            --color: var(--color-accent);
         }
 
         &.button-primary {
-            @include button-props(var(--color-primary));
+            --color: var(--color-primary);
         }
 
         &.button-danger {
-            @include button-props(var(--color-danger));
+            --color: var(--color-danger);
         }
 
         &.button-success {
-            @include button-props(var(--color-success));
+            --color: var(--color-success);
         }
 
         &.button-warning {
-            @include button-props(var(--color-warning));
+            --color: var(--color-warning);
         }
 
-        &:disabled {
-            background-color: var(--color-background-disabled);
-            color: var(--color-text-disabled);
+        &:active {
+            transform: translateY(1px);
         }
-    }
 
-    &.transparent {
-        border: 0;
+        &:not(.transparent) {
+            --background-color: var(--color-foreground);
 
-        &:focus {
-            border-bottom: 0;
-        }
+            &.button-default {
+                --border-color: var(--color-separator);
+            }
 
-        &.button-default {
-            @include transparent-button-props(var(--color-text));
-        }
+            &.button-accent {
+                --border-color: var(--color-accent);
+            }
 
-        &.button-accent {
-            @include transparent-button-props(var(--color-accent));
-        }
+            &.button-primary {
+                --border-color: var(--color-primary);
+            }
 
-        &.button-primary {
-            @include transparent-button-props(var(--color-primary));
-        }
+            &.button-danger {
+                --border-color: var(--color-danger);
+            }
 
-        &.button-danger {
-            @include transparent-button-props(var(--color-danger));
-        }
+            &.button-success {
+                --border-color: var(--color-success);
+            }
 
-        &.button-success {
-            @include transparent-button-props(var(--color-success));
-        }
+            &.button-warning {
+                --border-color: var(--color-warning);
+            }
 
-        &.button-warning {
-            @include transparent-button-props(var(--color-warning));
+            &:hover {
+                --background-color: var(--color-background-hover);
+            }
         }
 
+    }
+
+
+    &.transparent {
+        --background-color: transparent;
+        --border-color: transparent;
+
         &:disabled {
-            cursor: default;
-            color: var(--color-text-disabled);
+            --color: var(--color-text-disabled);
         }
-
     }
 
     .spinner {