Added icons to the buttons, added How to use button

Author: Nkmai

package.json

@@ -107,6 +107,11 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.12",
     "@visx/axis": "^1.0.0",
     "@visx/clip-path": "^1.0.0",
     "@visx/event": "^1.0.0",
@@ -151,4 +156,4 @@
     "recoil": "0.0.10",
     "sankey": "^2.0.2"
   }
-}
+}

src/app/containers/ButtonsContainer.tsx

@@ -7,6 +7,8 @@ import React from 'react';
 
 import { importSnapshots, toggleMode } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUpload, faQuestion, faDownload, faMapMarker, faRedoAlt, faUnlock, faLock} from '@fortawesome/free-solid-svg-icons'
 
 function exportHandler(snapshots:[]) {
   // create invisible download anchor link
@@ -44,6 +46,11 @@ function importHandler(dispatch:(a:any)=>void) {
   fileUpload.click();
 }
 
+function howToUseHandler() {
+  window.open('https://github.com/open-source-labs/reactime', '_blank');
+  return null;
+}
+
 function ButtonsContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
@@ -52,28 +59,55 @@ function ButtonsContainer() {
   } = tabs[currentTab];
 
   return (
-    <div className="buttons-container">
-      <button className="pause-button" type="button" onClick={() => dispatch(toggleMode('paused'))}>
-        {paused ? 'Resume' : 'Pause'}
-      </button>
-      <button className="lock-button" type="button" onClick={() => dispatch(toggleMode('locked'))}>
-        {locked ? 'Unlock' : 'Lock'}
-      </button>
-      <button
-        className="persist-button"
-        type="button"
-        onClick={() => dispatch(toggleMode('persist'))}
-      >
-        {persist ? 'Unpersist' : 'Persist'}
-      </button>
-      <button className="export-button" type="button" onClick={() => exportHandler(snapshots)}>
-        Export
-      </button>
-      <button className="import-button" type="button" onClick={() => importHandler(dispatch)}>
-        Import
-      </button>
-    </div>
-  );
+		<div className="buttons-container">
+			<button
+				className="pause-button"
+				type="button"
+				onClick={() => dispatch(toggleMode('paused'))}
+			>
+        {paused? <FontAwesomeIcon icon={faUnlock} /> : <FontAwesomeIcon icon={faLock} />}
+				{paused ? 'Unlock' : 'Lock'}
+			</button>
+			{/* <button
+				className="lock-button"
+				type="button"
+				onClick={() => dispatch(toggleMode('locked'))}
+			>
+				{locked ? 'Unlocked': 'Locked'}
+			</button> */}
+			<button
+				className="persist-button"
+				type="button"
+				onClick={() => dispatch(toggleMode('persist'))}
+			>
+        {persist? <FontAwesomeIcon icon={faRedoAlt} /> : <FontAwesomeIcon icon={faMapMarker} /> }
+				{persist ? 'Unpersist' : 'Persist'}
+			</button>
+			<button
+				className="export-button"
+				type="button"
+				onClick={() => exportHandler(snapshots)}
+			>
+				<FontAwesomeIcon icon={faDownload} />
+				Download
+			</button>
+			<button
+				className="import-button"
+				type="button"
+				onClick={() => importHandler(dispatch)}
+			>
+				<FontAwesomeIcon icon={faUpload} />
+				Upload
+			</button>
+			<button
+				className="howToUse-button"
+				type="button"
+				onClick={() => howToUseHandler()}
+			>
+				<FontAwesomeIcon icon={faQuestion} /> How to use
+			</button>
+		</div>
+	);
 }
 
 export default ButtonsContainer;

src/app/styles/components/_buttons.scss

@@ -113,6 +113,7 @@
 }
 
 .import-button,
+.howToUse-button,
 .export-button,
 .lock-button,
 .pause-button,
@@ -122,6 +123,7 @@
 	background: $blue-color-gradient;
 }
 .import-button:hover,
+.howToUse-button:hover,
 .export-button:hover,
 .lock-button:hover,
 .pause-button:hover,
@@ -130,6 +132,15 @@
 	box-shadow: $box-shadow-blue;
 }
 
+.svg-inline--fa {
+	color: #40404094;
+	margin-right: 0.75em;
+	display: inline-block;
+	font-size: inherit;
+	height: 0.75em;
+	overflow: visible;
+	vertical-align: -0.125em;
+}
 %button-shared {
 	padding: 5px;
 	outline: none;

src/app/styles/layout/_buttonsContainer.scss

@@ -1,17 +1,17 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 * {
-  font-family: 'Roboto', sans-serif;
+	font-family: 'Roboto', sans-serif;
 }
 .buttons-container {
-  margin: 0 1% 0 1%;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-gap: 1%;
-  padding: 1% 0 1% 0;
+	margin: 0 1% 0 1%;
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	grid-gap: 1%;
+	padding: 1% 0 1% 0;
 }
 
 @media (max-width: 500px) {
-  .buttons-container {
-    grid-template-columns: repeat(2, 1fr);
-  }
+	.buttons-container {
+		grid-template-columns: repeat(2, 1fr);
+	}
 }