From 56ec38b50257ec65d086eb2379babdd0cc63bb93 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 18 Oct 2024 13:25:14 -0400
Subject: [PATCH 1/7] CSR-2258 update quote page styling.

---
 .../service-package-radio.vue                 | 76 ++++++++++++-------
 1 file changed, 50 insertions(+), 26 deletions(-)

diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
index 4a7fd38d4..59837b94d 100644
--- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
@@ -1,8 +1,8 @@
 <template>
-    <div
+    <!-- <div
         :class="[this.additionalButtonData.Text ? 'discount-text' : '']"
         v-if="this.additionalButtonData.servicePackageDiscount"
-        v-html="this.additionalButtonData.Text"></div>
+        v-html="this.additionalButtonData.Text"></div> -->
     <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
         <div
             class="package-label"
@@ -82,6 +82,9 @@
                         v-if="this.buttonFooterCopy"
                         v-html="this.buttonFooterCopy"></div>
                 </div>
+                <div class="special-save-box">
+                    <span>Special: $999</span>
+                </div>
             </div>
         </div>
     </baseInputButton>
@@ -143,21 +146,22 @@ export default {
             margin: 1rem 0.5rem;
             display: flex;
             flex-direction: column;
-            align-self: flex-end;
+            // align-self: flex-end;
         }
 
         label {
             display: block;
             @include media-breakpoint-up(md) {
                 display: flex;
-                min-height: 336px;
+                height: 100%;
+                // min-height: 336px;
             }
             //Unique breakpoint for this page only to accommodate price spacing issues
             //from use of position: absolute on .service-package-discount (per Design Team request)
-            @media only screen and (min-width: 860px) {
-                display: flex;
-                min-height: 276px;
-            }
+            // @media only screen and (min-width: 860px) {
+            //     display: flex;
+            //     min-height: 276px;
+            // }
         }
 
         input[type="radio"] {
@@ -179,19 +183,20 @@ export default {
                 border-radius: 0.5rem;
                 overflow: hidden;
                 min-height: 60px;
-                max-height: 100px;
+                max-height: 126px;
                 @include media-breakpoint-up(md) {
                     max-height: 500px;
+                    padding-bottom: 3rem;
                 }
                 transition: max-height 0.25s ease-in;
 
                 &.has-subheader {
                     min-height: 80px;
                 }
-                &.has-text {
-                    border-radius: 0 0 0.5rem 0.5rem;
-                    border: 1px solid $green;
-                }
+                // &.has-text {
+                //     border-radius: 0 0 0.5rem 0.5rem;
+                //     border: 1px solid $green;
+                // }
 
                 &:before {
                     content: "";
@@ -294,8 +299,8 @@ export default {
                             bottom: 0.75rem;
                             left: 0;
                             width: 100%;
-                            text-align: center;
-                            font-size: 1.125rem;
+                            margin-left: 1.25rem;
+                            font-weight: 600;
                         }
                         span.strikethrough-price {
                             text-decoration: line-through;
@@ -316,28 +321,32 @@ export default {
                 &.service-package-discount {
                     color: $green;
                     text-align: end;
-                    font-weight: 500;
-                    font-size: 13px;
+                    font-weight: 600;
+                    font-size: 0.875rem;
+                    display: flex;
+                    justify-content: space-between;
                     div.strikethrough-discount-price {
                         text-decoration: line-through;
-                        margin-right: 0;
-                        font-weight: 400;
-                        font-size: 0.875rem;
+                        margin-right: .5rem;
+                        font-weight: 500;
+                        font-size: 0.75rem;
                         line-height: 20px;
                         color: $gray-500;
-                        padding-right: 2px;
+                        @include media-breakpoint-up(md) {
+                            margin-right: 0.5rem;
+                            font-size: 0.75rem;
+                        }
                     }
                     div.discount-price {
                         color: $green;
-                        font-weight: 600;
-                        font-size: 1.625rem;
                     }
                     @include media-breakpoint-up(md) {
                         position: absolute;
                         bottom: 0.75rem;
-                        left: 0;
-                        width: 100%;
-                        text-align: center;
+                        left: 0.5rem;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-start;
                     }
                 }
             }
@@ -388,6 +397,21 @@ export default {
             font-weight: 600;
             letter-spacing: 0.75px;
         }
+        .special-save-box {
+            background-color: $green-100;
+            display: flex;
+            flex-direction: row;
+            margin: auto;
+            margin-left: -2rem;
+            padding: .5rem 1rem;
+            border-radius: .25rem;
+            margin-top: .5rem;
+            span {
+                color: $green;
+                font-size: .875rem;
+                font-weight: 600;
+            }
+        }
     }
 }
 </style>

From 2197ef8e6104ddff0bf1378c09dfad94c7c255b6 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 18 Oct 2024 13:29:44 -0400
Subject: [PATCH 2/7] Remove commented code.

---
 .../service-package-radio.vue                    | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
index 59837b94d..f873b3fc1 100644
--- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
@@ -1,8 +1,4 @@
 <template>
-    <!-- <div
-        :class="[this.additionalButtonData.Text ? 'discount-text' : '']"
-        v-if="this.additionalButtonData.servicePackageDiscount"
-        v-html="this.additionalButtonData.Text"></div> -->
     <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
         <div
             class="package-label"
@@ -146,7 +142,6 @@ export default {
             margin: 1rem 0.5rem;
             display: flex;
             flex-direction: column;
-            // align-self: flex-end;
         }
 
         label {
@@ -154,14 +149,7 @@ export default {
             @include media-breakpoint-up(md) {
                 display: flex;
                 height: 100%;
-                // min-height: 336px;
             }
-            //Unique breakpoint for this page only to accommodate price spacing issues
-            //from use of position: absolute on .service-package-discount (per Design Team request)
-            // @media only screen and (min-width: 860px) {
-            //     display: flex;
-            //     min-height: 276px;
-            // }
         }
 
         input[type="radio"] {
@@ -193,10 +181,6 @@ export default {
                 &.has-subheader {
                     min-height: 80px;
                 }
-                // &.has-text {
-                //     border-radius: 0 0 0.5rem 0.5rem;
-                //     border: 1px solid $green;
-                // }
 
                 &:before {
                     content: "";

From cfe1cff19922b2f42779d313a32117307043f941 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 18 Oct 2024 13:30:33 -0400
Subject: [PATCH 3/7] Format code.

---
 .../service-package-radio/service-package-radio.vue    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
index f873b3fc1..c390fec8b 100644
--- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
@@ -311,7 +311,7 @@ export default {
                     justify-content: space-between;
                     div.strikethrough-discount-price {
                         text-decoration: line-through;
-                        margin-right: .5rem;
+                        margin-right: 0.5rem;
                         font-weight: 500;
                         font-size: 0.75rem;
                         line-height: 20px;
@@ -387,12 +387,12 @@ export default {
             flex-direction: row;
             margin: auto;
             margin-left: -2rem;
-            padding: .5rem 1rem;
-            border-radius: .25rem;
-            margin-top: .5rem;
+            padding: 0.5rem 1rem;
+            border-radius: 0.25rem;
+            margin-top: 0.5rem;
             span {
                 color: $green;
-                font-size: .875rem;
+                font-size: 0.875rem;
                 font-weight: 600;
             }
         }

From 4e065d9ef26968642665d0daa81f024eeded1cb9 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 21 Oct 2024 10:01:54 -0400
Subject: [PATCH 4/7] Style updates.

---
 .../service-package-radio/service-package-radio.vue           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
index c390fec8b..3da165954 100644
--- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
@@ -312,10 +312,10 @@ export default {
                     div.strikethrough-discount-price {
                         text-decoration: line-through;
                         margin-right: 0.5rem;
-                        font-weight: 500;
+                        font-weight: 600;
                         font-size: 0.75rem;
                         line-height: 20px;
-                        color: $gray-500;
+                        color: $gray-550;
                         @include media-breakpoint-up(md) {
                             margin-right: 0.5rem;
                             font-size: 0.75rem;

From 7b4d5a84a86a1d41a4d8ddd591bf6baa902b2316 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 21 Oct 2024 11:06:16 -0400
Subject: [PATCH 5/7] Style updates.

---
 .../service-package-radio/service-package-radio.vue            | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
index 3da165954..307e83bcd 100644
--- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
@@ -234,6 +234,9 @@ export default {
                     background-color: $blue-100;
                     border: 1px solid $blue;
                     max-height: 500px;
+                    .special-save-box {
+                        background-color: $green-200;
+                    }
                 }
                 + .package-label {
                     &:before {

From def9ad1e50854d4fedfef147bf65b1c55d3e6e06 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 21 Oct 2024 11:10:30 -0400
Subject: [PATCH 6/7] Add comment.

---
 .../service-package-radio/service-package-radio.vue              | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
index 307e83bcd..cd9442b7f 100644
--- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
@@ -78,6 +78,7 @@
                         v-if="this.buttonFooterCopy"
                         v-html="this.buttonFooterCopy"></div>
                 </div>
+                <!-- This div will show up in all service packages until logic is written -->
                 <div class="special-save-box">
                     <span>Special: $999</span>
                 </div>

From c6054b935a0c2bb90bab45f301cebd87744bc572 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 21 Oct 2024 11:12:55 -0400
Subject: [PATCH 7/7] Change temp copy.

---
 .../service-package-radio/service-package-radio.vue             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
index cd9442b7f..6e10f27f0 100644
--- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
@@ -80,7 +80,7 @@
                 </div>
                 <!-- This div will show up in all service packages until logic is written -->
                 <div class="special-save-box">
-                    <span>Special: $999</span>
+                    <span>Temp test copy</span>
                 </div>
             </div>
         </div>