Meal button alignment and behavior (desktop)

[d33pspace]

@AnKar112 (1) I noticed the meal button vertical alignment on the main page is off depending on the number of digits in the time.

(2) On desktop and mobile, I'd like the meal button to turn to red background when pressed. This applies to the main page only. (The give/take/return pages already work like this.)

(3) On all functional pages - desktop - I'd like to change the meal button hover action to the second one here.

This applies to main, give, take and return pages.

https://user-images.githubusercontent.com/89512026/159070987-12aa29d2-af69-4029-bff7-60d041df34b8.mov

[AnKar112]

(1) - done (2) - done. But now it turns red when you press all this block, is it right? https://i.imgur.com/oMMdQ95.jpg (3) - done. But we have a little problem there. Both icons, faces and meal, have totally the same transition time. But faces background color bit more "aggressive", more bright. Because of that it looking like icons have different speed of color change.

[d33pspace]

@AnKar112 Hi! (1) Looks great!

(2) Looks better, but the hover effect on the Main page is different than the Give, Take and Return pages. I want the meal buttons on the Main page to work exactly like the ones on the Give, Take and Return pages. Right now, if the button is red on the Main page, and you hover over it, it is still red, it does not turn light pink.

(3) I see what you mean about the faces. I will ask Mariia for an updated hover effect design.

[AnKar112]

@d33pspace (2) - done

[d33pspace]

@AnKar112 Concerning (3), Mariia has updated the meal and faces buttons here. I'm sorry she seems to have changed both "hover" and "pressed" effects, and I would like these to be the same across Main, Give, Take and Return pages.

[AnKar112]

Done. Btw, again about (2). For now, it works as you want, but it's not a very good idea. Because of that, we have a little bug - when you click on the icon and after that continue to hover the cursor, the icon still has hover styles, not active styles.

[d33pspace]

@AnKar112 The change looks good, Anton. But I agree. Is this something you can correct yourself, or do you need Mariia to provide a design for it?

[AnKar112]

I can do it myself, I mean it can't work together. If the button in active state, hover styles must be off, other way we have this bug

[d33pspace]

@AnKar112 I'm sorry Anton, I don't understand. I'm not a technical person so I don't really know what you are saying. It is fine to turn hover styles off in active state if that is what is required. Are you able to change this how it should work, or do you need some additional design guidance from Mariia? 😊

[AnKar112]

No, I can do it myself. Done.

[d33pspace]

@AnKar112 Perfect! Thanks! Sorry for my confusion!

Just one small thing. These "blank" rows should not have blank button or time.

[AnKar112]

Done

[d33pspace]

@AnKar112 Thank you!