+
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
= Available
-
Sunday
- S
+ SUN
Monday
- M
+ MON
Tuesday
- T
+ TUE
Wednesday
- W
+ WED
Thursday
- T
+ THU
Friday
- F
+ FRI
Saturday
- S
+ SAT
View more dates
+
@@ -779,6 +838,10 @@ export default {
fieldset {
flex-grow: 1;
position: relative;
+
+ .view-more-dates {
+ color: $blue;
+ }
}
.loader {
height: 2rem;
@@ -790,8 +853,8 @@ export default {
}
}
.calendar-grid-container {
- margin: 0 auto 2rem auto;
- max-width: 414px;
+ margin: 0 auto 1rem auto;
+ max-width: 400px;
position: relative;
transition:
height ease 2s,
@@ -800,15 +863,22 @@ export default {
grid-template-columns: repeat(7, 1fr);
justify-content: center;
align-items: center;
- padding: 0 0.75rem;
+ padding: 0;
+ @include media-breakpoint-up(md) {
+ padding: 0 0.75rem;
+ }
opacity: 1;
.grid-item {
text-align: center;
margin: 10px 3px;
- font-size: 0.875rem;
+ font-size: 0.75rem;
line-height: 1.5;
+ &.caption {
+ color: $gray-550;
+ }
+
&.first-day-,
&.first-day-0 {
grid-column-start: 1;
@@ -841,9 +911,11 @@ export default {
.month-year {
grid-area: 1 / 1 / 2 / 5;
- text-transform: uppercase;
- font-weight: 300;
+ font-family: AvertaBold;
letter-spacing: 0.75px;
+ color: $black;
+ justify-content: center;
+ margin-bottom: 0.5rem;
}
.legend {
grid-area: 1 / 5 / 2 / 8;
@@ -921,7 +993,6 @@ export default {
label {
position: relative;
- cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
@@ -963,9 +1034,14 @@ export default {
&.selectable-day {
label {
background-color: $blue-100;
- min-width: 2.5rem;
- width: 2.5rem;
+ min-width: 2.75rem;
+ width: 2.75rem;
border-radius: 50%;
+ cursor: pointer;
+ @include media-breakpoint-up(md) {
+ min-width: 3rem;
+ width: 3rem;
+ }
}
}
&.unavailable-day {
@@ -999,12 +1075,16 @@ export default {
border-radius: 50%;
background-color: $black;
position: absolute;
- top: 28px;
+ top: 1.875rem;
}
.first-day {
color: $blue;
}
}
+ input[type="radio"]:checked + label:after {
+ background-color: $black;
+ top: 2rem;
+ }
}
}
@@ -1090,8 +1170,8 @@ export default {
}
}
}
- // pricing by day override styles
- &.pricing-by-day {
+ // new calendar styling overrides
+ &.calendar-2025 {
.calendar-grid-container .grid-item {
margin: 0 0 0.15rem 0;
}
@@ -1115,7 +1195,7 @@ export default {
&:focus + label,
&:checked:focus + label {
box-shadow: none;
- background-color: $white;
+ background-color: $blue-100;
color: $black;
}
&:checked + label {
@@ -1130,6 +1210,7 @@ export default {
}
}
label {
+ color: $gray-500;
flex-direction: column;
height: 2.5rem;
width: 100%;
@@ -1142,16 +1223,21 @@ export default {
label {
color: $black;
background-color: $blue-100;
- min-width: 2.5rem;
- width: 2.5rem;
+ min-width: 2.75rem;
+ width: 2.75rem;
border-radius: 0.25rem;
+ @include media-breakpoint-up(md) {
+ min-width: 3rem;
+ width: 3rem;
+ }
}
}
&.current-day {
- label:after {
- margin-top: 0.2rem;
- position: relative;
- top: 0;
+ label {
+ font-weight: 600;
+ font-family: "AvertaSemibold";
+ color: $black;
+ font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
}
}
}
@@ -1162,6 +1248,7 @@ export default {
color: $black;
font-weight: 400;
font-family: "AvertaSemibold";
+ font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
&.price {
font-family: "AvertaRegular";
@@ -1189,6 +1276,26 @@ export default {
}
}
}
+ :deep(.button-inner-wrapper) {
+ display: flex;
+ max-width: 100%;
+ flex-wrap: wrap;
+ gap: 0 0.5rem;
+
+ & > div {
+ flex: 0 0 calc(50% - 0.25rem);
+ }
+ }
+ :deep(.button-question.is-mobile-appointment) {
+ .button-inner-wrapper > div {
+ flex: 0 0 100%;
+ }
+ }
+ :deep(.button-question.is-drop-off-appointment) {
+ .button-inner-wrapper > div {
+ flex: 0 0 100%;
+ }
+ }
}
.btn-link {
diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.spec.js b/src/digital-components/salesforce-webchat/salesforce-webchat.spec.js
index 40fc752fd..783e3f18e 100644
--- a/src/digital-components/salesforce-webchat/salesforce-webchat.spec.js
+++ b/src/digital-components/salesforce-webchat/salesforce-webchat.spec.js
@@ -24,19 +24,19 @@ describe("salesforceWebchat.vue", () => {
it("calls the correct initialization function based on environment", () => {
applicationConfig.CURRENT_ENVIRONMENT = "Prod";
let wrapper = shallowMount(salesforceWebchat);
- mockProd = jest.spyOn(prodHelper, "initializeSalesforceWebchatForProd");
+ const mockProd = jest.spyOn(prodHelper, "initializeSalesforceWebchatForProd");
wrapper.vm.initializeSalesforceWebchat();
expect(mockProd).toHaveBeenCalled();
applicationConfig.CURRENT_ENVIRONMENT = "QA";
wrapper = shallowMount(salesforceWebchat);
- mockQa = jest.spyOn(qaHelper, "initializeSalesforceWebchatForQa");
+ const mockQa = jest.spyOn(qaHelper, "initializeSalesforceWebchatForQa");
wrapper.vm.initializeSalesforceWebchat();
expect(mockQa).toHaveBeenCalled();
applicationConfig.CURRENT_ENVIRONMENT = "Dev";
wrapper = shallowMount(salesforceWebchat);
- mockDev = jest.spyOn(devHelper, "initializeSalesforceWebchatForDev");
+ const mockDev = jest.spyOn(devHelper, "initializeSalesforceWebchatForDev");
wrapper.vm.initializeSalesforceWebchat();
expect(mockDev).toHaveBeenCalled();
});
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index c78339e38..33a398428 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -2,7 +2,7 @@