[AM] Improve layout of list items and sub-sections

[amalyam]

Description

This code cleans up the formatting of each list item and the sub-sections they are within. It adds spacing between the checkbox, item name, delete button, and buy next info, increases the size of the sub-section titles, and adds a horizontal line between each subsection. It also places each item name in an html tag for ease of global styling.

Related Issue

Closes #70
Sub-issue of #14

Acceptance Criteria

• improves the readability of list items by adding space between the checkbox, item name, delete button, and buy next info
• provides other formatting to make this section more user friendly

Updates

Before

After

[github-actions]

Visit the preview URL for this PR (updated for commit dd80637):

https://tcl-69-smart-shopping-list--pr71-am-fix-items-layout-i8sqhp9u.web.app

_{(expires Fri, 05 Apr 2024 01:59:45 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 93172cc46147b7d365c2b1b8239b61e2efb07a80}

[amalyam]

many thanks to @mxmason on this for debugging some spacing issues!

[krsnamara]

This looks good. Doesn't break anything.

Wondering if we want to add flex-direction: column on the items to create a little break in the information.

Also it seems like we have a ton of space at this point, maybe the 'X' on delete button could say "Delete" or "Remove" and have its own line?
Can maybe workshop more in our next meeting.
I have a draft PR up with some styling. Started working on the global color variables and adding a font to use.

[piecanoe]

Nice job--looks like it's working correctly!

I agree with Marty that maybe we can rework some of the spacing and move the delete button or 'Buy Next' to another line. Especially for a smaller window, it still looks quite crowded right now. More to chat about in the next meeting!

[louieknolle]

Looks good to me! And seems like y'all will be continuing to discuss the layout in a different PR.

[amalyam]

These are great thoughts, will merge for now and save these for another issue.