From 9f88939c78df12a2a5f8368e08cc45eaa18e3e1b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 17 May 2022 16:18:49 -0400
Subject: [PATCH] Multiple QA fixes.

Fixes:
CSR-578, spacing between copy and vin-info toggle
CSR-101, padding incorrect on input
---
 .../textbox-question/textbox-question.vue            |  3 ++-
 .../vin-lookup/vin-information/vin-information.vue   |  2 +-
 src/layouts/vin-lookup/vin-lookup.vue                |  2 +-
 src/styles/common-error-styles.scss                  | 12 +++++++-----
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 7f43c1e58..194ae34fc 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -19,7 +19,7 @@
 			:validationRules="validationRules"
 		/>
 		<div v-show="errorMessage" class="row my-2 form-test-error">
-			<span role="alert">{{ errorMessage }}</span>
+			<span class="d-inline-flex mt-2" role="alert">{{ errorMessage }}</span>
 		</div>
 	</div>
 </template>
@@ -159,6 +159,7 @@ export default {
 		border: 1px solid $gray-500;
 		border-radius: .5rem;
 		min-height: 3rem;
+		padding: 12px 16px;
 		&::placeholder {
 			color: $gray-500;
 		}
diff --git a/src/layouts/vin-lookup/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue
index 91cee616f..e6fa5c8fb 100644
--- a/src/layouts/vin-lookup/vin-information/vin-information.vue
+++ b/src/layouts/vin-lookup/vin-information/vin-information.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vin-information">
+  <div class="vin-information mt-2">
     <div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
       <textLink :text="HeadlineText" linkType="text" href="#!" />
     </div>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index c0308eb38..9d7335f25 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -14,7 +14,7 @@
       />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall">
-        <div class="row my-2">
+        <div class="row mt-2">
           <div class="col">
             <textboxQuestion
               cmsWidgetName="VinNumber"
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 369c39a0e..e714e85cd 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,7 +1,7 @@
 html {
   .has-error {
     &.list-button,
-    &.list-card, 
+    &.list-card,
     &.list-card.list-button {
       color: $red;
       input[type=checkbox]:focus + label,
@@ -16,12 +16,12 @@ html {
         border-radius: 10px;
       }
       label {
-        border: 1px solid $red; 
+        border: 1px solid $red;
       }
       label:hover {
         box-shadow: 0px 0px 0px 4px $red-200;
         border-radius: 10px;
-        border: 1px solid $red; 
+        border: 1px solid $red;
       }
     }
     &.list-button-horizontal {
@@ -114,8 +114,10 @@ html {
     color: $red;
     font-size: .875rem;
     font-weight: 500;
-    height: 1.5rem; 
-    margin-top: .25rem !important; 
+    height: 1.5rem;
+    margin-top: .25rem !important;
+    display: initial;
+    padding-top: .5rem;
   }
 
   .form-test-invalid {