feat(frontend): New design for the header and the footer and background

[icerove]

Partially address #350
New design for the header and the footer and background with font change

See more details about the design along with the Figma: #350 (comment)

[render]

Your Render PR Server URL is https://near-explorer-frontend-pr-483.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-bupigmf93em3mi7lsfs0.

[heycorwin]

@jakestutzman can you please provide @icerove with the most up to date NEARkat illustration for use in the explorer footer?

[heycorwin]

Issues on Desktop

• Search bar in nav is not centered
• Nav items are not vertically aligned
• Logo should not scale dynamically. It should be one size for desktop, and then a smaller size for tablet/mobile
• There should be some padding between the icons and titles for each nav item.
• Each network should be represented by a different color
• "ChainInfo" is an abbreviation. It is also two words, not one. The original designs use the words "Explore", as this was a suggestion from internal team members. If you have received feedback that this is not an effective title, please share the feedback so we can determine a better alternative.
• The hover and active states for the dropdown menus in the nav are not consistent with the designs
• Styles for the search bar in the navigation are not consistent with the design. (hover/focus states in particular)

Issues on Mobile

• Logo and network selector are not left and right aligned.
• Primary navigation is not nested within a Menu, but is instead placed under the search bar, which is inconsistent with the designs.

@icerove it seems that most of these issues could be avoided if the implementation would more closely adhere to the designs provided. Could you articulate why there are so many things here that still need to be addressed? What resources or details have you felt are missing in order to be able to accurately implement the designs that were proposed for these changes?

[frol]

Desktop and mobile issues:

The footer is not attached to the bottom of the window:

Mobile issues:

There is no network dropdown at all.

NEARkat should be together with the "join the community":

Top navbar dropdown has different corner styles on hover and without hover:

[icerove]

@frol
almost finish all feature for the header and footer.
Here are something missing:

1. cannot get the innerwidth so search bar is not showing on the dashboard on mobile.
2. on hover of nav dropdown, the icon color is not changed.
3. new nearkat is not got

[frol]

• Please, resolve the merge conflict
• There are way too many borders on the search input (both on :hover and :active state):
  

[frol]

I wish I could just merge it, but I have to send another changes request 😖

• 

  the border does not match the design

  

• 

  the border shifts the input a few pixels on hover and focus and also does not match the design

• 

  when you click on the Search button, it goes dark green. @corwinharrell what should be the background color for the pressed button?

@icerove please, pair up with @corwinharrell to iterate faster.

[frol]

@icerove Hints about the borders styling:

• use .parent-block:focus-within .button to style the border on the block that needs to be styled with the input is focused
• use .parent-block:hover .button to style the whole search box when a user hovers over it (instead of only capturing the input hover event itself)

[heycorwin]

@icerove Please let me know if you have any questions regarding the styling issues @frol mentioned above. I'm happy to help in providing the necessary guidance to ensure that the implementation reaches parity with the design.

[heycorwin]

@icerove I've gone ahead and styled a version on codepen if you'd like to use it as reference for how this should be implemented.

If you'd like me to go ahead and do this for the search input inside of the header as well, just let me know.

[heycorwin]

There are still issues with the implementation of the new inputs.

• The borders and border radii are not consistent and aligned, which results in gaps between the inputs and border at the corners. This is most visible in the focused state:

• The border widths are not consistent. The button has narrower borders than the input.

• In addition, the search input nested in the header also has a different background color than the rest of the input. It's very slight but its there.

[heycorwin]

Almost there. There is a remnant style from the old search input that adds a teal shadow/outline of sorts on the search button when pressed. This should be removed.