Redesign: Navbar

[preschian]

parent task: #3844

• Redesign: Navbar - UI
• Redesign: Navbar - Dark Mode
• Redesign: Navbar - Responsive
• Redesign: Navbar - Add new searchbar component

[yangwao]

hey, if someone would like to grab this, @Jarsen136, maybe?:)
It's the last crucial missing piece to our great 🧩 for landing!:)

[Jarsen136]

👋

[kodabot]

ASSIGNED - @Jarsen136 🔒 LOCKED -> Saturday, October 1st 2022, 11:46:58 UTC -> 36 hours

[Jarsen136]

@exezbcz Hey, there are some design issues that need your help.

1. I need one single image composed of KODADOT and beta.
   Now in the figma, they're two separate images.

2. beta is missing from the logo image in dark mode.

[exezbcz]

Hey @Jarsen136 , thanks for asking. Good question, the reason it is not composed together is because it will cause the auto layout to break. I will join the element together outside the page if that's okay. By the way, the whole group 32 is only the logo. I made it this way because I had not known where is the logo library so I made it itself.
ad 2 Yup, I did not put it there cuz it just changes color to white, but I will put it there.

[kodabot]

ASSIGNMENT EXPIRED - @Jarsen136 has been unassigned.

[Jarsen136]

Hey @Jarsen136 , thanks for asking. Good question, the reason it is not composed together is because it will cause the auto layout to break. I will join the element together outside the page if that's okay. By the way, the whole group 32 is only the logo. I made it this way because I had not known where is the logo library so I made it itself.

ad 2 Yup, I did not put it there cuz it just changes color to white, but I will put it there.

Thanks! I will take a look.

[yangwao]

Circling back quickly, I had a call w/ @exezbcz, and we will quickly refresh the navbar; hopefully, in 1-2 days design should be ready to take over.

Changes that are planned for navbarV2 are

• adding to explore drop-down to select network as we are getting rid of our current network switcher for cleaner design in the navbar and removing the quirky switch
• we will be splitting profiles and connecting the wallet functionality
• account icon
  • profile, credit, identity, day/dark mode, settings, and language will go under the new icon
• connect wallet/wallet icon
  • will show you assets as upcoming XCM stuff as we have on Basilisk involves showing a lot of various assets one wallet can hold on various parachains, and we need to be flexible on this one in the future
  • teleport, the transfer goes here as well

[exezbcz]

Hey, So, I have the designs. It's right on the second page of the landing page handoff Figma.

Instructions

Here is the navbar when you don't have a connected wallet

• when hovering over the profile icon, window should popup - language, profile, dark mode, etc. Similar to opensea and rarible.
• hovering over explore also triggers a popup - this one
  
  Links behave the same way as navbar links - that's bold text on hover. The user is then redirected to the explore page with the desired network.
  Once you click connect, it shows a popup with the connecting wallet. When you are connected, the profile icon changes into your address picture, the connect button disappears, and instead, it shows the wallet icon. Like this:
  
  These selection buttons behave similarly like for example range selection in top collections, you can also see it by just playing the prototype of the landing page.

There isn't yet a popup for wallet hover, I will deliver it tomorrow morning, also with the updated version of the mobile navbar. Thanks!

[Jarsen136]

Since the design for navbarV2 changes quite a lot compared to the previous redesign, I will start to code only after your confirmation. @yangwao

figma: https://www.figma.com/file/3iOjW12ERFRDSVnpLuhQmf/landing-page-handoff?node-id=0%3A1

[exezbcz]

There are still some changes to be made, I ran into a few issues I need to resolve, and I'll have it done today.

• changes mainly with the mobile version.

[exezbcz]

Okay, here it is. It's updated in figma.

Mobile

Frames are named accordingly to what they show. When you don't have a connected wallet, there are a few versions. Once you connect your burger menu changes. The category of account and wallet are shown. There you can access your profile, identity, settings, and also after connecting the language switcher. At the bottom, there is information about which address you are logged as. The wallet section shows the balance/tokens and the total sum with the option to add funds or disconnect the wallet. Add funds is basically the former credit button.

• animation when clicking the burger menu in the navbar - slide from the right side.

desktop

Once you click connect, it shows a popup with the connecting wallet. When you are connected, the profile icon changes into your address picture, the connect button disappears, and instead, it shows the wallet icon. Like this:
navbar (2)

Nothing has changed, I have just added the wallet hover popup. Again, shows your address with balance and tokens in it.
Right from the navbar, there are connect wallet popups, they are a bit changed. Clicking on connect in many ways results in connect wallet popup. Also when the popup is on screen, there is a background - true black on 30% opacity - behind it.

The first picture shows the options, second is when the user clicks on one of them. Other options collapse and the chosen take the rest of the space with accounts. The hover is accentlight2.
And I think that's it. If something isn't clear, contact me.

[yangwao]

For the popup, I've made a separate issue

• Redesign Wallet Connect popup #4112

[yangwao]

Since the design for navbarV2 changes quite a lot compared to the previous redesign, I will start to code only after your confirmation. @yangwao

yes, let's go! :)

If you have questions @exezbcz will be around for sure