From 8ee66f33094948f994a39d37f0e9358bfe6ab002 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 18 Jun 2021 14:56:11 -0400
Subject: [PATCH] Input field and form field error state (#1132)

Fix other small consistencies: password spacing, dropdown error, error messages, pack form order
---
 .../ConfigurePackQueryForm.jsx                     | 14 +++++++-------
 .../forms/ConfigurePackQueryForm/validate.js       |  4 ++--
 frontend/components/forms/FormField/_styles.scss   |  8 ++++++--
 .../components/forms/fields/Dropdown/_styles.scss  |  8 +++++---
 .../forms/fields/InputField/_styles.scss           | 10 +++++-----
 .../forms/fields/InputFieldWithIcon/_styles.scss   | 14 ++++++++++++--
 6 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
index 4eba9b9f0..fda0a0166 100644
--- a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
+++ b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
@@ -138,6 +138,13 @@ export class ConfigurePackQueryForm extends Component {
       <form className={baseClass} onSubmit={handleSubmit}>
         <h2 className={`${baseClass}__title`}>Configuration</h2>
         <div className={`${baseClass}__fields`}>
+          <Dropdown
+            {...fields.logging_type}
+            options={loggingTypeOptions}
+            placeholder="- - -"
+            label="Logging"
+            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--logging`}
+          />
           <InputField
             {...fields.interval}
             inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--frequency`}
@@ -162,13 +169,6 @@ export class ConfigurePackQueryForm extends Component {
             label="Minimum osquery version"
             wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--osquer-vers`}
           />
-          <Dropdown
-            {...fields.logging_type}
-            options={loggingTypeOptions}
-            placeholder="- - -"
-            label="Logging"
-            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--logging`}
-          />
           <InputField
             {...fields.shard}
             inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--shard`}
diff --git a/frontend/components/forms/ConfigurePackQueryForm/validate.js b/frontend/components/forms/ConfigurePackQueryForm/validate.js
index d66145863..a09c6eb68 100644
--- a/frontend/components/forms/ConfigurePackQueryForm/validate.js
+++ b/frontend/components/forms/ConfigurePackQueryForm/validate.js
@@ -10,11 +10,11 @@ const validate = (formData) => {
   }
 
   if (!formData.interval) {
-    errors.interval = "Interval must be present";
+    errors.interval = "Frequency (seconds) must be present";
   }
 
   if (formData.interval && !validateNumericality(formData.interval)) {
-    errors.interval = "Interval must be a number";
+    errors.interval = "Frequency must be a number";
   }
 
   if (!formData.logging_type) {
diff --git a/frontend/components/forms/FormField/_styles.scss b/frontend/components/forms/FormField/_styles.scss
index 132b87363..c18ae9591 100644
--- a/frontend/components/forms/FormField/_styles.scss
+++ b/frontend/components/forms/FormField/_styles.scss
@@ -9,13 +9,17 @@
     margin-bottom: $pad-xsmall;
 
     &--error {
-      color: $ui-error;
+      font-weight: $bold;
     }
   }
 
   &__hint {
+    font-size: $x-small;
+    font-style: italic;
     font-weight: $regular;
-    color: $core-fleet-blue;
+    line-height: 20px;
+    display: inline-block;
+    margin-top: $pad-small;
 
     code {
       color: $core-vibrant-blue;
diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss
index c4a2303ce..d97972eac 100644
--- a/frontend/components/forms/fields/Dropdown/_styles.scss
+++ b/frontend/components/forms/fields/Dropdown/_styles.scss
@@ -7,7 +7,7 @@
     margin-bottom: $pad-xsmall;
 
     &--error {
-      color: $ui-error;
+      font-weight: $bold;
     }
   }
 
@@ -15,8 +15,10 @@
     &--error {
       &.Select {
         .Select-control {
-          border-color: $ui-error;
-          background-color: $ui-error;
+          color: $core-vibrant-red;
+          border: 1px solid $core-vibrant-red;
+          box-sizing: border-box;
+          border-radius: 4px;
         }
 
         .Select-arrow {
diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss
index db8eb6e95..b878991b3 100644
--- a/frontend/components/forms/fields/InputField/_styles.scss
+++ b/frontend/components/forms/fields/InputField/_styles.scss
@@ -25,10 +25,10 @@
   }
 
   &--error {
-    transition: background 150ms ease-in-out, color 150ms ease-in-out;
-    border-color: $ui-error;
-    background-color: $ui-error;
-    color: $core-white;
+    color: $core-vibrant-red;
+    border: 1px solid $core-vibrant-red;
+    box-sizing: border-box;
+    border-radius: 4px;
 
     &:focus {
       border-bottom-color: $ui-error;
@@ -55,7 +55,7 @@
     margin-bottom: $pad-xsmall;
 
     &--error {
-      color: $ui-error;
+      font-weight: $bold;
     }
   }
 
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
index f1bcfcd66..eed142e03 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
+++ b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
@@ -15,7 +15,9 @@
     }
 
     &--error {
-      color: $ui-error;
+      border: 1px solid $core-vibrant-red;
+      box-sizing: border-box;
+      border-radius: 4px;
     }
   }
 
@@ -41,7 +43,14 @@
     }
 
     &--error {
-      border-bottom-color: $ui-error;
+      color: $core-vibrant-red;
+      border: 1px solid $core-vibrant-red;
+      box-sizing: border-box;
+      border-radius: 4px;
+    }
+
+    &--password {
+      letter-spacing: 4px;
     }
   }
 
@@ -53,6 +62,7 @@
 
   &__errors {
     font-size: $x-small;
+    font-weight: $bold;
   }
 
   &__hint {