From bb70117a22a5db7dd911104e63eec737537ac073 Mon Sep 17 00:00:00 2001 From: Ted Ian Osias Date: Mon, 6 Oct 2025 23:52:50 +0800 Subject: [PATCH] SYSHUB001v2-SG01: Implement improved voting buttons - Replace old icon-based buttons with emoji-based rectangular buttons - Add proper colors: Green (Vote Yes), Gray (Abstain), Red (Vote No) - Update button text from YES/NO/ABSTAIN to Vote Yes/Vote No/Abstain - Implement horizontal layout with emoji + text - Fix SCSS compilation by uncommenting _tables.scss imports - Remove conflicting CSS from old styles - Refine button sizing (90px x 36px) for better proportions - Add proper hover effects and accessibility features Resolves GitHub Issue #102: Improved voting buttons for better UX --- docs/entry.js | 94 +++++++++---------- public/assets/css/styles.css | 45 --------- src/components/governance/ProposalCard.jsx | 12 +-- src/scss/_tables.scss | 66 +++++++------ src/scss/styles.scss | 6 +- .../locales/en/partials/govlist/index.js | 6 +- 6 files changed, 95 insertions(+), 134 deletions(-) diff --git a/docs/entry.js b/docs/entry.js index ee2ac519..b668f658 100644 --- a/docs/entry.js +++ b/docs/entry.js @@ -25,7 +25,7 @@ import Component0 from '../src/pages/About.js'; reactComponents['About'] = Component0; -import Component1 from '../src/components/profile/AddAddressForm.jsx'; +import Component1 from '../src/components/profile/AddAddress/Form.jsx'; reactComponents['AddAddressForm'] = Component1; import Component2 from '../src/components/profile/AddVotingAddress.jsx'; @@ -151,74 +151,74 @@ reactComponents['MasternodeForm'] = Component41; import Component42 from '../src/components/masternodes/MasternodeTable.jsx'; reactComponents['MasternodeTable'] = Component42; -import Component43 from '../src/pages/Masternodes.jsx'; -reactComponents['Masternodes'] = Component43; +import Component43 from '../src/components/profile/2FA/Modal2FA.jsx'; +reactComponents['Modal2FA'] = Component43; -import Component44 from '../src/components/profile/2FA/Modal2FA.jsx'; -reactComponents['Modal2FA'] = Component44; +import Component44 from '../src/pages/NewProposal.jsx'; +reactComponents['NewProposal'] = Component44; -import Component45 from '../src/pages/NewProposal.jsx'; -reactComponents['NewProposal'] = Component45; +import Component45 from '../src/components/proposal/PaymentProposal.jsx'; +reactComponents['PaymentProposal'] = Component45; -import Component46 from '../src/components/proposal/PaymentProposal.jsx'; -reactComponents['PaymentProposal'] = Component46; +import Component46 from '../src/components/profile/2FA/PreviousPhoneForm.jsx'; +reactComponents['PreviousPhoneForm'] = Component46; -import Component47 from '../src/components/profile/2FA/PreviousPhoneForm.jsx'; -reactComponents['PreviousPhoneForm'] = Component47; +import Component47 from '../src/components/stats/Price.js'; +reactComponents['Price'] = Component47; -import Component48 from '../src/components/stats/Price.js'; -reactComponents['Price'] = Component48; +import Component48 from '../src/components/stats/PriceLineChart.js'; +reactComponents['PriceLineChart'] = Component48; -import Component49 from '../src/components/stats/PriceLineChart.js'; -reactComponents['PriceLineChart'] = Component49; +import Component49 from '../src/components/global/PrivateRoute.jsx'; +reactComponents['PrivateRoute'] = Component49; -import Component50 from '../src/components/global/PrivateRoute.jsx'; -reactComponents['PrivateRoute'] = Component50; +import Component50 from '../src/pages/Profile.jsx'; +reactComponents['Profile'] = Component50; -import Component51 from '../src/pages/Profile.jsx'; -reactComponents['Profile'] = Component51; +import Component51 from '../src/components/governance/ProposalCard.jsx'; +reactComponents['ProposalCard'] = Component51; -import Component52 from '../src/components/governance/ProposalCard.jsx'; -reactComponents['ProposalCard'] = Component52; +import Component52 from '../src/components/governance/ProposalCardInfo.jsx'; +reactComponents['ProposalCardInfo'] = Component52; -import Component53 from '../src/components/governance/ProposalCardInfo.jsx'; -reactComponents['ProposalCardInfo'] = Component53; +import Component53 from '../src/components/proposal/ProposalForm.jsx'; +reactComponents['ProposalForm'] = Component53; -import Component54 from '../src/components/proposal/ProposalForm.jsx'; -reactComponents['ProposalForm'] = Component54; +import Component54 from '../src/components/admin/ProposalPagination.jsx'; +reactComponents['ProposalPagination'] = Component54; -import Component55 from '../src/components/admin/ProposalPagination.jsx'; -reactComponents['ProposalPagination'] = Component55; +import Component55 from '../src/components/proposal/ProposalPreview.jsx'; +reactComponents['ProposalPreview'] = Component55; -import Component56 from '../src/components/proposal/ProposalPreview.jsx'; -reactComponents['ProposalPreview'] = Component56; +import Component56 from '../src/components/governance/ProposalsList.jsx'; +reactComponents['ProposalsList'] = Component56; -import Component57 from '../src/components/governance/ProposalsList.jsx'; -reactComponents['ProposalsList'] = Component57; +import Component57 from '../src/components/admin/ProposalsTable.jsx'; +reactComponents['ProposalsTable'] = Component57; -import Component58 from '../src/components/admin/ProposalsTable.jsx'; -reactComponents['ProposalsTable'] = Component58; +import Component58 from '../src/components/global/PublicRoute.jsx'; +reactComponents['PublicRoute'] = Component58; -import Component59 from '../src/components/global/PublicRoute.jsx'; -reactComponents['PublicRoute'] = Component59; +import Component59 from '../src/pages/Recover.jsx'; +reactComponents['Recover'] = Component59; -import Component60 from '../src/pages/Recover.jsx'; -reactComponents['Recover'] = Component60; +import Component60 from '../src/components/masternodes/RemotePagination.jsx'; +reactComponents['RemotePagination'] = Component60; -import Component61 from '../src/components/masternodes/RemotePagination.jsx'; -reactComponents['RemotePagination'] = Component61; +import Component61 from '../src/components/profile/2FA/SMS2FAForm.jsx'; +reactComponents['SMS2FAForm'] = Component61; -import Component62 from '../src/components/profile/2FA/SMS2FAForm.jsx'; -reactComponents['SMS2FAForm'] = Component62; +import Component62 from '../src/components/profile/2FA/SMS2FA.jsx'; +reactComponents['SMSTwoFA'] = Component62; -import Component63 from '../src/components/profile/2FA/SMS2FA.jsx'; -reactComponents['SMSTwoFA'] = Component63; +import Component63 from '../src/components/login/SMSTwoFAFormLogin.jsx'; +reactComponents['SMSTwoFAFormLogin'] = Component63; -import Component64 from '../src/components/login/SMSTwoFAFormLogin.jsx'; -reactComponents['SMSTwoFAFormLogin'] = Component64; +import Component64 from '../src/components/global/ScrollToTop.jsx'; +reactComponents['ScrollToTop'] = Component64; -import Component65 from '../src/components/global/ScrollToTop.jsx'; -reactComponents['ScrollToTop'] = Component65; +import Component65 from '../src/pages/SentryNodes.jsx'; +reactComponents['SentryNodes'] = Component65; import Component66 from '../src/pages/Setup.js'; reactComponents['Setup'] = Component66; diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css index 4e533db8..27efa4bd 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -2908,51 +2908,6 @@ ul.pagination { .proposals .proposal .actions { width: 10%; float: left; } - .proposals .proposal .actions .vote { - background: #1e255f29; - line-height: 40px; - text-align: center; - width: 70px; - height: 40px; - float: right; - clear: right; - transition: all 0.3s linear; - -webkit-transition: all 0.3s linear; - -moz-transition: all 0.3s linear; } - .proposals .proposal .actions .vote:hover { - color: #19195A; } - .proposals .proposal .actions .vote:nth-child(1) { - border-top-left-radius: 35px; - border-top-right-radius: 35px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - -webkit-border-top-left-radius: 35px; - -webkit-border-top-right-radius: 35px; - -webkit-border-bottom-right-radius: 0; - -webkit-border-bottom-left-radius: 0; - -moz-border-radius-topleft: 35px; - -moz-border-radius-topright: 35px; - -moz-border-radius-bottomright: 0; - -moz-border-radius-bottomleft: 0; } - .proposals .proposal .actions .vote:nth-child(1):hover { - background: #6fcc8f; } - .proposals .proposal .actions .vote:nth-child(2):hover { - background: #B2BDDB; } - .proposals .proposal .actions .vote:nth-child(3) { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 35px; - border-bottom-left-radius: 35px; - -webkit-border-top-left-radius: 0; - -webkit-border-top-right-radius: 0; - -webkit-border-bottom-right-radius: 35px; - -webkit-border-bottom-left-radius: 35px; - -moz-border-radius-topleft: 0; - -moz-border-radius-topright: 0; - -moz-border-radius-bottomright: 35px; - -moz-border-radius-bottomleft: 35px; } - .proposals .proposal .actions .vote:nth-child(3):hover { - background: #cc6666; } .ministats .subtitle, .world-dist .subtitle { font-weight: 500; diff --git a/src/components/governance/ProposalCard.jsx b/src/components/governance/ProposalCard.jsx index 6da0ff55..f360b6fc 100644 --- a/src/components/governance/ProposalCard.jsx +++ b/src/components/governance/ProposalCard.jsx @@ -211,8 +211,8 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) { disabled={userInfo ? false : true} onClick={() => openMnVote(1)} > - - {t("govlist.vote.yes", "YES")} + 👍 + {t("govlist.vote.yes", "Vote Yes")} )} diff --git a/src/scss/_tables.scss b/src/scss/_tables.scss index fe1fb688..65ec8a14 100644 --- a/src/scss/_tables.scss +++ b/src/scss/_tables.scss @@ -249,27 +249,30 @@ ul.pagination .vote { - background:#1e255f29; - line-height: 40px; + line-height: 1.2; text-align: center; - width:90px; - height:50px; - float:right; - clear:right; + width: 90px; + height: 36px; + float: right; + clear: right; + margin-bottom: 4px; @include transition(all, .3s); display: flex; - flex-direction: column; + flex-direction: row; align-items: center; justify-content: center; position: relative; - border: 2px solid transparent; + border: none; + border-radius: 4px; cursor: pointer; + color: white; + font-weight: 600; + padding: 0 8px; &:hover { - color:$color-blue-main; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } &:focus @@ -286,61 +289,64 @@ ul.pagination box-shadow: none; } - i + .vote-emoji { - font-size: 16px; - margin-bottom: 2px; + font-size: 14px; + margin-right: 4px; + display: inline-block; } .vote-label { font-size: 10px; font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; + text-transform: none; + letter-spacing: 0.1px; + white-space: nowrap; } &.vote--yes { - @include border-radii(35px,35px,0,0); + background: #28a745 !important; + color: white !important; + &:hover { - background:$vote-green; - border-color: darken($vote-green, 10%); - color: white; + background: #218838 !important; } &:focus { - border-color: $vote-green; + outline-color: #28a745; } } &.vote--abstain { + background: #6c757d !important; + color: white !important; + &:hover { - background:$off-white; - border-color: darken($off-white, 20%); - color: $color-blue-main; + background: #5a6268 !important; } &:focus { - border-color: $off-white; + outline-color: #6c757d; } } &.vote--no { - @include border-radii(0,0,35px,35px); + background: #dc3545 !important; + color: white !important; + &:hover { - background:$vote-red; - border-color: darken($vote-red, 10%); - color: white; + background: #c82333 !important; } &:focus { - border-color: $vote-red; + outline-color: #dc3545; } } } diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 71bb85f5..f9d24633 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -7,14 +7,14 @@ $body-bg: #000; $body-color: #D3DFFF; // Required @use "bootstrap/scss/bootstrap"; -// @import "_mixins.scss"; -// @use "_settings.scss"; +@import "_mixins.scss"; +@import "_settings.scss"; // @import "_header.scss"; // @import "_nav.scss"; // @import "_backgrounds.scss"; // @use "_btns.scss"; // @import "_article.scss"; // @import "_inputs.scss"; -// @import "_tables.scss"; +@import "_tables.scss"; // @import "_modal.scss"; // @import "_icons.scss"; diff --git a/src/shared/locales/en/partials/govlist/index.js b/src/shared/locales/en/partials/govlist/index.js index 7fbf3307..63c89e45 100644 --- a/src/shared/locales/en/partials/govlist/index.js +++ b/src/shared/locales/en/partials/govlist/index.js @@ -16,9 +16,9 @@ const govList = { view_proposal_txt:'VIew Proposal' }, vote: { - yes: 'YES', - no: 'NO', - abstain: 'ABSTAIN', + yes: 'Vote Yes', + no: 'Vote No', + abstain: 'Abstain', yes_tooltip: 'Vote YES - Support this proposal', no_tooltip: 'Vote NO - Reject this proposal', abstain_tooltip: 'ABSTAIN - Neutral vote',