diff --git a/Amasty_Gdpr/web/template/checkout/gdpr-consent.html b/Amasty_Gdpr/web/template/checkout/gdpr-consent.html index 47e9b7765..37b299652 100644 --- a/Amasty_Gdpr/web/template/checkout/gdpr-consent.html +++ b/Amasty_Gdpr/web/template/checkout/gdpr-consent.html @@ -55,7 +55,7 @@ - + - + > + + + + + +
+ +
+ diff --git a/CHANGELOG.md b/CHANGELOG.md index f7c19dd55..9017e588f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,8 +7,15 @@ All notable changes to this project will be documented in this file. ### Removed ### Fixed - ## [Released] +## [2.18.0] - 2021-04-21 +### Added +- titles for compare and wishlist buttons (#77368) +### Fixed +- error on paypal payment submit (#77324) +### Updated +- markup for gift card code on paypal express review page (#70133) +- default image width set to `auto` and `max-wdith` to `100%` Affects: all images width ## [2.17.0] - 2021-03-30 ### Added - images in snowdog menu desktop template (#70218), compatible with `snowdog/module-menu` version `2.14.0` diff --git a/Magento_Catalog/templates/category/image.phtml b/Magento_Catalog/templates/category/image.phtml index 659727550..fa3f1fa3a 100644 --- a/Magento_Catalog/templates/category/image.phtml +++ b/Magento_Catalog/templates/category/image.phtml @@ -14,8 +14,9 @@ $categoryImageViewModel = $block->getCategoryImageViewModel(); $_category = $block->getCurrentCategory(); $_imgHtml = ''; + $_imgUrl = $block->getImage()? $block->getImage()->getUrl($_category): null; ?> -getImage()->getUrl($_category)): ?> + get($_category); $imgWidth = $imgSize['width']; diff --git a/Magento_Catalog/templates/product/view/addto/compare.phtml b/Magento_Catalog/templates/product/view/addto/compare.phtml index e87ef96b6..0bc0564c4 100644 --- a/Magento_Catalog/templates/product/view/addto/compare.phtml +++ b/Magento_Catalog/templates/product/view/addto/compare.phtml @@ -16,7 +16,8 @@ $additionalClass = $block->getAdditionalClass(); data-role="add-to-links" type="button" data-testid="product-compare-button" - aria-label="escapeHtmlAttr(__('Add to compare')) ?>" + aria-label="escapeHtmlAttr(__('Add to Compare')) ?>" + title="escapeHtmlAttr(__('Add to Compare')) ?>" > getShippingAddress()) : ?>
- + escapeHtml(__('Shipping Method')) ?> canEditShippingMethod()) : ?> getShippingRateGroups()) : ?> getCurrentShippingRate(); ?> - -
-
- -
+ escapeHtml(__('Shipping Method')) ?> + +
-
+
diff --git a/Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml b/Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml index ab18f00fc..9570777d6 100644 --- a/Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml +++ b/Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml @@ -19,7 +19,8 @@ $productId = $block->getProduct()->getId(); " type="button" data-testid="add-to-wishlist-button" - aria-label="escapeHtmlAttr(__('Add product to wishlist')) ?>" + aria-label="escapeHtmlAttr(__('Add to Wish List')) ?>" + title="escapeHtmlAttr(__('Add to Wish List')) ?>" data-multiplewishlist='getWishlistParams() ?>' data-mage-init='{ "wishlistItem": { diff --git a/PayPal_Braintree/styles/_module.scss b/PayPal_Braintree/styles/_module.scss new file mode 100644 index 000000000..6f5e90583 --- /dev/null +++ b/PayPal_Braintree/styles/_module.scss @@ -0,0 +1,3 @@ +@import 'modules/braintree'; +@import 'modules/google-pay'; +@import 'modules/apple-pay'; diff --git a/PayPal_Braintree/styles/modules/_apple-pay.scss b/PayPal_Braintree/styles/modules/_apple-pay.scss new file mode 100644 index 000000000..bd469ad56 --- /dev/null +++ b/PayPal_Braintree/styles/modules/_apple-pay.scss @@ -0,0 +1,30 @@ +$apple-pay-button__padding : $spacer 0 !default; +$apple-pay-button__margin : $spacer--medium 0 !default; +$apple-pay-button__width : 200px !default; +$apple-pay-button__min-height : 48px !default; +$apple-pay-button__border : 1px solid $black !default; +$apple-pay-button__background-image : -webkit-named-image(apple-pay-logo-black) !default; +$apple-pay-button__background-color : $black !default; +$apple-pay-button__background-size : 100% !default; +$apple-pay-button__background-repeat : no-repeat !default; +$apple-pay-button__background-position : 50% 50% !default; +$apple-pay-button__background-border-radius: $spacer--extra-small !default; +$apple-pay-button__background-transition : background-color 0.3s !default; + +.braintree-apple-pay-button { + -webkit-appearance: -apple-pay-button; + display: block; + padding: $apple-pay-button__padding; + margin: $apple-pay-button__margin; + width: $apple-pay-button__width; + min-height: $apple-pay-button__min-height; + border: $apple-pay-button__border; + background-image: $apple-pay-button__background-image; + background-size: $apple-pay-button__background-size; + background-repeat: $apple-pay-button__background-repeat; + background-color: $apple-pay-button__background-color; + background-position: $apple-pay-button__background-position; + border-radius: $apple-pay-button__background-border-radius; + transition: $apple-pay-button__background-transition; + cursor: pointer; +} diff --git a/PayPal_Braintree/styles/modules/_braintree.scss b/PayPal_Braintree/styles/modules/_braintree.scss new file mode 100644 index 000000000..89273c5ee --- /dev/null +++ b/PayPal_Braintree/styles/modules/_braintree.scss @@ -0,0 +1,49 @@ +.braintree { + &__input--date { + display: flex; + flex-wrap: wrap; + + .input__field { + flex: 1; + } + } + + &__tooltip-wrapper { + position: relative; + + .braintree__tooltip { + height: 48px; + right: $spacer--medium; + } + } + + &__error { + display: none; + width: 100%; + } + + img { + width: auto; + } + + .ccard { + & > .field.cvv { + & > .control { + &.braintree__tooltip-wrapper { + padding-right: 0; + } + } + } + } +} + +.braintree-hosted-fields-invalid { + & ~ .braintree__error { + display: flex; + } +} + +.braintree-paypal-fieldset { + padding: 0; + border: none; +} diff --git a/PayPal_Braintree/styles/modules/_google-pay.scss b/PayPal_Braintree/styles/modules/_google-pay.scss new file mode 100644 index 000000000..65c3ee8dd --- /dev/null +++ b/PayPal_Braintree/styles/modules/_google-pay.scss @@ -0,0 +1,249 @@ +$google-pay-button__border : 0 !default; +$google-pay-button__border-radius : $spacer--extra-small !default; +$google-pay-button__box-shadow : rgba(60, 64, 67, 0.3) 0 1px 1px 0, rgba(60, 64, 67, 0.15) 0 1px 3px 1px !default; +$google-pay-button__height : 40px !default; +$google-pay-button__padding : $spacer--small $spacer--semi-medium !default; + +// black +$google-pay-button__black-background-color : $black !default; +$google-pay-button__black-background-color--active : #5f6368 !default; +$google-pay-button__black-background-color--hover : #3c4043 !default; +$google-pay-button__black-background-image--short : url(https://www.gstatic.com/instantbuy/svg/dark_gpay.svg) !default; +$google-pay-button__black-background-image--long : url(https://www.gstatic.com/instantbuy/svg/dark/en.svg) !default; +$google-pay-button__black-box-shadow : none !default; +$google-pay-button__black-padding : $spacer--small $spacer--semi-medium $spacer !default; + +// white +$google-pay-button__white-background-color : $white !default; +$google-pay-button__white-background-color--active : $white !default; +$google-pay-button__white-background-color--hover : #f8f8f8 !default; +$google-pay-button__white-background-image--short : url(https://www.gstatic.com/instantbuy/svg/light_gpay.svg) !default; +$google-pay-button__white-min-width--short : 90px !default; +$google-pay-button__white-width--short : 160px !default; +$google-pay-button__white-min-width--long : 150px !default; +$google-pay-button__white-width--long : 240px !default; +$google-pay-button__white-background-image--long : url(https://www.gstatic.com/instantbuy/svg/light/en.svg) !default; +$google-pay-button__white-box-shadow--focus : #e8e8e8 0 1px 1px 0, #e8e8e8 0 1px 3px !default; + +// minicart +$google-pay-minicart-logo__margin : $spacer--medium 0 0 !default; +$google-pay-minicart-logo__extra-actions-margin : 0 !default; + +// card +$googlepay__card-width : 30px !default; +$googlepay__card-field-padding-right : 80px !default; +$googlepay__card-right--selected : $spacer--medium !default; +$googlepay__card-position--selected : absolute !default; + +// paypal logo +$googlepay__paypal-logo-container-width : 100% !default; + +// field +$googlepay__field-color--required : $color-error !default; +$googlepay__field-placeholder-color : lightgrey !default; +$googlepay__field-margin--required : 0 0 0 $spacer--extra-small !default; +$googlepay__field-control-margin : $spacer $spacer 0 0 !default; + +// payment-method +$googlepay__payment-method-width : 100% !default; +$googlepay__payment-method-width : 100% !default; +$googlepay__payment-method-action-margin-bottom : $spacer--small !default; +$googlepay__payment-method-img-height : 40px !default; +$googlepay__payment-method-label-font-weight : $font-weight-medium !default; +$googlepay__payment-method-label-color--after : $color-error !default; +$googlepay__payment-method-label-margin--after : 0 0 0 $spacer--extra-small !default; + +$googlepay__payment-method-control-background : $white !default; +$googlepay__payment-method-control-border : $border-base !default; +$googlepay__payment-method-control-border-radius : 1px !default; +$googlepay__payment-method-control-font-family : $font-family-base !default; +$googlepay__payment-method-control-height : 32px !default; +$googlepay__payment-method-control-padding : 0 $spacer !default; +$googlepay__payment-method-control-width : 5rem !default; + +$googlepay__payment-method-error-color : $color-error !default; +$googlepay__payment-method-error-height : 0 !default; +$googlepay__payment-method-error-margin-top : $spacer !default; +$googlepay__payment-method-error-opacity : 0 !default; + +.braintree-googlepay-button { + background-origin: content-box; + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + border: $google-pay-button__border; + border-radius: $google-pay-button__border-radius; + box-shadow: $google-pay-button__box-shadow; + cursor: pointer; + height: $google-pay-button__height; + padding: $google-pay-button__padding; + + &.black { + background-color: $google-pay-button__black-background-color; + box-shadow: $google-pay-button__black-box-shadow; + padding: $google-pay-button__black-padding; + + &:active { + background-color: $google-pay-button__black-background-color--active; + } + + &:hover { + background-color: $google-pay-button__black-background-color--hover; + } + + &.short { + background-image: $google-pay-button__black-background-image--short; + } + + &.long { + background-image: $google-pay-button__black-background-image--long; + } + } + + &.white { + background-color: $google-pay-button__white-background-color; + + &:active { + background-color: $google-pay-button__white-background-color--active; + } + + &:focus { + box-shadow: $google-pay-button__white-box-shadow--focus; + } + + &:hover { + background-color: $google-pay-button__white-background-color--hover; + } + + &.short { + background-image: $google-pay-button__white-background-image--short; + } + + &.long { + background-image: $google-pay-button__white-background-image--long; + } + } + + &.short { + min-width: $google-pay-button__white-min-width--short; + width: $google-pay-button__white-width--short; + } + + &.long { + min-width: $google-pay-button__white-min-width--long; + width: $google-pay-button__white-width--long; + } +} + +.googlepay-minicart-logo { + margin: $google-pay-minicart-logo__margin; + + .minicart-content__extra-actions & { + margin: $google-pay-minicart-logo__extra-actions-margin; + } +} + +.checkout-payment-method .credit-card-types.braintree-credit-card-types img { + width: $googlepay__card-width; + -webkit-filter: none; + -webkit-transition: none; +} + +.braintree-card-control { + position: relative; + + .input__field { + padding-right: $googlepay__card-field-padding-right; + } +} + +.braintree-credit-card-selected { + position: $googlepay__card-position--selected; + right: $googlepay__card-right--selected; +} + +.braintree-paypal-logo.oneclick-container { + width: $googlepay__paypal-logo-container-width; +} + +#payment_form_braintree_ach_direct_debit { + .field > .fields { + .field { + .label { + font-weight: $font-weight-medium; + } + + &.required > .label:after { + content: '*'; + color: $googlepay__field-color--required; + margin: $googlepay__field-margin--required; + } + + .control { + margin: $googlepay__field-control-margin; + + input[type='text']::placeholder, + input[type='number']::placeholder { + color: $googlepay__field-placeholder-color; + } + } + } + } +} + +#payment-method-braintree-lpm { + .primary { + width: $googlepay__payment-method-width; + + .action { + margin-bottom: $googlepay__payment-method-action-margin-bottom; + width: $googlepay__payment-method-width; + + img { + height: $googlepay__payment-method-img-height; + } + } + } +} + +#payment-method-braintree-cc-vault { + .field { + &.required { + .label { + font-weight: $googlepay__payment-method-label-font-weight; + + &:after { + content: '*'; + color: $color-error; + margin: $googlepay__payment-method-label-margin--after; + } + } + } + + .hosted-control { + background: $googlepay__payment-method-control-background; + background-clip: padding-box; + border: $googlepay__payment-method-control-border; + border-radius: $googlepay__payment-method-control-border-radius; + font-family: $googlepay__payment-method-control-font-family; + height: $googlepay__payment-method-control-height; + padding: $googlepay__payment-method-control-padding; + box-sizing: border-box; + position: relative; + width: $googlepay__payment-method-control-width; + + &.braintree-hosted-fields-invalid:not(.braintree-hosted-fields-focused) ~ .hosted-error { + height: auto; + opacity: 1; + } + } + + .hosted-error { + clear: both; + color: $googlepay__payment-method-error-color; + height: $googlepay__payment-method-error-height; + margin-top: $googlepay__payment-method-error-margin-top; + opacity: $googlepay__payment-method-error-opacity; + } + } +} diff --git a/PayPal_Braintree/templates/googlepay/review.phtml b/PayPal_Braintree/templates/googlepay/review.phtml new file mode 100644 index 000000000..01be33ec1 --- /dev/null +++ b/PayPal_Braintree/templates/googlepay/review.phtml @@ -0,0 +1,262 @@ + +
+
+
+ getShippingAddress()) : ?> +
+
+
+ + escapeHtml(__('Shipping Method')) ?> + + canEditShippingMethod()) : ?> + getShippingRateGroups()) : ?> + getCurrentShippingRate(); ?> +
+ + +
+
+
+ +
+
+ +

+ escapeHtml(__('Sorry, no quotes are available for this order right now.')); ?> +

+ + +

+ renderShippingRateOption($block->getCurrentShippingRate()); ?> +

+ +
+
+
+
+

+ escapeHtml(__('Shipping Address')) ?> +

+
+
+ escapeHtml($block->renderAddress($block->getShippingAddress()), ['br']);?> +
+
+ getCanEditShippingAddress()) : ?> +
+
+ + escapeHtml(__('Edit')) ?> + +
+
+ +
+ +
+

+ escapeHtml(__('Payment Method')) ?> +

+
+ escapeHtml('Google Pay') ?> +
+ escapeHtml($block->getEmail()) ?> +
+
+
+
+ +
+
+ getChildHtml('paypal.additional.actions') ?> +
+
+ +
+

+ escapeHtml(__('Items in your shopping cart')) ?> +

+
+
+ + escapeHtml(__('Edit Shopping Cart')) ?> + +
+
+ getChildHtml('details') ?> + +
+ getChildHtml('agreements') ?> +
+ + +
+
+
+
+ diff --git a/PayPal_Braintree/web/template/payment/form.html b/PayPal_Braintree/web/template/payment/form.html new file mode 100644 index 000000000..782b737f5 --- /dev/null +++ b/PayPal_Braintree/web/template/payment/form.html @@ -0,0 +1,255 @@ +
+
+ + +
+
+ + + +
+ + + +
+
+
+ + + +
+ +
+ + + + + + + +
+
+ +
+
+
+
    + +
  • + + + +
    • + +
+ +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+
+
+ +
+ +
+ + + +
+
+
+
+ + +
+ + +
+ + + +
+
+
+ +
+ +
+
+ + + +
+ + + +
+
+ +
+
+
+
diff --git a/Snowdog_Components/components/Molecules/image/_image.scss b/Snowdog_Components/components/Molecules/image/_image.scss index 9bcc8dc96..706b4e3a9 100644 --- a/Snowdog_Components/components/Molecules/image/_image.scss +++ b/Snowdog_Components/components/Molecules/image/_image.scss @@ -1,4 +1,5 @@ -$image__width : 100% !default; +$image__width : auto !default; +$image__max-width : 100% !default; $image__transition : $transition-fade !default; $image__wrapper-background-color : $white !default; @@ -8,7 +9,7 @@ $image__picture-lazyload-bg-image : url('../images/loader-svg.svg') !default; .image { display: block; width: $image__width; - max-width: $image__width; + max-width: $image__max-width; transition: $image__transition; &.lazyload, diff --git a/Snowdog_Components/components/Templates/paypal-review/_paypal-review.scss b/Snowdog_Components/components/Templates/paypal-review/_paypal-review.scss index 52fd2f60e..872f50640 100644 --- a/Snowdog_Components/components/Templates/paypal-review/_paypal-review.scss +++ b/Snowdog_Components/components/Templates/paypal-review/_paypal-review.scss @@ -4,4 +4,13 @@ $paypal-review__product-image-width: 80px !default; &__product-image { width: $paypal-review__product-image-width; } + + tfoot { + tr { + th { + border-top: $border-width-base $border-style-base $gray-light; + border-bottom: none; + } + } + } } diff --git a/styles/_theme.scss b/styles/_theme.scss index 16e68af1c..05932a8d2 100644 --- a/styles/_theme.scss +++ b/styles/_theme.scss @@ -9,3 +9,4 @@ @import '../Magento_QuickOrder/styles/module'; @import '../Yotpo_Yotpo/styles/module'; @import '../Magento_Msrp/styles/module'; +@import '../PayPal_Braintree/styles/module';