CORE-986: Fix color contrast of signup heading

[CORE-986]
New color contrast ratio is 5.
Also moved the disabled-submit styling to CSS
Also added some JS to control the disabled state of the Continue button on login.

Author: RoyEJohnson

app/assets/javascripts/newflow/newflow_ui.js.coffee

@@ -2,17 +2,11 @@ NewflowUi = do () ->
   disableButton: (selector) ->
     $(selector).attr('disabled', 'disabled')
     $(selector).addClass('ui-state-disabled ui-button-disabled')
-    $(selector).css({
-        'background': '#ccc',
-        'box-shadow': 'none',
-        'color': '#666'
-      })
 
   enableButton: (selector) ->
     $(selector).removeAttr('disabled')
     $(selector).removeClass('ui-state-disabled ui-button-disabled')
     $(selector).button()
-    $(selector).css({ 'background': '', 'box-shadow': '', 'color': '' })
 
   renderAndOpenDialog: (html_id, content, modal_options = {}) ->
     if $('#' + html_id).exists() then $('#' + html_id).remove()

app/assets/stylesheets/newflow.scss

@@ -645,7 +645,7 @@ $very-narrow: 37rem * $scale-factor;
             padding-right: 0;
 
             background-color: #f1f1f1;
-            color: #c1c1c1;
+            color: #666666;
 
             @include title-font(2.4rem);
             text-align: center;
@@ -745,10 +745,12 @@ $very-narrow: 37rem * $scale-factor;
 
     input[type=submit] {
         &:disabled {
+            background-color: #ccc;
+            box-shadow: none;
+            color: #666;
             opacity: 0.85;
         }
 
-        -webkit-appearance: none;
         border-radius: 0;
     }
 }

app/views/newflow/login/login_form.html.erb

@@ -92,7 +92,8 @@
                     <%= f.submit I18n.t(:"login_signup_form.continue_button"),
                                 disable_with: I18n.t(:"login_signup_form.continue_button"),
                                 class: 'primary',
-                                data: { ga_category: 'Login', ga_action: 'Click', ga_label: 'Email' }
+                                data: { ga_category: 'Login', ga_action: 'Click', ga_label: 'Email' },
+                                disabled: 'disabled'
                     %>
                 </div>
 
@@ -117,5 +118,18 @@
 
 <script type="text/javascript">
     NewflowUi.focusOnFirstErrorItem();
+    const $requiredInputs = $('form input[aria-required="true"]');
+    const handleDisable = () => {
+        const disableSubmit = $requiredInputs.toArray().some((i) => i.value.length == 0);
+
+        if (disableSubmit) {
+            NewflowUi.disableButton('form [type="submit"]');
+        } else {
+            NewflowUi.enableButton('form [type="submit"]');
+        }    
+    }
+
+    $requiredInputs.on('input', handleDisable);
+    handleDisable();
 </script>