From 2309e53fe638fa415dc0e3f0f3fc1b02e96a16a5 Mon Sep 17 00:00:00 2001
From: Jannis R <mail@jannisr.de>
Date: Thu, 10 Nov 2016 13:54:09 +0100
Subject: [PATCH] sms verification: polish UI, linting issues :shirt:

---
 .../SMSVerification/GatherData/gatherData.js       | 14 ++++++++++----
 .../SendConfirmation/sendConfirmation.css          |  5 +++--
 .../SMSVerification/SendRequest/sendRequest.css    |  1 +
 js/src/views/Account/account.js                    |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/js/src/modals/SMSVerification/GatherData/gatherData.js b/js/src/modals/SMSVerification/GatherData/gatherData.js
index 9b55fbfe5..72c0c3061 100644
--- a/js/src/modals/SMSVerification/GatherData/gatherData.js
+++ b/js/src/modals/SMSVerification/GatherData/gatherData.js
@@ -45,8 +45,6 @@ export default class GatherData extends Component {
 
   state = {
     init: true,
-    isVerified: null,
-    hasRequested: null,
     numberIsValid: null,
     consentGiven: false
   };
@@ -63,6 +61,7 @@ export default class GatherData extends Component {
 
   render () {
     const { numberIsValid } = this.state;
+    const { isVerified, hasRequested } = this.props.data;
 
     // TODO: proper legal text
     return (
@@ -74,12 +73,14 @@ export default class GatherData extends Component {
           label={ 'phone number' }
           hint={ 'the sms will be sent to this number' }
           error={ numberIsValid ? null : 'invalid number' }
+          disabled={ isVerified || hasRequested }
           onChange={ this.numberOnChange }
           onSubmit={ this.numberOnSubmit }
         />
         <Checkbox
           className={ styles.spacing }
           label={ 'I agree that my number will be stored.' }
+          disabled={ isVerified || hasRequested }
           onCheck={ this.consentOnChange }
         />
       </Form>
@@ -123,7 +124,12 @@ export default class GatherData extends Component {
   }
 
   renderRequested () {
-    const { hasRequested } = this.props.data;
+    const { isVerified, hasRequested } = this.props.data;
+
+    // If the account is verified, don't show that it has requested verification.
+    if (isVerified) {
+      return null;
+    }
 
     if (hasRequested) {
       return (
@@ -203,7 +209,7 @@ export default class GatherData extends Component {
   }
 
   onChange = () => {
-    const { fee, isVerified, hasRequested } = this.props.data;
+    const { fee, isVerified } = this.props.data;
     const { numberIsValid, consentGiven } = this.state;
 
     if (fee && numberIsValid && consentGiven && isVerified === false) {
diff --git a/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.css b/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.css
index ac956063c..d2395f24d 100644
--- a/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.css
+++ b/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.css
@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
-.spacing {
-  margin-top: 1.5em;
+
+.centered {
+  text-align: center;
 }
diff --git a/js/src/modals/SMSVerification/SendRequest/sendRequest.css b/js/src/modals/SMSVerification/SendRequest/sendRequest.css
index 563bf01ad..d2395f24d 100644
--- a/js/src/modals/SMSVerification/SendRequest/sendRequest.css
+++ b/js/src/modals/SMSVerification/SendRequest/sendRequest.css
@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .centered {
   text-align: center;
 }
diff --git a/js/src/views/Account/account.js b/js/src/views/Account/account.js
index 8ddd2d989..24c0b44cb 100644
--- a/js/src/views/Account/account.js
+++ b/js/src/views/Account/account.js
@@ -105,7 +105,7 @@ class Account extends Component {
       <Button
         key='sms-verification'
         icon={ <VerifyIcon /> }
-        label='Verify via SMS'
+        label='Verify'
         onClick={ this.openVerification } />,
       <Button
         key='editmeta'