From 5989e446def7898e25cfbac469db0f695f582354 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Fri, 7 Jun 2024 17:04:45 +0530
Subject: [PATCH] Css changes

---
 .../service-package-radio.vue                 | 100 +++++++++++++-----
 1 file changed, 72 insertions(+), 28 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 a8e1af0bd..fbae237ca 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,4 +1,8 @@
 <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"
@@ -8,20 +12,40 @@
             ]"
             for="testradio">
             <div class="package-specs">
-                <p class="m-0">
-                    <span v-html="this.buttonLabel"></span>
-                    <span class="pricing-info">
-                        <span
-                            class="strikethrough-price"
+                <div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
+                    <div class="col md-6">
+                        <p class="m-0">
+                            <span v-html="this.buttonLabel"></span>
+                        </p>
+                        <p
+                            class="sub-label m-0"
+                            v-if="this.buttonLabelSubCopy"
+                            v-html="this.buttonLabelSubCopy"></p>
+                    </div>
+                    <span class="col md-6 service-package-discount">
+                        <div
+                            class="strikethrough-discount-price"
                             v-if="shouldDisplayStrikeThroughPrice"
-                            v-html="this.additionalButtonData.strikeThroughPrice"></span>
-                        <span v-html="this.buttonAuxillaryCopy"></span>*
+                            v-html="this.additionalButtonData.strikeThroughPrice"></div>
+                        <div class="discount-price" v-html="this.buttonAuxillaryCopy"></div>
                     </span>
-                </p>
-                <p
-                    class="sub-label m-0"
-                    v-if="this.buttonLabelSubCopy"
-                    v-html="this.buttonLabelSubCopy"></p>
+                </div>
+                <div v-else>
+                    <p class="m-0">
+                        <span v-html="this.buttonLabel"></span>
+                        <span class="pricing-info">
+                            <span
+                                class="strikethrough-price"
+                                v-if="shouldDisplayStrikeThroughPrice"
+                                v-html="this.additionalButtonData.strikeThroughPrice"></span>
+                            <span v-html="this.buttonAuxillaryCopy"></span>*
+                        </span>
+                    </p>
+                    <p
+                        class="sub-label m-0"
+                        v-if="this.buttonLabelSubCopy"
+                        v-html="this.buttonLabelSubCopy"></p>
+                </div>
                 <div class="hide-when-closed">
                     <!-- Parse the body text containing <ul> with logic -->
                     <ul>
@@ -58,10 +82,6 @@
                         v-if="this.buttonFooterCopy"
                         v-html="this.buttonFooterCopy"></div>
                 </div>
-                <span
-                    :class="[this.additionalButtonData.Text ? 'discount-text' : '']"
-                    v-if="this.additionalButtonData.servicePackageDiscount"
-                    v-html="this.additionalButtonData.Text"></span>
             </div>
         </div>
     </baseInputButton>
@@ -116,6 +136,18 @@ export default {
 </script>
 
 <style lang="scss">
+.discount-text {
+    line-height: 36px;
+    display: flex;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-color: #469d2a;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    width: 100%;
+    color: white;
+}
 .package-main {
     .package-wrapper {
         margin: 0.5rem 0;
@@ -147,7 +179,8 @@ export default {
                     min-height: 80px;
                 }
                 &.has-text {
-                    min-height: 124px;
+                    border-radius: 0;
+                    border: 1px solid #469d2a !important;
                 }
 
                 &:before {
@@ -256,6 +289,28 @@ export default {
                     font-size: 0.75rem;
                 }
             }
+            span {
+                &.service-package-discount {
+                    color: #469d2a;
+                    text-align: end;
+                    font-weight: 500;
+                    font-size: 13px;
+                    div.strikethrough-discount-price {
+                        text-decoration: line-through;
+                        margin-right: 0;
+                        font-weight: 500;
+                        font-size: 14px;
+                        line-height: 20px;
+                        color: $gray-550;
+                        padding-right: 2px;
+                    }
+                    div.discount-price {
+                        color: #469d2a;
+                        font-weight: 600;
+                        font-size: 26px;
+                    }
+                }
+            }
             ul {
                 margin: 1rem 0 0 -15px;
                 padding: 0;
@@ -283,17 +338,6 @@ export default {
             .hide-when-closed {
                 display: none;
             }
-            .discount-text {
-                width: 170px;
-                height: 40px;
-                padding: 8px 16px 8px 16px;
-                background-color: #e6f2ec;
-                font-size: 14px;
-                font-weight: 500;
-                line-height: 24px;
-                text-align: center;
-                color: #075f35;
-            }
         }
     }
 }