From dbb2621e671c65a473803c4fdd3a5ce6d6af1e11 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 8 Nov 2024 09:10:51 -0500
Subject: [PATCH] CSR-2346 fix misaligned promo copy.

Update colors and font sizes with variable and REM values.
---
 .../promo-modal-question/promo-modal-question.vue     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/fmg-components/promo-modal-question/promo-modal-question.vue b/src/fmg-components/promo-modal-question/promo-modal-question.vue
index a6b591e67..9f102fd52 100644
--- a/src/fmg-components/promo-modal-question/promo-modal-question.vue
+++ b/src/fmg-components/promo-modal-question/promo-modal-question.vue
@@ -50,7 +50,7 @@
                 cmsWidgetName="AlertInshopPromoWidget"
                 alertClass="alert-danger"
                 v-bind:isDismissible="false" />
-            <div class="mt-4" v-for="(promoCode, i) in this.getPromoCodeList()" :key="i">
+            <div class="mt-4 d-flex align-items-center justify-content-between" v-for="(promoCode, i) in this.getPromoCodeList()" :key="i">
                 <span class="applied-promo"
                     >Promo code <span class="promo-code">{{ promoCode }}</span> applied
                 </span>
@@ -357,19 +357,18 @@ export default {
 </script>
 <style lang="scss" scoped>
 .applied-promo {
-    padding-right: 4rem;
-    font-size: 14px;
+    font-size: .875rem;
     font-weight: 500;
     line-height: 24px;
-    color: #0c7e47;
+    color: $green;
 
     .promo-code {
         text-transform: uppercase;
     }
 }
 .alert {
-    color: #d4281c;
-    font-size: 14px;
+    color: $red;
+    font-size: .875rem;
     font-weight: 500;
     line-height: 24px;
 }