From 0634a47cff8888ef7ae0505113283d673003d00f Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Tue, 30 Oct 2018 19:42:08 +0100
Subject: [PATCH] change icons for the contract page

---
 embark-ui/src/components/ContractLayout.js           | 9 +++++----
 embark-ui/src/components/TextEditorToolbar.js        | 8 ++++----
 embark-ui/src/containers/TextEditorAsideContainer.js | 2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/embark-ui/src/components/ContractLayout.js b/embark-ui/src/components/ContractLayout.js
index 6bd4b915b..7c056faca 100644
--- a/embark-ui/src/components/ContractLayout.js
+++ b/embark-ui/src/components/ContractLayout.js
@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React from 'react';
+import FontAwesomeIcon from "react-fontawesome";
 import { TabContent, TabPane, Nav, NavItem, NavLink, Card, CardBody, CardTitle } from 'reactstrap';
 import classnames from 'classnames';
 
@@ -37,7 +38,7 @@ class ContractLayout extends React.Component {
                   className={classnames({ active: this.state.activeTab === '1' })}
                   onClick={() => { this.toggle('1'); }}
                 >
-                  Overview
+                  <FontAwesomeIcon className="mr-2" name="bolt" />Interact
                 </NavLink>
               </NavItem>
               <NavItem>
@@ -45,7 +46,7 @@ class ContractLayout extends React.Component {
                   className={classnames({ active: this.state.activeTab === '2' })}
                   onClick={() => { this.toggle('2'); }}
                 >
-                  Detail
+                  <FontAwesomeIcon className="mr-2" name="info-circle" />Details
                 </NavLink>
               </NavItem>
               <NavItem>
@@ -53,7 +54,7 @@ class ContractLayout extends React.Component {
                   className={classnames({ active: this.state.activeTab === '3' })}
                   onClick={() => { this.toggle('3'); }}
                 >
-                  Transactions
+                  <FontAwesomeIcon className="mr-2" name="list-alt" />Transactions
                 </NavLink>
               </NavItem>
               <NavItem>
@@ -61,7 +62,7 @@ class ContractLayout extends React.Component {
                   className={classnames({ active: this.state.activeTab === '4' })}
                   onClick={() => { this.toggle('4'); }}
                 >
-                  Debugger
+                  <FontAwesomeIcon className="mr-2" name="bug" />Debugger
                 </NavLink>
               </NavItem>
             </Nav>
diff --git a/embark-ui/src/components/TextEditorToolbar.js b/embark-ui/src/components/TextEditorToolbar.js
index 0b33fa65e..6f7ca69a0 100644
--- a/embark-ui/src/components/TextEditorToolbar.js
+++ b/embark-ui/src/components/TextEditorToolbar.js
@@ -36,16 +36,16 @@ class TextEditorToolbar extends Component {
             {this.props.isContract &&
               <React.Fragment>
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Overview)})} onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Overview)}>
-                  <FontAwesomeIcon className="mr-2" name="bolt" /> Interact
+                  <FontAwesomeIcon className="mr-2" name="bolt" />Interact
                 </NavLink>
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}>
-                  <FontAwesomeIcon className="mr-2" name="info-circle" /> Details
+                  <FontAwesomeIcon className="mr-2" name="info-circle" />Details
                 </NavLink>
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Transactions)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Transactions)}>
-                  <FontAwesomeIcon className="mr-2" name="list-alt" /> Transactions
+                  <FontAwesomeIcon className="mr-2" name="list-alt" />Transactions
                 </NavLink>
                 <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Debugger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Debugger)}>
-                  <FontAwesomeIcon className="mr-2" name="bug" /> Debugger
+                  <FontAwesomeIcon className="mr-2" name="bug" />Debugger
                 </NavLink>
               </React.Fragment>
             }
diff --git a/embark-ui/src/containers/TextEditorAsideContainer.js b/embark-ui/src/containers/TextEditorAsideContainer.js
index 48e286ec8..6fcbf527d 100644
--- a/embark-ui/src/containers/TextEditorAsideContainer.js
+++ b/embark-ui/src/containers/TextEditorAsideContainer.js
@@ -21,7 +21,7 @@ class TextEditorAsideContainer extends Component {
       case 'debugger':
         return (
           <React.Fragment>
-            <h2>{contract.className} - Details</h2>
+            <h2>{contract.className} - Debugger</h2>
             <ContractDebuggerContainer key={index} contract={contract}/>
           </React.Fragment>
         );