Merge pull request #118 from SuperNETorg/extract-inline-css

Extract inline css - dashboard pages

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>

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"

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">

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">

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
+.navbar-toolbar>li>a.padding-top-16 {
+  padding-top: 16px;
+}
+
+//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;
 }

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>

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 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">
                 <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 />

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

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' }
+                className={'display-none ' + (this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu') }>
-                style={{ display: 'none' }}>
                 <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 padding-bottom-10 padding-top-16"
-                  className="pointer"
                   onClick={ this.toggleAddCoinModal }>
                   <span>
                     <img src="assets/images/icons/activatecoin.png" alt={ translate('INDEX.ADD_COIN') } />

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' }

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>

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>

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';

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>