fix: css fixes for tag

[montezume]

Summary

While working on implementing design tokens in the Tag component, I noticed some style weirdness.

Design has provided the following image

I have made the changes to make the Tag follow these styles.

[tdeekens]

Thanks. I remember the requirement back then being that there isn't a right hand border (in case that changed). In any case I don't mind. Thanks!

[montezume]

@tdeekens you're right, I jumped the gun on the right hand border thing. I'll update the PR gifs

[mariabarrena]

Besides confirming that design team agrees with fixing the wrong border-radius when the tag is removeable, @montezume and I have spoken about improving the hover on the removable part:

Right now, the tags present two different type of hover effects into the same component: one for the left side to be redirected to somewhere else and one on the right side to remove the tag. It seems logical that, because one is a "link" and the other one is an action, they don't look the same and the take the hover effects from the buttons and the inputs. However the current hover to remove the tag presents several problems:
• The dark grey makes the black icon barely visible
• The shadow of that area overlaps the select input when we are talking about multiselect cases
• We have actions in the MC that are not triggered by a button: toggles, changing views from basic to advance mode on discounts and PIM search or set default address functionality are examples of that.

What was proposed is what you can see in the image: a "lightweight" hover effect. This would solve all the things mentioned above and looks way cleaner inside the multiselect inputs. The icon is also changed from black to orange on hover to make the hover a bit more visible. Again, in multiselect inputs, the border of the tags and the border of the select input are too close to see clearly the hover effect without changing the icon color. That would also solve the problem on what would the hover effect be on warning mode. A mode that, by the way, we are not using in the MC at all right now.

Design team is aware of it as well and agrees, but in somebody finds reasons on why this is a bad idea or have a better solution, we can discuss it. If we make these changes, please assign the UI review to @Shecki.

[montezume]

I made those changes illustrated by Maria, and the deployed branch can be see here

[tdeekens]

Code looks good to me. Cheers.

[Shecki]

Works 👍 Thanks!