Desktop UI updates

[starryeyez024]

1. When adding new groceries from the list, I found myself tapping the name of an item like avocados, then hitting the "Add" button. Maybe the adding of custom items would be less confusing if it appeared over the top of the users personal list of items instead?
2. Perhaps the food item containers could be a little wider to show more of the name?
3. I don't think Tailwind supports this out of the box, but on desktop, you could add some custom CSS that takes into account the height of the screen, and then makes the input fields that contain the food items much taller.

@media screen and (min-height: 800px) { ... }

This is not a great mockup, just me messing around in web inspector, but it conveys the idea :)

[htothenan1]

umm, love it

[htothenan1]

made some impulsive commits cause we have no users.

[starryeyez024]

LOL looks great! 👏🏻 You may want to left align the text in the groceries list too, just for consistency. I think there are accessibility studies that show it's easier for your eye to traverse through a list if they are left aligned (at least for LTR languages).
Then that begs the question, "should the titles be centered or left-aligned too?" That's more of a stylistic choice though. :)

[htothenan1]

is it? is it jarring to your eye to have the titles centered, but list items left-aligned?

[starryeyez024]

I would probably left-align them all just out of personal preference, but I think it's less important because you only need to read the titles once. Whereas the list items you might be scanning up and down and so those should be left-aligned for ease of reading. Up to you!

[htothenan1]

[starryeyez024]

Hooray, it looks so good!

[htothenan1]

@starryeyez024 clear fridge button, in Account (for now)

[starryeyez024]

Awesome, thank you! Is it on the account settings page just from an ease-of-development perspective for now?

[htothenan1]

Yeah, I don't really know where to put it on the Kitchen page, or even if it belongs there (it probably should be on the same page as the list). Also, I figured it wouldn't hinder the UX too much if you had to go to Account before flushing your items.

Also, the Kitchen page is already clogged with that super complicated conditional overlay that I want to clean up before adding new actions.

[htothenan1]

@starryeyez024 FYI as a sidenote, I want to start decoupling tailwind (I have a LOT of stupid css classes floating around) from this project, and revert everything back to regular CSS. I am also in the process of cleaning up my dependencies, getting rid of headlessui and radix. I feel like making these changes will allow this project to scale a bit better, and also make it easier to contribute to. Would love your thoughts.