Improve Buttons UI

package-lock.json

@@ -1046,6 +1046,35 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
+      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
+      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz",
+      "integrity": "sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

src/App.css

@@ -47,10 +47,15 @@ h1 {
   background-repeat: no-repeat;
 }
 
-#magic-canvas.border-primary {
+#magic-canvas.border-success {
   border-width: 4px!important;
 }
 
 #vom-drawing-canvas button {
   align-self: flex-end;
+}
+
+#vom-canvas-tools {
+  display: flex;
+  justify-content: space-between;
 }

src/DrawCanvas.tsx

@@ -2,6 +2,8 @@
 import React, { useState, useEffect } from 'react';
 import Paper, { Path } from 'paper';
 import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input, Fade, ModalHeader, ButtonGroup } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faReply, faTrashAlt, faEraser, faSave, faEdit, faPen } from '@fortawesome/free-solid-svg-icons';
 import { remove, update } from 'ramda';
 
 const COLORS = [
@@ -338,26 +340,44 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
     const { pathSelected, data } = this.state;
     return (
       <>
-        <ButtonGroup className="mb-3">
-          <Button onClick={() => this.clearCanvas()}>Restart</Button>
+      <div id="vom-canvas-tools">
+        <ButtonGroup className="mb-3 ">
+          <Button onClick={() => this.clearCanvas()} color="danger">
+            <FontAwesomeIcon icon={faTrashAlt} />
+          </Button>
           {
             this.state.editMode ? (
-              <Button onClick={() => this.toggleEditMode(false)}>Draw</Button>
-            ) : (
-              <Button onClick={() => this.toggleEditMode(true)} disabled={this.state.current === 0}>Edit</Button>
-            )
+              <Button onClick={() => this.toggleEditMode(false)} color="warning">
+                <FontAwesomeIcon icon={faReply} />
+              </Button>
+            ) : null
+          }
+          {
+            this.state.data.length && !this.state.editMode ? (
+              <Button color="success" onClick={() => this.toggleEditMode(true)} disabled={this.state.current === 0}>
+                <FontAwesomeIcon icon={faPen} />
+              </Button>
+            ) : null
           }
         </ButtonGroup>
+
         {
           this.state.pathSelected !== undefined ? (
             <ButtonGroup className="mb-3">
-              <Button onClick={() => this.removePath()}>Remove</Button>
-              <Button onClick={() => this.toggleModal(true)}>Edit Data</Button>
-              <Button onClick={() => this.toggleEditMode(false)}>Save changes</Button>
+              <Button onClick={() => this.removePath()}>
+                <FontAwesomeIcon icon={faEraser} />
+              </Button>
+              <Button onClick={() => this.toggleModal(true)}>
+                <FontAwesomeIcon icon={faEdit} />
+              </Button>
+              <Button onClick={() => this.toggleEditMode(false)}>
+                <FontAwesomeIcon icon={faSave} />
+              </Button>
             </ButtonGroup>
           ) : null 
         }
-        <canvas id="magic-canvas" className={`mb-4 border rounded ${this.state.editMode && 'border-primary'}`}/>
+      </div>
+        <canvas id="magic-canvas" className={`mb-4 border rounded ${this.state.editMode && 'border-success'}`}/>
         <Button
           color="primary"
           onClick={() => this.props.saveData(this.state.data)}