Styling Favorites page so it matches other pages in app

[snrelghgub]

Changes include:

• Styling of Favorites page to include Favorites header & message content within 2nd top section of the app
• Display of favorited cards consistent with the layout of the search page, inside of the card list section of the app
• Proper display of Footer at the bottom of Favorites page
• Refactoring of code to reposition loading message at the bottom of the page as on search page
• Update of new interactive buttons (favorite & delete) with more highly visible React Icons
• Various debugging to ensure app displays correct message & still works as expected when User is logged in or logged out & is interacting on the Favorites page

[ArunJose]

It appears some of the main styles are still not applied in favorites page. Here's the same book in search page and favorite page.

Alignment is a bit off in favorites page.

[snrelghgub]

@ArunJose thanks for reviewing & reporting this vertical alignment issue, I'll fix it ASAP & before I merge changes. I thought you'd be interested to know that although I initially decided to remove the Footer from the Favorites page until thankfully it finally clicked to me that the grid layout I set out in SCSS file would automatically align any four distinct components rendered by the app in their generated order.

<div className='App'>
Section 1: <div></div> //any component1
Section 2: <div></div> //any component2
Section 3: <div></div> //any component3
Section 4: <div></div> //any component4
</div>

As long as there are four distinct components rendered for the 4 predefined CSS grid-template-areas & their set fractional height, these will automatically be applied to those 4 main wrappers to ensure they display where expected. Something I'd thought I'd share as I'm sure you'd be interested to know or maybe you might run into a similar issue again in the future 👍

[snrelghgub]

Alignment is a bit off in favorites page

Thanks for reporting this, I'll look into & fix this one as well 👍