Kenny/7 home navbar

[KennyKeni]

Create the home page + nav bar

Issue Number(s): #7

What does this PR change and why?

Checklist

• All components of the Figma designs should be implemented at the home page
• The page should be located at the root route /
• The navbar should be implemented and should contain interactive buttons that link between pages. Let these routes, for now, be /store, /bag, /log, /settings, /help.

Critical Changes

• Create all components for home page
• Add the feed button to navbar
• Add Navbar includes interactive buttons that link between pages
• Still need to fix font issues

Related PRs

• [FE] Create forgot password page + flow #4

Testing

View page on root route /

[michaelhyi]

Overall, great work! I appreciate you writing comments, made it easy to answer questions + give feedback. I left comments, requesting some slight changes.

Just FYI, some of the UI seems to scale a bit differently based on resolution. All icons, buttons, text bubble appears to be bigger on my end, and it bleeds off the screen a bit. I left a SS of how it looks on my end.

Also, can we capitalize component names?

[michaelhyi]

Great work Kenny! Everything looks great. Can we try to use SVG's for all assets?

Other than that, I left some small comments. Great work!

[michaelhyi]

Thanks for turning the name into an input! On my end, even if I click the pencil icon, I still can't edit the input though.

[KennyKeni]

I changed it a bit so it seems a more obvious that you can edit the text. Should the edit icon stay on the screen while you're editing it text though or should I replace it with a checkmark etc.

[cynthiazhang755]

Hey Kenny,
Thanks so much for your great work on this ticket!
For some reason, the text for the name, pencil icon, level number, and number of coins appears black on my end, is there a way of fixing that?

[mngo39]

Home screen looks great, thank you so much!

The only comments I have for this sprint are completely my fault: could we make the pencil icon be white? I realized in the original design I had, i made it black so that is completely my fault! I have updated the design on the Figma to have a white icon with a drop shadow if you could use that instead?

[KennyKeni]

Hey Kenny, Thanks so much for your great work on this ticket! For some reason, the text for the name, pencil icon, level number, and number of coins appears black on my end, is there a way of fixing that?

I forgot to test with light mode, just fixed it.