lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #122 from SuperNETorg/inline-css-extraction 

Inline css extraction
all-modes
pbca26 8 years ago
committed by GitHub
parent
d047df486f 241bfa063c
commit
3d0cd5b00f
22 changed files with 253 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      react/src/components/addcoin/addcoin.js
  2. 14
      react/src/components/addcoin/addcoin.scss
  3. 72
      react/src/components/dashboard/dashboard.scss
  4. 18
      react/src/components/dashboard/sendCoin.js
  5. 54
      react/src/components/dashboard/settings.js
  6. 23
      react/src/components/dashboard/syncOnly.js
  7. 2
      react/src/components/dashboard/walletsBasiliskConnection.js
  8. 2
      react/src/components/dashboard/walletsCacheData.js
  9. 13
      react/src/components/dashboard/walletsData.js
  10. 8
      react/src/components/dashboard/walletsHeader.js
  11. 8
      react/src/components/dashboard/walletsNative.js
  12. 20
      react/src/components/dashboard/walletsNativeBalance.js
  13. 21
      react/src/components/dashboard/walletsNativeSyncProgress.js
  14. 6
      react/src/components/dashboard/walletsNativeTxInfo.js
  15. 6
      react/src/components/dashboard/walletsNav.js
  16. 2
      react/src/components/dashboard/walletsNotariesList.js
  17. 23
      react/src/components/dashboard/walletsProgress.js
  18. 4
      react/src/components/dashboard/walletsTxInfo.js
  19. 40
      react/src/components/login/login.js
  20. 48
      react/src/components/login/login.scss
  21. 2
      react/src/components/main/walletMain.js
  22. 1
      react/src/styles/index.scss

6
react/src/components/addcoin/addcoin.js
View File

@ -413,12 +413,10 @@ class AddCoin extends React.Component {
</span> </span>
{ this.renderCoinSelectors() } { this.renderCoinSelectors() }
<div <div
className={ this.state.coins.length > 1 ? 'col-sm-12' : 'hide' } className={'text-align-center vertical-margin-20 horizontal-margin-0 ' + (this.state.coins.length > 1 ? 'col-sm-12' : 'hide') }>
style={{ textAlign: 'center', margin: '20px 0' }}>
<button <button
type="button" type="button"
className="btn btn-primary col-sm-4" className="btn btn-primary col-sm-4 float-none"
style={{ float: 'none' }}
id="mdl_addcoin_done_btn-login" id="mdl_addcoin_done_btn-login"
onClick={ this.activateAllCoins }>{ translate('ADD_COIN.ACTIVATE_ALL') }</button> onClick={ this.activateAllCoins }>{ translate('ADD_COIN.ACTIVATE_ALL') }</button>
</div> </div>

14
react/src/components/addcoin/addcoin.scss
View File

@ -1,3 +1,17 @@
.add-coin-modal { .add-coin-modal {
color: #757575; color: #757575;
} }
.vertical-margin-20 {
margin-top: 20px;
margin-bottom: 20px;
}
.horizontal-margin-0 {
margin-left: 0;
margin-right: 0;
}
.float-none {
float: none;
}

72
react/src/components/dashboard/dashboard.scss
View File

@ -26,7 +26,7 @@
} }
//navbar.js //navbar.js
.navbar-toolbar>li>a.padding-top-16 { .navbar-toolbar > li > a.padding-top-16 {
padding-top: 16px; padding-top: 16px;
} }
@ -40,6 +40,34 @@
overflow-y: scroll; overflow-y: scroll;
} }
//sendCoin.js
.vertical-padding-10 {
padding-top: 10px;
padding-bottom: 10px;
}
.horizontal-padding-0 {
padding-left: 0;
padding-right: 0;
}
.confirm-currency-send-container {
color: #f44336;
}
//settings.js
.wallet-info-key {
font-weight: bold;
}
.width-5-percent {
width: 5%;
}
.text-align-left {
text-align: left;
}
//walletsBalance.js //walletsBalance.js
.font-weight-600 { .font-weight-600 {
font-weight: 600; font-weight: 600;
@ -61,3 +89,45 @@
.no-padding { .no-padding {
padding: 0 !important; padding: 0 !important;
} }
.font-size-80-percent {
font-size: 80%;
}
//walletsData.js
z-index-10 {
z-index: 10;
}
full-width {
width: 100%;
}
.pagination-container {
padding: 20px 0 10px 0;
}
//walletsHeader.js
.z-index-1 {
z-index: 1;
}
//walletsNative.js
.background-color-white {
background-color: #fff;
}
.easydex-section-image {
font-size: 35px;
vertical-align: middle;
}
//walletsNativeSyncProgress.js
.sync-progress-container {
margin: -20px 0px 10px 0px;
}
//walletsNativeTxInfo.js
.height-170 {
height: 170px;
}

18
react/src/components/dashboard/sendCoin.js
View File

@ -164,19 +164,17 @@ class SendCoin extends React.Component {
</div> </div>
<div className={ isReadyToUpdate ? 'hide' : '' }>{ translate('SEND.NEXT_UPDATE_IN') } { secondsElapsedToString(600 - timestamp) }s</div> <div className={ isReadyToUpdate ? 'hide' : '' }>{ translate('SEND.NEXT_UPDATE_IN') } { secondsElapsedToString(600 - timestamp) }s</div>
<div <div
className={ this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm' } className={'full-width margin-bottom-10 margin-top-10 ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }>
style={{ width: '100%', marginBottom: '10px', marginTop: '10px' }}>
<div <div
className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success" 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) + '%', fontSize: '80%' }} style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%' }}
role="progressbar"> role="progressbar">
{ translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength } { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
</div> </div>
</div> </div>
<button <button
type="button" type="button"
style={{ marginTop: '10px' }} className={'margin-top-10 ' + (isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide') }
className={ isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide' }
onClick={ this._fetchNewUTXOData } disabled={ waitUntilCallIsFinished }> onClick={ this._fetchNewUTXOData } disabled={ waitUntilCallIsFinished }>
{ waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE') } { waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE') }
</button> </button>
@ -642,8 +640,8 @@ class SendCoin extends React.Component {
return items; return items;
} else { } else {
return ( return (
<div style={{ padding: '20px', textAlign: 'center' }}> <div className="padding-20 text-align-center">
<div style={{ padding: '10px 0' }}> <div className="vertical-padding-10 horizontal-padding-0">
{ translate('SEND.PROCESSING_TRANSACTION') }...<br /> { translate('SEND.PROCESSING_TRANSACTION') }...<br />
{ translate('SEND.NOTE_IT_WILL_TAKE') }. { translate('SEND.NOTE_IT_WILL_TAKE') }.
</div> </div>
@ -778,7 +776,7 @@ class SendCoin extends React.Component {
return ( return (
<div className="col-sm-12 padding-top-10" id="edexcoin_send"> <div className="col-sm-12 padding-top-10" id="edexcoin_send">
<div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12"> <div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
<div className="steps row" style={{ marginTop: '10px' }}> <div className="steps row margin-top-10">
<div <div
className={ this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4' } className={ this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4' }
id="edexcoin_send_step_1"> id="edexcoin_send_step_1">
@ -916,7 +914,7 @@ class SendCoin extends React.Component {
<strong>{ translate('INDEX.FROM') }</strong> <strong>{ translate('INDEX.FROM') }</strong>
</div> </div>
<div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendfrom_addr">{ this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] }</div> <div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendfrom_addr">{ this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] }</div>
<div className="col-lg-6 col-sm-6 col-xs-6" style={{ color: '#f44336' }}> <div className="col-lg-6 col-sm-6 col-xs-6 confirm-currency-send-container">
<span id="mdl_confirm_currency_sendfrom_total_dedcut">{ Number(this.state.amount) - Number(this.state.fee) }</span> { this.props.ActiveCoin.coin } <span id="mdl_confirm_currency_sendfrom_total_dedcut">{ Number(this.state.amount) - Number(this.state.fee) }</span> { this.props.ActiveCoin.coin }
</div> </div>
</div> </div>

54
react/src/components/dashboard/settings.js
View File

@ -120,7 +120,7 @@ class Settings extends React.Component {
aria-labelledby="DebugLog" aria-labelledby="DebugLog"
role="tabpanel"> role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<div className="col-sm-12" style={{ paddingTop: '15px' }}> <div className="col-sm-12 padding-top-15">
<div className="row"> <div className="row">
<h5>{ translate('SETTINGS.APP_RELEASE') }</h5> <h5>{ translate('SETTINGS.APP_RELEASE') }</h5>
<div> <div>
@ -134,7 +134,7 @@ class Settings extends React.Component {
</div> </div>
</div> </div>
</div> </div>
<div className="col-sm-12" style={{ paddingTop: '20px' }}> <div className="col-sm-12 padding-top-20">
<div className="row"> <div className="row">
<h5>{ translate('SETTINGS.SYS_INFO') }</h5> <h5>{ translate('SETTINGS.SYS_INFO') }</h5>
<div> <div>
@ -160,7 +160,7 @@ class Settings extends React.Component {
</div> </div>
</div> </div>
</div> </div>
<div className="col-sm-12" style={{ paddingTop: '20px' }}> <div className="col-sm-12 padding-top-20">
<div className="row"> <div className="row">
<h5>{ translate('SETTINGS.LOCATIONS') }</h5> <h5>{ translate('SETTINGS.LOCATIONS') }</h5>
<div> <div>
@ -245,20 +245,20 @@ class Settings extends React.Component {
if (typeof _appConfig[key] === 'object') { if (typeof _appConfig[key] === 'object') {
items.push( items.push(
<tr key={ `app-settings-${key}` }> <tr key={ `app-settings-${key}` }>
<td style={{ padding: '15px' }}> <td className="padding-15">
{ key } { key }
</td> </td>
<td style={{ padding: '15px' }}></td> <td className="padding-15"></td>
</tr> </tr>
); );
for (let _key in _appConfig[key]) { for (let _key in _appConfig[key]) {
items.push( items.push(
<tr key={ `app-settings-${key}-${_key}` }> <tr key={ `app-settings-${key}-${_key}` }>
<td style={{ padding: '15px', paddingLeft: '30px' }}> <td className="padding-15 padding-left-30">
{ _key } { _key }
</td> </td>
<td style={{ padding: '15px' }}> <td className="padding-15">
<input <input
type="text" type="text"
name={ `${key}__${_key}` } name={ `${key}__${_key}` }
@ -271,10 +271,10 @@ class Settings extends React.Component {
} else { } else {
items.push( items.push(
<tr key={ `app-settings-${key}` }> <tr key={ `app-settings-${key}` }>
<td style={{ padding: '15px' }}> <td className="padding-15">
{ key } { key }
</td> </td>
<td style={{ padding: '15px' }}> <td className="padding-15">
<input <input
type="text" type="text"
name={ `${key}` } name={ `${key}` }
@ -308,7 +308,7 @@ class Settings extends React.Component {
render() { render() {
return ( return (
<div style={{ marginLeft: '0' }}> <div className="margin-left-0">
<div className="page-content" id="section-iguana-wallet-settings"> <div className="page-content" id="section-iguana-wallet-settings">
<div className="row" id="iguana-wallet-settings"> <div className="row" id="iguana-wallet-settings">
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
@ -338,37 +338,37 @@ class Settings extends React.Component {
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td style={{ fontWeight: 'bold' }}>pubkey</td> <td className="wallet-info-key">pubkey</td>
<td> <td>
<div id="winfo_pubkey_value">{ this.props.Main.activeHandle.pubkey }</div> <div id="winfo_pubkey_value">{ this.props.Main.activeHandle.pubkey }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{ fontWeight: 'bold' }}>btcpubkey</td> <td className="wallet-info-key">btcpubkey</td>
<td> <td>
<div id="winfo_btcpubkey_value">{ this.props.Main.activeHandle.btcpubkey }</div> <div id="winfo_btcpubkey_value">{ this.props.Main.activeHandle.btcpubkey }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{ fontWeight: 'bold' }}>rmd160</td> <td className="wallet-info-key">rmd160</td>
<td> <td>
<div id="winfo_rmd160_value">{ this.props.Main.activeHandle.rmd160 }</div> <div id="winfo_rmd160_value">{ this.props.Main.activeHandle.rmd160 }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{ fontWeight: 'bold' }}>NXT</td> <td className="wallet-info-key">NXT</td>
<td> <td>
<div id="winfo_NXT_value">{ this.props.Main.activeHandle.NXT }</div> <div id="winfo_NXT_value">{ this.props.Main.activeHandle.NXT }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{ fontWeight: 'bold' }}>notary</td> <td className="wallet-info-key">notary</td>
<td> <td>
<div id="winfo_notary_value">{ this.props.Main.activeHandle.notary }</div> <div id="winfo_notary_value">{ this.props.Main.activeHandle.notary }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{ fontWeight: 'bold' }}>status</td> <td className="wallet-info-key">status</td>
<td> <td>
<div id="winfo_status_value">{ this.props.Main.activeHandle.status }</div> <div id="winfo_status_value">{ this.props.Main.activeHandle.status }</div>
</td> </td>
@ -411,7 +411,7 @@ class Settings extends React.Component {
</select> </select>
</div> </div>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{ textAlign: 'center' }}> <div className="col-sm-4 col-xs-12 text-align-center">
<button <button
type="button" type="button"
className="btn btn-primary waves-effect waves-light" className="btn btn-primary waves-effect waves-light"
@ -457,7 +457,7 @@ class Settings extends React.Component {
onChange={ this.updateInput } /> onChange={ this.updateInput } />
</div> </div>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{ textAlign: 'center' }}> <div className="col-sm-4 col-xs-12 text-align-center">
<button <button
type="button" type="button"
className="btn btn-primary waves-effect waves-light" className="btn btn-primary waves-effect waves-light"
@ -535,7 +535,7 @@ class Settings extends React.Component {
onChange={ this.updateInput } /> onChange={ this.updateInput } />
<label className="floating-label" htmlFor="wifkeys_passphrase">{ translate('INDEX.PASSPHRASE') }</label> <label className="floating-label" htmlFor="wifkeys_passphrase">{ translate('INDEX.PASSPHRASE') }</label>
</div> </div>
<div className="col-sm-12 col-xs-12" style={{ textAlign: 'center' }}> <div className="col-sm-12 col-xs-12 text-align-center">
<button <button
type="button" type="button"
className="btn btn-primary waves-effect waves-light" className="btn btn-primary waves-effect waves-light"
@ -544,11 +544,11 @@ class Settings extends React.Component {
</div> </div>
</form> </form>
<div className="col-sm-12" style={{ paddingTop: '15px' }}> <div className="col-sm-12 padding-top-15">
<div className="row" id="wif-priv-keys"> <div className="row" id="wif-priv-keys">
<table className={ this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide' }> <table className={ this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide' }>
<tr> <tr>
<td style={{ width: '5%' }}> <td className="width-5-percent">
<strong>{ this.props.ActiveCoin.coin }</strong> <strong>{ this.props.ActiveCoin.coin }</strong>
</td> </td>
<td>{ this.props.Settings.address }</td> <td>{ this.props.Settings.address }</td>
@ -600,7 +600,7 @@ class Settings extends React.Component {
className="floating-label" className="floating-label"
htmlFor="import_wifkey">{ translate('INDEX.INPUT_PRIV_KEY') }</label> htmlFor="import_wifkey">{ translate('INDEX.INPUT_PRIV_KEY') }</label>
</div> </div>
<div className="col-sm-12 col-xs-12" style={{ textAlign: 'center' }}> <div className="col-sm-12 col-xs-12 text-align-center">
<button <button
type="button" type="button"
className="btn btn-primary waves-effect waves-light" className="btn btn-primary waves-effect waves-light"
@ -655,15 +655,15 @@ class Settings extends React.Component {
className="floating-label" className="floating-label"
htmlFor="settings_select_debuglog_options">{ translate('INDEX.TARGET') }</label> htmlFor="settings_select_debuglog_options">{ translate('INDEX.TARGET') }</label>
</div> </div>
<div className="col-sm-12 col-xs-12" style={{ textAlign: 'center'}}> <div className="col-sm-12 col-xs-12 text-align-center">
<button <button
type="button" type="button"
className="btn btn-primary waves-effect waves-light" className="btn btn-primary waves-effect waves-light"
id="read_debug_log_btn" id="read_debug_log_btn"
onClick={ this.readDebugLog }>{ translate('INDEX.LOAD_DEBUG_LOG') }</button> onClick={ this.readDebugLog }>{ translate('INDEX.LOAD_DEBUG_LOG') }</button>
</div> </div>
<div className="col-sm-12 col-xs-12" style={{ textAlign: 'left' }}> <div className="col-sm-12 col-xs-12 text-align-left">
<div style={{ padding: '20px 0', paddingTop: '40px' }}>{ this.props.Settings.debugLog }</div> <div className="padding-top-40 padding-bottom-20 horizontal-padding-0">{ this.props.Settings.debugLog }</div>
</div> </div>
</form> </form>
</div> </div>
@ -684,14 +684,14 @@ class Settings extends React.Component {
<p> <p>
<strong>{ translate('SETTINGS.CONFIG_RESTART_REQUIRED') }</strong> <strong>{ translate('SETTINGS.CONFIG_RESTART_REQUIRED') }</strong>
</p> </p>
<div className="col-sm-12" style={{ paddingTop: '15px' }}> <div className="col-sm-12 padding-top-15">
<table> <table>
<tbody> <tbody>
{ this.renderConfigEditForm() } { this.renderConfigEditForm() }
</tbody> </tbody>
</table> </table>
</div> </div>
<div className="col-sm-12 col-xs-12" style={{ textAlign: 'center', paddingTop: '25px', paddingBottom: '25px' }}> <div className="col-sm-12 col-xs-12 text-align-center padding-top-25 padding-bottom-25">
<button <button
type="button" type="button"
className="btn btn-primary waves-effect waves-light" className="btn btn-primary waves-effect waves-light"

23
react/src/components/dashboard/syncOnly.js
View File

@ -176,15 +176,14 @@ class SyncOnly extends React.Component {
<div> <div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div <div
className={ this.isFullySynced(fork) ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide' } className={'font-size-80-percent full-width ' + (this.isFullySynced(fork) ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }
style={{ width: '100%', fontSize: '80%' }}
role="progressbar" role="progressbar"
id="currency-bundles"> id="currency-bundles">
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==&gt;&gt; RT{ fork.RTheight }</span> { translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==&gt;&gt; RT{ fork.RTheight }</span>
</div> </div>
<div <div
className={ this.isFullySynced(fork) ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active' } className={'font-size-80-percent ' + (this.isFullySynced(fork) ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
style={{ width: fork.bundles + '%', fontSize: '80%' }} style={{ width: fork.bundles + '%' }}
role="progressbar" role="progressbar"
id="currency-bundles"> id="currency-bundles">
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">{ fork.bundles }%</span> { translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">{ fork.bundles }%</span>
@ -194,8 +193,8 @@ class SyncOnly extends React.Component {
<div id="additional-progress-bars" className={ this.isFullySynced(fork) ? 'hide' : '' }> <div id="additional-progress-bars" className={ this.isFullySynced(fork) ? 'hide' : '' }>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div <div
className="progress-bar progress-bar-warning progress-bar-striped active" className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent"
style={{ width: fork.utxo + '%', fontSize: '80%' }} style={{ width: fork.utxo + '%' }}
role="progressbar" role="progressbar"
id="currency-utxo"> id="currency-utxo">
utxo <span id="currency-utxo-percent">{ fork.utxo }%</span> utxo <span id="currency-utxo-percent">{ fork.utxo }%</span>
@ -203,8 +202,8 @@ class SyncOnly extends React.Component {
</div> </div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div <div
className="progress-bar progress-bar-danger progress-bar-striped active" className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent"
style={{ width: fork.balances + '%', fontSize: '80%' }} style={{ width: fork.balances + '%' }}
role="progressbar" role="progressbar"
id="currency-balances"> id="currency-balances">
{ translate('INDEX.BALANCES') } <span id="currency-balances-percent">{ fork.balances }%</span> { translate('INDEX.BALANCES') } <span id="currency-balances-percent">{ fork.balances }%</span>
@ -212,8 +211,8 @@ class SyncOnly extends React.Component {
</div> </div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div <div
className="progress-bar progress-bar-success progress-bar-striped active" className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent"
style={{ width: fork.validated + '%', fontSize: '80%' }} style={{ width: fork.validated + '%' }}
role="progressbar" role="progressbar"
id="currency-validated"> id="currency-validated">
{ translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ fork.validated }%</span> { translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ fork.validated }%</span>
@ -234,7 +233,7 @@ class SyncOnly extends React.Component {
forkInfo.registry && forkInfo.registry &&
forkInfo.getinfo) { forkInfo.getinfo) {
items.push( items.push(
<div key={ port } style={{ width: '100%' }} className="padding-bottom-60"> <div key={ port } className="padding-bottom-60 full-width">
<div className="avatar"> <div className="avatar">
<img <img
className="img-responsive margin-bottom-5" className="img-responsive margin-bottom-5"
@ -278,7 +277,7 @@ class SyncOnly extends React.Component {
<div className="modal show sync-only-forks" aria-hidden="false" role="dialog"> <div className="modal show sync-only-forks" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg"> <div className="modal-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body" style={{ height: '590px' }}> <div className="modal-body modal-body-container">
{ this.renderForksList() } { this.renderForksList() }
</div> </div>
<div className="modal-footer"> <div className="modal-footer">

2
react/src/components/dashboard/walletsBasiliskConnection.js
View File

@ -79,7 +79,7 @@ class WalletsBasiliskConnection extends React.Component {
{ translate('IAPI.CON_STATUS') + '... ' + this.props.Dashboard.connectedNotaries.current + '/' + this.props.Dashboard.connectedNotaries.total + ': ' + this.props.Dashboard.connectedNotaries.currentNodeName} <span className="pull-right" id="basilisk-connections-refresh-percent">{ Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }%</span> { translate('IAPI.CON_STATUS') + '... ' + this.props.Dashboard.connectedNotaries.current + '/' + this.props.Dashboard.connectedNotaries.total + ': ' + this.props.Dashboard.connectedNotaries.currentNodeName} <span className="pull-right" id="basilisk-connections-refresh-percent">{ Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }%</span>
</h5> </h5>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{ width: Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) + '%', fontSize: '80%' }} role="progressbar" id="basilisk-connections-refresh-progress-bar"></div> <div className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent" style={{ width: Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) + '%' }} role="progressbar" id="basilisk-connections-refresh-progress-bar"></div>
</div> </div>
<pre id="basilisk-connections-refresh-status-output no-padding"> <pre id="basilisk-connections-refresh-status-output no-padding">
{ this.props.Dashboard.connectedNotaries.failedToConnectNodes ? 'Failed: ' + this.props.Dashboard.connectedNotaries.failedToConnectNodes : null } { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? 'Failed: ' + this.props.Dashboard.connectedNotaries.failedToConnectNodes : null }

2
react/src/components/dashboard/walletsCacheData.js
View File

@ -153,7 +153,7 @@ class WalletsCacheData extends React.Component {
<div className="modal show" aria-hidden="false" role="dialog"> <div className="modal show" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg"> <div className="modal-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body" style={{ height: '590px' }}> <div className="modal-body modal-body-container">
<div className="panel nav-tabs-horizontal"> <div className="panel nav-tabs-horizontal">
<div className="panel-body"> <div className="panel-body">
<div className="tab-content"> <div className="tab-content">

13
react/src/components/dashboard/walletsData.js
View File

@ -594,14 +594,13 @@ class WalletsData extends React.Component {
<div id="edexcoin_dashoard_section"> <div id="edexcoin_dashoard_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12 edexcoin_dashoard_section_main_div"> <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12 edexcoin_dashoard_section_main_div">
<div id="edexcoin_txhistory" className="panel"> <div id="edexcoin_txhistory" className="panel">
<header className="panel-heading" style={{ zIndex: '10' }}> <header className="panel-heading z-index-10">
<div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'panel-actions' : 'panel-actions hide' }> <div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'panel-actions' : 'panel-actions hide' }>
<div <div
className={ this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm' } className={'full-width margin-bottom-3 ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }>
style={{ width: '100%', marginBottom: '3px' }}>
<div <div
className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success" 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) + '%', fontSize: '80%' }} style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%'}}
role="progressbar"> role="progressbar">
{ translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength } { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
</div> </div>
@ -659,7 +658,7 @@ class WalletsData extends React.Component {
<i className="icon fa-history" aria-hidden="true"></i> { translate('INDEX.REFETCH_WALLET_DATA') } <i className="icon fa-history" aria-hidden="true"></i> { translate('INDEX.REFETCH_WALLET_DATA') }
</a> </a>
</li> </li>
<li role="presentation" className={ !this.state.useCache ? 'hide' : '' } style={{ display: 'none' }}> <li role="presentation" className={'display-none ' + (!this.state.useCache ? 'hide' : '') }>
<a role="menuitem" onClick={ this.restartBasiliskInstance }> <a role="menuitem" onClick={ this.restartBasiliskInstance }>
<i className="icon fa-refresh" aria-hidden="true"></i> Restart Basilisk Instance (unsafe!) <i className="icon fa-refresh" aria-hidden="true"></i> Restart Basilisk Instance (unsafe!)
</a> </a>
@ -681,7 +680,7 @@ class WalletsData extends React.Component {
</div> </div>
{ this.renderUseCacheToggle } { this.renderUseCacheToggle }
</div> </div>
<div className="row" style={{ padding: '20px 0 10px 0' }}> <div className="row pagination-container">
<div className="col-sm-6"> <div className="col-sm-6">
{ this.renderPaginationItemsPerPageSelector() } { this.renderPaginationItemsPerPageSelector() }
</div> </div>

8
react/src/components/dashboard/walletsHeader.js
View File

@ -19,7 +19,7 @@ class WalletsHeader extends React.Component {
<img src="assets/images/native/jumblr_header_title_logo.png" /><br /> { translate('SIDEBAR.JUMBLR_MOTTO') } <img src="assets/images/native/jumblr_header_title_logo.png" /><br /> { translate('SIDEBAR.JUMBLR_MOTTO') }
</li> </li>
</ol> </ol>
<div className="page-header-actions" style={{ zIndex: '1', display: 'none' }}> <div className="page-header-actions z-index-1 display-none">
<div id="kmd_header_button"> <div id="kmd_header_button">
<button <button
type="button" type="button"
@ -60,7 +60,7 @@ class WalletsHeader extends React.Component {
</ul> </ul>
</div> </div>
<div id="zec_header_button" style={{ display: 'none' }}> <div id="zec_header_button" className="display-none">
<button <button
type="button" type="button"
id="easydex_zec_wallet_actions_header" id="easydex_zec_wallet_actions_header"
@ -113,7 +113,7 @@ class WalletsHeader extends React.Component {
</button> </button>
</div> </div>
<div id="kmd_header_button" style={{ display: 'none' }}> <div id="kmd_header_button" className="display-none">
<button <button
type="button" type="button"
id="easydex_acpax_wallet_actions_header" id="easydex_acpax_wallet_actions_header"
@ -157,7 +157,7 @@ class WalletsHeader extends React.Component {
</ul> </ul>
</div> </div>
<div className="row no-space width-350 hidden-xs" id="easydex_btc_btcd_balances_header" style={{ display: 'none' }}> <div className="row no-space width-350 hidden-xs" id="easydex_btc_btcd_balances_header display-none">
<div className="col-xs-6"> <div className="col-xs-6">
<div className="counter"> <div className="counter">
<span className="font-weight-medium" id="header_coinname_balance"> - BTC</span> <span className="font-weight-medium" id="header_coinname_balance"> - BTC</span>

8
react/src/components/dashboard/walletsNative.js
View File

@ -27,12 +27,12 @@ class WalletsNative extends React.Component {
this.props.ActiveCoin && this.props.ActiveCoin &&
this.props.ActiveCoin.mode === 'native') { this.props.ActiveCoin.mode === 'native') {
return ( return (
<div className="page" style={{ marginLeft: '0' }}> <div className="page margin-left-0">
<div id="section-extcoin" style={{ paddingTop: '0' }}> <div id="section-extcoin" className="padding-top-0">
<div id="easydex-header-div" style={{ 'backgroundImage': 'url("assets/images/bg/' + this.defaultBG() + '_transparent_header_bg.png")', backgroundColor: '#fff' }}> <div id="easydex-header-div" className="background-color-white" style={{ 'backgroundImage': 'url("assets/images/bg/' + this.defaultBG() + '_transparent_header_bg.png")' }}>
<ol className="breadcrumb"> <ol className="breadcrumb">
<li className="header-easydex-section"> <li className="header-easydex-section">
<img src={ 'assets/images/native/' + this.defaultBG() + '_header_title_logo.png' } /> <span style={{ fontSize: '35px', verticalAlign: 'middle' }} className={ this.props.ActiveCoin.coin === 'KMD' ? 'hide' : '' }>{ this.props.ActiveCoin.coin }</span> <img src={ 'assets/images/native/' + this.defaultBG() + '_header_title_logo.png' } /> <span className={'easydex-section-image ' + (this.props.ActiveCoin.coin === 'KMD' ? 'hide' : '') }>{ this.props.ActiveCoin.coin }</span>
</li> </li>
</ol> </ol>
</div> </div>

20
react/src/components/dashboard/walletsNativeBalance.js
View File

@ -16,9 +16,8 @@ class WalletsNativeBalance extends React.Component {
<i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TRANSPARENT_BALANCE') } <i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TRANSPARENT_BALANCE') }
</div> </div>
<span <span
className="pull-right padding-top-10" className="pull-right padding-top-10 font-size-22"
id="kmd_transparent_balance" id="kmd_transparent_balance">{ this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' }</span>
style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' }</span>
</div> </div>
</div> </div>
</div> </div>
@ -34,9 +33,8 @@ class WalletsNativeBalance extends React.Component {
<i className="icon fa-eye-slash font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.Z_BALANCE') } <i className="icon fa-eye-slash font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.Z_BALANCE') }
</div> </div>
<span <span
className="pull-right padding-top-10" className="pull-right padding-top-10 font-size-22"
id="kmd_private_balance" id="kmd_private_balance">{ this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }</span>
style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }</span>
</div> </div>
</div> </div>
</div> </div>
@ -52,9 +50,8 @@ class WalletsNativeBalance extends React.Component {
<i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.INTEREST_EARNED') } <i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.INTEREST_EARNED') }
</div> </div>
<span <span
className="pull-right padding-top-10" className="pull-right padding-top-10 font-size-22"
id="kmd_total_interest_balance" id="kmd_total_interest_balance">{ this.props.ActiveCoin.balance.interest ? this.props.ActiveCoin.balance.interest : '-' }</span>
style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.interest ? this.props.ActiveCoin.balance.interest : '-' }</span>
</div> </div>
</div> </div>
</div> </div>
@ -70,9 +67,8 @@ class WalletsNativeBalance extends React.Component {
<i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.ZT_BALANCE') } <i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.ZT_BALANCE') }
</div> </div>
<span <span
className="pull-right padding-top-10" className="pull-right padding-top-10 font-size-22"
id="kmd_total_tz_balance" id="kmd_total_tz_balance">{ this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' }</span>
style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' }</span>
</div> </div>
</div> </div>
</div> </div>

21
react/src/components/dashboard/walletsNativeSyncProgress.js
View File

@ -7,25 +7,23 @@ class WalletsNativeSyncProgress extends React.Component {
this.props.Dashboard.progress.longestchain === 0) { this.props.Dashboard.progress.longestchain === 0) {
return ( return (
<div <div
className="progress-bar progress-bar-info progress-bar-striped active" className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent"
style={{ width: '100%', fontSize: '80%' }}
role="progressbar" role="progressbar"
id="extcoin-sync"> id="extcoin-sync">
<span <span
id="extcoin-sync-percent" id="extcoin-sync-percent"
style={{ width: '100%' }}>{ translate('INDEX.SYNC_ERR_LONGESTCHAIN') }</span> className="full-width">{ translate('INDEX.SYNC_ERR_LONGESTCHAIN') }</span>
</div> </div>
); );
} else if (this.props.Dashboard.progress.blocks === 0) { } else if (this.props.Dashboard.progress.blocks === 0) {
return ( return (
<div <div
className="progress-bar progress-bar-info progress-bar-striped active" className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent"
style={{ width: '100%', fontSize: '80%' }}
role="progressbar" role="progressbar"
id="extcoin-sync"> id="extcoin-sync">
<span <span
id="extcoin-sync-percent" id="extcoin-sync-percent"
style={{ width: '100%' }}>{ translate('INDEX.SYNC_ERR_BLOCKS') }</span> className="full-width">{ translate('INDEX.SYNC_ERR_BLOCKS') }</span>
</div> </div>
); );
} else { } else {
@ -33,8 +31,8 @@ class WalletsNativeSyncProgress extends React.Component {
return ( return (
<div <div
className="progress-bar progress-bar-info progress-bar-striped active" className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent"
style={{ width: syncPercentage, fontSize: '80%' }} style={{ width: syncPercentage }}
role="progressbar" role="progressbar"
id="extcoin-sync"> id="extcoin-sync">
<span <span
@ -85,9 +83,8 @@ class WalletsNativeSyncProgress extends React.Component {
return ( return (
<div <div
role="alert" role="alert"
className="alert alert-info alert-dismissible" className="alert alert-info alert-dismissible margin-bottom-40"
id="extcoin-wallet-activating-alert" id="extcoin-wallet-activating-alert">
style={{ marginBottom: '40px' }}>
<button aria-label="Close" data-dismiss="alert" className="close" type="button"> <button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
@ -109,7 +106,7 @@ class WalletsNativeSyncProgress extends React.Component {
return ( return (
<div> <div>
{ this.renderChainActivationNotification() } { this.renderChainActivationNotification() }
<div className="row" style={{ margin: '-20px 0px 10px 0px' }}> <div className="row sync-progress-container">
<div className="col-xs-12" id="extcoin-progressbars"> <div className="col-xs-12" id="extcoin-progressbars">
<div className="progress"> <div className="progress">
{ this.renderSyncPercentagePlaceholder() } { this.renderSyncPercentagePlaceholder() }

6
react/src/components/dashboard/walletsNativeTxInfo.js
View File

@ -41,7 +41,7 @@ class WalletsNativeTxInfo extends React.Component {
<div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog"> <div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg"> <div className="modal-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body" style={{ height: '590px' }}> <div className="modal-body modal-body-container">
<div className="panel nav-tabs-horizontal"> <div className="panel nav-tabs-horizontal">
<ul className="nav nav-tabs nav-tabs-line" role="tablist"> <ul className="nav nav-tabs nav-tabs-line" role="tablist">
<li className={ this.state.activeTab === 0 ? 'active' : '' } role="presentation"> <li className={ this.state.activeTab === 0 ? 'active' : '' } role="presentation">
@ -179,7 +179,7 @@ class WalletsNativeTxInfo extends React.Component {
role="tabpanel"> role="tabpanel">
<textarea <textarea
id="kmd_txid_info_hex" id="kmd_txid_info_hex"
style={{ width: '100%', height: '170px' }} className="full-width height-170"
rows="10" rows="10"
cols="80" cols="80"
defaultValue={ txInfo.hex } disabled></textarea> defaultValue={ txInfo.hex } disabled></textarea>
@ -190,7 +190,7 @@ class WalletsNativeTxInfo extends React.Component {
role="tabpanel"> role="tabpanel">
<textarea <textarea
id="kmd_txid_info_hex" id="kmd_txid_info_hex"
style={{ width: '100%', height: '400px' }} className="full-width height-400"
rows="40" rows="40"
cols="80" cols="80"
defaultValue={ JSON.stringify(txInfo, null, '\t') } defaultValue={ JSON.stringify(txInfo, null, '\t') }

6
react/src/components/dashboard/walletsNav.js
View File

@ -57,7 +57,7 @@ class WalletsNav extends React.Component {
<div className="col-xs-12 padding-top-20" id="no_wallet_selected"> <div className="col-xs-12 padding-top-20" id="no_wallet_selected">
<div className="alert alert-info alert-dismissible" role="alert"> <div className="alert alert-info alert-dismissible" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close"></button> <button type="button" className="close" data-dismiss="alert" aria-label="Close"></button>
<span style={{ fontSize: '24px', textAlign: 'center' }}> <span className="font-size-24 text-align-center">
<i className="icon fa-paw" aria-hidden="true"></i> { translate('INDEX.NO_WALLET_CAPS') } <i className="icon fa-paw" aria-hidden="true"></i> { translate('INDEX.NO_WALLET_CAPS') }
</span> </span>
<br/> <br/>
@ -70,9 +70,9 @@ class WalletsNav extends React.Component {
return ( return (
<div> <div>
<div <div
className="page-header page-header-bordered header-easydex" className="page-header page-header-bordered header-easydex padding-bottom-20"
id="header-dashboard" id="header-dashboard"
style={{ paddingBottom: '20px', marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : '0' }}> style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : '0' }}>
<ol className="breadcrumb"> <ol className="breadcrumb">
<strong>{ translate('INDEX.MY') } <span id="edexcoin-active">{ this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' }</span> { translate('INDEX.ADDRESS') }: </strong> <span id="edexcoin_active_addr">{ this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' }</span> <button className="btn btn-default btn-xs clipboard-edexaddr" id="edexcoin_active_addr_clipboard" onClick={ () => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button> <strong>{ translate('INDEX.MY') } <span id="edexcoin-active">{ this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' }</span> { translate('INDEX.ADDRESS') }: </strong> <span id="edexcoin_active_addr">{ this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' }</span> <button className="btn btn-default btn-xs clipboard-edexaddr" id="edexcoin_active_addr_clipboard" onClick={ () => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
</ol> </ol>

2
react/src/components/dashboard/walletsNotariesList.js
View File

@ -60,7 +60,7 @@ class WalletsNotariesList extends React.Component {
<div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog"> <div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg"> <div className="modal-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body" style={{ height: '590px' }}> <div className="modal-body modal-body-container">
<div className="panel nav-tabs-horizontal"> <div className="panel nav-tabs-horizontal">
<div className="panel-body"> <div className="panel-body">
<div className="tab-content"> <div className="tab-content">

23
react/src/components/dashboard/walletsProgress.js
View File

@ -26,24 +26,23 @@ class WalletsProgress extends React.Component {
if (this.props.Dashboard.progress && if (this.props.Dashboard.progress &&
this.props.Dashboard.progress.error) { this.props.Dashboard.progress.error) {
return ( return (
<div style={{ textAlign: 'center', padding: '10px' }}>{ translate('INDEX.COIN_IS_BUSY') }</div> <div className="text-align-center padding-10">{ translate('INDEX.COIN_IS_BUSY') }</div>
); );
} else { } else {
return ( return (
<div id="edex-footer" style={{ marginBottom: '20px' }}> <div id="edex-footer" className="margin-bottom-20">
<div className="row no-space"> <div className="row no-space">
<div id="currency-progressbars"> <div id="currency-progressbars">
<div className="progress progress-sm"> <div className="progress progress-sm">
<div <div
className={ this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide' } className={'full-width font-size-80-percent ' + (this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }
style={{ width: '100%', fontSize: '80%' }}
role="progressbar" role="progressbar"
id="currency-bundles"> id="currency-bundles">
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ this.props.ActiveCoin.coin }) 100.00% - ( { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.blocks } ) ==&gt;&gt; RT{ this.props.Dashboard.progress.RTheight }</span> { translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ this.props.ActiveCoin.coin }) 100.00% - ( { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.blocks } ) ==&gt;&gt; RT{ this.props.Dashboard.progress.RTheight }</span>
</div> </div>
<div <div
className={ this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active' } className={'font-size-80-percent ' + (this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
style={{ width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%' }} style={{ width: this.props.Dashboard.progress.bundles + '%' }}
role="progressbar" role="progressbar"
id="currency-bundles"> id="currency-bundles">
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">{ this.props.Dashboard.progress.bundles }%</span> { translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">{ this.props.Dashboard.progress.bundles }%</span>
@ -53,8 +52,8 @@ class WalletsProgress extends React.Component {
<div id="additional-progress-bars" className={ this.isFullySynced() ? 'hide' : '' }> <div id="additional-progress-bars" className={ this.isFullySynced() ? 'hide' : '' }>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div <div
className="progress-bar progress-bar-warning progress-bar-striped active" className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent"
style={{ width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%' }} style={{ width: this.props.Dashboard.progress.utxo + '%' }}
role="progressbar" role="progressbar"
id="currency-utxo"> id="currency-utxo">
utxo <span id="currency-utxo-percent">{ this.props.Dashboard.progress.utxo }%</span> utxo <span id="currency-utxo-percent">{ this.props.Dashboard.progress.utxo }%</span>
@ -62,8 +61,8 @@ class WalletsProgress extends React.Component {
</div> </div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div <div
className="progress-bar progress-bar-danger progress-bar-striped active" className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent"
style={{ width: this.props.Dashboard.progress.balances + '%', fontSize: '80%' }} style={{ width: this.props.Dashboard.progress.balances + '%' }}
role="progressbar" role="progressbar"
id="currency-balances"> id="currency-balances">
{ translate('INDEX.BALANCES') } <span id="currency-balances-percent">{ this.props.Dashboard.progress.balances }%</span> { translate('INDEX.BALANCES') } <span id="currency-balances-percent">{ this.props.Dashboard.progress.balances }%</span>
@ -71,8 +70,8 @@ class WalletsProgress extends React.Component {
</div> </div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div <div
className="progress-bar progress-bar-success progress-bar-striped active" className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent"
style={{ width: this.props.Dashboard.progress.validated + '%', fontSize: '80%' }} style={{ width: this.props.Dashboard.progress.validated + '%' }}
role="progressbar" role="progressbar"
id="currency-validated"> id="currency-validated">
{ translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ this.props.Dashboard.progress.validated }%</span> { translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ this.props.Dashboard.progress.validated }%</span>

4
react/src/components/dashboard/walletsTxInfo.js
View File

@ -40,7 +40,7 @@ class WalletsTxInfo extends React.Component {
<div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog"> <div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg"> <div className="modal-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body" style={{ height: '590px' }}> <div className="modal-body modal-body-container">
<div className="panel nav-tabs-horizontal"> <div className="panel nav-tabs-horizontal">
<ul className="nav nav-tabs nav-tabs-line" role="tablist"> <ul className="nav nav-tabs nav-tabs-line" role="tablist">
<li className={ this.state.activeTab === 0 ? 'active' : '' } role="presentation"> <li className={ this.state.activeTab === 0 ? 'active' : '' } role="presentation">
@ -120,7 +120,7 @@ class WalletsTxInfo extends React.Component {
id="KmdTxIDInfotab4" role="tabpanel"> id="KmdTxIDInfotab4" role="tabpanel">
<textarea <textarea
id="kmd_txid_info_hex" id="kmd_txid_info_hex"
style={{ width: '100%', height: '400px' }} className="full-width height-400"
rows="40" rows="40"
cols="80" cols="80"
defaultValue={ JSON.stringify(txInfo, null, '\t') } disabled></textarea> defaultValue={ JSON.stringify(txInfo, null, '\t') } disabled></textarea>

40
react/src/components/login/login.js
View File

@ -158,14 +158,14 @@ class Login extends React.Component {
if (this.state.displaySeedBackupModal) { if (this.state.displaySeedBackupModal) {
return ( return (
<div className="swal2-container"> <div className="swal2-container">
<div className="swal2-overlay" tabIndex="-1" style={{ opacity: 1, display: 'block' }}></div> <div className="swal2-overlay full-opacity display-block" tabIndex="-1"></div>
<div className="swal2-modal show-swal2 visible" style={{ display: 'block', width: '500px', padding: '20px', marginLeft: '-250px', background: 'rgb(255, 255, 255)', marginTop: '-230px' }} tabIndex="-1"> <div className="swal2-modal show-swal2 visible swal2-modal-container" tabIndex="-1">
<div className="swal2-icon swal2-warning pulse-warning" style={{ display: 'block' }}>!</div> <div className="swal2-icon swal2-warning pulse-warning display-block">!</div>
<h2>{ translate('LOGIN.SAVED_WALLET_SEED') }</h2> <h2>{ translate('LOGIN.SAVED_WALLET_SEED') }</h2>
<div className="swal2-content" style={{ display: 'block' }}>{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }</div> <div className="swal2-content display-block">{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }</div>
<hr className="swal2-spacer" style={{ display: 'block' }} /> <hr className="swal2-spacer display-block" />
<button className="swal2-confirm styled" style={{ backgroundColor: 'rgb(48, 133, 214)', borderLeftColor: 'rgb(48, 133, 214)', borderRightColor: 'rgb(48, 133, 214)' }} onClick={ this.execWalletCreate }>{ translate('LOGIN.YES_I_BACKUP') }</button> <button className="swal2-confirm styled swal2-confirm-container" onClick={ this.execWalletCreate }>{ translate('LOGIN.YES_I_BACKUP') }</button>
<button className="swal2-cancel styled" style={{ display: 'inline-block', backgroundColor: 'rgb(221, 51, 51)'}} onClick={ this.toggleSeedBackupModal }>{ translate('LOGIN.CANCEL') }</button> <button className="swal2-cancel styled swal2-cancel-container" onClick={ this.toggleSeedBackupModal }>{ translate('LOGIN.CANCEL') }</button>
</div> </div>
</div> </div>
); );
@ -185,7 +185,7 @@ class Login extends React.Component {
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" /> <img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
</div> </div>
<div style={{ padding: '20px 0' }}> <div className="vertical-padding-20 horizontal-padding-0">
<span className="display-sync-only-coins-toggle" onClick={ this.openSyncOnlyModal }> <span className="display-sync-only-coins-toggle" onClick={ this.openSyncOnlyModal }>
<i className="fa fa-cubes"></i> { translate('LOGIN.DISPLAY_SYNC_ONLY') } <i className="fa fa-cubes"></i> { translate('LOGIN.DISPLAY_SYNC_ONLY') }
</span> </span>
@ -204,7 +204,7 @@ class Login extends React.Component {
{ translate('INDEX.IE_UNSUPPORTED') } { translate('INDEX.IE_UNSUPPORTED') }
</div> </div>
<div className="panel-body"> <div className="panel-body">
<p style={{ color: '#424242' }}> <p className="browser-usage-container">
{ translate('INDEX.PLEASE_USE') } <a href="https://www.google.com/chrome/">Google Chrome</a> { translate('INDEX.OR') } <a href="https://www.firefox.com">Mozilla FireFox</a> { translate('INDEX.TO_USE') } EasyDEX-GUI. { translate('INDEX.PLEASE_CLICK_ON') }. { translate('INDEX.PLEASE_USE') } <a href="https://www.google.com/chrome/">Google Chrome</a> { translate('INDEX.OR') } <a href="https://www.firefox.com">Mozilla FireFox</a> { translate('INDEX.TO_USE') } EasyDEX-GUI. { translate('INDEX.PLEASE_CLICK_ON') }.
</p> </p>
<div className="col-sm-6 col-xs-6"> <div className="col-sm-6 col-xs-6">
@ -218,7 +218,7 @@ class Login extends React.Component {
</div> </div>
<div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }> <div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
<h4 style={{ color: '#fff' }} id="login-welcome">{translate('INDEX.WELCOME_LOGIN')}</h4> <h4 className="color-white" id="login-welcome">{translate('INDEX.WELCOME_LOGIN')}</h4>
<div className="login-form"> <div className="login-form">
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<input <input
@ -248,12 +248,11 @@ class Login extends React.Component {
className="btn btn-lg btn-flat btn-block waves-effect hide" className="btn btn-lg btn-flat btn-block waves-effect hide"
id="logint-another-wallet">{ translate('INDEX.LOGIN_ANOTHER_WALLET') }</button> id="logint-another-wallet">{ translate('INDEX.LOGIN_ANOTHER_WALLET') }</button>
<button <button
className="btn btn-lg btn-flat btn-block waves-effect" className="btn btn-lg btn-flat btn-block waves-effect margin-top-20"
id="register-btn" id="register-btn"
role="menuitem" role="menuitem"
onClick={ this.toggleActivateCoinForm } onClick={ this.toggleActivateCoinForm }
disabled={ !this.props.Main } disabled={ !this.props.Main }>
style={{ marginTop: '20px' }}>
<span className="ladda-label">{ translate('ADD_COIN.ADD_ANOTHER_COIN') }</span> <span className="ladda-label">{ translate('ADD_COIN.ADD_ANOTHER_COIN') }</span>
</button> </button>
</div> </div>
@ -263,10 +262,9 @@ class Login extends React.Component {
<div <div
id="section-login-addcoin-btn" id="section-login-addcoin-btn"
className={ this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide' }> className={ this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide' }>
<h4 style={{ color: '#fff' }} id="login-welcome">{ translate('INDEX.WELCOME_PLEASE_ADD') }</h4> <h4 className="color-white" id="login-welcome">{ translate('INDEX.WELCOME_PLEASE_ADD') }</h4>
<div <div
className="form-group form-material floating" className="form-group form-material floating width-540 vertical-margin-30 horizontal-margin-0">
style={{ width: '540px', margin: '30px 0' }}>
<button <button
className="btn btn-lg btn-primary btn-block ladda-button" className="btn btn-lg btn-primary btn-block ladda-button"
id="start-coin-login" id="start-coin-login"
@ -282,7 +280,7 @@ class Login extends React.Component {
id="section-register" id="section-register"
className={ this.state.activeLoginSection === 'signup' ? 'show' : 'hide' }> className={ this.state.activeLoginSection === 'signup' ? 'show' : 'hide' }>
<div className="register-form"> <div className="register-form">
<h4 className="hint" style={{ color: '#fff' }}> <h4 className="hint color-white">
{ translate('INDEX.SELECT_SEED_TYPE') }: { translate('INDEX.SELECT_SEED_TYPE') }:
</h4> </h4>
<div className="form-group form-material floating"> <div className="form-group form-material floating">
@ -316,22 +314,20 @@ class Login extends React.Component {
</div> </div>
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<textarea <textarea
className="form-control placeholder-no-fix" className="form-control placeholder-no-fix height-100"
type="text" type="text"
id="walletseed" id="walletseed"
style={{ height: '100px' }}
value={ this.state.randomSeed } value={ this.state.randomSeed }
readOnly="true"></textarea> readOnly="true"></textarea>
<label className="floating-label" htmlFor="walletseed">{ translate('INDEX.WALLET_SEED') }</label> <label className="floating-label" htmlFor="walletseed">{ translate('INDEX.WALLET_SEED') }</label>
</div> </div>
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<textarea <textarea
className="form-control placeholder-no-fix" className="form-control placeholder-no-fix height-100"
type="text" type="text"
name="randomSeedConfirm" name="randomSeedConfirm"
onChange={ this.updateInput } onChange={ this.updateInput }
id="rwalletseed" id="rwalletseed"></textarea>
style={{ height: '100px' }}></textarea>
<span className={ this.state.isSeedConfirmError ? 'help-block' : 'hide' }>{ translate('LOGIN.ENTER_VALUE_AGAIN') }.</span> <span className={ this.state.isSeedConfirmError ? 'help-block' : 'hide' }>{ translate('LOGIN.ENTER_VALUE_AGAIN') }.</span>
<label className="floating-label" htmlFor="rwalletseed">{ translate('INDEX.CONFIRM_SEED') }</label> <label className="floating-label" htmlFor="rwalletseed">{ translate('INDEX.CONFIRM_SEED') }</label>
</div> </div>

48
react/src/components/login/login.scss
View File

@ -1,3 +1,49 @@
.login { .full-opacity {
opacity: 1;
}
.display-block {
display: block;
}
.swal2-modal-container {
display: block;
width: 500px;
padding: 20px;
margin-left: -250px;
background: rgb(255, 255, 255);
margin-top: -230px;
}
button.swal2-confirm-container {
background-color: rgb(48, 133, 214);
border-left-color: rgb(48, 133, 214);
border-right-color: rgb(48, 133, 214);
}
button.swal2-cancel-container {
display: inline-block;
background-color: rgb(221, 51, 51);
}
.vertical-padding-20 {
padding-top: 20px;
padding-bottom: 20px;
}
.browser-usage-container {
color: #424242;
}
.width-540 {
width: 540px;
}
.vertical-margin-30 {
margin-top: 30px;
margin-bottom: 30px;
}
textarea.height-100 {
height: 100px;
} }

2
react/src/components/main/walletMain.js
View File

@ -9,7 +9,7 @@ import Notifications from '../dashboard/notifications';
class WalletMain extends React.Component { class WalletMain extends React.Component {
render() { render() {
return ( return (
<div style={{height: '100%'}}> <div className="full-height">
<SyncOnly {...this.props} /> <SyncOnly {...this.props} />
<Dashboard {...this.props} /> <Dashboard {...this.props} />
<AddCoin {...this.props.AddCoin} /> <AddCoin {...this.props.AddCoin} />

1
react/src/styles/index.scss
View File

@ -1,5 +1,6 @@
@import '../components/addcoin/addcoin.scss'; @import '../components/addcoin/addcoin.scss';
@import '../components/dashboard/dashboard.scss'; @import '../components/dashboard/dashboard.scss';
@import '../components/login/login.scss';
@import '../assets/global/css/bootstrap.min.css'; @import '../assets/global/css/bootstrap.min.css';
@import '../assets/global/css/bootstrap-extend.min.css'; @import '../assets/global/css/bootstrap-extend.min.css';

Write Preview
Loading…
Cancel
Save