search

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

1 stars 2 forks source link

Jc consistent spacing #70

Closed jamesncox closed 3 years ago

jamesncox commented 3 years ago

Description

Update spacing, font-sizes on different screens and updated the token display layout just a bit.

Related Issue

Closes #40

Acceptance Criteria

Type of Changes

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

Updates

  1. Added some breakpoints for font sizes on the various headers. Made our <h2> a thinner and smaller font on certain screen sizes. What do you think?
  2. Added similar utility classes on our homepage logo to our notepad image when our list doesn't have items. So the image isn't so big.
  3. Updated the token layout to be a bit tighter overall I think. Let me know what you think!
  4. Tried to make all paddings and margins consistent across the app. Might have missed a few things. Didn't really touch AddItem.js because I felt it is pretty good to go.

Before

DISCLAIMER: normally I try to crop all the screen shots I take, but pressed for time so sorry y'all!

Screenshot (205) Screenshot (204) Screenshot (203) Screenshot (202)

After

Screenshot (201) Screenshot (200) Screenshot (199) Screenshot (197) Screenshot (196) Screenshot (195)

Testing Steps / QA Criteria

  1. On main run git pull
  2. Run git checkout jc-consistent-spacing
  3. Run npm install
  4. Run npm start
  5. Try to notice how the various images size better on most screen sizes (not all, but almost all of them).
  6. The token display has a little tighter token display IMO.
  7. The spacings seem to be a bit more consistent I think.
github-actions[bot] commented 3 years ago

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

https://tcl-23-shopping-list--pr70-jc-consistent-spacin-17nfdf81.web.app

(expires Sun, 06 Jun 2021 14:13:54 GMT)

🔥 via Firebase Hosting GitHub Action 🌎