Commit Graph

6 Commits

Author SHA1 Message Date
Seghir Nadir 07a0b8477b
Fix visual inconsisties in Cart/Checkout between elements and between Light/Dark modes (#51585)
* darker outline and double outline on focus

* flip outlines for shipping selector

* fix select outline in dark mode

* Fix input labels being cut off due to line height

* adjust outline colors

* fix rest of problems in dark mode

* fix express payment on checkout

* Fix broken styles for shipping cart in medium

* Always center input label

* Fix order note background in dark mode

* remove empty space in payment methods when there's no content inside

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* fix linter issues

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-09-23 14:11:43 +02:00
Patricia Hillebrandt 5dd7713346
[Performance]: Replace `classnames` usage with `clsx` (#47760)
* Replace classnames with clsx within woocommerce-blocks.

* Undo unnecessary change to getClassnames const.

* Replace classnames with clsx within woocommerce-admin.

* Add changelog.

* Update the pnpm lock file

* Address lint.

* Address lint errors for the block-library.
2024-05-31 05:49:36 +02:00
Alex Florisca 7dc8dd63ba
Update Order Summary Design (#45767)
* Add border around order summary on cart & checkout

* Group subtotal, discount, fees, taxes and shiping block

* Move the coupon form in order summary

* Move the coupon form in order summary

* Manage state externally in Panel component and refactor Coupon form to use the Panel component

* Remove descriptions from order summary items

* increase font weight of order summary title

* Tidy up design for desktop and add separator back in for blocks on checkout order summary

* Remove border around order summary on mobile

* Revert "Move the coupon form in order summary"

This reverts commit 4a8044cdcf.

* Change heading styles for cart

* Change font weight to 500 of order summary heading on checkout block

* Remove padding and border between order summary totals items

* Refactor css for cart & checkout totals to work in the editor

* Adjust cart totals heading in the editor

* Last adjustment to checkout totals style to work in editor

* Add changelog

* Change the cursor to pointer for the panel component

* remove unused short and full description from OrderSummaryItem

* Fix failing e2e tests

* Fix lint issues

* Vertically align order summary title in the editor

* Fix e2e tests

* Fix linting issues

* Fix unit tests

* Remove changes from woocommerce.php

* Fix checkout block test

* fix eslint errors in checkout block test

---------

Co-authored-by: Niels Lange <info@nielslange.de>
2024-04-25 12:03:31 +07:00
Tarun Vijwani 4e6476a996
Adjust spacing in/between elements on the Cart and Checkout block pages (#44160)
* Add spacing in Checkout block page

* Add spacing in Order summary block

* Update responsive styles for order summary panel

* Update styles for cart and cart line items table

* Update styles for order summary and cross-sells products

* Remove unnecessary CSS styles from cart line items table and cart block

* Remove unused CSS class from cart line items table

* Fix linting errors

* Add changelog

* Fix changelog lint

* Update quantity selector style

* Increase the line-height of the set description and remove margin top from email field

* Add margin-top to order summary image and express payment margin adjustment

* Update styles for cart and checkout components

* Fix linting error

* Fix margin units in cart-cross-sells-products

* Replace em with px

* Add margin-top to payment method container

* Update styles for Cart block for mobile screen

* Update padding in cart style.scss
2024-02-17 01:50:11 +04:00
Tarun Vijwani 29b4217f15 Update the border colors in the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/11474)
* Change border color to Gutenberg 100 for Cart and Checkout blocks

* Change form input color to Gutenberg 900 for Cart and Checkout blocks

* Fix additional border colors of Checkout block

* Update borders and form field colors in Cart Block

* Change border color to $universal-border-light

* Change border color for cart line items to $universal-border-light

* Change  form input fields border color to $universal-border-dark

- Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white.

* Fix colors of text area border and form steps

* Change  form input fields border color to $universal-border-dark

- Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white.

* Fix form steps

* Update universal dark border rgba value

- Update universal dark border rgba value from rgba(0, 0, 0, 0.882) to rgba(17, 17, 17, .80) to keep it consistent with universal-border colors

* Update $universal-border-light color

* Update the opacity of the borders

* Update the border color to rgba (17, 17, 17, 0.12)

* Roll back $universal-border-light value to the original value: 0.115

* Remove Opacity and pass it as argument in with-translucent-border

- We have with-translucent-border option that accepts border and opacity for pseudo elements.

* Remove additional spaces

* Replace with-translucent-border with normal border

- Since we're are not mixing the opacity to the border color so we don't need to use mixin with-translucent-border.

* Fix applied css and add low contrast Color usage details

-  Fix minor CSS as per the standards.
- Add comments for universal border colors that they're low contrast colors and should be used for decorative elements only

* Fix border gap and double border for multiple shipping packages

* Fix payment method borders and Cart line items borders

- Change border bottom to border-top for cart line items.
- Fix payment method radio control borders.

* Fix local pickup border

- Local pickup was using  with-translucent-borders so it has some opacity, changed it to border-bottom.

* Add border-bottom to cart items

* Remove additional border from Cart items

* Fix radio and checkbox borders as per the design

* Fix shipping method borders and background color as per the design.

* Force align left on the description for the local pickup options.

* Update border color in quantity selector component

* Fix Shipping options radio selection alignment

- Add left padding to wc-block-components-shipping-rates-control__package element.

* Update colors and variables

* Change checkbox and radio button colors

- Change checkbox and radio button colors from  rgba(25, 23, 17, 0.3) to  rgba(25, 23, 17, 0.48).

* Remove bottom property from express payment style
2023-12-07 21:37:48 +04:00
Thomas Roberts cc84383730 Move all totals components into components package (https://github.com/woocommerce/woocommerce-blocks/pull/11773)
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
2023-11-20 12:53:41 +00:00