From 9efd43dab778d7a21f6074055e118fcfb5ed3600 Mon Sep 17 00:00:00 2001
From: petitPapillon <mail@mail.com>
Date: Sun, 28 May 2017 02:06:57 +0200
Subject: [PATCH 1/2] Extract inline css - dashboard pages

---
 react/src/components/dashboard/about.js       |  3 +-
 react/src/components/dashboard/atomic.js      |  8 +--
 react/src/components/dashboard/coinTile.js    |  4 +-
 react/src/components/dashboard/dashboard.js   |  2 +-
 react/src/components/dashboard/dashboard.scss | 62 ++++++++++++++++++-
 react/src/components/dashboard/edex.js        |  2 +-
 react/src/components/dashboard/jumblr.js      |  8 +--
 react/src/components/dashboard/loginModal.js  |  2 +-
 react/src/components/dashboard/navbar.js      |  8 +--
 .../src/components/dashboard/notifications.js |  4 +-
 .../components/dashboard/walletsBalance.js    | 10 +--
 .../dashboard/walletsBasiliskConnection.js    |  8 +--
 react/src/styles/index.scss                   |  2 +
 react/www/index.html                          |  2 +-
 14 files changed, 92 insertions(+), 33 deletions(-)
 mode change 100644 => 100755 react/src/components/dashboard/about.js
 mode change 100644 => 100755 react/src/components/dashboard/atomic.js
 mode change 100644 => 100755 react/src/components/dashboard/coinTile.js
 mode change 100644 => 100755 react/src/components/dashboard/dashboard.js
 mode change 100644 => 100755 react/src/components/dashboard/dashboard.scss
 mode change 100644 => 100755 react/src/components/dashboard/edex.js
 mode change 100644 => 100755 react/src/components/dashboard/jumblr.js
 mode change 100644 => 100755 react/src/components/dashboard/loginModal.js
 mode change 100644 => 100755 react/src/components/dashboard/navbar.js
 mode change 100644 => 100755 react/src/components/dashboard/notifications.js
 mode change 100644 => 100755 react/src/components/dashboard/walletsBalance.js
 mode change 100644 => 100755 react/src/components/dashboard/walletsBasiliskConnection.js

diff --git a/react/src/components/dashboard/about.js b/react/src/components/dashboard/about.js
old mode 100644
new mode 100755
index 91c5564..3d8eb59
--- a/react/src/components/dashboard/about.js
+++ b/react/src/components/dashboard/about.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
 
 class About extends React.Component {
   render() {
     return (
-      <div className="page" style={{ marginLeft: '0' }}>
+      <div className="page margin-left-0">
         <div className="page-content" id="section-about-iguana">
           <h2>About Iguana</h2>
           <p>Page content goes here</p>
diff --git a/react/src/components/dashboard/atomic.js b/react/src/components/dashboard/atomic.js
old mode 100644
new mode 100755
index 5cf4bcf..a6a3c9a
--- a/react/src/components/dashboard/atomic.js
+++ b/react/src/components/dashboard/atomic.js
@@ -481,7 +481,7 @@ class Atomic extends React.Component {
 
   render() {
     return (
-      <div className="page" style={{ marginLeft: '0' }}>
+      <div className="page margin-left-0">
         <div className="page-content" id="section-iguana-atomic-explorer">
           <div className="row" id="atomic-explorer">
             <div className="col-xlg-12 col-md-12">
@@ -502,7 +502,7 @@ class Atomic 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">
                     <select
                       className="form-control form-material"
                       id="atomic_explorer_select_command_options"
@@ -511,7 +511,7 @@ class Atomic extends React.Component {
                       { this.renderAtomicOptions() }
                     </select>
                   </div>
-                  <div className="col-sm-4 col-xs-12" style={{ textAlign: 'center' }}>
+                  <div className="col-sm-4 col-xs-12 text-align-center">
                     <input
                       type="text"
                       className="form-control"
@@ -520,7 +520,7 @@ class Atomic extends React.Component {
                       placeholder={ translate('ATOMIC.INPUT_PLACEHOLDER') }
                       onChange={ this.updateInput } />
                   </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"
diff --git a/react/src/components/dashboard/coinTile.js b/react/src/components/dashboard/coinTile.js
old mode 100644
new mode 100755
index 85fca63..4ca8c9f
--- a/react/src/components/dashboard/coinTile.js
+++ b/react/src/components/dashboard/coinTile.js
@@ -344,13 +344,13 @@ class CoinTile extends React.Component {
 
   render() {
     return (
-      <div className="page-aside" style={{ paddingTop: '80px' }}>
+      <div className="page-aside padding-top-80">
         <div className="page-aside-switch">
           <i className="icon md-chevron-left" aria-hidden="true"></i>
           <i className="icon md-chevron-right" aria-hidden="true"></i>
         </div>
         <div className="page-aside-inner">
-          <div className="search-wallet-widgets panel" style={{ display: 'none' }}>
+          <div className="search-wallet-widgets panel display-none">
             <div className="panel-heading">
               <div className="panel-actions">
                 <div className="input-search input-group-sm">
diff --git a/react/src/components/dashboard/dashboard.js b/react/src/components/dashboard/dashboard.js
old mode 100644
new mode 100755
index 06c69fe..ca866c1
--- a/react/src/components/dashboard/dashboard.js
+++ b/react/src/components/dashboard/dashboard.js
@@ -28,7 +28,7 @@ class Dashboard extends React.Component {
     document.body.className = '';
 
     return (
-      <div style={{ height: '100%' }}>
+      <div className='full-height'>
         <div
           className={ this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : '' }
           id="section-dashboard">
diff --git a/react/src/components/dashboard/dashboard.scss b/react/src/components/dashboard/dashboard.scss
old mode 100644
new mode 100755
index 863428a..1a27d14
--- a/react/src/components/dashboard/dashboard.scss
+++ b/react/src/components/dashboard/dashboard.scss
@@ -1,3 +1,63 @@
-.dashboard {
+.full-height {
+  height: 100%;
+}
 
+.text-align-center {
+  text-align: center;
+}
+
+.display-none {
+  display: none !important;
+}
+
+.margin-top-30 {
+  margin-top: 30px;
+}
+
+ jumblr.js
+.jumblr-header {
+  font-size: 24px;
+  text-align: center;
+}
+
+// loginModal.js
+.color-white {
+  color: #fff;
+}
+
+//navbar.js
+.padding-top-16 {
+  padding-top: 16px !important;
+}
+
+//notifications.js
+.modal-body-container {
+  height: 590px;
+}
+
+.panel-body-container {
+  height: 500px;
+  overflow-y: scroll;
+}
+
+//walletsBalance.js
+.font-weight-600 {
+  font-weight: 600;
+}
+
+.font-size-22 {
+  font-size: 22px;
+}
+
+//walletBasiliskConnection.js
+.wallet-send-header {
+  border-radius: 3px 3px 0 0;
+}
+
+.no-margin {
+  margin: 0 !important;
+}
+
+.no-padding {
+  padding: 0 !important;
 }
\ No newline at end of file
diff --git a/react/src/components/dashboard/edex.js b/react/src/components/dashboard/edex.js
old mode 100644
new mode 100755
index fd2d6e8..3949337
--- a/react/src/components/dashboard/edex.js
+++ b/react/src/components/dashboard/edex.js
@@ -4,7 +4,7 @@ import { translate } from '../../translate/translate';
 class EDEX extends React.Component {
   render() {
     return (
-      <div className="page" style={{ marginLeft: '0px' }}>
+      <div className="page margin-left-0">
         <div className="page-content" id="section-easydex">
           <h2>Coming Soon!</h2>
         </div>
diff --git a/react/src/components/dashboard/jumblr.js b/react/src/components/dashboard/jumblr.js
old mode 100644
new mode 100755
index fbe0577..22c5dd4
--- a/react/src/components/dashboard/jumblr.js
+++ b/react/src/components/dashboard/jumblr.js
@@ -31,16 +31,16 @@ class Jumblr extends React.Component {
 
   render() {
     return (
-      <div className="page" style={{ marginLeft: '0' }}>
+      <div className="page margin-left-0">
         <WalletsHeader activeSection="jumblr" />
-        <div className="page-content" id="section-jumblr" style={{ marginTop: '30px' }}>
+        <div className="page-content" id="section-jumblr margin-top-30">
           <div className="row" id="jumblr_dashboard">
             <div className="col-xs-12" id="jumblr_testing_alert">
               <div className="alert alert-danger" role="alert">
                 <button type="button" className="close" data-dismiss="alert" aria-label="Close">
                   <span aria-hidden="true">×</span>
                 </button>
-                <span style={{ fontSize: '24px', textAlign: 'center' }}>
+                <span className="jumblr-header">
                   <i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NOTICE') }
                 </span>
                 <br />
@@ -53,7 +53,7 @@ class Jumblr extends React.Component {
                 <button type="button" className="close" data-dismiss="alert" aria-label="Close">
                   <span aria-hidden="true">×</span>
                 </button>
-                <span style={{ fontSize: '24px', textAlign: 'center' }}>
+                <span className="jumblr-header">
                   <i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NEED_NATIVE') }
                 </span>
                 <br />
diff --git a/react/src/components/dashboard/loginModal.js b/react/src/components/dashboard/loginModal.js
old mode 100644
new mode 100755
index 95ed2d1..064ed4a
--- a/react/src/components/dashboard/loginModal.js
+++ b/react/src/components/dashboard/loginModal.js
@@ -76,7 +76,7 @@ class LoginModal 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
diff --git a/react/src/components/dashboard/navbar.js b/react/src/components/dashboard/navbar.js
old mode 100644
new mode 100755
index 18f1779..3f86583
--- a/react/src/components/dashboard/navbar.js
+++ b/react/src/components/dashboard/navbar.js
@@ -81,7 +81,7 @@ class Navbar extends React.Component {
         <div className="navbar-container container-fluid">
           <div className="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
             <ul className="nav navbar-toolbar">
-              <li className="hidden-float" id="toggleMenubar" style={{ display: 'none' }}>
+              <li className="hidden-float display-none" id="toggleMenubar">
                 <a role="button">
                   <i className="icon hamburger hamburger-arrow-left">
                     <span className="sr-only">{ translate('INDEX.TOGGLE_MENUBAR') }</span>
@@ -100,8 +100,7 @@ class Navbar extends React.Component {
                 </a>
               </li>
               <li
-                className={ this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu' }
-                style={{ display: 'none' }}>
+                className={'display-none ' + (this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu') }>
                 <a id="nav-jumblr" onClick={ () => this.dashboardChangeSection('jumblr') }>
                   <i className="site-menu-icon" aria-hidden="true"></i> Jumblr
                 </a>
@@ -122,8 +121,7 @@ class Navbar extends React.Component {
                 <a
                   role="menuitem"
                   id="btn_edexcoin_addcoin"
-                  style={{ paddingBottom: '10px', paddingTop: '16px' }}
-                  className="pointer"
+                  className="pointer padding-bottom-10 padding-top-16"
                   onClick={ this.toggleAddCoinModal }>
                   <span>
                     <img src="assets/images/icons/activatecoin.png" alt={ translate('INDEX.ADD_COIN') } />
diff --git a/react/src/components/dashboard/notifications.js b/react/src/components/dashboard/notifications.js
old mode 100644
new mode 100755
index eb99751..5662aa2
--- a/react/src/components/dashboard/notifications.js
+++ b/react/src/components/dashboard/notifications.js
@@ -109,7 +109,7 @@ class Notifications 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">
                     <ul className="nav nav-tabs nav-tabs-line" role="tablist">
                       <li className={ this.state.activeTab === 0 ? 'active' : 'pointer' } role="presentation">
@@ -134,7 +134,7 @@ class Notifications extends React.Component {
                         </a>
                       </li>
                     </ul>
-                    <div className="panel-body" style={{ height: '500px', overflowY: 'scroll' }}>
+                    <div className="panel-body panel-body-container">
                       <div className="tab-content">
                         <div
                           className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }
diff --git a/react/src/components/dashboard/walletsBalance.js b/react/src/components/dashboard/walletsBalance.js
old mode 100644
new mode 100755
index 074a7d6..5110aff
--- a/react/src/components/dashboard/walletsBalance.js
+++ b/react/src/components/dashboard/walletsBalance.js
@@ -97,7 +97,7 @@ class WalletsBalance extends React.Component {
                 <h4>{ translate('INDEX.ACTIVATING_WALLET_RT') }</h4>
                 <p id="edexcoin-wallet-waitingrt-alert-text">{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p>
                 <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p>
-                <p style={{ fontWeight: '600' }}>{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
+                <p className="font-weight-600">{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
               </div>
 
               <div role="alert" className="alert alert-info alert-dismissible" id="edexcoin-wallet-waitingcache-alert">
@@ -107,7 +107,7 @@ class WalletsBalance extends React.Component {
                 <h4>{ translate('INDEX.FETCHING_COIN_DATA') }</h4>
                 <p id="edexcoin-wallet-waitingcache-alert-text">{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p>
                 <p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p>
-                <p style={{ fontWeight: '600' }}>{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
+                <p className="font-weight-600">{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p>
               </div>
             </div>
             <div
@@ -120,7 +120,7 @@ class WalletsBalance extends React.Component {
                       <div className="pull-left padding-vertical-10">
                         <i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.BALANCE')}
                       </div>
-                      <span className="pull-right padding-top-10" style={{ fontSize: '22px' }}>
+                      <span className="pull-right padding-top-10 font-size-22">
                         { this.renderBalance('main') } { this.props.ActiveCoin.coin }
                       </span>
                     </div>
@@ -139,7 +139,7 @@ class WalletsBalance extends React.Component {
                       <div className="pull-left padding-vertical-10">
                         <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" style={{ fontSize: '22px' }}>
+                      <span className="pull-right padding-top-10 font-size-22">
                         { this.renderBalance('interest') } { this.props.ActiveCoin.coin }
                       </span>
                     </div>
@@ -158,7 +158,7 @@ class WalletsBalance extends React.Component {
                       <div className="pull-left padding-vertical-10">
                         <i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TOTAL_BALANCE') }
                       </div>
-                      <span className="pull-right padding-top-10" style={{ fontSize: '22px' }}>
+                      <span className="pull-right padding-top-10 font-size-22">
                         { this.renderBalance('total') } { this.props.ActiveCoin.coin }
                       </span>
                     </div>
diff --git a/react/src/components/dashboard/walletsBasiliskConnection.js b/react/src/components/dashboard/walletsBasiliskConnection.js
old mode 100644
new mode 100755
index 1579924..3e67a0b
--- a/react/src/components/dashboard/walletsBasiliskConnection.js
+++ b/react/src/components/dashboard/walletsBasiliskConnection.js
@@ -27,16 +27,16 @@ class WalletsBasiliskConnection extends React.Component {
           <div className="modal show" id="RefreshBasiliskConnectionsMdl" aria-hidden="false" role="dialog">
             <div className="modal-dialog modal-center modal-md">
               <div className="modal-content">
-                <div className="modal-header bg-orange-a400 wallet-send-header" style={{ borderRadius: '3px 3px 0 0' }}>
+                <div className="modal-header bg-orange-a400 wallet-send-header">
                   <h4 className="modal-title white">
-                    <span className="icon fa-refresh" style={{ margin: '0' }}></span> { translate('INDEX.REFRESHING_BASILISK_NET') }...
+                    <span className="icon fa-refresh no-margin"></span> { translate('INDEX.REFRESHING_BASILISK_NET') }...
                   </h4>
                   <button type="button" className="close btn-close" aria-label="Close" onClick={ this.basiliskConnectionAction }>
                     <span aria-hidden="true">&times;</span>
                     <span className="sr-only">{ translate('INDEX.CLOSE') }</span>
                   </button>
                 </div>
-                <div className="modal-body" style={{ textAlign: 'center' }}>
+                <div className="modal-body text-align-center">
                   <div className="loader-wrapper active">
                     <div className="loader-layer loader-blue">
                       <div className="loader-circle-left">
@@ -81,7 +81,7 @@ class WalletsBasiliskConnection extends React.Component {
                   <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>
-                  <pre id="basilisk-connections-refresh-status-output" style={{ padding: '0' }}>
+                  <pre id="basilisk-connections-refresh-status-output no-padding">
                   { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? 'Failed: ' + this.props.Dashboard.connectedNotaries.failedToConnectNodes : null }
                   </pre>
                 </div>
diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss
index af3a1d2..deaa2a2 100644
--- a/react/src/styles/index.scss
+++ b/react/src/styles/index.scss
@@ -1,4 +1,6 @@
 @import '../components/addcoin/addcoin.scss';
+@import '../components/dashboard/dashboard.scss';
+
 @import '../assets/global/css/bootstrap.min.css';
 @import '../assets/global/css/bootstrap-extend.min.css';
 @import '../assets/global/css/alertify.css';
diff --git a/react/www/index.html b/react/www/index.html
index b9e5c06..587c590 100644
--- a/react/www/index.html
+++ b/react/www/index.html
@@ -17,6 +17,6 @@
 	<body id="body" class="page-login layout-full page-dark">
         <!-- style="opacity: 0; height: 1px; width: 1px" -->
         <input type="text" id="js-copytextarea" style="opacity: 0; height: 10px; width: 200px" />
-		<div id="app" style="height: 100%"></div>
+		<div id="app" class="full-height"></div>
 	</body>
 </html>

From 8813c576ef00eebd948f706a23820bc78a263c87 Mon Sep 17 00:00:00 2001
From: petitPapillon <mail@mail.com>
Date: Sun, 28 May 2017 10:59:47 +0200
Subject: [PATCH 2/2] Extract inline css - dashboard pages

---
 react/src/components/dashboard/dashboard.js   | 2 +-
 react/src/components/dashboard/dashboard.scss | 6 +++---
 react/src/components/dashboard/jumblr.js      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/react/src/components/dashboard/dashboard.js b/react/src/components/dashboard/dashboard.js
index ca866c1..cd3dde7 100755
--- a/react/src/components/dashboard/dashboard.js
+++ b/react/src/components/dashboard/dashboard.js
@@ -28,7 +28,7 @@ class Dashboard extends React.Component {
     document.body.className = '';
 
     return (
-      <div className='full-height'>
+      <div className="full-height">
         <div
           className={ this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : '' }
           id="section-dashboard">
diff --git a/react/src/components/dashboard/dashboard.scss b/react/src/components/dashboard/dashboard.scss
index 1a27d14..9010d71 100755
--- a/react/src/components/dashboard/dashboard.scss
+++ b/react/src/components/dashboard/dashboard.scss
@@ -14,7 +14,7 @@
   margin-top: 30px;
 }
 
- jumblr.js
+// jumblr.js
 .jumblr-header {
   font-size: 24px;
   text-align: center;
@@ -26,8 +26,8 @@
 }
 
 //navbar.js
-.padding-top-16 {
-  padding-top: 16px !important;
+.navbar-toolbar>li>a.padding-top-16 {
+  padding-top: 16px;
 }
 
 //notifications.js
diff --git a/react/src/components/dashboard/jumblr.js b/react/src/components/dashboard/jumblr.js
index 22c5dd4..7e190ff 100755
--- a/react/src/components/dashboard/jumblr.js
+++ b/react/src/components/dashboard/jumblr.js
@@ -33,7 +33,7 @@ class Jumblr extends React.Component {
     return (
       <div className="page margin-left-0">
         <WalletsHeader activeSection="jumblr" />
-        <div className="page-content" id="section-jumblr margin-top-30">
+        <div className="page-content margin-top-30" id="section-jumblr">
           <div className="row" id="jumblr_dashboard">
             <div className="col-xs-12" id="jumblr_testing_alert">
               <div className="alert alert-danger" role="alert">