From 9926126c6764653a1bbb56f3d63cd29e45ca60af Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 22 Sep 2023 10:44:55 -0400
Subject: [PATCH] CSR-1673 fix icon and text alignment and add back scroll to
 bottom feature.

---
 .../questions-page-layout/questions-page-layout.vue |  2 +-
 src/layouts/address-lookup/address-lookup.vue       |  2 +-
 src/layouts/address-vehicles/address-vehicles.vue   |  2 +-
 src/layouts/estimate/estimate.vue                   |  4 ++--
 .../license-plate-lookup/license-plate-lookup.vue   |  2 +-
 src/layouts/quote/quote.vue                         |  2 +-
 src/layouts/schedule/schedule.vue                   |  2 +-
 .../appointment-type-question.vue                   |  4 ++--
 src/layouts/service-location/service-location.vue   |  2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue       |  2 +-
 src/layouts/vehicle-parts/vehicle-parts.vue         |  2 +-
 src/layouts/vin-lookup/vin-lookup.vue               |  2 +-
 src/mixins/base-mixin.js                            | 13 +++++++++++--
 src/styles/common-styles.scss                       |  5 +++++
 src/ux-components/list-card/list-card.vue           |  6 +++---
 15 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index bad812fee..589a7c938 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index e22f36edf..9fe0007d2 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -5,7 +5,7 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index f7d1d624c..d9e56476c 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index 6041a878c..0715efbc2 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
@@ -9,7 +9,7 @@
             </div>
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
-                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
+                    <ve page-container-grouped-styleshicleBanner cmsWidgetName="VehicleBannerWidget" />
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div v-if="!skipVin">
                         <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 31ca3fec7..746a8bb76 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 46f573144..0d9d77310 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index f276ea1cd..c7bdd864d 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
index 732382b1a..0a904da96 100644
--- a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
+++ b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
@@ -97,8 +97,8 @@ export default {
 <style lang="scss">
 .appointment-type-question {
     .list-card img {
-        height: auto;
-        width: 3.417rem;
+        height: 1.5rem;
+        width: auto;
     }
 }
 </style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index f93a1d5c8..27c76fa83 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 2e816393b..623d704a7 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 4b3f0e5dd..d2a20ac8e 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -2,7 +2,7 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
-            <div class="container-fluid">
+            <div class="container-fluid page-container-grouped-styles">
                 <div class="row">
                     <div class="col">
                         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 8ab84aacb..a6d779020 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 11fc7eece..2bf5940b2 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -72,6 +72,7 @@ export default {
                     lineItem.partType != partTypeStrings.RAIN_DEFENSE
                 );
             });
+            console.log("step one", lineItemsToPrice);
             let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
             return totalPrice;
         },
@@ -93,18 +94,26 @@ export default {
                         lineItem.childParts
                     );
                 }
+                console.log(
+                    "step two, lineItem name: ",
+                    lineItem.partNumber,
+                    " / totalPrice: ",
+                    totalPrice
+                );
             });
+            console.log("step three", totalPrice);
             return totalPrice;
         },
         getTotalLineItemPrice(lineItem) {
             return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
         },
         scrollToPageTop() {
-            const container = document.getElementsByClassName("container-fluid")[0];
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
             container.scrollTo({ top: 0, left: 0, behavior: "smooth" });
         },
         scrollToPageBottom() {
-            const container = document.getElementsByClassName("container-fluid")[0];
+            console.log("scroll to bottom");
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
             container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
         },
     },
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 86a98c94c..0b16b1eac 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -10,6 +10,11 @@ body {
         .prevent-squish {
             overflow-x: unset;
         }
+        &.page-container-grouped-styles{
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
     }
     .pointer {
         cursor: pointer;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index eaa72e477..902baa1e1 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -82,8 +82,8 @@ export default {
 
     img {
         // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
-        height: auto;
-        width: 6.5rem;
+        height: 2rem;
+        width: auto;
         margin-bottom: 2.2rem;
         max-width: 100%;
     }
@@ -96,7 +96,7 @@ export default {
             outline: none;
             display: flex;
             position: relative;
-            justify-content: space-between;
+            justify-content: flex-start;
 
             p {
                 color: $gray-600;