WIP update focus and hover styles.

src/digital-components/phonenumber-question/phonenumber-question.vue

@@ -102,13 +102,13 @@ export default {
         border-radius: 0.5rem;
         border: 1px solid $gray-500;
         height: 48px;
-        &:hover {
-            box-shadow: 0 0 0 4px #9fcee6;
-        }
         &:focus {
             box-shadow: 0 0 0 2.5px $blue;
             outline: none;
         }
+        &:hover {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
     }
 }
 </style>

src/digital-components/textarea-question/textarea-question.vue

@@ -109,13 +109,13 @@ export default {
         border-radius: 0.5rem;
         border: 1px solid $gray-500;
         height: 88px;
-        &:hover {
-            box-shadow: 0 0 0 4px #9fcee6;
-        }
         &:focus {
             box-shadow: 0 0 0 2.5px $blue;
             outline: none;
         }
+        &:hover {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
     }
     p {
         color: $gray-500;

src/layouts/customer-details/customer-details.vue

@@ -51,6 +51,7 @@ import { errorMessages } from "@/constants/error-messages";
 import { routerParams } from "@/router/router-constants/router-params";
 import { required, regex } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
+import { useField, validate } from "vee-validate";
 
 // DEFINE VALIDATION RULES
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@@ -86,6 +87,20 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    setup(props) {
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
+            props.validationRules,
+        );
+
+        return {
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+        };
+    },
     data() {
         return {
             techNotes: "",