Bake page: Bridge module design

secbajor commented 6 days ago

This is a UX/UI feature for the Bake page of app.breadchain.xyz

Reason: Provide non-Gnosis Chain users a quick link to bridge assets from other networks to gnosis.

Screenshot:

Figma link (Dark): https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=7078-54088&t=16049lI78qMRBMmY-1

Screenshot light:

Figma link (light):

Bridge Button card URL: https://jumper.exchange/?fromChain=100&toChain=100&toToken=0x0000000000000000000000000000000000000000

Bridge card mobile version

Figma link Dark:

Figma link Light:

Animation: there is a hover state, with an easing in transition.

secbajor commented 5 days ago

@diterra-code preview available here! please take a look and provide me any feedback :)

diterra-code commented 4 days ago

@secbajor just took a look! looks amazing. two small interaction comments I wanted to highlight;

In the hover state, the arrow slightly moves to the right in the Figma prototype, and I think you can also see this in the second state of the design.
The last question is, is it possible for the hover state to fade in slower or more gentle?

Once these changes are made it is ready to deploy.

secbajor commented 4 days ago

diterra-code commented 4 days ago

Hi @secbajor looks really good, just one question, is the hover state in light mode using this color hex: #D04EC5 for the border and arrow icon?

If this is the case then its good, if not then could you change it?