4 files changed, 30 insertions, 10 deletions

diff --git a/cmd/web/js/account.jsx b/cmd/web/js/account.jsx
index 9a976f4..a80b44a 100644
--- a/cmd/web/js/account.jsx
+++ b/cmd/web/js/account.jsx
@@ -1,6 +1,7 @@
 import Api from './api.js';
 import React from 'react';
 import Panel from './panel.js';
+import Icon from './icon.js';
 
 class AccountInformation extends React.Component {
   constructor(props) {
@@ -157,13 +158,13 @@ class PoloniexCredentialsForm extends React.Component {
     var secretDisplayed = this.props.editMode === true ? this.props.apiSecret : 'XXXXXXX';
     var keyDisplayed    = this.props.editMode === true ? this.props.apiKey : 'XXXXXXX';
 
-    var iconName = 'icon-cancel-circled';
+    var iconName = 'icon-cancel';
     switch (this.props.status) {
       case 'loading':
-        iconName = 'icon-hourglass-2';
+        iconName = 'icon-loop';
         break;
       case 'ok':
-        iconName = 'icon-ok-circled';
+        iconName = 'icon-ok';
         break;
     }
 
@@ -171,7 +172,7 @@ class PoloniexCredentialsForm extends React.Component {
         <React.Fragment>
         <div className="row config-status">
           <div className="col-12">
-            <span><i className={iconName}></i>{this.props.statusMessage}</span>
+            <span><Icon icon={iconName} /> {this.props.statusMessage}</span>
           </div>
         </div>
         <div className="row">
@@ -195,8 +196,8 @@ class UserAccount extends React.Component {
   render = () => {
     return (
       <React.Fragment>
-        <Panel component={<AccountInformation/>} title="Account" />
-        <Panel component={<PoloniexConfiguration/>} title="Poloniex credentials" topClassName="api-credentials-form" />
+        <Panel component={<AccountInformation/>} title={<div><Icon icon="icon-user" />  Account</div>} />
+        <Panel component={<PoloniexConfiguration/>} title={<div><Icon icon="poloniex"/>  Poloniex credentials</div>} topClassName="api-credentials-form" />
       </React.Fragment>
     );
   }
diff --git a/cmd/web/js/balance.jsx b/cmd/web/js/balance.jsx
index 6217e96..1915511 100644
--- a/cmd/web/js/balance.jsx
+++ b/cmd/web/js/balance.jsx
@@ -4,10 +4,10 @@ import classnames from 'classnames';
 
 class CurrencyLogo extends React.Component {
     render = () => {
-      var className = classnames('cc', this.props.currency, 'currency-logo');
+      var className = classnames('bt', 'bt-' + this.props.currency.toLowerCase(), 'currency-logo');
       return <i className={className}
-                title={this.props.currency}
-                alt={this.props.currency}></i>;
+                aria-hidden="true"
+                title={this.props.currency}></i>;
     }
  }
 
diff --git a/cmd/web/js/icon.jsx b/cmd/web/js/icon.jsx
new file mode 100644
index 0000000..53453bc
--- /dev/null
+++ b/cmd/web/js/icon.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import classnames from 'classnames';
+
+class Icon extends React.Component {
+  render = () => {
+    var className = null;
+
+    if (this.props.icon.startsWith('icon-')) {
+      className = classnames(this.props.icon, this.props.className);
+      return <i className={className}></i>;
+    }
+
+    className = classnames('bt', 'bt-' + this.props.icon, this.props.className);
+    return <i className={className} aria-hidden="true"></i>;
+
+  }
+}
+
+export default Icon;
diff --git a/cmd/web/js/panel.jsx b/cmd/web/js/panel.jsx
index 7f9f9a3..e1073c6 100644
--- a/cmd/web/js/panel.jsx
+++ b/cmd/web/js/panel.jsx
@@ -13,7 +13,7 @@ class Panel extends React.Component {
       <div className={className}>
         <div className="box offset-1 col-10">
           <div className="row">
-            <div className="col-4">{this.props.title}</div>
+            <div className="col-12 panel-title">{this.props.title}</div>
           </div>
           <hr/>
           {this.props.component}