diff --git a/src/App.vue b/src/App.vue
index e6380a315..f64aad6aa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,4 +7,5 @@
@import "@/styles/common-styles.scss";
@import "@/styles/common-list-styles.scss";
@import "@/styles/common-typography-styles.scss";
+ @import "@/styles/error-styles.scss";
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 2df7ee70f..33a7e6a70 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -9,10 +9,11 @@
FORM VALIDATION TEST
NOTE: This page is testing functionality only; styling will not match Figma mocks.
-
+
How many chips are we repairing? (Required)
+
+
@@ -292,7 +294,7 @@ export default {
// passwordConfirmation: Yup.string()
// .required()
// .oneOf([Yup.ref("password")], "Passwords do not match"),
- }).test('repair-replace-conflict',
+ }).test('repair-replace-conflict',
null, // need to pass null as error message so it won't get added to list of errors
function(value) {
// whole form test
@@ -352,7 +354,4 @@ export default {
.form-test-invalid {
opacity: 0.5;
}
- .has-error {
- border: 1px solid red;
- }
-
\ No newline at end of file
+
diff --git a/src/styles/error-styles.scss b/src/styles/error-styles.scss
new file mode 100644
index 000000000..c2c6c3fea
--- /dev/null
+++ b/src/styles/error-styles.scss
@@ -0,0 +1,10 @@
+.has-error {
+ .list-button,
+ .list-card,
+ .list-button-horizontal {
+ color: $red;
+ label {
+ border: 1px solid $red;
+ }
+ }
+}