Bake page: New burn flow & design

[secbajor]

This is the new user experience and user interface upgrade for the Burning BREAD module on the Bake page of Breadchain.

Reasons/GOAL;

Goal: Reduce the chances of BREAD being burned while better options are available. Provide a better alternative.

UX Reasons: Inform the user of the actions they are about to take and the impact thereof. Provide the user with an alternative.

NEW Burn user flow:

To inspect, Figjam link:

https://www.figma.com/board/gsl41zZdnQWSZGuE5VgHz4/BREAD-Burn-flow?node-id=0-1&t=oNmBIrf6H6ZHzejE-1

Bake page: Burn module UI updates

This is the new Burn module when a user decides to burn their bread this will be displayed.

New module:

Screenshot:

Figma link: https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=2140-975&t=pVbzOBnG7ILXShPS-1

Main changes:

• New noticeable button
• Burn button color changed to red

New additional button:

Screen shot:

Figma link:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6725-39088&t=pVbzOBnG7ILXShPS-1

New Burn button color & states

Screenshot:

Figma link:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=7165-6211&t=pVbzOBnG7ILXShPS-1

"Important to know" pop up module"

Main components:

• Burn information review
• Burn Alert message
• Swap button
• Burn button

Screenshot:

Figma link:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=7165-6510&t=pVbzOBnG7ILXShPS-1

Light mode

Figma link: https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=2879-9422&t=pVbzOBnG7ILXShPS-1

Looking forward for your review @secbajor

[secbajor]

@diterra-code i wanted to check with you about expected animation for the hover state of "recommended" section. so far this is what I've implemented and am feeling uncertain. One difficulty with this proposed design is its somewhat technically challenging to implement hover animation on an element when a separate element is hovered (i.e. only apply hover state to "recommended" when the actual button is hovered). So if we move forward with this I might suggest making the "recommended" also clickable.

Let me know any feedback, thoughts from your end.

Screen.Recording.2025-01-06.at.1.20.59.PM.mov

[diterra-code]

Hi @secbajor ,

I see what you mean. I think making the hover state recommended and clickable is a good solution.

Looks good!!

[secbajor]

@diterra-code here is preview link for this work https://deploy-preview-214--dapper-sundae-ae0873.netlify.app/

I posted one question on the figma about bread icon in light mode. Let me know any feedback or we can discuss at upcoming design meeting :)

[diterra-code]

Hi @secbajor ,

looks like the general flow is excellent! and the hoverstates are good. I just have the following details that I would think would make the UI better.

These are:

• the font size of 'Recommended' should be smaller, I was wondering if this one is the same as in the designs atm.|
• I decided to explore an additional small detail for the hoverstate of the swap BREAD button by changing the hover state button to a darker shade of pink.
• The text in the pop up module is the wrong color grey. So it is a bit to hard to read. See screenshot

Will share the eventual new hover state color once I changed it in figma.

[diterra-code]

Here is the new hoverstate color for the swap button in dark /light mode:

Dark: #FF99E2

Light: #A416AD

[diterra-code]

Current color of pop up module text in dark mode:

#D4D4D4

[secbajor]

@diterra-code those fixes are done here ! https://deploy-preview-214--dapper-sundae-ae0873.netlify.app/

[secbajor]

deployed to prod!