[BUGFIX] Move 'Clear cart' button to the upper part of the window

[rafalpyska]

Related issues

#2697

Short description and why it's useful

Move "clear cart" button to the top of the cart. Additionaly, I've added conditional to clear cart button because it was displaying when there was no products in the cart.

Screenshots of visual changes before/after (if there are any)

Which environment this relates to

Test version (bugfix to new feature).

[pkarw]

Thanks! I belive we should consult it with the UX designer as this button shouldn’t look like the main CTA which is Go To Cart in here

[pkarw]

We need a UX review @StasiekDivante

[StasiekDivante]

A "clear cart" button can have the same style as "return to shipping" one + additional remove icon. We use this style for button through the demo as a secondary button.

To create visual clarity small 1px divider can be added beneath "shopping cart" header

[pkarw]

Thanks, @StasiekDivante; @rafalpyska can You please adjust the styles?

[rafalpyska]

@pkarw I've created new ClearCartButton component with appropriate styles and provided en-US translation. However, icon doesn't look the same as in the image above, despite the fact that I used appropriate material.io class. What about mobile view?

[pkarw]

@rafalpyska could You please provide us with the screenshots after changes?

[rafalpyska]

@pkarw

Mobile

[rafalpyska]

@pkarw I have added horizontal divider and decreased font size a little bit. But I see it's too late.