Home page and logged out page styling

[jtkabenni]

For an example of how to fill this template out, see this Pull Request.

Description

Updates to home page and logged out page styling according to high fidelity mockups. Also changed name to clevercart and implemented colors.

Related Issue

closes #121
closes #107
closes #105

Acceptance Criteria

Type of Changes

Styling update

Updates

Before

Mobile:

web:

After

Mobile:

Web:

Testing Steps / QA Criteria

• View logged out page
• View mobile logged out page
• Log in
• View home page
• View mobile home page

[github-actions]

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

https://tcl-67-smart-shopping-list--pr122-feature-home-page-st-yg4ou1so.web.app

_{(expires Fri, 12 Apr 2024 20:50:03 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1dc6f6876568bd8a1c97781eec7984835c207f7c}

[flbarfield]

It's looking so goooood!!!!

I'm noticing some wonk with the input boxes and text on the login screen, though, at certain widths

[bdanzer]

I mentioned this in our channel. Since we haven't done a lot of CSS in this cohort there hasn't been an opportunity to bring this up. But components and css should be isolated together. Having global css files with changes can cause all kinds of issues and generally speaking most companies are not using files like these anymore.

[aberger3647]

We're missing the black borders on mobile screen size, homepage view

[jtkabenni]

Hey @aberger3647 and @flbarfield , I made the following changes:

• created separate css files for AddListForm, LoggedOut, SelectListForm, and removed those styles from index.css
• changed the sizing of all the headers in web (you will have to adjust the headers list view according to what looks right)
• added an image for the logged out page image. @aberger3647 if you want to try to create it in css please feel free to.
• updated our app name to clevercart
• added borders where needed and removed it in some other places so they wouldn't double up

[aberger3647]

Looks awesome. Thanks for updating the border and breaking out the CSS files