fit the normal transactions into the tutorial mode.

diff --git a/src/features/shared/components/PageTitle/PageTitle.scss b/src/features/shared/components/PageTitle/PageTitle.scss
index 30ef04b..86b4f3d 100644 (file)
--- a/src/features/shared/components/PageTitle/PageTitle.scss
+++ b/src/features/shared/components/PageTitle/PageTitle.scss
@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   left: $sidebar-width;
-  z-index: 100;
+  z-index: 99;
   position:fixed;
   right:0;
   code {

diff --git a/src/features/transactions/components/New/New.jsx b/src/features/transactions/components/New/New.jsx
index b41a96a..9bcba47 100644 (file)
--- a/src/features/transactions/components/New/New.jsx
+++ b/src/features/transactions/components/New/New.jsx
@@ -85,37 +85,41 @@ class Form extends React.Component {
 
         <div className={`${styles.mainContainer} flex-container`}>
 
-          <div className={styles.btnGroup} >
-            <div className={'btn-group'} role='group'>
-              <button
-                className={`btn btn-default ${this.state.showAdvanceTx ? null : 'active'}`}
-                onClick={(e) => this.showForm(e, 'normal')}>
-                {lang === 'zh' ? '简单交易' : 'Normal'}
-                </button>
-              <button
-                className={`btn btn-default ${this.state.showAdvanceTx ? 'active' : null}`}
-                onClick={(e) => this.showForm(e, 'advanced')}>
-                {lang === 'zh' ? '高级交易' : 'Advanced'}
-                </button>
+          <div className={styles.center}>
+            <div className={styles.btnGroup} >
+              <div className={'btn-group'} role='group'>
+                <button
+                  className={`btn btn-default ${this.state.showAdvanceTx ? null : 'active'}`}
+                  onClick={(e) => this.showForm(e, 'normal')}>
+                  {lang === 'zh' ? '简单交易' : 'Normal'}
+                  </button>
+                <button
+                  className={`btn btn-default ${this.state.showAdvanceTx ? 'active' : null}`}
+                  onClick={(e) => this.showForm(e, 'advanced')}>
+                  {lang === 'zh' ? '高级交易' : 'Advanced'}
+                  </button>
+              </div>
             </div>
+
+              {!this.state.showAdvanceTx &&
+              <NormalTxForm
+                lang={this.props.lang}
+                btmAmountUnit={this.props.btmAmountUnit}
+                asset={this.props.asset}
+                balances ={this.props.balances}
+                handleKeyDown={this.handleKeyDown}
+                tutorialVisible={this.props.tutorialVisible}
+              /> }
+
+              {this.state.showAdvanceTx &&
+              <AdvancedTxForm
+                lang={this.props.lang}
+                btmAmountUnit={this.props.btmAmountUnit}
+                asset={this.props.asset}
+                handleKeyDown={this.handleKeyDown}
+              />}
           </div>
 
-            {!this.state.showAdvanceTx &&
-            <NormalTxForm
-              lang={this.props.lang}
-              btmAmountUnit={this.props.btmAmountUnit}
-              asset={this.props.asset}
-              balances ={this.props.balances}
-              handleKeyDown={this.handleKeyDown}
-            /> }
-
-            {this.state.showAdvanceTx &&
-            <AdvancedTxForm
-              lang={this.props.lang}
-              btmAmountUnit={this.props.btmAmountUnit}
-              asset={this.props.asset}
-              handleKeyDown={this.handleKeyDown}
-            />}
 
           <Tutorial types={['TutorialForm']} advTx={this.state.showAdvanceTx}/>
         </div>
@@ -139,6 +143,7 @@ const mapStateToProps = (state) => {
     asset: Object.keys(state.asset.items).map(k => state.asset.items[k]),
     normalform: getValues(state.form.NormalTransactionForm),
     advform: getValues(state.form.AdvancedTransactionForm),
+    tutorialVisible: !state.tutorial.location.isVisited
   }
 }
 

diff --git a/src/features/transactions/components/New/New.scss b/src/features/transactions/components/New/New.scss
index 1566433..1cfb7d2 100644 (file)
--- a/src/features/transactions/components/New/New.scss
+++ b/src/features/transactions/components/New/New.scss
@@ -2,12 +2,17 @@
   background: $background-color;
   padding: 0 $gutter-size;
   margin-top: $title-height;
+  display: flex;
+  flex-direction: row;
+}
+
+.center{
+  margin: 0 auto;
 }
 
 .content {
   min-width: 400px;
   width: 55%;
-  margin: 0 auto;
 }
 
 .container{
@@ -82,8 +87,20 @@
   margin-bottom: $gutter-size;
 }
 
+.tutorialItem{
+  display: flex;
+  position: relative;
+  flex-direction: column;
+
+  >div:first-of-type{
+    width: 60%;
+    min-width: 350px;
+  }
+}
+
 .item{
   display: flex;
+  position: relative;
 
   >div:first-of-type{
     width: 60%;
@@ -132,7 +149,7 @@
 
 .receiverBtn{
   position: absolute;
-  right: 33px;
+  right: -27px;
   margin-top: 32px;
   width: 25px;
   height: 25px;
@@ -140,3 +157,7 @@
   line-height: 20px;
   padding: 1px 5px 0px 5px;
 }
+
+.borderBottom{
+  border-bottom: 1px solid $border-color;
+}

diff --git a/src/features/transactions/components/New/NormalTransactionForm.jsx b/src/features/transactions/components/New/NormalTransactionForm.jsx
index 6f1199e..98e20d0 100644 (file)
--- a/src/features/transactions/components/New/NormalTransactionForm.jsx
+++ b/src/features/transactions/components/New/NormalTransactionForm.jsx
@@ -165,9 +165,9 @@ class NormalTxForm extends React.Component {
           onSubmit={e => this.confirmedTransaction(e, assetDecimal)}
           {...disableAutocomplete}
         >
-          <div>
+          <div className={styles.borderBottom}>
             <label className={styles.title}>{lang === 'zh' ? '从' : 'From'}</label>
-            <div className={`${styles.mainBox} ${styles.item}`}>
+            <div className={`${styles.mainBox} ${this.props.tutorialVisible? styles.tutorialItem: styles.item}`}>
               <ObjectSelectorField
                 key='account-selector-field'
                 keyIndex='normaltx-account'
@@ -201,7 +201,7 @@ class NormalTxForm extends React.Component {
             <div className={styles.mainBox}>
             {receivers.map((receiver, index) =>
               <div
-                className={styles.item}
+                className={this.props.tutorialVisible? styles.tutorialItem: styles.item}
                 key={receiver.id.value}>
                 <TextField title={lang === 'zh' ? '地址' : 'Address'} fieldProps={{
                   ...receiver.address,

diff --git a/src/features/tutorial/components/TutorialHeader/TutorialHeader.scss b/src/features/tutorial/components/TutorialHeader/TutorialHeader.scss
index 901617e..6e14241 100644 (file)
--- a/src/features/tutorial/components/TutorialHeader/TutorialHeader.scss
+++ b/src/features/tutorial/components/TutorialHeader/TutorialHeader.scss
@@ -6,7 +6,7 @@
   top: 0px;
   left: $sidebar-width;
   right: 0;
-  z-index: 101;
+  z-index: 100;
 }
 
 .collapsed {