Skip to content

SYSHUB001v2-SG01: Implement improved voting buttons #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
osiastedian merged 1 commit into from
Oct 6, 2025
Merged

SYSHUB001v2-SG01: Implement improved voting buttons #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 47 additions & 47 deletions docs/entry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down
45 changes: 0 additions & 45 deletions public/assets/css/styles.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions src/components/governance/ProposalCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,8 +211,8 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) {
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>
<span className="vote-emoji">👍</span>
<span className="vote-label">{t("govlist.vote.yes", "Vote Yes")}</span>
</button>
<button
style={{ border: "none", outline: "none" }}
Expand All @@ -222,8 +222,8 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) {
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>
<span className="vote-emoji">➖</span>
<span className="vote-label">{t("govlist.vote.abstain", "Abstain")}</span>
</button>
<button
style={{ border: "none", outline: "none" }}
Expand All @@ -233,8 +233,8 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) {
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>
<span className="vote-emoji">👎</span>
<span className="vote-label">{t("govlist.vote.no", "Vote No")}</span>
</button>
</div>
)}
Expand Down
66 changes: 36 additions & 30 deletions src/scss/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/scss/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
6 changes: 3 additions & 3 deletions src/shared/locales/en/partials/govlist/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down