Slight update adding Button type

Previous type prop renamed to icon

components/Button/index.scss

@@ -16,7 +16,21 @@
         color: $grey-00;
 
         .icon svg {
-            fill: $grey-50;
+            fill: $grey-00;
+        }
+
+        .icon.stroke svg {
+            fill: none;
+            stroke: $grey-00;
+        }
+    }
+
+    &.destructive:hover {
+        background: $error;
+        color: white;
+
+        .icon svg {
+            fill: white;
         }
     }
 
@@ -28,6 +42,11 @@
             height: 12px;
             width: 12px;
         }
+
+        &.stroke svg {
+            fill: none;
+            stroke: $grey-50;
+        }
     }
 
     &.btn-blue {

components/Button/index.tsx

@@ -1,15 +1,22 @@
 import React from 'react'
 import classNames from 'classnames'
 
+import Link from 'next/link'
+
 import AddIcon from '~public/icons/Add.svg'
+import CrossIcon from '~public/icons/Cross.svg'
+import EditIcon from '~public/icons/Edit.svg'
+import LinkIcon from '~public/icons/Link.svg'
 import MenuIcon from '~public/icons/Menu.svg'
 
 import './index.scss'
 
+import { ButtonType } from '~utils/enums'
+
 interface Props {
-    color: string
     disabled: boolean
-    type: string | null
+    icon: string | null
+    type: ButtonType
     click: any
 }
 
@@ -19,9 +26,9 @@ interface State {
 
 class Button extends React.Component<Props, State> {
     static defaultProps: Props = {
-        color: 'grey',
         disabled: false,
-        type: null,
+        icon: null,
+        type: ButtonType.Base,
         click: () => {}
     }
 
@@ -34,17 +41,25 @@ class Button extends React.Component<Props, State> {
 
     render() {
         let icon
-        if (this.props.type === 'new') {
+        if (this.props.icon === 'new') {
             icon = <span className='icon'>
                 <AddIcon />
             </span>
-        } else if (this.props.type === 'menu') {
+        } else if (this.props.icon === 'menu') {
             icon = <span className='icon'>
                 <MenuIcon />
             </span>
-        } else if (this.props.type === 'link') {
+        } else if (this.props.icon === 'link') {
+            icon = <span className='icon stroke'>
+                <LinkIcon />
+            </span>
+        } else if (this.props.icon === 'cross') {
             icon = <span className='icon'>
-                <img alt="" src="/icons/Link.svg" />
+                <CrossIcon />
+            </span>
+        } else if (this.props.icon === 'edit') {
+            icon = <span className='icon'>
+                <EditIcon />
             </span>
         }
 
@@ -52,7 +67,7 @@ class Button extends React.Component<Props, State> {
             Button: true,
             'btn-pressed': this.state.isPressed,
             'btn-disabled': this.props.disabled,
-            [`btn-${this.props.color}`]: true
+            'destructive': this.props.type == ButtonType.Destructive
         })
 
         return <button className={classes} disabled={this.props.disabled} onClick={this.props.click}>

public/icons/Cross.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9425 11.8186C11.1844 12.0605 11.5766 12.0605 11.8186 11.8186C12.0605 11.5766 12.0605 11.1844 11.8186 10.9425L7.8761 7L11.8186 3.05755C12.0605 2.81562 12.0605 2.42338 11.8186 2.18145C11.5766 1.93952 11.1844 1.93952 10.9425 2.18145L7 6.1239L3.05755 2.18145C2.81562 1.93952 2.42338 1.93952 2.18145 2.18145C1.93952 2.42338 1.93952 2.81562 2.18145 3.05755L6.1239 7L2.18145 10.9425C1.93952 11.1844 1.93952 11.5766 2.18145 11.8186C2.42338 12.0605 2.81562 12.0605 3.05755 11.8186L7 7.8761L10.9425 11.8186Z" />
+</svg>