Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix TwentyX styling issues for cart/checkout form fields #4046

Merged
merged 4 commits into from
Apr 12, 2021
Merged

Conversation

mikejolley
Copy link
Member

Fixes the styling issues raised in #3006.

  • b75fc4d Checkbox mark is misaligned on TwentyTwenty and TwentySeventeen. This was caused by a missing font size rule on the inputs.
  • 2caf286 Quantity selector controls have an underline in TwentyTwenty. Just had to remove those styles with greater specificity.
  • Buttons have a gray background on hover and click in TwentySeventeen dark mode. Same as above. Specificity on buttons.
  • Select-control is misshaped in Editor view in all themes. We were missing styles for rounded corners, and some dark mode colors.

The "Regular and Sale price are misaligned" issue was already solved.

Fixes #3006

Screenshots

Dark and light mode inputs:

Screenshot 2021-04-08 at 10 38 17
Screenshot 2021-04-08 at 10 38 08

How to test the changes in this Pull Request:

  1. In Twenty Seventeen theme, enable dark mode in the customiser.
  2. Add any item to the cart then go to the cart page.
  3. Hover over a qty input. There should be no underline or background change.
  4. Hover over the coupon code button. There should be no underline or background change.
  5. Go to checkout.
  6. Confirm the checkbox styling is correct (no overlap of check mark and box)
  7. Go to the editor for the checkout page. See that the select box (country) is styling with rounded corners like other inputs.

Changelog

Fixed styling issues on the cart and checkout page in TwentyX themes.

@mikejolley mikejolley added status: needs review focus: global styles Issues that involve styles/css/layout structure. labels Apr 8, 2021
@mikejolley mikejolley added this to the 4.9.0 milestone Apr 8, 2021
@mikejolley mikejolley requested a review from a team as a code owner April 8, 2021 09:45
@mikejolley mikejolley self-assigned this Apr 8, 2021
@mikejolley mikejolley requested review from senadir and removed request for a team April 8, 2021 09:45
@mikejolley mikejolley changed the title Fix/3006 Fix TwentyX styling issues for cart/checkout form fields Apr 8, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Apr 8, 2021

Size Change: +815 B (0%)

Total Size: 1.17 MB

Filename Size Change
build/style-rtl.css 18.8 kB +407 B (+2%)
build/style.css 18.8 kB +408 B (+2%)
ℹ️ View Unchanged
Filename Size Change
build/active-filters-frontend.js 8.62 kB 0 B
build/active-filters.js 8.7 kB 0 B
build/all-products-frontend.js 36.1 kB 0 B
build/all-products.js 37.3 kB 0 B
build/all-reviews.js 9.91 kB 0 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 1.81 kB 0 B
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 2.58 kB 0 B
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 336 B 0 B
build/atomic-block-components/add-to-cart-frontend.js 8.72 kB 0 B
build/atomic-block-components/add-to-cart.js 7.82 kB 0 B
build/atomic-block-components/button-frontend.js 1.52 kB 0 B
build/atomic-block-components/button.js 897 B 0 B
build/atomic-block-components/category-list-frontend.js 469 B 0 B
build/atomic-block-components/category-list.js 477 B 0 B
build/atomic-block-components/image-frontend.js 1.82 kB 0 B
build/atomic-block-components/image.js 1.29 kB 0 B
build/atomic-block-components/price-frontend.js 1.98 kB 0 B
build/atomic-block-components/price.js 2 kB 0 B
build/atomic-block-components/rating-frontend.js 520 B 0 B
build/atomic-block-components/rating.js 526 B 0 B
build/atomic-block-components/sale-badge-frontend.js 860 B 0 B
build/atomic-block-components/sale-badge.js 868 B 0 B
build/atomic-block-components/sku-frontend.js 389 B 0 B
build/atomic-block-components/sku.js 394 B 0 B
build/atomic-block-components/stock-indicator-frontend.js 567 B 0 B
build/atomic-block-components/stock-indicator.js 573 B 0 B
build/atomic-block-components/summary-frontend.js 919 B 0 B
build/atomic-block-components/summary.js 926 B 0 B
build/atomic-block-components/tag-list-frontend.js 465 B 0 B
build/atomic-block-components/tag-list.js 473 B 0 B
build/atomic-block-components/title-frontend.js 1.4 kB 0 B
build/atomic-block-components/title.js 1.26 kB 0 B
build/attribute-filter-frontend.js 18.4 kB 0 B
build/attribute-filter.js 12.5 kB 0 B
build/blocks-checkout.js 17.2 kB 0 B
build/blocks.js 3.49 kB 0 B
build/cart-frontend.js 76.6 kB 0 B
build/cart.js 42.5 kB 0 B
build/checkout-frontend.js 81.4 kB 0 B
build/checkout.js 45.1 kB 0 B
build/editor-rtl.css 14.9 kB 0 B
build/editor.css 14.9 kB 0 B
build/featured-category.js 7.86 kB 0 B
build/featured-product.js 10.1 kB 0 B
build/handpicked-products.js 7.54 kB 0 B
build/price-filter-frontend.js 14.8 kB 0 B
build/price-filter.js 10 kB 0 B
build/price-format.js 1.46 kB 0 B
build/product-best-sellers.js 7.61 kB 0 B
build/product-categories.js 3.24 kB 0 B
build/product-category.js 8.56 kB 0 B
build/product-new.js 7.79 kB 0 B
build/product-on-sale.js 8.18 kB 0 B
build/product-search.js 3.61 kB 0 B
build/product-tag.js 6.61 kB 0 B
build/product-top-rated.js 7.75 kB 0 B
build/products-by-attribute.js 8.54 kB 0 B
build/reviews-by-category.js 12 kB 0 B
build/reviews-by-product.js 13.5 kB 0 B
build/reviews-frontend.js 9.58 kB 0 B
build/single-product-frontend.js 39.3 kB 0 B
build/single-product.js 10.3 kB 0 B
build/vendors--atomic-block-components/price-frontend.js 6.53 kB 0 B
build/vendors-style-rtl.css 1.05 kB 0 B
build/vendors-style.css 1.05 kB 0 B
build/vendors.js 419 kB 0 B
build/wc-blocks-data.js 7.35 kB 0 B
build/wc-blocks-google-analytics.js 1.99 kB 0 B
build/wc-blocks-middleware.js 1.32 kB 0 B
build/wc-blocks-registry.js 2.74 kB 0 B
build/wc-payment-method-bacs.js 812 B 0 B
build/wc-payment-method-cheque.js 807 B 0 B
build/wc-payment-method-cod.js 903 B 0 B
build/wc-payment-method-paypal.js 844 B 0 B
build/wc-payment-method-stripe.js 12.3 kB 0 B
build/wc-settings.js 2.42 kB 0 B
build/wc-shared-context.js 1.53 kB 0 B
build/wc-shared-hocs.js 1.72 kB 0 B

compressed-size-action

Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, just a small formatting comment, but it's not blocking.

Comment on lines +84 to +85
.has-dark-controls
.wc-block-components-checkbox__input[type="checkbox"]:checked {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this auto-formatted? I think keeping each selector in one line makes code clearer.

Suggested change
.has-dark-controls
.wc-block-components-checkbox__input[type="checkbox"]:checked {
.has-dark-controls .wc-block-components-checkbox__input[type="checkbox"]:checked {

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it looks like my IDE wrapped it due to length.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, let's merge it as-is. 👍

@Aljullu Aljullu merged commit ce62de6 into trunk Apr 12, 2021
@Aljullu Aljullu deleted the fix/3006 branch April 12, 2021 10:03
@Aljullu Aljullu added the type: bug The issue/PR concerns a confirmed bug. label Apr 12, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix various styling issues
2 participants