#29 create trecipe page

[shizuko-akamoto]

Create the Trecipe Page using all the components we have developed so far:

1. Header component

Header component with logo, nav bar and the search bar

2. Footer component

Footer component is fixed at the bottom, and appears when the user scrolls all the way to the bottom. Still have to create more contents for the footer.

3. MyTrecipes page

Most of the components are currently for display only. The only functionality that's actually placed in is the "create new trecipe" workflow. The name, description, and privacy setting input from AddPopup will be reflected on the new TC created.

Responsiveness of the page I used css grids to handle fitting the TC when scaling window sizes. There is a minimum width set for TC (350px), and once the width becomes small enough, the grid column number will be reduced by 1.

Demo capture

After addressing styling feedback:

[tianyan-zhu]

I agree with @knox153, that round corner cards will look better on the my Trecipe page ;)

[shizuko-akamoto]

Just noticed there is flash of unstyled content on the Trecipe logo. If you refresh the page, the Trecipe logo on the top left has a different font-family for a brief moment before the correct one shows up. This is a tinyyyy issue, maybe we can log a issue and put it in the backlog for now.

Not sure if these changes below would make it looks better 👇

Ohhh and I will wait until this branch is merged before merging mine.

I can't reproduce the issue on my end... we can investigate a little on component lifecycle methods to see if there's one that let us wait on the rendering.... but yea, to be addressed in future 😆

[shizuko-akamoto]

Good to go 🎉 Linking the unstyled content issue: #53

woo. thanks for creating the issue