From 6406ed43178b4c2cc1b666ca903676f9cf60515c Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Thu, 1 May 2025 13:44:35 +0530
Subject: [PATCH] CASH-205

minor UI changes
---
 .../afterpay-breakout/afterpay-breakout.vue   | 31 ++++++++-----------
 src/styles/ux-variables.scss                  |  1 +
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
index 0e1e3d58a..abe6221ba 100644
--- a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
+++ b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
@@ -146,6 +146,7 @@ export default {
 .alert {
     border-radius: 5px;
     margin-top: 1rem;
+    margin-bottom: 1.5rem;
 
     &.alert-info {
         .alert-heading {
@@ -168,6 +169,7 @@ export default {
         font-weight: $font-weight-normal;
     }
     .after-pay {
+        margin-top: 1rem;
         .after-pay-toggle {
             cursor: pointer;
 
@@ -210,6 +212,7 @@ export default {
         justify-content: space-around;
         gap: 0.5rem;
         margin-top: 1rem;
+        font-size: 0.875rem;
         @include media-breakpoint-up(md) {
             gap: 0rem;
         }
@@ -219,33 +222,23 @@ export default {
         flex-direction: column;
         border-radius: 0.375rem;
         border: 0.25px $gray-1000;
+        background: linear-gradient(to bottom, $white 50%, $green-600 50%);
         box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15);
+        width: 4.375rem;
+        @include media-breakpoint-up(md) {
+            width: 5rem;
+        }
+        font-weight: $font-weight-700;
+        text-align: center;
     }
     .calendar-section {
-        background-color: $white; /* White background for calendar area */
         padding: 0.5rem;
-        text-align: center;
         gap: 0.125rem;
-        font-weight: $font-weight-700;
         white-space: nowrap;
-        border-top-left-radius: 0.375rem;
-        border-top-right-radius: 0.375rem;
-        width: 4.375rem;
-        @include media-breakpoint-up(md) {
-            width: 5rem;
-        }
+        color: $black-100;
     }
     .payment-amount-section {
-        background-color: $green-600; /* Light green background for payment area */
         padding: 0.5rem;
-        text-align: center;
-        font-weight: $font-weight-700;
-        border-bottom-left-radius: 0.375rem;
-        border-bottom-right-radius: 0.375rem;
-        width: 4.375rem;
-        @include media-breakpoint-up(md) {
-            width: 5rem;
-        }
     }
     .afterpay-learn-more {
         margin-left: 0.25rem;
@@ -262,6 +255,8 @@ export default {
         justify-content: center;
         margin-top: 1rem;
         gap: 1rem;
+        color: $gray-1100;
+        font-size: 0.875rem;
     }
     .legend-item {
         display: flex;
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 6f377a068..1f17a6cf1 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -3,6 +3,7 @@
 // White/black
 $white: #ffffff;
 $black: #000000;
+$black-100: #0a0a0a;
 
 // Blues
 $blue-100: #e4f1f7; // Used in theme