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,11 +2,6 @@ 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')

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,20 @@
 
 <script type="text/javascript">
     NewflowUi.focusOnFirstErrorItem();
+    const form = document.querySelector('form');
+    const requiredInputs = Array.from(form.querySelectorAll('input[aria-required="true"]'));
+    const handleDisable = () => {
+        const disableSubmit = requiredInputs.some((i) => i.value.length == 0);
+        const submit = form.querySelector('[type="submit"]');
+
+        if (disableSubmit) {
+            submit.setAttribute('disabled', 'disabled');
+        } else {
+            submit.removeAttribute('disabled');
+        }    
+    }
+
+    requiredInputs.forEach((i) => i.addEventListener('input', handleDisable));
+    handleDisable();
 </script>