jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2456 from Safelite/feature/Digital/CASH-205

Browse source 
CASH-205
This commit is contained in:
hiteshkumar87 2025-04-25 18:14:07 +05:30 committed by GitHub
commit fc2d0ceecd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
View file

@ -3,18 +3,16 @@
<component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
<div class="my-4 alert-heading text-center">
<span v-html="afterpayHeaderCopy" />
&nbsp;
<span class="afterpay-amount">{{ this.afterpayPrice }}</span>
<br />
<span class="alert-sub-heading" v-html="afterpayHeaderSubHeaderCopy" />
&nbsp;
<img :src="afterPayImageUrl" />
&nbsp;
<img :src="afterPayImageUrl" class="afterpay-image" />
<a
id="afterpay-learnmore"
href="#"
data-afterpay-modal="en_US-safelite"
data-bind="click:afterpayLearnMore">
data-bind="click:afterpayLearnMore"
class="afterpay-learn-more">
<img :src="infoIcon" alt="Info Icon" class="info-icon" />
</a>
<div class="after-pay">
@ -151,8 +149,8 @@ export default {
&.alert-info {
.alert-heading {
color: #000000;
font-weight: 600;
color: $black;
font-weight: $font-weight-600;
margin-left: 0.5rem;
margin-right: 0.5rem;
@include media-breakpoint-up(md) {
@ -162,11 +160,12 @@ export default {
}
}
.afterpay-amount {
color: #0c7e47;
color: $green;
margin-left: 0.125rem;
}
.alert-sub-heading {
color: #4b4c4e;
font-weight: 400;
color: $gray-1100;
font-weight: $font-weight-normal;
}
.after-pay {
.after-pay-toggle {
@ -180,7 +179,7 @@ export default {
background-position: right center;
margin-left: 0.5rem;
width: 1rem;
height: 9px;
height: 0.5625rem;
display: inline-flex;
}
&.expanded:after {
@ -194,8 +193,8 @@ export default {
}
}
.after-pay-toggle a {
font-weight: 600;
color: #0070d1;
font-weight: $font-weight-600;
color: $blue;
text-decoration: none;
}
.after-pay-details {
@ -218,27 +217,45 @@ export default {
.payment-card {
display: flex;
flex-direction: column;
border-radius: 6px;
border: 0.25px #b3b4b5;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 0.375rem;
border: 0.25px $gray-1000;
box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15);
}
.calendar-section {
background-color: #fff; /* White background for calendar area */
background-color: $white; /* White background for calendar area */
padding: 0.5rem;
text-align: center;
gap: 2px;
font-weight: 700;
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;
}
}
.payment-amount-section {
background-color: #e0f7e9; /* Light green background for payment area */
background-color: $green-600; /* Light green background for payment area */
padding: 0.5rem;
text-align: center;
font-weight: 700;
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.125rem;
}
.afterpay-image {
margin-left: 0.125rem;
}
.amount-due {
color: #00723e; /* Green text */
color: $green-1000; /* Green text */
}
.legend {
display: flex;
@ -249,11 +266,11 @@ export default {
.legend-item {
display: flex;
align-items: center;
gap: 2px;
gap: 0.125rem;
white-space: nowrap;
}
.legend-item span {
font-weight: 400;
font-weight: $font-weight-normal;
}
}
</style>

6
src/styles/ux-variables.scss
View file

@ -33,9 +33,11 @@ $green-300: #94d7b6;
$green-400: #5abc8c; // Used in theme
$green-500: #2ca168;
$green: #0c7e47; // Default Green
$green-600: #e7f2ed;
$green-700: #006a36;
$green-800: #004f28;
$green-900: #00331a;
$green-1000: #00723e;
// Yellows
$yellow-100: #fff5eb;
@ -59,6 +61,8 @@ $gray-600: #4d5151; // Used in theme
$gray-700: #303333; // Used in theme
$gray-800: #222424; // Used in theme
$gray-900: #181a1a; // Used in theme
$gray-1000: #b3b4b5;
$gray-1100: #4b4c4e;
//orange
$orange-600: #e86421;
@ -134,6 +138,8 @@ $font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 500;
$font-weight-600: 600;
$font-weight-700: 700;
$font-weight-bolder: bolder;
//Headings