disabled changing email feature at user account settings and small fixes to styles of disabled fields

Author: maxceem

src/routes/settings/routes/system/components/ChangeEmailForm.jsx

@@ -140,7 +140,13 @@ class ChangeEmailForm extends React.Component {
               }}
               disabled={isEmailChanging}
               ref={(ref) => this.emailRef = ref}
+              /* disable email field for now, as backend doesn't support returnUrl yet
+                 and verification link which is sent to email leads to Community app, instead of Connect app for now */
+              disabled
             />
+            <div className="email-hint">
+              To change the email please <a href="mailto:support@topcoder.com">get in touch with support</a>
+            </div>
             { isFocused && isCheckingCurrentEmail && (
               <div className="field-status">
                 Verifying email

src/routes/settings/routes/system/components/ChangeEmailForm.scss

@@ -55,6 +55,11 @@
         min-width: 350px;
         position: relative;
 
+        input[disabled],
+        input[disabled]:hover {
+          border: 1px solid $tc-gray-neutral-dark;
+        }
+
         @media screen and (max-width: $screen-md - 1px) {
           max-width: none;
           min-width: 0;
@@ -118,5 +123,27 @@
         filter: none;
       }
     }
+
+    .email-hint {
+      @include roboto;
+      color: $tc-gray-50;
+      font-size: 13px;
+      max-width: 450px;
+      line-height: 20px;
+      text-align: right;
+      margin-top: 5px;
+  
+      > a,
+      > a:hover,
+      > a:active,
+      > a:visited {
+        color: $tc-dark-blue-110;
+      }
+  
+      @media screen and (max-width: $screen-md - 1px) {
+        width: 100%;
+        max-width: none;
+      }
+    }
   }
 }

src/routes/settings/routes/system/components/SystemSettingsForm.scss

@@ -64,6 +64,10 @@
           background-color: $tc-gray-neutral-light;
           border: 1px solid $tc-gray-neutral-dark;
           border-radius: 4px;
+
+          &[disabled]:hover {
+            border: 1px solid $tc-gray-neutral-dark;
+          }
         }
       }
     }