From f776a3e9fcaa2d4a88a7e9a72906c8c1a52eb94b Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 11 Jul 2024 15:15:43 -0400
Subject: [PATCH 1/7] WIP initial commit quote deskop change with correct Figma

---
 .../button-question/button-question.vue       |  6 +-
 src/layouts/quote/quote.vue                   | 13 ++--
 .../service-package-radio.vue                 | 67 +++++--------------
 src/styles/common-styles.scss                 | 13 ----
 4 files changed, 22 insertions(+), 77 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 2bb4bec7f..f0442eee1 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -213,7 +213,7 @@ export default {
                     classes = "ui-checkbox d-flex";
                     break;
                 case "servicePackageRadio":
-                    classes = "package-main d-md-flex justify-content-center";
+                    classes = "package-main";
                     break;
             }
             return classes;
@@ -226,7 +226,7 @@ export default {
             if (this.buttonTypeString == "radio") {
                 classes += " radio-button-container";
             } else if (this.buttonTypeString == "servicePackageRadio") {
-                classes = "package-wrapper col-md-4";
+                classes = "package-wrapper";
             }
 
             if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
@@ -255,7 +255,7 @@ export default {
                 buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
                 buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
                 buttonImageId: answer.buttonImageId ?? answer.ImageId,
-                additionalButtonData: answer.additionalButtonData,
+                additionalButtonData: answer.additionalButtonData ?? answer.additionalButtonData,
                 groupName: this.formatString(this.groupName),
                 value:
                     answer.value ??
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 414c62149..bad345022 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 page-container-grouped-styles quote">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -20,10 +20,7 @@
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
                         v-model="isInsuranceSelected"
                         groupName="CashOrInsuranceQuestion" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-lg-4">
+
                     <servicePackageQuestion
                         ref="servicePackage"
                         cashCmsWidgetName="CashServicePackageQuestionWidget"
@@ -37,10 +34,7 @@
                         v-on="{ 'buttonEvent.openModal': openModalAction }"
                         validationRules="option-required"
                         isRequired />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+
                     <afterpayModalBanner
                         v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
                         cmsWidgetName="AfterpayModalWidget"
@@ -49,6 +43,7 @@
                         :lineItems="lineItems" />
 
                     <recalDisclaimer
+                        class="my-5"
                         cmsWidgetName="RecalDisclaimerWidget"
                         v-if="isRecalibrationOnOrder"
                         v-on="{ textLinkClicked: openModalAction }"
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 15993f87c..b355bbb32 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
@@ -12,9 +12,7 @@
             ]"
             for="testradio">
             <div class="package-specs">
-                <div
-                    v-if="this.additionalButtonData.servicePackageDiscount"
-                    class="row justify-content-between">
+                <div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
                     <div class="col md-6">
                         <p class="m-0">
                             <span v-html="this.buttonLabel"></span>
@@ -138,20 +136,24 @@ export default {
 </script>
 
 <style lang="scss">
+.discount-text {
+    line-height: 36px;
+    display: flex;
+    border-top-right-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
+    background-color: #469d2a;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    width: 100%;
+    color: white;
+}
 .package-main {
     .package-wrapper {
-        margin: 1rem 0;
-        @include media-breakpoint-up(md) {
-            margin: 0.5rem 0;
-        }
-        position: relative;
-        @include media-breakpoint-up(md) {
-            margin: 1rem 0.5rem;
-        }
+        margin: 0.5rem 0;
 
         label {
             display: block;
-            height: 100%;
         }
 
         input[type="radio"] {
@@ -172,21 +174,13 @@ export default {
                 border-radius: 0.5rem;
                 overflow: hidden;
                 min-height: 60px;
-                @include media-breakpoint-up(md) {
-                    max-height: 500px;
-                    height: 100%;
-                }
 
                 &.has-subheader {
                     min-height: 80px;
                 }
                 &.has-text {
                     border-radius: 0 0 0.5rem 0.5rem;
-                    border: 1px solid #469d2a;
-                    @include media-breakpoint-up(md) {
-                        border-radius: 0.5rem;
-                        padding-top: 3.75rem;
-                    }
+                    border: 1px solid #469d2a !important;
                 }
 
                 &:before {
@@ -271,9 +265,6 @@ export default {
             width: 100%;
             max-height: 0;
             transition: all 0.5s ease;
-            @include media-breakpoint-up(md) {
-                max-height: 500px;
-            }
 
             p {
                 font-weight: 500;
@@ -346,34 +337,6 @@ export default {
 
             .hide-when-closed {
                 display: none;
-                @include media-breakpoint-up(md) {
-                    display: flex;
-                    flex-direction: column;
-                }
-            }
-        }
-        .discount-text {
-            line-height: 36px;
-            display: flex;
-            border-top-right-radius: 0.5rem;
-            border-top-left-radius: 0.5rem;
-            background-color: #469d2a;
-            align-items: center;
-            justify-content: center;
-            padding: 5px;
-            width: 100%;
-            color: white;
-            height: 2.875rem;
-            @include media-breakpoint-up(md) {
-                position: absolute;
-                z-index: 1;
-                ~ label {
-                    .package-label {
-                        &:after {
-                            top: 68px;
-                        }
-                    }
-                }
             }
         }
     }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index be01f3ed8..197655db1 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -37,19 +37,6 @@ body {
                 max-width: 100%;
             }
         }
-        // Quote page desktop
-        &.quote {
-            .col-md-6,
-            .col-lg-4 {
-                max-width: 1200px;
-            }
-            .col-md-6.col-lg-4 {
-                @include media-breakpoint-up(lg) {
-                    width: 100%;
-                    max-width: 910px;
-                }
-            }
-        }
         //END set max-width on columns
     }
     .pointer {

From b017bae2cb36980bb55fd0ef02c66c8036472093 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 12 Jul 2024 14:37:56 -0400
Subject: [PATCH 2/7] CSR-2140 WIP add styles for horizontal service packages
 on desktop.

---
 .../button-question/button-question.vue       |  4 +-
 src/layouts/quote/quote.vue                   | 10 ++-
 .../service-package-radio.vue                 | 61 ++++++++++++++-----
 3 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index f0442eee1..e1df5cba1 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -213,7 +213,7 @@ export default {
                     classes = "ui-checkbox d-flex";
                     break;
                 case "servicePackageRadio":
-                    classes = "package-main";
+                    classes = "package-main d-md-flex justify-content-md-center";
                     break;
             }
             return classes;
@@ -226,7 +226,7 @@ export default {
             if (this.buttonTypeString == "radio") {
                 classes += " radio-button-container";
             } else if (this.buttonTypeString == "servicePackageRadio") {
-                classes = "package-wrapper";
+                classes = "package-wrapper col-md-4";
             }
 
             if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index bad345022..fb5980219 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -20,7 +20,10 @@
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
                         v-model="isInsuranceSelected"
                         groupName="CashOrInsuranceQuestion" />
-
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-12 col-xl-8">
                     <servicePackageQuestion
                         ref="servicePackage"
                         cashCmsWidgetName="CashServicePackageQuestionWidget"
@@ -34,7 +37,10 @@
                         v-on="{ 'buttonEvent.openModal': openModalAction }"
                         validationRules="option-required"
                         isRequired />
-
+                    </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <afterpayModalBanner
                         v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
                         cmsWidgetName="AfterpayModalWidget"
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 b355bbb32..203a75416 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
@@ -136,24 +136,22 @@ export default {
 </script>
 
 <style lang="scss">
-.discount-text {
-    line-height: 36px;
-    display: flex;
-    border-top-right-radius: 0.5rem;
-    border-top-left-radius: 0.5rem;
-    background-color: #469d2a;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-    width: 100%;
-    color: white;
-}
 .package-main {
     .package-wrapper {
         margin: 0.5rem 0;
+        @include media-breakpoint-up(md) {
+            margin: 1rem .5rem;
+            display: flex;
+            flex-direction: column;
+            align-self: flex-end;
+        }
 
         label {
             display: block;
+            @include media-breakpoint-up(md) {
+                display: flex;
+                min-height: 300px;   
+            }
         }
 
         input[type="radio"] {
@@ -265,6 +263,10 @@ export default {
             width: 100%;
             max-height: 0;
             transition: all 0.5s ease;
+            @include media-breakpoint-up(md) {
+                max-height: 500px;
+                // margin-bottom: 5rem;
+            }
 
             p {
                 font-weight: 500;
@@ -274,6 +276,15 @@ export default {
                     &.pricing-info {
                         color: $green;
                         font-size: 0.875rem;
+                        @include media-breakpoint-up(md) {
+                            position: absolute;
+                            bottom: .75rem;
+                            left: 0;
+                            width: 100%;
+                            text-align: center;
+                            font-size: 1.125rem;
+                            color: $gray-500;
+                        }
                         span.strikethrough-price {
                             text-decoration: line-through;
                             font-size: 0.75rem;
@@ -299,9 +310,9 @@ export default {
                         text-decoration: line-through;
                         margin-right: 0;
                         font-weight: 500;
-                        font-size: 14px;
+                        font-size: 0.875rem;
                         line-height: 20px;
-                        color: $gray-550;
+                        color: $gray-500;
                         padding-right: 2px;
                     }
                     div.discount-price {
@@ -309,6 +320,13 @@ export default {
                         font-weight: 600;
                         font-size: 26px;
                     }
+                    @include media-breakpoint-up(md) {
+                        position: absolute;
+                        bottom: .75rem;
+                        left: 0;
+                        width: 100%;
+                        text-align: center;
+                    }
                 }
             }
             ul {
@@ -337,8 +355,23 @@ export default {
 
             .hide-when-closed {
                 display: none;
+                @include media-breakpoint-up(md) {
+                    display: flex;
+                    flex-direction: column;
+                }
             }
         }
+        .discount-text {
+            height: 2rem;
+            display: flex;
+            border-top-right-radius: 0.5rem;
+            border-top-left-radius: 0.5rem;
+            background-color: #469d2a;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            color: white;
+        }
     }
 }
 </style>

From 5c3e9e6789ae5582bc7ec0ef522793f0d797ec0a Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 12 Jul 2024 16:18:01 -0400
Subject: [PATCH 3/7] WIP

---
 src/layouts/quote/quote.vue                                    | 2 +-
 .../service-package-radio/service-package-radio.vue            | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index fb5980219..2fdb1b0ef 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -49,7 +49,7 @@
                         :lineItems="lineItems" />
 
                     <recalDisclaimer
-                        class="my-5"
+                        class="m-0"
                         cmsWidgetName="RecalDisclaimerWidget"
                         v-if="isRecalibrationOnOrder"
                         v-on="{ textLinkClicked: openModalAction }"
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 203a75416..057bcb0bd 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
@@ -150,7 +150,7 @@ export default {
             display: block;
             @include media-breakpoint-up(md) {
                 display: flex;
-                min-height: 300px;   
+                min-height: 276px;   
             }
         }
 
@@ -265,7 +265,6 @@ export default {
             transition: all 0.5s ease;
             @include media-breakpoint-up(md) {
                 max-height: 500px;
-                // margin-bottom: 5rem;
             }
 
             p {

From 2b9e32a8290e82b4516847a3da5179fb7051d9c3 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 12 Jul 2024 16:23:00 -0400
Subject: [PATCH 4/7] WIP align promo code copy.

---
 src/layouts/quote/quote.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 2fdb1b0ef..6549ebaa5 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -56,7 +56,7 @@
                         alertClass="alert-info" />
 
                     <promoModalQuestion
-                        class="small mt-4"
+                        class="small mt-4 d-md-flex justify-content-md-center"
                         v-model="lineItems"
                         :addableVaps="addableVaps"
                         pageName="quote"

From e750e277abecb7a1e07cdb7a11037f453e31b7f5 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 12 Jul 2024 18:40:42 -0400
Subject: [PATCH 5/7] CSR-2140 WIP added styles for spacing.

---
 src/layouts/quote/quote.vue                                 | 6 +++---
 .../service-package-radio/service-package-radio.vue         | 2 +-
 src/styles/common-styles.scss                               | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 6549ebaa5..9cfbd38a7 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -49,14 +49,14 @@
                         :lineItems="lineItems" />
 
                     <recalDisclaimer
-                        class="m-0"
+                        class="mb-0"
                         cmsWidgetName="RecalDisclaimerWidget"
                         v-if="isRecalibrationOnOrder"
                         v-on="{ textLinkClicked: openModalAction }"
                         alertClass="alert-info" />
 
                     <promoModalQuestion
-                        class="small mt-4 d-md-flex justify-content-md-center"
+                        class="small mt-6 d-md-flex justify-content-md-center"
                         v-model="lineItems"
                         :addableVaps="addableVaps"
                         pageName="quote"
@@ -68,7 +68,7 @@
                         cmsWidgetName="quoteDisclaimer"
                         justifyText="left"
                         typeStyle="caption"
-                        class="mt-4" />
+                        class="mt-6" />
 
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
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 057bcb0bd..56c5abfd0 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
@@ -317,7 +317,7 @@ export default {
                     div.discount-price {
                         color: #469d2a;
                         font-weight: 600;
-                        font-size: 26px;
+                        font-size: 1.625rem;
                     }
                     @include media-breakpoint-up(md) {
                         position: absolute;
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 197655db1..730712297 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -37,6 +37,10 @@ body {
                 max-width: 100%;
             }
         }
+        //Quote page max-width for service packages
+        .col-xl-8 {
+            max-width: 1200px;
+        }
         //END set max-width on columns
     }
     .pointer {

From d9de8e58b2f444c157a6b364c9097628f1f6ab0f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Jul 2024 15:08:36 -0400
Subject: [PATCH 6/7] CSR-2140 css updates.

---
 src/layouts/quote/quote.vue                   |  2 +-
 .../service-package-radio.vue                 | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 9cfbd38a7..a85fd7d29 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -37,7 +37,7 @@
                         v-on="{ 'buttonEvent.openModal': openModalAction }"
                         validationRules="option-required"
                         isRequired />
-                    </div>
+                </div>
             </div>
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
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 56c5abfd0..60d232b85 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
@@ -140,7 +140,7 @@ export default {
     .package-wrapper {
         margin: 0.5rem 0;
         @include media-breakpoint-up(md) {
-            margin: 1rem .5rem;
+            margin: 1rem 0.5rem;
             display: flex;
             flex-direction: column;
             align-self: flex-end;
@@ -150,7 +150,11 @@ export default {
             display: block;
             @include media-breakpoint-up(md) {
                 display: flex;
-                min-height: 276px;   
+                min-height: 320px;
+            }
+            @include media-breakpoint-up(xl) {
+                display: flex;
+                min-height: 276px;
             }
         }
 
@@ -178,7 +182,7 @@ export default {
                 }
                 &.has-text {
                     border-radius: 0 0 0.5rem 0.5rem;
-                    border: 1px solid #469d2a !important;
+                    border: 1px solid #469d2a;//Temp color
                 }
 
                 &:before {
@@ -277,7 +281,7 @@ export default {
                         font-size: 0.875rem;
                         @include media-breakpoint-up(md) {
                             position: absolute;
-                            bottom: .75rem;
+                            bottom: 0.75rem;
                             left: 0;
                             width: 100%;
                             text-align: center;
@@ -301,27 +305,27 @@ export default {
             }
             span {
                 &.service-package-discount {
-                    color: #469d2a;
+                    color: #469d2a;//Temp color
                     text-align: end;
                     font-weight: 500;
                     font-size: 13px;
                     div.strikethrough-discount-price {
                         text-decoration: line-through;
                         margin-right: 0;
-                        font-weight: 500;
+                        font-weight: 400;
                         font-size: 0.875rem;
                         line-height: 20px;
                         color: $gray-500;
                         padding-right: 2px;
                     }
                     div.discount-price {
-                        color: #469d2a;
+                        color: #469d2a;//Temp color
                         font-weight: 600;
                         font-size: 1.625rem;
                     }
                     @include media-breakpoint-up(md) {
                         position: absolute;
-                        bottom: .75rem;
+                        bottom: 0.75rem;
                         left: 0;
                         width: 100%;
                         text-align: center;
@@ -365,7 +369,7 @@ export default {
             display: flex;
             border-top-right-radius: 0.5rem;
             border-top-left-radius: 0.5rem;
-            background-color: #469d2a;
+            background-color: #469d2a;//Temp color
             align-items: center;
             justify-content: center;
             width: 100%;

From a9683b824aa1b6060e645f22cf1e9ca02cc74a06 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Jul 2024 15:11:28 -0400
Subject: [PATCH 7/7] Format code.

---
 .../service-package-radio/service-package-radio.vue       | 8 ++++----
 1 file changed, 4 insertions(+), 4 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 60d232b85..867baded2 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
@@ -182,7 +182,7 @@ export default {
                 }
                 &.has-text {
                     border-radius: 0 0 0.5rem 0.5rem;
-                    border: 1px solid #469d2a;//Temp color
+                    border: 1px solid #469d2a; //Temp color
                 }
 
                 &:before {
@@ -305,7 +305,7 @@ export default {
             }
             span {
                 &.service-package-discount {
-                    color: #469d2a;//Temp color
+                    color: #469d2a; //Temp color
                     text-align: end;
                     font-weight: 500;
                     font-size: 13px;
@@ -319,7 +319,7 @@ export default {
                         padding-right: 2px;
                     }
                     div.discount-price {
-                        color: #469d2a;//Temp color
+                        color: #469d2a; //Temp color
                         font-weight: 600;
                         font-size: 1.625rem;
                     }
@@ -369,7 +369,7 @@ export default {
             display: flex;
             border-top-right-radius: 0.5rem;
             border-top-left-radius: 0.5rem;
-            background-color: #469d2a;//Temp color
+            background-color: #469d2a; //Temp color
             align-items: center;
             justify-content: center;
             width: 100%;