Governance / Vote page - New UX/UI design improvements & upgrades

[diterra-code]

Here are the new design upgrade and changes for the Governance/ Vote page:

1. Update title text from "Voting Power" to " My voting power":

Figma Link: https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=2903-20282&t=BRFj0zxHBSRN2rrY-1

Screen shot:

2. Update project profile image of CCA (Crypto Commons Association)

Figma Link: https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6729-159070&t=BRFj0zxHBSRN2rrY-1

Screen shot:

3. New project card design (Web & Mobile)

• Bold title
• Project BREAD holdings & Voting power information chips
• New voting calculator design

Figma Link Dark web:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6729-166081&t=BRFj0zxHBSRN2rrY-1

Figma Link Light web:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6729-160472&t=BRFj0zxHBSRN2rrY-1

Figma Link Dark mobile:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6729-165727&t=BRFj0zxHBSRN2rrY-1

Figma Link Light mobile:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6729-159784&t=BRFj0zxHBSRN2rrY-1

Screen shot:

[diterra-code]

@secbajor After reviewing the development work on https://deploy-preview-126--endearing-biscuit-e5a874.netlify.app/governance

I have the following project card UI feedback:

• The project card title should be 'bold'
• I want to try the spacing between the title and the info chips. It was 4 px and now I want to try 8px as it seems too close to each other.
• Info chip padding

Project titles

The project titles on the current designs on Netlify app should be made bold.

The project title should be font-weight (bold) :

Figma design:

Current development displayed as:

Title and Chips vertical spacing

The spacing (4px) between the title and info chips seems to be to small to me.

Screenshot:

I suggest making it 8px to allow the components to breathe;

As in the figma designs:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6715-48846&t=fwgm496aBfALcgSz-1

Info chip padding

the layout is as follows:

width: Hug (123px)px; height: Hug (32px)px; padding: 4px 6px 4px 4px; gap: 8px; border-radius: 16px 0px 0px 0px; border: 1px 0px 0px 0px; opacity: 0px;

Important to note:

The right padding is 6px instead of 4 px . This is especially for the external icon. I am curious to know how the info chips will look like using this padding format.

Everything else looks good!

await the new version,

[secbajor]

@diterra-code made those updates!

• project title bold
• increased spacing between project title / badges
• adjusted padding of badges
• added hover state for badges with link

https://deploy-preview-126--endearing-biscuit-e5a874.netlify.app/governance

[diterra-code]

Looks really good, just wondering why one treasury is without a treasury link (symbiota).

Some other quick remarks I discovered in the UI:

The learn more card is super stretched:

I suggest to make the card a fixed height of 200 px as in the Figma:

https://www.figma.com/design/2sWRCrux6a47zBXTwDVJxh/Breadchain-crowdstake?node-id=6729-165837&t=naNW9OwLz8qh8qaU-1

Make Bread holdings with two decimals behind the comma

Currently, the total Bread held is rounded up. I suggest to add two decimals behind the comma of each projects bread holding. Reason is, it will look more similar to how the majority of the world displays a currency.

I also increased the number spacing for all chips to 2% could this be adjusted aswell?

Current:

Suggestion:

Last question

I was just wondering if the project image and title & chips are center aligned.

[secbajor]

@diterra-code latest has the following changes https://deploy-preview-126--endearing-biscuit-e5a874.netlify.app/governance

• learn more card set to 200px height
• added decimal places for bread holding
• increased letter spacing on chips
• when a project has 0 bread (symbiota) it will now display "0.00"

I was just wondering if the project image and title & chips are center aligned.

no, i think they are not center aligned

[secbajor]

@diterra-code

I was just wondering if the project image and title & chips are center aligned.

oh actually do you mean vertically or horizontally? they have a center alignment set, but obviously not set to centered horizontally within that space...

[diterra-code]

It all looks perfect!

One last design request:

All hover state of components of the project card for 'light' mode should be a darker shade of pink:

Currently its: #E873D3

Needs to be: #D04EC5

Note: This is only for the light version due to contrast reasons.

After this update I feel confident to say its deploy ready @secbajor

[diterra-code]

I have a few questions about spacing.

Is the spacing within the info chips between the icons and the text fixed at 8px?

The reason is, they look quite spaced apart and I was wondering if they are 8px. And if so we might have to reduce the spacing to 6px.

As the design might look and feel different in development.

[diterra-code]

@diterra-code

I was just wondering if the project image and title & chips are center aligned.

oh actually do you mean vertically or horizontally? they have a center alignment set, but obviously not set to centered horizontally within that space...

Yes I mean align the vertical centers:

[secbajor]

@diterra-code thanks for your detailed feedback -- i changed the light theme color to your suggested shade of pink and also fixed the spacing which was i found was 12px - reduced it to 8px as suggested

ill go ahead and move this forward now :)