Refactor Button component

components/BottomHeader/index.tsx

@@ -67,9 +67,9 @@ const BottomHeader = () => {
     const leftNav = () => {
         if (router.pathname === '/p/[party]' || router.pathname === '/new') {
             if (app.party.detailsVisible) {
-                return (<Button icon="edit" active={true} click={toggleDetails}>Hide info</Button>)
+                return (<Button icon="edit" active={true} onClick={toggleDetails}>Hide info</Button>)
             } else {
-                return (<Button icon="edit" click={toggleDetails}>Edit info</Button>)
+                return (<Button icon="edit" onClick={toggleDetails}>Edit info</Button>)
             }
         } else {
             return (<div />)

components/Button/index.scss

@@ -134,6 +134,71 @@
             color: #bababa;
         }
     }
+
+    &.null {
+        background: $grey-90;
+        color: $grey-50;
+
+        &:hover {
+            background: $grey-70;
+            color: $grey-00;
+        }
+    }
+
+    &.wind {
+        background: $wind-bg-light;
+        color: $wind-text-dark;
+
+        &:hover {
+            background: darken($wind-bg-light, 10);
+        }
+    }
+
+    &.fire {
+        background: $fire-bg-light;
+        color: $fire-text-dark;
+
+        &:hover {
+            background: darken($fire-bg-light, 10);
+        }
+    }
+
+    &.water {
+        background: $water-bg-light;
+        color: $water-text-dark;
+
+        &:hover {
+            background: darken($water-bg-light, 10);
+        }
+    }
+
+    &.earth {
+        background: $earth-bg-light;
+        color: $earth-text-dark;
+
+        &:hover {
+            background: darken($earth-bg-light, 10);
+        }
+    }
+
+    &.dark {
+        background: $dark-bg-light;
+        color: $dark-text-dark;
+
+        &:hover {
+            background: darken($dark-bg-light, 10);
+        }
+    }
+
+
+    &.light {
+        background: $light-bg-light;
+        color: $light-text-dark;
+
+        &:hover {
+            background: darken($light-bg-light, 10);
+        }
+    }
     
     .text {
         color: inherit;

components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
 
 import Link from 'next/link'
@@ -16,80 +16,118 @@ import './index.scss'
 import { ButtonType } from '~utils/enums'
 
 interface Props {
-    active: boolean
-    disabled: boolean
-    icon: string | null
-    type: ButtonType
-    click: any
+    active?: boolean
+    disabled?: boolean
+    classes?: string[],
+    icon?: string
+    type?: ButtonType
+    children?: React.ReactNode
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void
 }
 
-interface State {
-    isPressed: boolean
-}
+const Button = (props: Props) => {
+    // States
+    const [active, setActive] = useState(false)
+    const [disabled, setDisabled] = useState(false)
+    const [pressed, setPressed] = useState(false)
+    const [buttonType, setButtonType] = useState(ButtonType.Base)
 
-class Button extends React.Component<Props, State> {
-    static defaultProps: Props = {
-        active: false,
-        disabled: false,
-        icon: null,
-        type: ButtonType.Base,
-        click: () => {}
-    }
+    const classes = classNames({
+        Button: true,
+        'Active': active,
+        'btn-pressed': pressed,
+        'btn-disabled': disabled,
+        'save': props.icon === 'save',
+        'destructive': props.type == ButtonType.Destructive
+    }, props.classes)
 
-    constructor(props: Props) {
-        super(props)
-        this.state = {
-            isPressed: false,
-        }
-    }
+    useEffect(() => {
+        if (props.active) setActive(props.active)
+        if (props.disabled) setDisabled(props.disabled)
+        if (props.type) setButtonType(props.type)
+    }, [props.active, props.disabled, props.type])
 
-    render() {
-        let icon
-        if (this.props.icon === 'new') {
-            icon = <span className='icon'>
-                <AddIcon />
-            </span>
-        } else if (this.props.icon === 'menu') {
-            icon = <span className='icon'>
-                <MenuIcon />
-            </span>
-        } else if (this.props.icon === 'link') {
-            icon = <span className='icon stroke'>
-                <LinkIcon />
-            </span>
-        } else if (this.props.icon === 'cross') {
-            icon = <span className='icon'>
-                <CrossIcon />
-            </span>
-        } else if (this.props.icon === 'edit') {
-            icon = <span className='icon'>
-                <EditIcon />
-            </span>
-        } else if (this.props.icon === 'save') {
-            icon = <span className='icon stroke'>
-                <SaveIcon />
-            </span>
-        } else if (this.props.icon === 'settings') {
-            icon = <span className='icon settings'>
-                <SettingsIcon />
-            </span>
+    const addIcon = (
+        <span className='icon'>
+            <AddIcon />
+        </span>
+    )
+
+    const menuIcon = (
+        <span className='icon'>
+            <MenuIcon />
+        </span>
+    )
+
+    const linkIcon = (
+        <span className='icon stroke'>
+            <LinkIcon />
+        </span>
+    )
+
+    const crossIcon = (
+        <span className='icon'>
+            <CrossIcon />
+        </span>
+    )
+
+    const editIcon = (
+        <span className='icon'>
+            <EditIcon />
+        </span>
+    )
+
+    const saveIcon = (
+        <span className='icon stroke'>
+            <SaveIcon />
+        </span>
+    )
+
+    const settingsIcon = (
+        <span className='icon settings'>
+            <SettingsIcon />
+        </span>
+    )
+
+    function getIcon() {
+        let icon: React.ReactNode
+        
+        switch(props.icon) {
+            case 'new':      icon = addIcon; break
+            case 'menu':     icon = menuIcon; break
+            case 'link':     icon = linkIcon; break
+            case 'cross':    icon = crossIcon; break
+            case 'edit':     icon = editIcon; break
+            case 'save':     icon = saveIcon; break
+            case 'settings': icon = settingsIcon; break
         }
 
-        const classes = classNames({
-            Button: true,
-            'Active': this.props.active,
-            'btn-pressed': this.state.isPressed,
-            'btn-disabled': this.props.disabled,
-            'save': this.props.icon === 'save',
-            'destructive': this.props.type == ButtonType.Destructive
-        })
+        return icon
+    }
 
-        return <button className={classes} disabled={this.props.disabled} onClick={this.props.click}>
-            {icon}
-            { (this.props.type != ButtonType.IconOnly) ? 
-                <span className='text'>{this.props.children}</span> : '' }
+    function handleMouseDown() {
+        setPressed(true)
+    }
+
+    function handleMouseUp() {
+        setPressed(false)
+    }
+    return (
+        <button 
+            className={classes} 
+            disabled={disabled} 
+            onMouseDown={handleMouseDown}
+            onMouseUp={handleMouseUp}
+            onClick={props.onClick}>
+                { getIcon() }
+
+                { (props.type != ButtonType.IconOnly) ? 
+                    <span className='text'>
+                        { props.children }
+                    </span> : '' 
+                }
         </button>
-    }
+    )  
 }
 
 export default Button

components/GridRep/index.tsx

@@ -115,7 +115,7 @@ const GridRep = (props: Props) => {
                         active={props.favorited} 
                         icon="save" 
                         type={ButtonType.IconOnly} 
-                        click={sendSaveData} 
+                        onClick={sendSaveData} 
                     /> : ''}
             </div>
             <div className="bottom">

components/TopHeader/index.tsx

@@ -107,9 +107,9 @@ const TopHeader = () => {
 
     const saveButton = () => {
         if (party.favorited)
-            return (<Button icon="save" active={true} click={toggleFavorite}>Saved</Button>)
+            return (<Button icon="save" active={true} onClick={toggleFavorite}>Saved</Button>)
         else
-            return (<Button icon="save" click={toggleFavorite}>Save</Button>)
+            return (<Button icon="save" onClick={toggleFavorite}>Save</Button>)
     }
 
     const rightNav = () => {
@@ -119,9 +119,9 @@ const TopHeader = () => {
                     saveButton() : ''
                 }
                 { (router.route === '/p/[party]') ? 
-                    <Button icon="link" click={copyToClipboard}>Copy link</Button> : ''
+                    <Button icon="link" onClick={copyToClipboard}>Copy link</Button> : ''
                 }
-                <Button icon="new" click={newParty}>New</Button>
+                <Button icon="new" onClick={newParty}>New</Button>
             </div>
         )
     }

components/WeaponModal/index.tsx

@@ -14,7 +14,6 @@ import { appState } from '~utils/appState'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
-
 interface GridWeaponObject {
     weapon: {
         element?: number