diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index dde5f231b..da2f3ef22 100644 --- a/public/css/hop-styling.css +++ b/public/css/hop-styling.css @@ -18,7 +18,7 @@ body .validation-info { display: none; } body .italicSmall { - font-style: normal; + font-style: italic; font-size: 14px; } body span { @@ -153,13 +153,13 @@ body .buttonContainer button { } } body .buttonContainer button:focus { - box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c; + box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020; } body .buttonContainer button:focus, body .buttonContainer button:focus-visible { outline: none; - box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c; + box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020; color: #fff; - background: linear-gradient(270deg, rgb(6, 87, 124) 0%, rgb(6, 87, 124) 100%); + background: #db0020; } body .buttonContainer button:disabled { background: #e3e4e4 !important; @@ -274,7 +274,7 @@ body .cc-error-container #alert-message { #fmg-checkout-shared #other-payments-container label span.paymentOptionText { margin: auto 0; padding-left: 0; - font-weight: 400; + font-weight: 600; } #fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type { width: 100%; @@ -297,7 +297,7 @@ body .cc-error-container #alert-message { text-align: right; } #fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img { - width: 20%; + width: 12%; } #fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific { padding: 0 2%; @@ -309,11 +309,13 @@ body .cc-error-container #alert-message { margin-top: 24px; margin-bottom: 24px; font-size: 14px; + font-weight: 600; color: #525656; } #fmg-checkout-shared #other-payments-container .disclaimerContainerv2 { margin-bottom: 24px; font-size: 14px; + font-weight: 600; color: #525656; } @media only screen and (max-device-width: 767px) { diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index f0eb05836..d3afaf985 100644 --- a/public/scss/hop-styling.scss +++ b/public/scss/hop-styling.scss @@ -20,7 +20,7 @@ body { } .italicSmall { - font-style: normal; + font-style: italic; font-size: 14px; } @@ -161,15 +161,15 @@ body { cursor: pointer; } &:focus { - box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c; + box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020; } &:focus, // Mouse, touch, stylus focus &:focus-visible { // Keyboard focus for accessibility outline: none; - box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c; + box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020; color: #fff; - background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%); + background: #db0020; } &:disabled { background: #e3e4e4 !important; @@ -332,7 +332,7 @@ body { &.paymentOptionText { margin: auto 0; padding-left: 0; - font-weight: 400; + font-weight: 600; } } } @@ -372,7 +372,7 @@ body { text-align: right; > img { - width: 20%; + width: 12%; } } } @@ -390,12 +390,14 @@ body { margin-top: 24px; margin-bottom: 24px; font-size: 14px; + font-weight: 600; color: #525656; } .disclaimerContainerv2 { margin-bottom: 24px; font-size: 14px; + font-weight: 600; color: #525656; } } diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js index 45841f21f..8b8c98881 100644 --- a/src/constants/error-messages.js +++ b/src/constants/error-messages.js @@ -26,7 +26,7 @@ const errorMessages = { VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q", OPTION_REQUIRED: "Please select an option", - RECAL_ACK_REQUIRED: "Please acknowledge recalibration alert", + RECAL_ACK_REQUIRED: "You must agree to the terms to submit", VEHICLE_REQUIRED: "Please select a vehicle", MOBILE_LOCATION_REQUIRED: "Please enter your service address", DATE_REQUIRED: "Please select a date", @@ -37,6 +37,7 @@ const errorMessages = { MODEL_REQUIRED: "Please select your vehicle model", STYLE_REQUIRED: "Please select your vehicle style", PROMO_REQUIRED: "Please enter a promo code", + INSURANCE_COMPANY_REQUIRED: "Please select an insurance company", }; export { errorMessages }; diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js index 7c2aa4891..a6e41d31b 100644 --- a/src/constants/progress-bar-mapper.js +++ b/src/constants/progress-bar-mapper.js @@ -1,31 +1,31 @@ export const pageProgressMapper = { //Combine progress bar slide percent and button steps vehicle: { - percent: 8, + percent: 5, step: 1, }, "vehicle-damage": { - percent: 11, + percent: 9, step: 1, }, estimate: { - percent: 18, + percent: 12, step: 1, }, "service-zip": { - percent: 22, + percent: 20, step: 1, }, "vin-lookup": { - percent: 22, + percent: 15, step: 1, }, "license-plate-lookup": { - percent: 22, + percent: 20, step: 1, }, "address-lookup": { - percent: 22, + percent: 20, step: 1, }, "address-vehicles": { @@ -33,15 +33,15 @@ export const pageProgressMapper = { step: 1, }, "part-questions": { - percent: 30, + percent: 15, step: 1, }, "molding-questions": { - percent: 30, + percent: 26, step: 1, }, "vehicle-parts": { - percent: 30, + percent: 20, step: 1, }, "capability-questions": { @@ -49,11 +49,11 @@ export const pageProgressMapper = { step: 1, }, quote: { - percent: 62, + percent: 60, step: 2, }, "insurance-company": { - percent: 52, + percent: 60, step: 2, }, "service-location": { @@ -69,11 +69,11 @@ export const pageProgressMapper = { step: 3, }, "customer-details": { - percent: 84, + percent: 85, step: 3, }, "payment-method": { - percent: 97, + percent: 98.5, step: 4, }, payment: { diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 89d428363..84ea8542b 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -2,7 +2,7 @@