From da5c646d69645058b591e43f89af8bbc2f4232b5 Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@pbca26s-MacBook-Air.local>
Date: Sat, 6 Jan 2018 17:10:32 +0300
Subject: [PATCH] styles cleanup

---
 react/src/actions/actions/fiatRates.js        | 32 ++++++++++++
 react/src/actions/storeType.js                |  1 +
 .../claimInterestModal/claimInterestModal.js  |  4 +-
 .../claimInterestModal.render.js              |  4 +-
 .../dashboard/jumblr/jumblr.render.js         | 49 +++++++++++--------
 .../components/dashboard/qrModal/qrModal.js   | 11 ++---
 .../components/dashboard/qrModal/qrModal.scss | 10 ++++
 .../components/dashboard/sendCoin/sendCoin.js |  6 ++-
 .../dashboard/sendCoin/sendCoin.render.js     | 34 +++++++------
 .../settings/settings.appUpdatePanel.js       | 25 ++++++----
 .../dashboard/settings/settings.scss          |  8 +++
 .../walletsHeader/walletsHeader.render.js     |  4 +-
 .../walletsHeader/walletsHeader.scss          |  4 ++
 .../walletsInfo/walletsInfo.render.js         | 13 +++--
 .../dashboard/walletsInfo/walletsInfo.scss    |  3 ++
 .../walletsMain/walletsMain.render.js         |  4 +-
 .../zcparamsFetchModal/zcparamsFetchModal.js  |  4 +-
 react/src/components/login/login.render.js    | 14 ++----
 react/src/components/login/login.scss         | 15 ++++++
 react/src/components/overrides.scss           | 16 ++++++
 react/src/reducers/dashboard.js               |  6 +++
 react/src/styles/index.scss                   |  2 +
 22 files changed, 184 insertions(+), 85 deletions(-)
 create mode 100644 react/src/actions/actions/fiatRates.js
 create mode 100644 react/src/components/dashboard/walletsHeader/walletsHeader.scss
 create mode 100644 react/src/components/dashboard/walletsInfo/walletsInfo.scss

diff --git a/react/src/actions/actions/fiatRates.js b/react/src/actions/actions/fiatRates.js
new file mode 100644
index 0000000..401a9b3
--- /dev/null
+++ b/react/src/actions/actions/fiatRates.js
@@ -0,0 +1,32 @@
+import { FIAT_RATES } from '../storeType';
+import { triggerToaster } from '../actionCreators';
+import Config from '../../config';
+
+export function fiatRates() {
+  return dispatch => {
+    return fetch(`http://46.20.235.46:8111/api/rates/kmd`, {
+      method: 'GET',
+    })
+    .catch((error) => {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'fiatRates',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => {
+      dispatch(fiatRates(json));
+    });
+  }
+}
+
+function fiatRates(json) {
+  return {
+    type: FIAT_RATES,
+    response: json,
+  }
+}
\ No newline at end of file
diff --git a/react/src/actions/storeType.js b/react/src/actions/storeType.js
index b960965..3c2fc37 100644
--- a/react/src/actions/storeType.js
+++ b/react/src/actions/storeType.js
@@ -50,6 +50,7 @@ export const DISPLAY_ZCASH_PARAMS_FETCH = 'DISPLAY_ZCASH_PARAMS_FETCH';
 export const DASHBOARD_REMOVE_COIN = 'DASHBOARD_REMOVE_COIN';
 export const DASHBOARD_ACTIVE_COIN_NET_PEERS = 'DASHBOARD_ACTIVE_COIN_NET_PEERS';
 export const DASHBOARD_ACTIVE_COIN_NET_TOTALS = 'DASHBOARD_ACTIVE_COIN_NET_TOTALS';
+export const FIAT_RATES = 'FIAT_RATES';
 
 /* dex */
 export const DEX_LOGIN = 'DEX_LOGIN';
diff --git a/react/src/components/dashboard/claimInterestModal/claimInterestModal.js b/react/src/components/dashboard/claimInterestModal/claimInterestModal.js
index bf4a6d9..8223435 100755
--- a/react/src/components/dashboard/claimInterestModal/claimInterestModal.js
+++ b/react/src/components/dashboard/claimInterestModal/claimInterestModal.js
@@ -363,9 +363,7 @@ class ClaimInterestModal extends React.Component {
           className={ 'btn dropdown-toggle btn-info' + (this.props.ActiveCoin.mode === 'spv' ? ' disabled' : '') }
           onClick={ this.openDropMenu }>
           <span className="filter-option pull-left">{ this.state.selectedAddress }</span>
-          <span
-            className="bs-caret"
-            style={{ display: 'inline-block' }}>
+          <span className="bs-caret inline">
             <span className="caret"></span>
           </span>
         </button>
diff --git a/react/src/components/dashboard/claimInterestModal/claimInterestModal.render.js b/react/src/components/dashboard/claimInterestModal/claimInterestModal.render.js
index 73e7ad9..a5baae6 100644
--- a/react/src/components/dashboard/claimInterestModal/claimInterestModal.render.js
+++ b/react/src/components/dashboard/claimInterestModal/claimInterestModal.render.js
@@ -92,9 +92,7 @@ export const _ClaimInterestTableRender = function() {
             </button>
           }
           { this.state.spvVerificationWarning &&
-            <div
-              className="padding-top-10 padding-bottom-10"
-              style={{ fontSize: '15px' }}>
+            <div className="padding-top-10 padding-bottom-10 fs-15">
               <strong className="color-warning">{ translate('SEND.WARNING') }:</strong> { translate('SEND.WARNING_SPV_P1') } { translate('SEND.WARNING_SPV_P2') }
               <div className="margin-top-15">
                 <button
diff --git a/react/src/components/dashboard/jumblr/jumblr.render.js b/react/src/components/dashboard/jumblr/jumblr.render.js
index bdc3ecb..86e2fc7 100644
--- a/react/src/components/dashboard/jumblr/jumblr.render.js
+++ b/react/src/components/dashboard/jumblr/jumblr.render.js
@@ -36,7 +36,6 @@ export const JumblrRender = function() {
               <button
                 type="button"
                 className="close">
-                <span>×</span>
               </button>
               <span className="jumblr-header">
                 <i className="icon fa-paw"></i> { translate('JUMBLR.NOTICE') }
@@ -65,9 +64,7 @@ export const JumblrRender = function() {
           </div>
 
           <div className="col-xlg-12 col-md-12 padding-top-20 padding-bottom-30">
-            <div
-              className="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2"
-              style={{ padding: 0 }}>
+            <div className="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2 no-padding">
               <input
                 type="radio"
                 className="to-labelauty labelauty"
@@ -76,7 +73,7 @@ export const JumblrRender = function() {
                 checked={ this.state.jumblrMode === 'public' ? true : false } />
               <label
                 htmlFor={ `mode-public` }
-                style={{ margin: 0 }}
+                className="no-margin"
                 onClick={ () => this.switchJumblrMode('public') }>
                 <span
                   className="labelauty-unchecked-image"
@@ -97,9 +94,7 @@ export const JumblrRender = function() {
               </label>
             </div>
 
-            <div
-              className="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2"
-              style={{ padding: 0 }}>
+            <div className="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2 no-padding">
               <input
                 type="radio"
                 className="to-labelauty labelauty"
@@ -108,7 +103,7 @@ export const JumblrRender = function() {
                 checked={ this.state.jumblrMode === 'private' ? true : false } />
               <label
                 htmlFor={ `mode-private` }
-                style={{ margin: 0 }}
+                className="no-margin"
                 onClick={ () => this.switchJumblrMode('private') }>
                 <span
                   className="labelauty-unchecked-image"
@@ -129,9 +124,7 @@ export const JumblrRender = function() {
               </label>
             </div>
 
-            <div
-              className="form-group col-lg-3 col-md-3 col-sm-3 col-xs-3"
-              style={{ padding: 0 }}>
+            <div className="form-group col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
               <button
                 type="button"
                 className="btn btn-jumblr-warning waves-effect waves-light"
@@ -186,7 +179,9 @@ export const JumblrRender = function() {
                     <button
                       type="button"
                       className="btn btn-success waves-effect waves-light margin-top-20 btn-next"
-                      onClick={ () => this.openTab(1) }>{ translate('INDEX.NEXT') }</button>
+                      onClick={ () => this.openTab(1) }>
+                      { translate('INDEX.NEXT') }
+                    </button>
                     <h5>{ translate('JUMBLR.HOW_TO_USE') }</h5>
                     <ul>
                       <li>{ translate('JUMBLR.CREATE_DEPOSIT_ADDRESS') }</li>
@@ -246,7 +241,9 @@ export const JumblrRender = function() {
                     <button
                       type="button"
                       className="btn btn-info waves-effect waves-light"
-                      onClick={ this.generateJumblrDepositAddress }>{ translate('JUMBLR.CREATE_JUMBLR_DEPOSIT_ADDRESS') }</button>
+                      onClick={ this.generateJumblrDepositAddress }>
+                      { translate('JUMBLR.CREATE_JUMBLR_DEPOSIT_ADDRESS') }
+                    </button>
                     { this.state.jumblrDepositAddress &&
                       this.state.jumblrDepositAddress.address &&
                       <div className="padding-top-40">
@@ -276,7 +273,9 @@ export const JumblrRender = function() {
                     <button
                       type="button"
                       className="btn btn-success waves-effect waves-light margin-top-20 btn-next"
-                      onClick={ () => this.openTab(3) }>{ translate('INDEX.NEXT') }</button>
+                      onClick={ () => this.openTab(3) }>
+                      { translate('INDEX.NEXT') }
+                    </button>
                     <p>{ translate('JUMBLR.JUMBLR_SECRET_DESC_P1') }</p>
                     <p>{ translate('JUMBLR.JUMBLR_SECRET_DESC_P2') }</p>
                     <p>{ translate('JUMBLR.JUMBLR_SECRET_DESC_P3') }</p>
@@ -304,7 +303,9 @@ export const JumblrRender = function() {
                         </button>
                       </div>
                     }
-                    <div className="col-xs-2 nofloat padding-top-30">{ translate('JUMBLR.NUMBER_OF_SECRET_ADDR') }</div>
+                    <div className="col-xs-2 nofloat padding-top-30">
+                      { translate('JUMBLR.NUMBER_OF_SECRET_ADDR') }
+                    </div>
                     <div className="col-xs-2 nofloat padding-left-10">
                       <input
                         type="text"
@@ -320,7 +321,9 @@ export const JumblrRender = function() {
                       <button
                         type="button"
                         className="btn btn-info waves-effect waves-light"
-                        onClick={ this.generateJumblrSecretAddress }>{ translate('JUMBLR.CREATE_JUMBLR_SECRET_ADDR') }</button>
+                        onClick={ this.generateJumblrSecretAddress }>
+                        { translate('JUMBLR.CREATE_JUMBLR_SECRET_ADDR') }
+                      </button>
                     </div>
                     <div className="toggle-box padding-top-20">
                       <span className="pointer">
@@ -389,7 +392,9 @@ export const JumblrRender = function() {
                     <button
                       type="button"
                       className="btn btn-success waves-effect waves-light margin-top-20 btn-next"
-                      onClick={ () => this.openTab(1) }>{ translate('INDEX.NEXT') }</button>
+                      onClick={ () => this.openTab(1) }>
+                      { translate('INDEX.NEXT') }
+                    </button>
                     <div className="col-xlg-12 col-md-12 nofloat">
                       <p>{ translate('JUMBLR.SECRET_REGEN_DESC_P1') }</p>
                       <p>
@@ -409,7 +414,9 @@ export const JumblrRender = function() {
                             value={ this.state.jumblrPassphraseImport } />
                         </div>
                       }
-                      <div className="col-xs-2 nofloat padding-top-30">{ translate('JUMBLR.NUMBER_OF_SECRET_ADDR') }</div>
+                      <div className="col-xs-2 nofloat padding-top-30">
+                        { translate('JUMBLR.NUMBER_OF_SECRET_ADDR') }
+                      </div>
                       <div className="col-xs-2 nofloat padding-left-10">
                         <input
                           type="text"
@@ -425,7 +432,9 @@ export const JumblrRender = function() {
                         <button
                           type="button"
                           className="btn btn-info waves-effect waves-light"
-                          onClick={ this.importJumblrSecretAddress }>{ translate('JUMBLR.IMPORT_JUMLR_SECRET_ADDRESSES') }</button>
+                          onClick={ this.importJumblrSecretAddress }>
+                          { translate('JUMBLR.IMPORT_JUMLR_SECRET_ADDRESSES') }
+                        </button>
                       </div>
                       <div className="toggle-box padding-top-20">
                         <span className="pointer">
diff --git a/react/src/components/dashboard/qrModal/qrModal.js b/react/src/components/dashboard/qrModal/qrModal.js
index 85002ac..3387e20 100755
--- a/react/src/components/dashboard/qrModal/qrModal.js
+++ b/react/src/components/dashboard/qrModal/qrModal.js
@@ -5,7 +5,7 @@ import { translate } from '../../../translate/translate';
 import QrReader from 'react-qr-reader'
 import {
   QRModalRender,
-  QRModalReaderRender
+  QRModalReaderRender,
 } from './qrModal.render';
 
 class QRModal extends React.Component {
@@ -47,12 +47,8 @@ class QRModal extends React.Component {
     if (this.props.mode === 'scan') {
       ReactDOM.render(
         <QrReader
-          delay={50}
-          style={{
-            height: 281,
-            width: 500,
-            transform: 'scaleX(-1)'
-          }}
+          delay={ 50 }
+          className="qr-reader-comp"
           onError={ this.handleError }
           onScan={ this.handleScan } />, document.getElementById('webcam'));
     }
@@ -74,6 +70,7 @@ class QRModal extends React.Component {
     const canvas = qrCanvas.getElementsByTagName('canvas');
     const dataURL = canvas[0].toDataURL();
     const a = document.getElementById('saveModalImage' + this.props.content);
+
     a.href = dataURL;
     a.download = this.props.content;
   }
diff --git a/react/src/components/dashboard/qrModal/qrModal.scss b/react/src/components/dashboard/qrModal/qrModal.scss
index 6c05b56..5e4d63b 100644
--- a/react/src/components/dashboard/qrModal/qrModal.scss
+++ b/react/src/components/dashboard/qrModal/qrModal.scss
@@ -11,4 +11,14 @@
 }
 .table a.save-image-button {
   text-decoration: none;
+}
+
+.qr-reader-comp {
+  height: 281;
+  width: 500;
+  transform: scaleX(-1);
+}
+
+.overflow-hidden {
+  overflow: hidden;
 }
\ No newline at end of file
diff --git a/react/src/components/dashboard/sendCoin/sendCoin.js b/react/src/components/dashboard/sendCoin/sendCoin.js
index 7458d14..ddff179 100644
--- a/react/src/components/dashboard/sendCoin/sendCoin.js
+++ b/react/src/components/dashboard/sendCoin/sendCoin.js
@@ -210,8 +210,8 @@ class SendCoin extends React.Component {
   }
 
   renderAddressByType(type) {
-    let _items = [];
     const _coinAddresses = this.props.ActiveCoin.addresses;
+    let _items = [];
 
     if (_coinAddresses &&
         _coinAddresses[type] &&
@@ -265,7 +265,9 @@ class SendCoin extends React.Component {
       );
     } else {
       return (
-        <span>{ this.props.ActiveCoin.mode === 'spv' ? `[ ${this.props.ActiveCoin.balance.balance} ${this.props.ActiveCoin.coin} ] ${this.props.Dashboard.electrumCoins[this.props.ActiveCoin.coin].pub}` : translate('INDEX.T_FUNDS') }</span>
+        <span>
+          { this.props.ActiveCoin.mode === 'spv' ? `[ ${this.props.ActiveCoin.balance.balance} ${this.props.ActiveCoin.coin} ] ${this.props.Dashboard.electrumCoins[this.props.ActiveCoin.coin].pub}` : translate('INDEX.T_FUNDS') }
+        </span>
       );
     }
   }
diff --git a/react/src/components/dashboard/sendCoin/sendCoin.render.js b/react/src/components/dashboard/sendCoin/sendCoin.render.js
index 01b2f38..4f8442d 100644
--- a/react/src/components/dashboard/sendCoin/sendCoin.render.js
+++ b/react/src/components/dashboard/sendCoin/sendCoin.render.js
@@ -10,7 +10,7 @@ export const AddressListRender = function() {
         type="button"
         className={ 'btn dropdown-toggle btn-info' + (this.props.ActiveCoin.mode === 'spv' ? ' disabled' : '') }
         onClick={ this.openDropMenu }>
-        <span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>
+        <span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() }&nbsp;</span>
         <span className="bs-caret">
           <span className="caret"></span>
         </span>
@@ -21,7 +21,9 @@ export const AddressListRender = function() {
             className="selected"
             onClick={ () => this.updateAddressSelection(null, 'public', null) }>
             <a>
-              <span className="text">{ this.props.ActiveCoin.mode === 'spv' ? `[ ${this.props.ActiveCoin.balance.balance} ${this.props.ActiveCoin.coin} ] ${this.props.Dashboard.electrumCoins[this.props.ActiveCoin.coin].pub}` : translate('INDEX.T_FUNDS') }</span>
+              <span className="text">
+                { this.props.ActiveCoin.mode === 'spv' ? `[ ${this.props.ActiveCoin.balance.balance} ${this.props.ActiveCoin.coin} ] ${this.props.Dashboard.electrumCoins[this.props.ActiveCoin.coin].pub}` : translate('INDEX.T_FUNDS') }
+              </span>
               <span
                 className="glyphicon glyphicon-ok check-mark pull-right"
                 style={{ display: this.state.sendFrom === null ? 'inline-block' : 'none' }}></span>
@@ -41,7 +43,9 @@ export const _SendFormRender = function() {
       { this.state.renderAddressDropdown &&
         <div className="row">
           <div className="col-xlg-12 form-group form-material">
-            <label className="control-label padding-bottom-10">{ translate('INDEX.SEND_FROM') }</label>
+            <label className="control-label padding-bottom-10">
+              { translate('INDEX.SEND_FROM') }
+            </label>
             { this.renderAddressList() }
           </div>
         </div>
@@ -58,7 +62,7 @@ export const _SendFormRender = function() {
             onChange={ this.updateInput }
             value={ this.state.sendTo }
             id="kmdWalletSendTo"
-            placeholder={ this.props.ActiveCoin.coin === 'CHIPS' ? translate('SEND.ENTER_ADDRESS') : translate('SEND.ENTER_T_OR_Z_ADDR') }
+            placeholder={ this.props.ActiveCoin.mode === 'spv' ? translate('SEND.ENTER_ADDRESS') : translate('SEND.ENTER_T_OR_Z_ADDR') }
             autoComplete="off"
             required />
         </div>
@@ -124,7 +128,8 @@ export const _SendFormRender = function() {
           this.props.ActiveCoin &&
           this.props.ActiveCoin.mode === 'native' &&
           <div className="col-lg-12 padding-top-20 padding-bottom-20 send-coin-sync-warning">
-            <i className="icon fa-warning color-warning margin-right-5"></i> <span className="desc">{ translate('SEND.SEND_NATIVE_SYNC_WARNING') }</span>
+            <i className="icon fa-warning color-warning margin-right-5"></i>&nbsp;
+            <span className="desc">{ translate('SEND.SEND_NATIVE_SYNC_WARNING') }</span>
           </div>
         }
         <div className="col-lg-12">
@@ -200,13 +205,13 @@ export const SendRender = function() {
                 <div className="col-xs-12">
                   <strong>{ translate('INDEX.TO') }</strong>
                 </div>
-                <div
-                  className="col-lg-6 col-sm-6 col-xs-12"
-                  style={{ overflow: 'hidden' }}>{ this.state.sendTo }</div>
+                <div className="col-lg-6 col-sm-6 col-xs-12 overflow-hidden">{ this.state.sendTo }</div>
                 <div className="col-lg-6 col-sm-6 col-xs-6">
                   { this.state.amount } { this.props.ActiveCoin.coin }
                 </div>
-                <div className={ this.state.subtractFee ? 'col-lg-6 col-sm-6 col-xs-12 padding-top-10 bold' : 'hide' }>{ translate('DASHBOARD.SUBTRACT_FEE') }</div>
+                <div className={ this.state.subtractFee ? 'col-lg-6 col-sm-6 col-xs-12 padding-top-10 bold' : 'hide' }>
+                  { translate('DASHBOARD.SUBTRACT_FEE') }
+                </div>
               </div>
 
               { this.state.sendFrom &&
@@ -214,9 +219,7 @@ export const SendRender = function() {
                   <div className="col-xs-12">
                     <strong>{ translate('INDEX.FROM') }</strong>
                   </div>
-                  <div
-                    className="col-lg-6 col-sm-6 col-xs-12"
-                    style={{ overflow: 'hidden' }}>{ this.state.sendFrom }</div>
+                  <div className="col-lg-6 col-sm-6 col-xs-12 overflow-hidden">{ this.state.sendFrom }</div>
                   <div className="col-lg-6 col-sm-6 col-xs-6 confirm-currency-send-container">
                     { Number(this.state.amount) } { this.props.ActiveCoin.coin }
                   </div>
@@ -226,10 +229,9 @@ export const SendRender = function() {
                 <div className="padding-top-20">{ translate('SEND.SPV_VERIFYING') }...</div>
               }
               { this.state.spvVerificationWarning &&
-                <div
-                  className="padding-top-20"
-                  style={{ fontSize: '15px' }}>
-                  <strong className="color-warning">{ translate('SEND.WARNING') }:</strong> { translate('SEND.WARNING_SPV_P1') }<br />
+                <div className="padding-top-20 fs-15">
+                  <strong className="color-warning">{ translate('SEND.WARNING') }:</strong>&nbsp;
+                  { translate('SEND.WARNING_SPV_P1') }<br />
                   { translate('SEND.WARNING_SPV_P2') }
                 </div>
               }
diff --git a/react/src/components/dashboard/settings/settings.appUpdatePanel.js b/react/src/components/dashboard/settings/settings.appUpdatePanel.js
index 31df6b7..429b28d 100644
--- a/react/src/components/dashboard/settings/settings.appUpdatePanel.js
+++ b/react/src/components/dashboard/settings/settings.appUpdatePanel.js
@@ -36,7 +36,6 @@ class AppUpdatePanel extends React.Component {
     if (data &&
         data.msg &&
         data.msg.type === 'ui') {
-
       if (data.msg.status === 'progress' &&
           data.msg.progress &&
           data.msg.progress < 100) {
@@ -102,8 +101,8 @@ class AppUpdatePanel extends React.Component {
   }
 
   _updateUIPromise() {
-    updateProgressBar.patch = 0;
     let _updateLog = [];
+    updateProgressBar.patch = 0;
     _updateLog.push(`${translate('INDEX.DOWNLOADING_UI_UPDATE')}...`);
     this.setState(Object.assign({}, this.state, {
       updateLog: _updateLog,
@@ -131,9 +130,9 @@ class AppUpdatePanel extends React.Component {
   }
 
   renderUpdateStatus() {
+    const _updateLogLength = this.state.updateLog.length;
     let items = [];
     let patchProgressBar = null;
-    const _updateLogLength = this.state.updateLog.length;
 
     for (let i = 0; i < _updateLogLength; i++) {
       items.push(
@@ -143,9 +142,9 @@ class AppUpdatePanel extends React.Component {
 
     if (_updateLogLength) {
       return (
-        <div style={{ minHeight: '200px' }}>
+        <div className="app-update-progress">
           <hr />
-          <h5>{ translate('SETTINGS.PROGRESS') }:</h5>
+          <h5>{ translate('SETTINGS.PROGRESS') }</h5>
           <div className="padding-bottom-15">{ items }</div>
           <div className={ updateProgressBar.patch > -1 ? 'progress progress-sm' : 'hide' }>
             <div
@@ -169,12 +168,16 @@ class AppUpdatePanel extends React.Component {
             <button
               type="button"
               className="btn btn-info waves-effect waves-light"
-              onClick={ this._checkForUpdateUIPromise }>{ translate('INDEX.CHECK_FOR_UPDATE') }</button>
+              onClick={ this._checkForUpdateUIPromise }>
+              { translate('INDEX.CHECK_FOR_UPDATE') }
+            </button>
             <button
               type="button"
               className="btn btn-primary waves-effect waves-light margin-left-20"
               onClick={ this._updateUIPromise }
-              disabled={ !this.state.updatePatch }>{ translate('INDEX.UPDATE_UI_NOW') }</button>
+              disabled={ !this.state.updatePatch }>
+              { translate('INDEX.UPDATE_UI_NOW') }
+            </button>
           </div>
         </div>
         <div className="col-sm-4 padding-top-15 hide">
@@ -183,11 +186,15 @@ class AppUpdatePanel extends React.Component {
             <button
               type="button"
               className="btn btn-info waves-effect waves-light"
-              onClick={ this._checkForUpdateUIPromise }>{ translate('INDEX.CHECK_FOR_UPDATE') }</button>
+              onClick={ this._checkForUpdateUIPromise }>
+              { translate('INDEX.CHECK_FOR_UPDATE') }
+            </button>
             <button
               type="button"
               className="btn btn-primary waves-effect waves-light margin-left-20"
-              onClick={ this.checkNodes }>{ translate('INDEX.UPDATE_BINS_NOW') }</button>
+              onClick={ this.checkNodes }>
+              { translate('INDEX.UPDATE_BINS_NOW') }
+            </button>
           </div>
         </div>
         <div className="col-sm-12 padding-top-15">
diff --git a/react/src/components/dashboard/settings/settings.scss b/react/src/components/dashboard/settings/settings.scss
index 0e49469..a9a9f00 100644
--- a/react/src/components/dashboard/settings/settings.scss
+++ b/react/src/components/dashboard/settings/settings.scss
@@ -169,4 +169,12 @@
 .settings-coind-stdout-textarea {
   border: none;
   background-image: none !important;
+}
+
+.app-update-progress {
+  min-height: 200px;
+}
+
+.zcparams-progress {
+  min-height: 140px;
 }
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsHeader/walletsHeader.render.js b/react/src/components/dashboard/walletsHeader/walletsHeader.render.js
index 356969f..62fdb3a 100644
--- a/react/src/components/dashboard/walletsHeader/walletsHeader.render.js
+++ b/react/src/components/dashboard/walletsHeader/walletsHeader.render.js
@@ -7,9 +7,7 @@ const WalletsHeaderRender = function() {
       className="page-header page-header-bordered header-easydex margin-bottom-0"
       id="easydex-header-div"
       style={{
-        backgroundImage: `url("assets/images/bg/${this.props.activeSection}_transparent_header_bg.png")`,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: '0%'
+        backgroundImage: `url("assets/images/bg/${this.props.activeSection}_transparent_header_bg.png")`
       }}>
       <ol className="breadcrumb">
         <li className={ this.isActiveSectionJumblr() ? 'hide' : 'header-easydex-section' }>
diff --git a/react/src/components/dashboard/walletsHeader/walletsHeader.scss b/react/src/components/dashboard/walletsHeader/walletsHeader.scss
new file mode 100644
index 0000000..dd911c9
--- /dev/null
+++ b/react/src/components/dashboard/walletsHeader/walletsHeader.scss
@@ -0,0 +1,4 @@
+.header-easydex {
+  background-repeat: no-repeat;
+  background-position: 0;
+}
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsInfo/walletsInfo.render.js b/react/src/components/dashboard/walletsInfo/walletsInfo.render.js
index 4025c28..0ba7494 100644
--- a/react/src/components/dashboard/walletsInfo/walletsInfo.render.js
+++ b/react/src/components/dashboard/walletsInfo/walletsInfo.render.js
@@ -130,8 +130,8 @@ const WalletsInfoRender = function() {
                 </td>
               </tr>
               <tr>
-                <td style={{ background: '#fff' }}>&nbsp;</td>
-                <td style={{ background: '#fff' }}>&nbsp;</td>
+                <td className="bg--white">&nbsp;</td>
+                <td className="bg--white">&nbsp;</td>
               </tr>
             </tbody>
           </table>
@@ -185,7 +185,7 @@ const WalletsInfoRender = function() {
                 className="btn btn-success waves-effect waves-light margin-top-20 btn-next"
                 onClick={ () => this.openClaimInterestModal() }>
                   <i className="icon fa-dollar"></i> { translate('CLAIM_INTEREST.CLAIM_INTEREST', ' ') }
-                </button>
+              </button>
             </div>
           }
           <div className="panel">
@@ -227,7 +227,8 @@ const WalletsInfoRender = function() {
           <div className="panel">
             <div className="panel-heading">
               <h3 className="panel-title">
-                { this.props.ActiveCoin.coin === 'KMD' ? 'Komodo' : `${this.props.ActiveCoin.coin}` } { translate('INDEX.INFO') }
+                { this.props.ActiveCoin.coin === 'KMD' ? 'Komodo' : `${this.props.ActiveCoin.coin}` }&nbsp;
+                { translate('INDEX.INFO') }
               </h3>
             </div>
             <div className="table-responsive">
@@ -402,7 +403,9 @@ const WalletsInfoRender = function() {
               <button
                 type="button"
                 className="btn btn-success waves-effect waves-light margin-top-20 btn-next"
-                onClick={ () => this.openClaimInterestModal() }>{ translate('CLAIM_INTEREST.CLAIM_INTEREST', ' ') }</button>
+                onClick={ () => this.openClaimInterestModal() }>
+                { translate('CLAIM_INTEREST.CLAIM_INTEREST', ' ') }
+              </button>
               <ClaimInterestModal />
             </div>
           }
diff --git a/react/src/components/dashboard/walletsInfo/walletsInfo.scss b/react/src/components/dashboard/walletsInfo/walletsInfo.scss
new file mode 100644
index 0000000..a04e0e0
--- /dev/null
+++ b/react/src/components/dashboard/walletsInfo/walletsInfo.scss
@@ -0,0 +1,3 @@
+.bg--white {
+  background: #fff;
+}
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsMain/walletsMain.render.js b/react/src/components/dashboard/walletsMain/walletsMain.render.js
index 3e4a1a5..8e26a91 100644
--- a/react/src/components/dashboard/walletsMain/walletsMain.render.js
+++ b/react/src/components/dashboard/walletsMain/walletsMain.render.js
@@ -20,9 +20,7 @@ const WalletsMainRender = function() {
               { this.getCoinStyle('title') &&
                 <img src={ this.getCoinStyle('title') } />
               }
-              <span
-                className={ `easydex-section-image ${(this.props.ActiveCoin.coin === 'KMD' || this.props.ActiveCoin.coin === 'JUMBLR' || this.props.ActiveCoin.coin === 'MESH' || this.props.ActiveCoin.coin === 'MVP' ? 'hide' : '')}` }
-                style={{ marginLeft: '20px' }}>
+              <span className={ `margin-left-20 easydex-section-image ${(this.props.ActiveCoin.coin === 'KMD' || this.props.ActiveCoin.coin === 'JUMBLR' || this.props.ActiveCoin.coin === 'MESH' || this.props.ActiveCoin.coin === 'MVP' ? 'hide' : '')}` }>
                 { getCoinTitle(this.props.ActiveCoin.coin).name }
               </span>
             </li>
diff --git a/react/src/components/dashboard/zcparamsFetchModal/zcparamsFetchModal.js b/react/src/components/dashboard/zcparamsFetchModal/zcparamsFetchModal.js
index b624a78..4658972 100644
--- a/react/src/components/dashboard/zcparamsFetchModal/zcparamsFetchModal.js
+++ b/react/src/components/dashboard/zcparamsFetchModal/zcparamsFetchModal.js
@@ -150,9 +150,7 @@ class ZcparamsFetchModal extends React.Component {
 
     if (_updateLogLength) {
       return (
-        <div
-          className="padding-top-20"
-          style={{ minHeight: '140px' }}>
+        <div className="padding-top-20 zcparams-progress">
           <h5>{ translate('SETTINGS.PROGRESS') }</h5>
           <div className="padding-bottom-15">{ items }</div>
           <div className={ updateProgressBar.zcparams.proving > -1 && !this.state.done ? 'progress progress-sm' : 'hide' }>
diff --git a/react/src/components/login/login.render.js b/react/src/components/login/login.render.js
index b232316..7815a2c 100644
--- a/react/src/components/login/login.render.js
+++ b/react/src/components/login/login.render.js
@@ -138,20 +138,12 @@ const LoginRender = function() {
             { this.props.Login.pinList.length > 0 &&
               <div className="row margin-top-30">
                 <div className="col-xs-12">
-                  <div style={{
-                      width: '10%',
-                      float: 'left',
-                      marginLeft: '38%'}}>
+                  <div className="pin-block-one">
                     <hr/>
                   </div>
-                  <div style={{
-                    width: '4%',
-                    float: 'left',
-                    marginTop: '10px'}}>
+                  <div className="pin-block-two">
                     <span>{ translate('INDEX.OR') }</span></div>
-                  <div style={{
-                    width: '10%',
-                    float: 'left'}}>
+                  <div className="pin-block-three">
                     <hr/>
                   </div>
                 </div>
diff --git a/react/src/components/login/login.scss b/react/src/components/login/login.scss
index 89b9ad5..458abd3 100644
--- a/react/src/components/login/login.scss
+++ b/react/src/components/login/login.scss
@@ -169,4 +169,19 @@ option.login-option {
 .form-material .form-control:focus~.floating-label,
 .form-material .form-control:not(.empty)~.floating-label {
   top: -14px;
+}
+
+.pin-block-one {
+  width: 10%;
+  float: left;
+  margin-left: 38%;
+}
+.pin-block-two {
+  width: 4%;
+  float: left;
+  margin-top: 10px;
+}
+.pin-block-three {
+  width: 10%;
+  float: left;
 }
\ No newline at end of file
diff --git a/react/src/components/overrides.scss b/react/src/components/overrides.scss
index 3251ef0..9e3ce90 100644
--- a/react/src/components/overrides.scss
+++ b/react/src/components/overrides.scss
@@ -266,4 +266,20 @@ select{
   > .row {
     background: #f3f4f5;
   }
+}
+
+.inline {
+  display: inline-block;
+}
+
+.fs-15 {
+  font-size: 15px;
+}
+
+.no-padding {
+  padding: 0 !important;
+}
+
+.no-margin {
+  margin: 0 !important;
 }
\ No newline at end of file
diff --git a/react/src/reducers/dashboard.js b/react/src/reducers/dashboard.js
index c149b1b..58cd261 100644
--- a/react/src/reducers/dashboard.js
+++ b/react/src/reducers/dashboard.js
@@ -8,6 +8,7 @@ import {
   DASHBOARD_ELECTRUM_COINS,
   ELECTRUM_SERVER_CHANGED,
   DISPLAY_ZCASH_PARAMS_FETCH,
+  FIAT_RATES,
 } from '../actions/storeType';
 
 export function Dashboard(state = {
@@ -71,6 +72,11 @@ export function Dashboard(state = {
         ...state,
         eletrumServerChanged: action.eletrumServerChanged,
       };
+    case FIAT_RATES:
+      return {
+        ...state,
+        fiatRates: action.fiatRates,
+      };
     default:
       return state;
   }
diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss
index 2f2ca33..297baf6 100644
--- a/react/src/styles/index.scss
+++ b/react/src/styles/index.scss
@@ -36,6 +36,8 @@
 @import '../components/switch.scss';
 @import '../components/contextMenu.scss';
 @import '../components/responsive.scss';
+@import '../components/dashboard/walletsHeader/walletsHeader.scss';
+@import '../components/dashboard/walletsInfo/walletsInfo.scss';
 @import '../components/dashboard/sendCoin/sendCoin.scss';
 @import '../components/dashboard/walletsNav/walletsNav.scss';
 @import '../components/dashboard/coinTile/coinTile.scss';