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

Make the customer account icon bigger to match the mini-cart one #8594

Merged
merged 8 commits into from
Mar 3, 2023

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Mar 1, 2023

The goal of this PR is to increase the size of the Customer account icon to make it more similar to the Mini cart one.

Fixes #8128

Testing

Check the icon size

  1. Go to the Site Editor and edit the Header template.
  2. Insert the Customer account and Mini-cart blocks next to the menu, to look like this 👇

Screenshot 2023-03-01 at 14 16 48

  1. Check the Customer account icon is bigger than before and matches the Mini cart icon size.
Before After
Screenshot 2023-03-01 at 14 20 35 Screenshot 2023-03-01 at 14 21 42
  1. Modify the font size on both blocks to M, L, and XL and check the icon sizes also match.

Check the icon size of existing blocks does not change

  1. Go to trunk.
  2. Create a new page/post, add a Customer account block, and save.
  3. Checkout to this branch (update/8128-account-icon-size).
  4. Reload the page from step 2.
  5. Insert another Customer account block and save.
  6. Check in the editor that the block icon inserted in step 1 keeps its size and the one inserted in step 5 is bigger.
  7. Check the same in the frontend.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix: increase the "Customer account" size icon.

@albarin albarin added focus: global styles Issues that involve styles/css/layout structure. block: mini-cart Issues related to the Mini-Cart block. labels Mar 1, 2023
@albarin
Copy link
Contributor Author

albarin commented Mar 1, 2023

Hi @vivialice, we have increased the size of the Customer account icon, could you have a look to see if it's enough? Thanks!

@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8594.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 484
  • Total errors: 2305

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2023

Size Change: +133 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/all-products.js 36.4 kB -3 B (0%)
build/attribute-filter.js 12.4 kB -1 B (0%)
build/cart.js 47.4 kB -8 B (0%)
build/checkout.js 44.2 kB +3 B (0%)
build/customer-account.js 3.17 kB +86 B (+3%)
build/mini-cart-contents.js 16.6 kB -1 B (0%)
build/price-filter.js 8.38 kB +1 B (0%)
build/product-add-to-cart.js 8.6 kB +1 B (0%)
build/product-button.js 3.99 kB +1 B (0%)
build/product-image.js 4.09 kB +2 B (0%)
build/product-price.js 1.58 kB +1 B (0%)
build/product-query.js 6.6 kB -1 B (0%)
build/product-search.js 2.63 kB +1 B (0%)
build/product-title.js 3.46 kB +1 B (0%)
build/rating-filter.js 7.42 kB -1 B (0%)
build/single-product.js 9.93 kB -5 B (0%)
build/wc-blocks-style-rtl.css 26.8 kB +28 B (0%)
build/wc-blocks-style.css 26.7 kB +27 B (0%)
build/wc-blocks-vendors.js 64.4 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.98 kB
build/active-filters.js 7.32 kB
build/all-products-frontend.js 11.7 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.36 kB
build/attribute-filter-wrapper-frontend.js 4.46 kB
build/blocks-checkout.js 41.2 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.69 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/cart-frontend.js 28.9 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.42 kB
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.28 kB
build/checkout-blocks/shipping-methods-frontend.js 4.58 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.5 kB
build/featured-category.js 13.5 kB
build/featured-product.js 13.7 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.24 kB
build/legacy-template.js 5.28 kB
build/mini-cart-component-frontend.js 28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.86 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/shopping-button-frontend.js 575 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 2 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.7 kB
build/product-best-sellers.js 7.6 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button-frontend.js 2.22 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 502 B
build/product-category.js 8.58 kB
build/product-image-frontend.js 2.23 kB
build/product-new.js 7.58 kB
build/product-on-sale.js 7.91 kB
build/product-price-frontend.js 2.32 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 920 B
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 816 B
build/product-sku-frontend.js 629 B
build/product-sku.js 376 B
build/product-stock-indicator-frontend.js 1.31 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.18 kB
build/product-tag-list.js 497 B
build/product-tag.js 8.07 kB
build/product-title-frontend.js 1.65 kB
build/product-top-rated.js 7.82 kB
build/products-by-attribute.js 8.53 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.12 kB
build/single-product-frontend.js 17.9 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 3.15 kB
build/stock-filter.js 8.13 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 8.84 kB
build/wc-blocks-data.js 21.5 kB
build/wc-blocks-editor-style-rtl.css 5.74 kB
build/wc-blocks-editor-style.css 5.75 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 29.7 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@albarin albarin added the needs: design The issue requires design input/work from a designer. label Mar 1, 2023
@albarin albarin force-pushed the update/8128-account-icon-size branch from 6982247 to 9d4e57d Compare March 3, 2023 08:56
@albarin
Copy link
Contributor Author

albarin commented Mar 3, 2023

@Aljullu could you have a look at this approach to increase the icon size on new blocks only?

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.

That's a really clever approach, I like it! I did some testing and it worked flawlessly on my end: there weren't changes in the block if it was already in the template, but when adding a new one, the sizes matched the Mini Cart block. 👏

I left one small suggestion below about the class name. Besides that, I would also add some explanation somewhere in the code (maybe when you register the variation) to explain the approach.

Even though the PR is a draft, I'm pre-approving, but happy to take another look if you want. 🙂

assets/js/blocks/customer-account/index.tsx Outdated Show resolved Hide resolved
@github-actions github-actions bot added this to the 9.8.0 milestone Mar 3, 2023
@albarin albarin marked this pull request as ready for review March 3, 2023 13:14
@woocommercebot woocommercebot requested review from a team and gigitux and removed request for a team March 3, 2023 13:14
@albarin albarin merged commit 744958d into trunk Mar 3, 2023
@albarin albarin deleted the update/8128-account-icon-size branch March 3, 2023 14:44
@Aljullu Aljullu added the type: enhancement The issue is a request for an enhancement. label Mar 13, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: mini-cart Issues related to the Mini-Cart block. focus: global styles Issues that involve styles/css/layout structure. needs: design The issue requires design input/work from a designer. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Icon + text scaling on Mini Cart and My Account block
2 participants