search

FuelLabs / swayswap

SwaySwap is a blazingly fast DEX built on the fastest modular execution layer: Fuel.
https://fuellabs.github.io/swayswap
Apache License 2.0
1.1k stars 265 forks source link

[Styles] Revamp the swap design #70

Closed eryc-cc closed 2 years ago

eryc-cc commented 2 years ago

I can take the lead on this, since it might not be a priority for the team.

I'm testing a revamp to the design using Radix UI Colors.

Here's the Figma File I'm working with.

Colors:

Font: Inter (with a few caveats)

Icons: Heroicons - a library from the guys that created TailwindCSS.

Let me know what you think, how it's looking. I'll introduce some of the changes in future commits. Don't want to proceed with the PR until we have some of these things "approved". @luizstacio in this case, should I open a new issue and move the PR to a draft? What's the best practice?

Preview

Entire UI (WIP)

Screen Shot 2022-04-29 at 3 10 24 AM

Menu Item States

Screen Shot 2022-04-29 at 3 14 37 AM

Menu Wallet Design (WIP)

Screen Shot 2022-04-29 at 3 14 57 AM

Originally posted by @pixelsbyeryc in https://github.com/FuelLabs/swayswap/issues/53#issuecomment-1112911082

eryc-cc commented 2 years ago

Coming up, by @pedronauck: https://github.com/pedronauck/fuel-design-system

luizstacio commented 2 years ago

We have made a lot of improvements on the UI, thanks for your contributions, please take a look and open new issues if you find something you can help with.

Thanks for the contribution,