Merge pull request #2743 from Safelite/CASH-1319-ui-bug-fixes

CASH-1319 UI bug fixes

public/css/hop-styling.css

@@ -37,7 +37,7 @@ body .headerlinecontainer .headerline1 {
   line-height: 32px;
   font-weight: 400;
   margin: 24px 0;
-  text-align: center;
+  text-align: left;
 }
 body input,
 body select {

public/scss/hop-styling.scss

@@ -44,7 +44,7 @@ body {
             line-height: 32px;
             font-weight: 400;
             margin: 24px 0;
-            text-align: center;
+            text-align: left;
         }
     }
 

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

@@ -19,7 +19,9 @@
             :validationRules="validationRules"
             :placeHolderText="placeHolderText"
             :valueAsKey="valueAsKey">
-            <option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
+            <option v-if="placeHolderText && !isDisabled" value="" selected>
+                {{ placeHolderText }}
+            </option>
             <option
                 v-for="(value, name, index) in options"
                 :value="valueAsKey == true ? value : name"

src/fmg-components/funnel-header/funnel-header.vue

@@ -199,7 +199,6 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
-    margin-bottom: 1rem;
     .container {
         padding: 1rem 0.75rem;
         display: flex;

src/layouts/schedule/schedule.vue

@@ -1746,7 +1746,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .container {
     .question-text {
         margin-bottom: 1.5rem;

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -4,7 +4,7 @@
         <div class="container vehicle-damage">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mb-7" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mb-4" />
                     <alert
                         ref="vehicleChangeAlert"
                         v-if="shouldDisplayVehicleChangeAlert"
@@ -759,6 +759,9 @@ export default {
     .base-input-button:not(.has-error):hover.list-card:not(.selected) {
         border-radius: 0.5rem;
     }
+    .question-text {
+        margin: 1.5rem 0 0.5rem 0;
+    }
 }
 .replace-options-question {
     .base-input-button:not(.has-error):hover.list-card:not(.selected) {
@@ -774,9 +777,9 @@ export default {
         }
     }
     .question-text {
-        margin: 1rem 0 0 0;
+        margin: 1.5rem 0 0.5rem 0;
         @include media-breakpoint-up(md) {
-            margin: 1rem 0;
+            margin: 1.5rem 0 0.5rem 0;
         }
     }
     .two-list-card-width {

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -243,6 +243,9 @@ export default {
         &.list-card {
             height: auto;
             border-radius: 50rem;
+            input[type="radio"]:checked + .list-card-content {
+                border-radius: 50rem;
+            }
         }
     }
     .two-list-card-width {

src/layouts/vehicle/vehicle.vue

@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container">
+        <div class="container vehicle">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />

src/layouts/vin-lookup/vin-information/vin-information.vue

@@ -80,6 +80,10 @@ export default {
             opacity: 1;
             visibility: visible;
         }
+        a {
+            text-decoration: none;
+            font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+        }
     }
     .vin-info {
         max-height: 0;