Add Styling - Githubissues

lydiadunning commented 1 year ago

Description

This code adds styling, both color changes and some limited changes in layout. I've tried to work within the original app styling, and make changes globally where I can, to get this done quickly. These changes don't style everything, but they're a starting point.

The new colors were added in --color-contrast in the index.css file, but to allow them to appear as transparent, I defined the hsl values separately, and referenced them in an hsl() :

  --contrast-hsl-vals: 18, 85%, 45%;
  --color-contrast: hsl(var(--contrast-hsl-vals));

Then, in ListItem.css, I followed the same pattern with hsla, adding an alpha channel for transparency.

  --soon-bg: hsla(var(--contrast-hsl-vals), 0.75);
  --kind-of-soon-bg: hsla(var(--contrast-hsl-vals), 0.5);

By creating an alternate value for contrast-hsl-vals in a media query, color changes and transparency can be applied without any knowledge of the specific color, and changing between light and dark mode only requires changing the value of --contrast-hsl-vals.

There are disadvantages to this method. Color values for the urgency indicators in lists are commented out. Since the colors are derived using transparency, background and text color values can't be compared directly to figure out if there is adequate contrast between them. It'd be necessary to find the color in a screenshot to do this comparison.

Also added primary and secondary button styling.

I tried to limit changes to only styling, but also added the list token to the header.

Changes Remaining

Layout could use improvement. Header text doesn't fit on narrow mobile view. Lots of unused color values in the code. May need to change dark-mode (default) text on the orange background to black. Fonts. Probably needs adjustment to meld with other code changes. More I'm not thinking of.

Related Issue

Related to 13 - does not close it.

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

After

Testing Steps / QA Criteria

Launch the demo, take a look around.
Switch between light mode and dark mode. Check at different screen sizes.

github-actions[bot] commented 1 year ago

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

https://tcl-65-smart-shopping-list--pr40-ld-styling-ttduhlsu.web.app

_{(expires Mon, 09 Oct 2023 18:01:36 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: a91b8fb0f37677e20d8afa3e8ea496251536f9b8}

lydiadunning commented 1 year ago

I removed the double list-token name. After playing around with it, I think centering would look more professional, but I'm having trouble figuring out how to center elements that should be centered without causing unwanted changes. It'll have to wait.

shannonerhea commented 1 year ago

I removed the double list-token name. After playing around with it, I think centering would look more professional, but I'm having trouble figuring out how to center elements that should be centered without causing unwanted changes. It'll have to wait. Awesome work!! Mark had mentioned in our meeting that we didn't have to design dark mode due to that being built in to browsers. I noticed on my machine it was defaulting to the dark mode mock-up. Do you want to remove dark mode css, fix the merge conflicts and then merge? I would love to make a branch and help figure out how to center our layout and maybe add a BG image. Thank you for all this cool css :) ( UPDATE: oopsie i accidentally closed this PR with my comment and then reopened it ahhhh..... I need more coffee )

the-collab-lab / tcl-65-smart-shopping-list

Add Styling #40