blockchain screen text updates (#409)

Author: sadakchap

src/components/Modal/Modal.react.js

@@ -58,14 +58,14 @@ let Modal = (({
     <div style={{textAlign: buttonsInCenter ? 'center' : 'right'}} className={styles.footer}>
       {showCancel ? <Button
         value={cancelText}
-        onClick={onCancel}
+        onClick={!progress ? onCancel : null}
         disabled={!canCancel} /> : null}
       <Button
         primary={true}
         value={confirmText}
         color={buttonColors[type]}
         disabled={!!disabled}
-        onClick={onConfirm}
+        onClick={!progress ? onConfirm : null}
         progress={progress} />
       {
         showContinue === true ?

src/dashboard/BlockchainPage/BlockChainPage.react.js

@@ -160,7 +160,7 @@ class BlockChainPage extends DashboardView {
     return (
       <div>
         <div className={styles.headerRow}>
-          <div className={styles.className}>Class</div>
+          <div className={styles.className}>Classes in Blockchain</div>
           <div></div>
         </div>
         {this.state.blockChainClasses.map((name, idx) => (
@@ -187,11 +187,11 @@ class BlockChainPage extends DashboardView {
     const classes = this.state.classes.filter(name => !this.state.blockChainClasses.includes(name));
 
     return (
-      <div className={styles.content}>
+      <div>
         <div className={styles.fieldset}>
           <div className={styles.legendText}>Blockchain Data Storage</div>
           <div className={styles.descText}>
-            Save your App’s data on the Blockchain Network of your choice 
+            Save your App’s data on the Blockchain Network of your choice.
             <br/> NOTE: This feature is on the alpha version.
           </div>
         </div>
@@ -200,7 +200,7 @@ class BlockChainPage extends DashboardView {
           description="You can only connect to a private Ethereum compatible network in this alpha version. Use this network for development purposes at no cost."
         >
           <Field
-            label={<Label text="BlockChain Network" />}
+            label={<Label text="Blockchain Network" />}
             input={
               <TextInput
                 value="Back4App ETH Development"
@@ -210,7 +210,7 @@ class BlockChainPage extends DashboardView {
             }
           />
           <Field
-            label={<Label text="Balance ETH(Development)" />}
+            label={<Label text="Balance (development eth)" />}
             input={
               this.state.appBalanceLoading ? (
                 <div className={styles.spinnerWrapper}>
@@ -228,10 +228,10 @@ class BlockChainPage extends DashboardView {
         </Fieldset>
         <Fieldset
           legend="Classes in Blockchain"
-          description="After selecting a class, any object created on these classes will be automatically replicated to the Blockchain. Please note that two new fields will be added to these classes’ objects (blockchainStatus and blockchainResult), and it is not permitted to update nor modify blockchain objects."
+          description="Replicate new objects to the Blockchain by selecting their classes below. This operation will add two new fields to these classes (blockchainStatus and blockchainResult), and it is not allowed to update nor modify blockchain objects."
         >
           <Field
-            label={<Label text="Add new Classes at Blockchain" />}
+            label={<Label text="Add a new class to Blockchain" />}
             input={
               <Dropdown
                 placeHolder="Select a class"
@@ -295,7 +295,7 @@ class BlockChainPage extends DashboardView {
     }
 
     return (
-      <div>
+      <div className={styles.content}>
         <LoaderContainer loading={this.state.loading}>
           {this.renderForm()}
           {extra}

src/dashboard/BlockchainPage/BlockChainPage.scss

@@ -39,12 +39,12 @@
   padding: 24px;
 
   & h4 {
-    margin-bottom: 24px;
     color: #000000DE;
     font-weight: 600;
   }
 
   & span {
+    margin-top: 24px;
     font-size: 12px;
     color: #00000099;
   }

src/dashboard/BlockchainPage/MoveToBlockchainModal.react.js

@@ -13,23 +13,21 @@ import React     from 'react';
 import styles    from './BlockChainPage.scss';
 
 export default class MoveToBlockchainModal extends React.Component {
-
   render() {
     let content = (
       <div>
         <div className={styles.modalHeadContent}>
-          <h4>Do you really want to move these classes to Blockchain? This action could take a while.</h4>
-          <span>*This action can only be performed by the App owner.</span>
+          <h4>Do you really want to add this class to the Blockchain?</h4>
         </div>
       </div>
     );
 
     return (
       <Modal
         type={Modal.Types.INFO}
-        title='Move class to Blockchain?'
-        subtitle='This action will move the selected class to Blockchain, and it could take a while.'
-        confirmText='Move selected class to Blockchain'
+        title='Add class to Blockchain?'
+        subtitle='This action will add the selected class to the Blockchain and it can take a while to complete.'
+        confirmText='Add selected class to blockchain'
         onCancel={this.props.onCancel}
         onConfirm={this.props.onConfirm}
         progress={this.props.progress}

src/dashboard/BlockchainPage/RemoveFromBlockchainModal.react.js

@@ -28,13 +28,13 @@ export default class RemoveFromBlockchainModal extends React.Component {
     let content = (
       <div>
         <div className={styles.modalHeadContent}>
-          <h4>Do you really want to delete this class from Back4App ETH Development?</h4>
+          <h4>Do you really want to remove this class from Back4App ETH Development?</h4>
         </div>
         <Field
-          label={<Label text='Type the classname' />}
+          label={<Label text='Type the class name' />}
           input={
             <TextInput
-              placeholder='Classname'
+              placeholder='Class name'
               onChange={(name) => this.setState({ name })}
             />
           }
@@ -47,7 +47,7 @@ export default class RemoveFromBlockchainModal extends React.Component {
         type={Modal.Types.DANGER}
         title='Remove class from blockchain'
         subtitle='This action will remove this class from Back4App ETH Development.'
-        confirmText='Delete'
+        confirmText='Remove'
         disabled={!this.valid()}
         onCancel={this.props.onCancel}
         onConfirm={this.props.onConfirm}