List and Manage List styling

[etiry]

Description

• Styled individual list items, add item form, list name header, share list form, delete list button, and List view conditional components (e.g., messages when list is empty or not selected)

Related Issue

Closes #58
Closes #59

Acceptance Criteria

The following elements should be styled on our List page according to our prototype:

• Header: List name
• Label: Search for an item (rename to Filter?)
• Input Search Box: Search for an item by name
• Button: Reset
• Label: Add new item
• Input Text Box: Item Name
• Input Select Dropdown: Next Purchase Date
• Button: Add item
• List Items: Items in the user's list

• Checkbox
• Icon
• Item Name
• Purchase Urgency
• Button: Delete

• Button: Select a list
• Header: List is currently empty
• Header: You haven't selected a list

The following elements from our Manage List page should be styled according to our prototype:

• Header: List name
  - [ ] Header: Manage List (We opted to exclude this design element.)
• Label: Share List
• Input Text Box: Enter Recipient's Email Address
• Button: Send Invite!
• Button: Delete List

Type of Changes

enhancement

Updates

Before

List view - no list selected

Manage List view - no list selected

List view - empty list

List view - populated list

Managed List view - list selected

After

List view - no list selected

Manage List view - no list selected (should look the same as List view)

List view - empty list

List view - populated list

Manage List view - list selected

Testing Steps / QA Criteria

• Open deployment link or run branch ap-et-styling locally
• Ensure local storage is cleared
• Without clicking on a list name, navigate to both the List and Manage List pages and verify that they look like the screenshots
  • Verify that the 'select a list' button still takes user to the Home page
• Click on a list you know is empty, navigate to the List page and verify that it looks like the screenshot
• Click on a list with items, navigate to the List and Manage List pages and verify that they look like the screenshots
• Verify that all the functionality (e.g. adding an item, purchasing an item, deleting an item, sharing a list, deleting a list) still works as expected

[sdmisra]

Praise: These changes look great, I noticed a lot of nice details you all added in your grids with padding and margins that really reformatted the list items into a much better situation for the user.

non-blocking concern for the future: As we merge these remaining PRs prior to our demo, we might need to adjust everything to make it look cohesive, then we'll need to do a bit of accessibility review / check the contrast like Andrea did a little bit ago.

[DevinaG007]

Praise: It looks pehnomal! You guys clearly put a lot of effort into this, it shows! Our app is looking coherent.

Nit: The background color for the input in the ManageList to share a list is pale-green, but the input boxes in the List view are not, I think we should make all of our forms the same if we can. Personally I think the white background looks cleaner. Shane and I set ours to eggshell for now (because not setting a background color will have it default to white in light mode and black in dark mode, which looked funny.) We could change all of them to a basic white?

[andiedoescode]

Praise: It looks pehnomal! You guys clearly put a lot of effort into this, it shows! Our app is looking coherent.

Nit: The background color for the input in the ManageList to share a list is pale-green, but the input boxes in the List view are not, I think we should make all of our forms the same if we can. Personally I think the white background looks cleaner. Shane and I set ours to eggshell for now (because not setting a background color will have it default to white in light mode and black in dark mode, which looked funny.) We could change all of them to a basic white?

Oops, yes I meant to change that last form input background color. I can set everything to basic white (#FFF)

[luisaugusto]

Awesome, this is looking great team!

[github-actions]

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

https://tcl-68-smart-shopping-list--pr63-ap-et-styling-br0gtuj8.web.app

_{(expires Sun, 14 Apr 2024 00:34:44 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 8cb5d089a99ba9972009993f4dd31796b0cbda84}