Reaction: Cart's X is not aligned

[machikoyasuda]

Visual bug: Screenshots

| Expected | Actual |
|---------- |:------------: |
| | |

Expected behavior

• The (X) icon should be centered, relative to the corner of the image.

Actual behavior

• The (X) is a few pixels too far to the left.

Steps to reproduce the behavior

1. Add an item to cart.
2. Click the cart.
3. Observe cart.

Versions

Node: 8.2.1
NPM: 5.6.0
Meteor Node: 8.9.3
Meteor NPM: 5.5.1
Reaction CLI: 0.27.0
Reaction: 1.8.0
Reaction branch: release-1.8.0
Docker: 17.09.0-ce

• Google Chrome
• Mac OS X
• http://whatismybrowser.com/w/AX335CK

QA

QA'd by @willopez + @machikoyasuda

For enhancements or other issues, please describe, in as much detail as
possible, how the app should be changed, and how this would benefit other users and developers.

[cassytaylor]

It looks like this issue could be resolved by simply removing the 2px border on the "X" button.. or at least it would make any misalignment less noticeable :) (also, more consistent with other delete buttons)

here's a mock with the button moved down a couple of pixels as well (so it's centered over the top edge of the product image);

[aaronjudd]

👍 I also saw this (new) ui issue.. @cassytaylor there is no reason to the current X design -> except it's leftover from the most early days of creation, and can be safely updated as I also think this is the only representative of this ui anywhere -> maybe we could look at what the modal / popup X styling and converge on a normal "X"? In this case, I think that'd probably just mean removing the color background on the X as well.

[kieckhafer]

@cassytaylor @aaronjudd Came into this ticket to assign it to myself. I fixed the alignment issue in #3740, happy to discuss updating the styling as well if we want to do that at this time.

[cassytaylor]

@aaronjudd @kieckhafer yeah, in terms of making it consistent with the next most similar "remove" X button - the one on the PDP product images in Edit mode - I think it would just require changing the background to white.

I haven't done a full audit of all of the remove/close icons around the site, but it sounds like @rymorgan wants to move to a model in the cart where you'd edit the quantities of the items vs. clicking "X" to remove them, so the "X" buttons would generally be used to close things going forward - but that's probably a discussion for a different time :)

[kieckhafer]

@cassytaylor The PDP page does not have a border on it either, which makes it look a bit odd in the cart with a white background, when the image has a white background too:

I think white background + 1px border (dropped from 2px) looks pretty good and more consistent, what do you think?

This all under the assumption it's probably temporary once @rymorgan starts to redesign it.

[cassytaylor]

@kieckhafer hmm 🤔the designer in me wants to get rid of the border entirely, but I do agree with you that it works better for product images with white backgrounds (so generally, most all)..

Maybe we could compromise and keep the pinkish gray background (but no border)?

@rymorgan and I will be working on reining in all of these components with the style guide... so we'll create some rhyme and reason for all of these soon, haha.

[kieckhafer]

@cassytaylor

[cassytaylor]

@kieckhafer, works fer me!

[rymorgan]

I get the logic to where we ended up here, but it shouldn't be that yellow. I think it should be like 15% grey. We do need to revisit this whole ux flow for removing items from cart though.

[kieckhafer]

Updated to be grey.