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

Inline css extraction

react/src/components/addcoin/addcoin.js

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

react/src/components/addcoin/addcoin.scss

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

react/src/components/dashboard/dashboard.scss

@@ -26,7 +26,7 @@
 }
 
 //navbar.js
-.navbar-toolbar>li>a.padding-top-16 {
+.navbar-toolbar > li > a.padding-top-16 {
   padding-top: 16px;
 }
 
@@ -40,6 +40,34 @@
   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
 .font-weight-600 {
   font-weight: 600;
@@ -61,3 +89,45 @@
 .no-padding {
   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;
+}

react/src/components/dashboard/sendCoin.js

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

react/src/components/dashboard/settings.js

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

react/src/components/dashboard/syncOnly.js

@@ -176,15 +176,14 @@ class SyncOnly extends React.Component {
         <div>
           <div className="progress progress-sm">
             <div
-              className={ this.isFullySynced(fork) ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide' }
-              style={{ width: '100%', fontSize: '80%' }}
+              className={'font-size-80-percent full-width ' + (this.isFullySynced(fork) ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }
               role="progressbar"
               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>
             </div>
             <div
-              className={ this.isFullySynced(fork) ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active' }
-              style={{ width: fork.bundles + '%', fontSize: '80%' }}
+              className={'font-size-80-percent ' + (this.isFullySynced(fork) ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
+              style={{ width: fork.bundles + '%' }}
               role="progressbar"
               id="currency-bundles">
               { 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 className="progress progress-sm">
             <div
-              className="progress-bar progress-bar-warning progress-bar-striped active"
-              style={{ width: fork.utxo + '%', fontSize: '80%' }}
+              className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent"
+              style={{ width: fork.utxo + '%' }}
               role="progressbar"
               id="currency-utxo">
               utxo <span id="currency-utxo-percent">{ fork.utxo }%</span>
@@ -203,8 +202,8 @@ class SyncOnly extends React.Component {
           </div>
           <div className="progress progress-sm">
             <div
-              className="progress-bar progress-bar-danger progress-bar-striped active"
-              style={{ width: fork.balances + '%', fontSize: '80%' }}
+              className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent"
+              style={{ width: fork.balances + '%' }}
               role="progressbar"
               id="currency-balances">
               { translate('INDEX.BALANCES') } <span id="currency-balances-percent">{ fork.balances }%</span>
@@ -212,8 +211,8 @@ class SyncOnly extends React.Component {
           </div>
           <div className="progress progress-sm">
             <div
-              className="progress-bar progress-bar-success progress-bar-striped active"
-              style={{ width: fork.validated + '%', fontSize: '80%' }}
+              className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent"
+              style={{ width: fork.validated + '%' }}
               role="progressbar"
               id="currency-validated">
               { translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ fork.validated }%</span>
@@ -234,7 +233,7 @@ class SyncOnly extends React.Component {
           forkInfo.registry &&
           forkInfo.getinfo) {
         items.push(
-          <div key={ port } style={{ width: '100%' }} className="padding-bottom-60">
+          <div key={ port } className="padding-bottom-60 full-width">
             <div className="avatar">
               <img
                 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-dialog modal-center modal-lg">
               <div className="modal-content">
-                <div className="modal-body" style={{ height: '590px' }}>
+                <div className="modal-body modal-body-container">
                   { this.renderForksList() }
                 </div>
                 <div className="modal-footer">

react/src/components/dashboard/walletsBasiliskConnection.js

@@ -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>
                   </h5>
                   <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>
                   <pre id="basilisk-connections-refresh-status-output no-padding">
                   { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? 'Failed: ' + this.props.Dashboard.connectedNotaries.failedToConnectNodes : null }

react/src/components/dashboard/walletsCacheData.js

@@ -153,7 +153,7 @@ class WalletsCacheData extends React.Component {
           <div className="modal show" aria-hidden="false" role="dialog">
             <div className="modal-dialog modal-center modal-lg">
               <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-body">
                       <div className="tab-content">

react/src/components/dashboard/walletsData.js

@@ -594,14 +594,13 @@ class WalletsData extends React.Component {
                 <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 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.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm' }
-                            style={{ width: '100%', marginBottom: '3px' }}>
+                            className={'full-width 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"
-                              style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%', fontSize: '80%' }}
+                              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) + '%'}}
                               role="progressbar">
                               { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
                             </div>
@@ -659,7 +658,7 @@ class WalletsData extends React.Component {
                                   <i className="icon fa-history" aria-hidden="true"></i> { translate('INDEX.REFETCH_WALLET_DATA') }
                                 </a>
                               </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 }>
                                   <i className="icon fa-refresh" aria-hidden="true"></i> Restart Basilisk Instance (unsafe!)
                                 </a>
@@ -681,7 +680,7 @@ class WalletsData extends React.Component {
                           </div>
                           { this.renderUseCacheToggle }
                         </div>
-                        <div className="row" style={{ padding: '20px 0 10px 0' }}>
+                        <div className="row pagination-container">
                           <div className="col-sm-6">
                             { this.renderPaginationItemsPerPageSelector() }
                           </div>

react/src/components/dashboard/walletsHeader.js

@@ -19,7 +19,7 @@ class WalletsHeader extends React.Component {
               <img src="assets/images/native/jumblr_header_title_logo.png" /><br /> { translate('SIDEBAR.JUMBLR_MOTTO') }
             </li>
           </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">
               <button
                 type="button"
@@ -60,7 +60,7 @@ class WalletsHeader extends React.Component {
               </ul>
             </div>
 
-            <div id="zec_header_button" style={{ display: 'none' }}>
+            <div id="zec_header_button" className="display-none">
               <button
                 type="button"
                 id="easydex_zec_wallet_actions_header"
@@ -113,7 +113,7 @@ class WalletsHeader extends React.Component {
               </button>
             </div>
 
-            <div id="kmd_header_button" style={{ display: 'none' }}>
+            <div id="kmd_header_button" className="display-none">
               <button
                 type="button"
                 id="easydex_acpax_wallet_actions_header"
@@ -157,7 +157,7 @@ class WalletsHeader extends React.Component {
               </ul>
             </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="counter">
                   <span className="font-weight-medium" id="header_coinname_balance"> - BTC</span>

react/src/components/dashboard/walletsNative.js

@@ -27,12 +27,12 @@ class WalletsNative extends React.Component {
         this.props.ActiveCoin &&
         this.props.ActiveCoin.mode === 'native') {
       return (
-        <div className="page" style={{ marginLeft: '0' }}>
-          <div id="section-extcoin" style={{ paddingTop: '0' }}>
-            <div id="easydex-header-div" style={{ 'backgroundImage': 'url("assets/images/bg/' + this.defaultBG() + '_transparent_header_bg.png")', backgroundColor: '#fff' }}>
+        <div className="page margin-left-0">
+          <div id="section-extcoin" className="padding-top-0">
+            <div id="easydex-header-div" className="background-color-white" style={{ 'backgroundImage': 'url("assets/images/bg/' + this.defaultBG() + '_transparent_header_bg.png")' }}>
               <ol className="breadcrumb">
                 <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>
               </ol>
             </div>

react/src/components/dashboard/walletsNativeBalance.js

@@ -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') }
                     </div>
                     <span
-                      className="pull-right padding-top-10"
-                      id="kmd_transparent_balance"
-                      style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' }</span>
+                      className="pull-right padding-top-10 font-size-22"
+                      id="kmd_transparent_balance">{ this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' }</span>
                   </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') }
                     </div>
                     <span
-                      className="pull-right padding-top-10"
-                      id="kmd_private_balance"
-                      style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }</span>
+                      className="pull-right padding-top-10 font-size-22"
+                      id="kmd_private_balance">{ this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }</span>
                   </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') }
                     </div>
                     <span
-                      className="pull-right padding-top-10"
-                      id="kmd_total_interest_balance"
-                      style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.interest ? this.props.ActiveCoin.balance.interest : '-' }</span>
+                      className="pull-right padding-top-10 font-size-22"
+                      id="kmd_total_interest_balance">{ this.props.ActiveCoin.balance.interest ? this.props.ActiveCoin.balance.interest : '-' }</span>
                   </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') }
                     </div>
                     <span
-                      className="pull-right padding-top-10"
-                      id="kmd_total_tz_balance"
-                      style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' }</span>
+                      className="pull-right padding-top-10 font-size-22"
+                      id="kmd_total_tz_balance">{ this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' }</span>
                   </div>
                 </div>
               </div>

react/src/components/dashboard/walletsNativeSyncProgress.js

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

react/src/components/dashboard/walletsNativeTxInfo.js

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

react/src/components/dashboard/walletsNav.js

@@ -57,7 +57,7 @@ class WalletsNav extends React.Component {
           <div className="col-xs-12 padding-top-20" id="no_wallet_selected">
             <div className="alert alert-info alert-dismissible" role="alert">
               <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') }
               </span>
               <br/>
@@ -70,9 +70,9 @@ class WalletsNav extends React.Component {
       return (
         <div>
           <div
-            className="page-header page-header-bordered header-easydex"
+            className="page-header page-header-bordered header-easydex padding-bottom-20"
             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">
               <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>

react/src/components/dashboard/walletsNotariesList.js

@@ -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-dialog modal-center modal-lg">
               <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-body">
                       <div className="tab-content">

react/src/components/dashboard/walletsProgress.js

@@ -26,24 +26,23 @@ class WalletsProgress extends React.Component {
       if (this.props.Dashboard.progress &&
           this.props.Dashboard.progress.error) {
         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 {
         return (
-          <div id="edex-footer" style={{ marginBottom: '20px' }}>
+          <div id="edex-footer" className="margin-bottom-20">
             <div className="row no-space">
               <div id="currency-progressbars">
                 <div className="progress progress-sm">
                   <div
-                    className={ this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide' }
-                    style={{ width: '100%', fontSize: '80%' }}
+                    className={'full-width font-size-80-percent ' + (this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }
                     role="progressbar"
                     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>
                   </div>
                   <div
-                    className={ this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active' }
-                    style={{ width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%' }}
+                    className={'font-size-80-percent ' + (this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') }
+                    style={{ width: this.props.Dashboard.progress.bundles + '%' }}
                     role="progressbar"
                     id="currency-bundles">
                     { 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 className="progress progress-sm">
                   <div
-                    className="progress-bar progress-bar-warning progress-bar-striped active"
-                    style={{ width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%' }}
+                    className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent"
+                    style={{ width: this.props.Dashboard.progress.utxo + '%' }}
                     role="progressbar"
                     id="currency-utxo">
                     utxo <span id="currency-utxo-percent">{ this.props.Dashboard.progress.utxo }%</span>
@@ -62,8 +61,8 @@ class WalletsProgress extends React.Component {
                 </div>
                 <div className="progress progress-sm">
                   <div
-                    className="progress-bar progress-bar-danger progress-bar-striped active"
-                    style={{ width: this.props.Dashboard.progress.balances + '%', fontSize: '80%' }}
+                    className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent"
+                    style={{ width: this.props.Dashboard.progress.balances + '%' }}
                     role="progressbar"
                     id="currency-balances">
                     { 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 className="progress progress-sm">
                   <div
-                    className="progress-bar progress-bar-success progress-bar-striped active"
-                    style={{ width: this.props.Dashboard.progress.validated + '%', fontSize: '80%' }}
+                    className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent"
+                    style={{ width: this.props.Dashboard.progress.validated + '%' }}
                     role="progressbar"
                     id="currency-validated">
                     { translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ this.props.Dashboard.progress.validated }%</span>

react/src/components/dashboard/walletsTxInfo.js

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

react/src/components/login/login.js

@@ -158,14 +158,14 @@ class Login extends React.Component {
     if (this.state.displaySeedBackupModal) {
       return (
         <div className="swal2-container">
-          <div className="swal2-overlay" tabIndex="-1" style={{ opacity: 1, display: 'block' }}></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-icon swal2-warning pulse-warning" style={{ display: 'block' }}>!</div>
+          <div className="swal2-overlay full-opacity display-block" tabIndex="-1"></div>
+          <div className="swal2-modal show-swal2 visible swal2-modal-container" tabIndex="-1">
+          <div className="swal2-icon swal2-warning pulse-warning display-block">!</div>
           <h2>{ translate('LOGIN.SAVED_WALLET_SEED') }</h2>
-          <div className="swal2-content" style={{ display: 'block' }}>{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }</div>
-          <hr className="swal2-spacer" style={{ 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-cancel styled" style={{ display: 'inline-block', backgroundColor: 'rgb(221, 51, 51)'}} onClick={ this.toggleSeedBackupModal }>{ translate('LOGIN.CANCEL') }</button>
+          <div className="swal2-content display-block">{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }</div>
+          <hr className="swal2-spacer display-block" />
+          <button className="swal2-confirm styled swal2-confirm-container" onClick={ this.execWalletCreate }>{ translate('LOGIN.YES_I_BACKUP') }</button>
+          <button className="swal2-cancel styled swal2-cancel-container" onClick={ this.toggleSeedBackupModal }>{ translate('LOGIN.CANCEL') }</button>
         </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" />
               </div>
 
-              <div style={{ padding: '20px 0' }}>
+              <div className="vertical-padding-20 horizontal-padding-0">
                 <span className="display-sync-only-coins-toggle" onClick={ this.openSyncOnlyModal }>
                   <i className="fa fa-cubes"></i> { translate('LOGIN.DISPLAY_SYNC_ONLY') }
                 </span>
@@ -204,7 +204,7 @@ class Login extends React.Component {
                     { translate('INDEX.IE_UNSUPPORTED') }
                   </div>
                   <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') }.
                     </p>
                     <div className="col-sm-6 col-xs-6">
@@ -218,7 +218,7 @@ class Login extends React.Component {
               </div>
 
               <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="form-group form-material floating">
                     <input
@@ -248,12 +248,11 @@ class Login extends React.Component {
                       className="btn btn-lg btn-flat btn-block waves-effect hide"
                       id="logint-another-wallet">{ translate('INDEX.LOGIN_ANOTHER_WALLET') }</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"
                       role="menuitem"
                       onClick={ this.toggleActivateCoinForm }
-                      disabled={ !this.props.Main }
-                      style={{ marginTop: '20px' }}>
+                      disabled={ !this.props.Main }>
                       <span className="ladda-label">{ translate('ADD_COIN.ADD_ANOTHER_COIN') }</span>
                     </button>
                   </div>
@@ -263,10 +262,9 @@ class Login extends React.Component {
               <div
                 id="section-login-addcoin-btn"
                 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
-                  className="form-group form-material floating"
-                  style={{ width: '540px', margin: '30px 0' }}>
+                  className="form-group form-material floating width-540 vertical-margin-30 horizontal-margin-0">
                   <button
                     className="btn btn-lg btn-primary btn-block ladda-button"
                     id="start-coin-login"
@@ -282,7 +280,7 @@ class Login extends React.Component {
                 id="section-register"
                 className={ this.state.activeLoginSection === 'signup' ? 'show' : 'hide' }>
                 <div className="register-form">
-                  <h4 className="hint" style={{ color: '#fff' }}>
+                  <h4 className="hint color-white">
                     { translate('INDEX.SELECT_SEED_TYPE') }:
                   </h4>
                   <div className="form-group form-material floating">
@@ -316,22 +314,20 @@ class Login extends React.Component {
                   </div>
                   <div className="form-group form-material floating">
                     <textarea
-                      className="form-control placeholder-no-fix"
+                      className="form-control placeholder-no-fix height-100"
                       type="text"
                       id="walletseed"
-                      style={{ height: '100px' }}
                       value={ this.state.randomSeed }
                       readOnly="true"></textarea>
                     <label className="floating-label" htmlFor="walletseed">{ translate('INDEX.WALLET_SEED') }</label>
                   </div>
                   <div className="form-group form-material floating">
                     <textarea
-                      className="form-control placeholder-no-fix"
+                      className="form-control placeholder-no-fix height-100"
                       type="text"
                       name="randomSeedConfirm"
                       onChange={ this.updateInput }
-                      id="rwalletseed"
-                      style={{ height: '100px' }}></textarea>
+                      id="rwalletseed"></textarea>
                     <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>
                   </div>

react/src/components/login/login.scss

@@ -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;
 }

react/src/components/main/walletMain.js

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

react/src/styles/index.scss

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