Hulya - Create the header component - Githubissues

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

1 stars 3 forks source link

Hulya - Create the header component #59

Closed hulyak closed 3 years ago

hulyak commented 3 years ago

Description

Created Header component displaying Header logo and "Lettuce Know" title.
Displayed the user's token under the logo.
Header component is visible on Add Item and List page.
Incorporated responsive font size for the Header text with media queries inside the src/themes/theme.js file
Used Material-UI Box, and Typography components.

I had an issue with the local SVG file, that's why passed the URL for the image source.

Related Issue

closes #44

Acceptance Criteria

Type of Changes

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

Updates

Before

Screen Shot 2021-08-31 at 4 23 13 PM

Screen Shot 2021-08-31 at 4 24 02 PM

After

Screen Shot 2021-08-31 at 4 16 03 PM

Screen Shot 2021-08-31 at 4 16 10 PM

Screen Shot 2021-08-31 at 4 16 18 PM

Testing Steps / QA Criteria

git checkout hk-header
npm start
Check the pages to see the header component

github-actions[bot] commented 3 years ago

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

https://tcl-28-shopping-list--pr59-hk-header-nb7clrv1.web.app

_{(expires Thu, 09 Sep 2021 00:23:12 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

isaabutaa commented 3 years ago

Great job on the header component, @hulyak! It looks great, and I love the responsiveness. 💯