💅 fresh UI update

[roiLeo]

🚧 WIP 🚧

PR type

• [x] Feature
• [x] Refactoring

What's new?

• [x] PR related #2792
• [x] PR related #1348
• [x] PR related #153
• [x] more (s)css changes to come

TODO

• [x] fix navbar-shrink
• [x] dark/light mode (wip need review/tests)
• [ ] new filters ? (design ready)
• [ ] dev compiled warnings ?

Screenshot

lightMode

darkMode

[netlify[bot]]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	aa4180db31fd189e5135875f0c36ed897197b634
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/62fa12bc2a5302000816ea88
😎 Deploy Preview	https://deploy-preview-2947--koda-nuxt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[vikiival]

:3 uwu looking forward

[vikiival]

Ping me when ready for review 🔢

[roiLeo]

Ping me when ready for review 🔢

Feel free to start reviewing code and design, maybe @XyloDrone can check too

Do I start integrating dark mode on this branch? Same question for the new side filters? (not present in this PR)

[vikiival]

That's lit 🔥

[KngZhi]

hollly, this looks really nice. 🚀

encountered a small UI issue.

https://user-images.githubusercontent.com/11361147/168646900-08cbf5f7-359d-46e1-a56b-01908b85785e.mov

[vikiival]

maybe let's merge it this / next week ? there will be imo more conflicts

d1816a2

[roiLeo]

maybe let's merge it this / next week ? there will be imo more conflicts

Or we can wait for #3134 + I might need more feedback on dark/light mode UI since I didn't test all pages/components, no need to rush

[yangwao]

@preschian let's make white background default

[yangwao]

Best to resolve conflicts only and then can proceed with making all white backgrounds

• https://github.com/kodadot/nft-gallery/issues/3713

[yangwao]

Hey, @JustLuuuu @cryptodamsky let's do click journey thorough whole KodaDot, if you spot something not working lmk; mainly we are looking read-only stuff, if things working okayish :)

Known issues

• some tables are black, will be fixed in
  • #3713

[yangwao]

Beautiful 😍

[petersopko]

got this after burning NFT:

[petersopko]

when I change the screen to smaller size, I'm capable of achieving this in searchbar on top, not the best look, maybe shorten it back to just "Search..." if the screen is smaller?

[JustLuuuu]

Light mode: Create (classic) collection: Collection description is still in a dark mode - is that on purpose?

Create: Simple/Creative - everything is still in a dark mode

When you open NFT - price is also in a dark square

[petersopko]

@JustLuuuu

• https://github.com/kodadot/nft-gallery/issues/3713

[yangwao]

Here he comes

[yangwao]

Can you make me default white 🥹🙏

[roiLeo]

Can you make me default white 🥹🙏

Not sure what you mean about that, default color-mode is from user preference:

it will automatically detect the color mode based on the system preferences (see prefers-color-mode spec). The value injected will be either 'light' or 'dark'. If no-preference is detected or the browser does not handle color-mode, it will set the fallback value. (light)

[yangwao]

Not sure what you mean about that, default color-mode is from user preference:

we will have by default white only in the upcoming design, so when for example, will be white only landing will redirect the user to black explorer; I sense it would not be looking good :/

[codeclimate[bot]]

Code Climate has analyzed commit aa4180db and detected 0 issues on this pull request.

View more on Code Climate.

[yangwao]

Let it roll :) We will add a dark version for the new landing page as well 👀