Draft improved voting buttons fix

[osiastedian]

User description

Improve voting buttons with enhanced design, clearer labels, better visual feedback, and accessibility features to address UX and clarity issues. Addresses #102

This PR updates the voting buttons to use more intuitive icons (thumbs-up/down, pause), adds clear text labels (YES, ABSTAIN, NO), and provides descriptive tooltips. It also includes enhanced visual feedback (hover effects, color-coding), accessibility improvements (ARIA labels, keyboard navigation), and full internationalization support.

---

---

PR Type

Enhancement

---

Description

• Improved voting buttons design.

• Added clear labels (YES/NO/ABSTAIN).

• Enhanced visual feedback and accessibility.

• Internationalization support.

---

Diagram Walkthrough

flowchart LR
  A[Governance List] --> B{ProposalCard};
  B --> C[Voting Buttons];
  C --> D((YES/NO/ABSTAIN));
  C --> E((Tooltips & ARIA));
  C --> F((Visual Feedback));
  A --> G[Locale Files];
  G --> D;
  G --> E;

Loading

File Walkthrough

	Relevant files
I18n	index.js Added Vote Labels, Tooltips, and ARIA to Locale Files        src/shared/locales/en/partials/govlist/index.js Added new vote section with YES, NO, ABSTAIN labels, tooltips, and ARIA attributes. Improved internationalization support for voting-related text. +11/-0
Styling	_tables.scss Redesigned Voting Button Styles                                                    src/scss/_tables.scss Updated voting button styles for better visual feedback. Added hover effects, focus styles, and disabled states. Improved button layout and responsiveness. Added support for YES, NO, and ABSTAIN buttons. +61/-6
Enhancement	ProposalCard.jsx Updated ProposalCard Voting Buttons                                            src/components/governance/ProposalCard.jsx Replaced voting icons with thumbs-up/down and pause icons. Added text labels (YES, NO, ABSTAIN) to buttons. Implemented tooltips and ARIA labels for accessibility. Updated button classes for styling consistency. +15/-9

---

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Style Consistency The new styling for voting buttons introduces several hardcoded values (e.g., width:90px, height:50px, font-size: 16px, etc.). Consider using variables or mixins for better maintainability and consistency across the application. The hover and focus styles should also be reviewed for consistency with other elements. width:90px; height:50px; float:right; clear:right; @include transition(all, .3s); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border: 2px solid transparent; cursor: pointer; &:hover { color:$color-blue-main; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } &:focus { outline: 2px solid $color-blue-main; outline-offset: 2px; } &:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } i { font-size: 16px; margin-bottom: 2px; } .vote-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } &.vote--yes { @include border-radii(35px,35px,0,0); &:hover { background:$vote-green; border-color: darken($vote-green, 10%); color: white; } &:focus { border-color: $vote-green; } } &.vote--abstain { &:hover { background:$off-white; border-color: darken($off-white, 20%); color: $color-blue-main; } &:focus { border-color: $off-white; } } &.vote--no { @include border-radii(0,0,35px,35px); &:hover { background:$vote-red; border-color: darken($vote-red, 10%); color: white; } &:focus { border-color: $vote-red; } } Accessibility While ARIA labels are added, ensure that sufficient contrast ratios are maintained between text and background colors in different states (hover, focus, disabled) to meet accessibility guidelines. Test with assistive technologies to verify proper functionality. className="vote vote--yes" title={t("govlist.vote.yes_tooltip", "Vote YES - Support this proposal")} aria-label={t("govlist.vote.yes_aria", "Vote yes for this proposal")} disabled={userInfo ? false : true} onClick={() => openMnVote(1)} > <i className="icon-thumbs-up" aria-hidden="true"></i> <span className="vote-label">{t("govlist.vote.yes", "YES")}</span> </button> <button style={{ border: "none", outline: "none" }} className="vote vote--abstain" title={t("govlist.vote.abstain_tooltip", "ABSTAIN - Neutral vote")} aria-label={t("govlist.vote.abstain_aria", "Abstain from voting on this proposal")} disabled={userInfo ? false : true} onClick={() => openMnVote(3)} > <i className="icon-pause" aria-hidden="true"></i> <span className="vote-label">{t("govlist.vote.abstain", "ABSTAIN")}</span> </button> <button style={{ border: "none", outline: "none" }} className="vote vote--no" title={t("govlist.vote.no_tooltip", "Vote NO - Reject this proposal")} aria-label={t("govlist.vote.no_aria", "Vote no for this proposal")} disabled={userInfo ? false : true} onClick={() => openMnVote(2)} > <i className="icon-thumbs-down" aria-hidden="true"></i> <span className="vote-label">{t("govlist.vote.no", "NO")}</span> </button>

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Remove redundant inline styles The inline styles style={{ border: "none", outline: "none" }} are redundant. The CSS already styles the buttons, and these inline styles override the existing styles. Remove them for cleaner code and better maintainability. This also improves consistency. src/components/governance/ProposalCard.jsx [206-238] <button - style={{ border: "none", outline: "none" }} className="vote vote--yes" title={t("govlist.vote.yes_tooltip", "Vote YES - Support this proposal")} aria-label={t("govlist.vote.yes_aria", "Vote yes for this proposal")} disabled={userInfo ? false : true} onClick={() => openMnVote(1)} > <i className="icon-thumbs-up" aria-hidden="true"></i> <span className="vote-label">{t("govlist.vote.yes", "YES")}</span> </button> <button - style={{ border: "none", outline: "none" }} className="vote vote--abstain" title={t("govlist.vote.abstain_tooltip", "ABSTAIN - Neutral vote")} aria-label={t("govlist.vote.abstain_aria", "Abstain from voting on this proposal")} disabled={userInfo ? false : true} onClick={() => openMnVote(3)} > <i className="icon-pause" aria-hidden="true"></i> <span className="vote-label">{t("govlist.vote.abstain", "ABSTAIN")}</span> </button> <button - style={{ border: "none", outline: "none" }} className="vote vote--no" title={t("govlist.vote.no_tooltip", "Vote NO - Reject this proposal")} aria-label={t("govlist.vote.no_aria", "Vote no for this proposal")} disabled={userInfo ? false : true} onClick={() => openMnVote(2)} > <i className="icon-thumbs-down" aria-hidden="true"></i> <span className="vote-label">{t("govlist.vote.no", "NO")}</span> </button> Suggestion importance[1-10]: 5 __ Why: The suggestion to remove inline styles is valid and improves code readability. However, the impact is relatively minor, as it's a stylistic change rather than a functional fix. The score reflects this moderate improvement.	Low