[AM] Change "Add your first item!" button

[amalyam]

Description

This change removes the "Add your first item!" button (previously below "You have no items in your list!"), removes the circular green (+) button, and instead places an "Add Item" button next to the "Share List" button. Helper text was added beneath "You have no items in your list!" to make it clear to the user to click on the button above. This change was made after discussion with @mxmason about how to make use of this button accessible, clear, and simple. This ensures that the button will not obscure item text while scrolling through a list of items, is in a consistent location, and does not depend on color for the user to identify it.

Related Issue

Closes #68
Sub-issue of #14

Acceptance Criteria

• the List page only has one type of add item button
• the button is always in the same location
• the button does not rely on color or image alone to make its function clear
• adding items should only be done through the dialog box, not by directing the user to the Manage List page

Updates

Before

After

Testing Steps / QA Criteria

Check that the "Add Item" button appears next to the "Share List" button, whether or not the user has items in the selected list. The green (+) button should not longer appear. The dialog box to add a new item should appear when the "Add Item" button is clicked.

[github-actions]

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

https://tcl-69-smart-shopping-list--pr69-am-change-add-item-s-q90nfcm8.web.app

_{(expires Fri, 05 Apr 2024 01:29:41 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 93172cc46147b7d365c2b1b8239b61e2efb07a80}

[hsiangj]

My screen is a little smaller, and the button while closer than before, is showing on the footer:

And the button disappears when I shrink the screen:

I think the transform property in css might've shifted it off the page completely?

Love the change in anticipation for color update. Minor note: I believe we will also be changing "+" to say "add."

[amalyam]

Thanks for catching that @hsiangj !

After some discussion with and help from @mxmason in which we talked about how to make use of this button accessible, clear, and simple, I opted to remove the green (+) and instead have a consistent "Add Item" button next to the "Share List" button. This ensures that the button will not obscure item text, is in a consistent location, and does not depend on color for the user to identify it.

[hsiangj]

Thanks for the update, modal works as it did before!

[louieknolle]

Works as expected and I agree that the simpler, persistent Add Item button is a good alternative.

[amalyam]

@piecanoe @krsnamara wanted to get your thoughts before I merge because this changes some key layout features that we'd talked about (and didn't want to overwrite Marty's work before discussing!)

[amalyam]

Merged with current design, future update will have a better combination of design and accessibility