Final styling changes

[sillytsundere]

Description

This PR included our final styling changes. We ran through the whole application, adjusting and making final changes to styling after many PR's were all merged.

Related Issue

Closes #14

Acceptance Criteria

• Position of logos on home page
• Position of list owner on list page and manage list page(also background/text color)
• Position of toggle switch (left of/next to sign in/out button?)
• Colors of item purchase priority in dark mode (maybe also light mode, just a bit more intense maybe?)
• Position of delete list button on home page(easy fix with flexbox)
• Styling of lists on home page(border lines need to go back between them)
• Add toasts to the delete functionality from Iryna’s recent issue
• Check item search input clear btn has radix themes applied
• Styled toast messages to light and dark theme
• Added spacing on radio buttons

Type of Changes

styling, enhancement, accessibility

Updates

Before

After

Testing Steps / QA Criteria

• git pull
• git checkout pc-final-styling
• npm ci
• npm run start
• On home page, note the position of the Github and Collab Lab logos are visible above the navbar in desktop and mobile and their colors change with the theme
• Position of list owner on list page and manage list page are visible above the navbar in desktop and mobile and their colors change with the theme, and stick the the bottom of the screen, above the navbar
• Position of the light to dark toggle switch and sign in/sign out button are positioned in industry standard locations, best suited for mobile use and easy to locate and use on desktop
• On the List page, the text color for the purchase priority badge changes to white text in dark mode for better accessibility
• Position of delete list button on Home page is consistent with the position of the delete button on the List page
• The bottom borders for Lists and Items on the Home page and the List page were added and the colors were made to match the navbar color as a pleasing accent color in light and dark mode
• Toast messages were added to the delete functionality for the List (recent PR)
• Applied accent colors for dark and light theme with radix architecture to item search input clear button
• Note that toast messages are styled to light and dark theme
• Spacing added to Radio buttons for better ease of use on mobile

[github-actions]

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

https://tcl-73-smart-shopping-list--pr53-pc-final-styling-pizw4eak.web.app

_{(expires Sat, 13 Apr 2024 00:15:37 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 99eed22fcca8bd9874e77f7b7f7d1eeb554a1666}

[rachelspencer]

Great Team work on this!

[trushmi]

Looks great to me!

[polly89]

Your app looks beautiful and it functions really nicely. Good job!

[polly89]

This isn't a big deal, but I noticed that on light mode the background color for the message matched the background color for the message. In dark mode there's a slight variation. Just wanted to check to make sure that was intentional.

[sillytsundere]

We spent a long time trying to figure out how to match it to the background. We could not just use our background-dark css variable color because it has opacity, (that's why the color isn't exactly black but that charcoal color) so the background of that

tag that states the owner of the list would be clear which would show the list items behind it, which we didn't want. So we tried to match it as much as possible as much we could(we experimented with RGB and hex and hsla colors and landed with the one we chose as it looked pretty close on my screen. So even though isn't quite as bad on my screen, I do understand that it will vary from monitor to monitor and screen to screen. We are hoping this could just be something we address at a later time.

[polly89]

Yeah, I kind of figured it was due to the opacity. It really doesn’t look bad, I just thought I’d double check.