basilisk progress bar reposition to block header

react/src/components/dashboard/walletsData/walletsData.render.js

@@ -176,18 +176,20 @@ export const WalletsDataRender = function() {
             <div>
               <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
                 <div className="panel">
+                  { this.props.ActiveCoin.mode === 'basilisk' &&
+                    <div className={ 'margin-bottom-3 basilisk-progress-bar ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }>
+                      <div
+                        className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent"
+                        style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%' }}>
+                        { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
+                      </div>
+                    </div>
+                  }
                   <header className="panel-heading z-index-10">
-                  <i
-                    className="icon fa-refresh manual-txhistory-refresh pointer"
-                    onClick={ this.refreshTxHistory }></i>
+                    <i
+                      className={ 'icon fa-refresh manual-txhistory-refresh pointer' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? '' : ' hide') }
+                      onClick={ this.refreshTxHistory }></i>
                     <div className={ 'panel-actions' + (this.props.ActiveCoin.mode === 'basilisk' ? '' : ' hide') }>
-                      <div className={ 'margin-bottom-3 ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }>
-                        <div
-                          className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent"
-                          style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%' }}>
-                          { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
-                        </div>
-                      </div>
                       { !this.isNativeMode() ?
                         <div
                           className={ 'dropdown basilisk-actions' + (this.state.basiliskActionsMenu ? ' open' : '') }

react/src/components/dashboard/walletsNav/walletsNav.render.js

@@ -27,7 +27,7 @@ export const WalletsNavWithWalletRender = function() {
         className={ 'page-header page-header-bordered header-easydex padding-bottom-' + (this.state.nativeOnly ? '40 page-header--native' : '20') }
         id="header-dashboard"
         style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : (this.state.nativeOnly ? '30px' : '0') }}>
-        <ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' }>
+        <ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' + (this.props.ActiveCoin.mode === 'basilisk' ? ' breadcrumb--basilisk' : '') }>
           <strong>{ translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: </strong>
           { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' }
           <button

react/src/components/overrides.scss

@@ -894,6 +894,15 @@ select{
   }
 }
 
+.basilisk-progress-bar {
+  position: absolute;
+  width: calc(100% - 100px);
+}
+
+.breadcrumb--basilisk {
+  top: 0;
+}
+
 .ReactTable {
   border: none;
 
@@ -920,6 +929,11 @@ select{
   .rt-thead .rt-td {
     padding: 10px 5px;
   }
+  .rt-tr.-odd div,
+  .rt-tr.-even div {
+    padding-top: 7px;
+    padding-bottom: 7px;
+  }
   .colum--direction {
     width: 40px !important;
     flex: 40 0 auto !important;