From e2e7f194b48ada80ab29ebd6853ad766747ed261 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 08:57:23 -0500
Subject: [PATCH] CSR-262 validation styling updates.

---
 .../button-question/button-question.vue            |  2 +-
 src/layouts/component-test/component-test.vue      |  1 -
 src/layouts/form-test/form-test.vue                |  3 ++-
 src/styles/common-error-styles.scss                | 14 +++++++++-----
 src/ux-components/button-main/button-main.vue      |  2 +-
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 5df9531df..b3ea56043 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -37,7 +37,7 @@
           </div>
       </fieldset>
     </div>
-    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
+    <div class="row mt-2 form-test-error" v-if="!suppressError">
         <error-message :name="groupName"></error-message>
     </div>
   </div>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 42d00a906..43d67533f 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -18,7 +18,6 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
-        <p class="m-0">Sample radio button group</p>
       </div>
     </div>
     <div class="row">
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 1e6d0d7b2..f12abb261 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -8,7 +8,7 @@
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
           v-slot="{ values, meta, errors }"
-        >        
+        >
             <damageLocationQuestion
               ref="damageLocation"
               v-model="selectedDamageLocations"
@@ -20,6 +20,7 @@
               :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
             />
             <alert
+              class="my-3"
               v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
               alertClass="alert-danger"
               alertHeadline="You'll need to schedule separate appointments"
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 491d6d926..71ae4f2f3 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,18 +1,22 @@
 .has-error {
   &.list-button,
-  &.list-card,
-  &.list-button-horizontal {
+  &.list-card {
     border: 1px solid transparent;
-    box-shadow: 0 0 0 1px $red;
     color: $red;
     label {
-      box-shadow: 0 0 0 2.5px $red;
+      border: 1px solid $red;
       border-radius: .5rem;
     }
   }
   input[type=checkbox]:focus + label,
   input[type=radio]:checked + label {
-    box-shadow: 0 0 0 2.5px transparent;
+    box-shadow: 0 0 0 2.5px transparent !important;
+  }
+  &.list-button-horizontal {
+    color: $red;
+    label {
+      border: 1px solid $red;
+    }
   }
 }
 
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index c916ab12b..e4a3e6acb 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     :aria-disabled="isDisabled"
-    class="btn d-flex align-items-center py-3 px-2 delay"
+    class="btn d-flex align-items-center py-3 px-4 delay"
     :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >