Responsive layout/header/navbar styling #50
Conversation
… header and navbar with Tailwind. rename old stylesheets to keep them for reference
|
Visit the preview URL for this PR (updated for commit f1bd32e): https://tcl-78-smart-shopping-list--pr50-el-styles-reset-layo-yiyh4hp4.web.app (expires Fri, 11 Oct 2024 13:48:20 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c781903507c1507075d7a974036959ddeec29c0a |
There was a problem hiding this comment.
Great job! It all works well for me.
A minor observation as we go about the styling: we might want to use a light background color for users who have their equipment in dark mode to make the elements in the display visible. I use dark mode and had to change to light mode to be able to see the app (other than the navigation and the header.)
…e to ensure more fallback fonts
src/api/useAuth.jsx
Outdated
| > | ||
| Sign In | ||
| <FiLogIn /> | ||
| </button> | ||
| ); | ||
|
|
||
| export const SignOutButton = () => ( | ||
| <button type="button" onClick={() => auth.signOut()}> | ||
| Sign Out | ||
| <FiLogOut /> | ||
| </button> |
There was a problem hiding this comment.
for a better user expereince, I suggest you use text in addition to the icon so we dont leave the user guessing what the icon is for.
Description
New responsive styles were implemented for the page layout, header and navbar. Old stylesheets
index.cssandLayout.csswere renamed and their imports removed. They can be still find in their original locations. New icons, fonts and app logo picture were implemented. Header/navbar colors have not been assessed for accessibility yet as they are not the final design choices.Related Issue
closes #49
Acceptance Criteria
Type of Changes
enhancementUpdates
Layout design for different screen sizes different
Testing Steps / QA Criteria
npm startnavigate to browser and resize the window to test the app's responsiveness