missing toggler element

react/src/components/addcoin/addcoin.js

@@ -69,6 +69,7 @@ class AddCoin extends React.Component {
   }
 
   toggleSyncOnlyMode(index) {
+    console.log(index);
     let _coins = this.state.coins;
 
     _coins[index] = Object.assign({}, _coins[index], {
@@ -355,13 +356,15 @@ class AddCoin extends React.Component {
             </button>
           </div>
           <div className={ _item.mode === '1' || _item.mode === 1 ? 'col-sm-12' : 'hide' }>
-            <div className="pull-left margin-right-10">
-              <input type="checkbox" id="addcoin_sync_only" checked={ _item.syncOnly } />
+            <div className="toggle-box padding-top-3 padding-bottom-10">
+              <span className="pointer">
+                <label className="switch">
+                  <input type="checkbox" checked={ _item.syncOnly } />
+                  <div className="slider" onClick={ () => this.toggleSyncOnlyMode(i) }></div>
+                </label>
+                <div className="toggle-label" onClick={ () => this.toggleSyncOnlyMode(i) }>{ translate('ADD_COIN.SYNC_ONLY') }</div>
+              </span>
             </div>
-            <label
-              className="padding-top-3 padding-bottom-10"
-              htmlFor="addcoin_sync_only"
-              onClick={ () => this.toggleSyncOnlyMode(i) }>{ translate('ADD_COIN.SYNC_ONLY') }</label>
           </div>
         </div>
       );

react/src/components/dashboard/sendCoin.js

@@ -733,13 +733,13 @@ class SendCoin extends React.Component {
       return (
         <div className="row">
           <div className="col-lg-10 margin-bottom-10">
-            <div className="pull-left margin-right-10">
-              <input type="checkbox" id="edexcoin_send_api_type" />
-            </div>
-            <label
-              className="padding-top-3"
-              htmlFor="edexcoin_send_api_type"
-              onClick={ this.toggleSendAPIType }>{ translate('SEND.SEND_VIA') } sendtoaddress API</label>
+            <span className="pointer">
+              <label className="switch">
+                <input type="checkbox" checked={ this.state.sendApiType } />
+                <div className="slider" onClick={ this.toggleSendAPIType }></div>
+              </label>
+              <div className="toggle-label" onClick={ this.toggleSendAPIType }>{ translate('SEND.SEND_VIA') } sendtoaddress API</div>
+            </span>
           </div>
         </div>
       );
@@ -846,16 +846,16 @@ class SendCoin extends React.Component {
                         <strong>{ translate('INDEX.TOTAL') } ({ translate('INDEX.AMOUNT_SM') } - txfee):</strong> <span id="edexcoin_total_value">{ Number(this.state.amount) - Number(this.state.fee) }</span> { this.props.ActiveCoin.coin }
                       </span>
                     </div>
-                    <div className="col-lg-10 margin-top-10">
-                      <div className="pull-left margin-right-10">
-                        <input type="checkbox" id="edexcoin_send_sig" />
-                      </div>
-                      <label
-                        className="padding-top-3"
-                        htmlFor="edexcoin_send_sig"
-                        onClick={ this.toggleSendSig }>{ translate('INDEX.DONT_SEND') }</label>
+                    <div className="col-lg-10 margin-top-30">
+                      <span className="pointer">
+                        <label className="switch">
+                          <input type="checkbox" checked={ this.state.sendSig } />
+                          <div className="slider" onClick={ this.toggleSendSig }></div>
+                        </label>
+                        <div className="toggle-label" onClick={ this.toggleSendSig }>{ translate('INDEX.DONT_SEND') }</div>
+                      </span>
                     </div>
-                    { this.renderUTXOCacheInfo()} 
+                    { this.renderUTXOCacheInfo()}
                     <div className="col-lg-12">
                       <button
                         type="button"
@@ -919,7 +919,7 @@ class SendCoin extends React.Component {
               <div className="panel-heading">
                 <h4 className="panel-title">{ translate('INDEX.TRANSACTION_RESULT') }</h4>
                 <div className={ !this.state.sendSig ? 'hide' : 'center' }>
-                  { translate('INDEX.YOU_PICKED_OPT') } "{ translate('INDEX.DONT_SEND') }"
+                  { translate('SEND.YOU_PICKED_OPT') }
                 </div>
                 <table
                   className="table table-hover table-striped edexcoin_sendto_result"

react/src/styles/index.scss

@@ -323,10 +323,10 @@ body {
   border-radius: 50%;
   position: absolute;
   content: "";
-  height: 22px;
-  width: 22px;
-  left: 4px;
-  bottom: 4px;
+  height: 20px;
+  width: 20px;
+  left: 2px;
+  bottom: 2px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
@@ -335,6 +335,9 @@ body {
 .toggle-label {
   color: #757575;
   display: inline-block;
+  position: relative;
+  top: -12px;
+  left: 8px;
 }
 
 input:checked + .slider {
@@ -346,9 +349,9 @@ input:focus + .slider {
 }
 
 input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
+  -webkit-transform: translateX(16px);
+  -ms-transform: translateX(16px);
+  transform: translateX(16px);
 }
 
 /* Rounded sliders */