From 2ab3cf8a44fbce84290f7e3b42a7fa6129646eac Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 11 Sep 2025 02:07:59 +0000
Subject: [PATCH] Refactor proposal voting UI and styles

Co-authored-by: osiastedian <osiastedian@gmail.com>
---
 src/components/governance/ProposalCard.jsx    | 24 ++++---
 src/scss/_tables.scss                         | 67 +++++++++++++++++--
 .../locales/en/partials/govlist/index.js      | 11 +++
 3 files changed, 87 insertions(+), 15 deletions(-)

diff --git a/src/components/governance/ProposalCard.jsx b/src/components/governance/ProposalCard.jsx
index 262037da..6da0ff55 100644
--- a/src/components/governance/ProposalCard.jsx
+++ b/src/components/governance/ProposalCard.jsx
@@ -205,30 +205,36 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) {
         <div className="actions">
           <button
             style={{ border: "none", outline: "none" }}
-            className="vote"
-            title="Vote yes"
+            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-up-open"></i>
+            <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"
-            title="Abstain"
+            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-minus-outline"></i>
+            <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"
-            title="Vote no"
+            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-down-open"></i>
+            <i className="icon-thumbs-down" aria-hidden="true"></i>
+            <span className="vote-label">{t("govlist.vote.no", "NO")}</span>
           </button>
         </div>
       )}
diff --git a/src/scss/_tables.scss b/src/scss/_tables.scss
index 2f49cda8..fe1fb688 100644
--- a/src/scss/_tables.scss
+++ b/src/scss/_tables.scss
@@ -252,40 +252,95 @@ ul.pagination
                 background:#1e255f29;
                 line-height: 40px;
                 text-align: center;
-                width:70px;
-                height:40px;
+                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);
                 }
 
-                &:nth-child(1)
+                &: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;
                     }
                 }
 
-                &:nth-child(2)
+                &.vote--abstain
                 {
                     &:hover 
                     {
                         background:$off-white;
-                    } 
+                        border-color: darken($off-white, 20%);
+                        color: $color-blue-main;
+                    }
+                    &:focus
+                    {
+                        border-color: $off-white;
+                    }
                 }
 
-                &:nth-child(3)
+                &.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;
                     }
                 }
             }
diff --git a/src/shared/locales/en/partials/govlist/index.js b/src/shared/locales/en/partials/govlist/index.js
index a7c1ff1a..7fbf3307 100644
--- a/src/shared/locales/en/partials/govlist/index.js
+++ b/src/shared/locales/en/partials/govlist/index.js
@@ -15,6 +15,17 @@ const govList = {
         red_text:'This Proposal needs [API] more YES Votes',
         view_proposal_txt:'VIew Proposal'
       },
+      vote: {
+        yes: 'YES',
+        no: 'NO',
+        abstain: 'ABSTAIN',
+        yes_tooltip: 'Vote YES - Support this proposal',
+        no_tooltip: 'Vote NO - Reject this proposal',
+        abstain_tooltip: 'ABSTAIN - Neutral vote',
+        yes_aria: 'Vote yes for this proposal',
+        no_aria: 'Vote no for this proposal',
+        abstain_aria: 'Abstain from voting on this proposal'
+      },
       loading: 'Loading...'
     },
   }