From 5c61adb9b620d00d34f2aec5aefdadc2729f5599 Mon Sep 17 00:00:00 2001 From: Ted Ian Osias Date: Mon, 13 Oct 2025 14:56:22 +0800 Subject: [PATCH 1/3] Improve CLI command visibility and copy functionality - Add custom ::selection styles for high-contrast text selection in CLI textareas - Enhance copy button styling from outline to solid blue buttons - Add copy icons positioned on top-right of textareas for better UX - Update button labels from 'Copy' to 'Copy Command' for clarity - Apply improvements to both prepare and submit command textareas --- src/App.css | 38 +++++++++++++++++ src/components/proposal/ProposalForm.jsx | 52 ++++++++++++++++-------- 2 files changed, 72 insertions(+), 18 deletions(-) diff --git a/src/App.css b/src/App.css index 13bc334e..d7977590 100644 --- a/src/App.css +++ b/src/App.css @@ -40,3 +40,41 @@ .ReactCollapse--collapse { transition: height 500ms; } + +/* Custom selection styles for CLI command textareas */ +textarea#prepareCommand::selection, +textarea#submitCommand::selection { + background-color: #0078d4; + color: #ffffff; +} + +/* Copy icon positioning for CLI command textareas */ +.cli-command-container { + position: relative; + display: inline-block; + width: 100%; +} + +.cli-command-container .copy-icon { + position: absolute; + top: 10px; + right: 10px; + z-index: 10; + background: rgba(0, 120, 212, 0.9); + color: white; + border: none; + border-radius: 4px; + padding: 8px 12px; + cursor: pointer; + font-size: 14px; + transition: all 0.2s ease; +} + +.cli-command-container .copy-icon:hover { + background: rgba(0, 120, 212, 1); + transform: scale(1.05); +} + +.cli-command-container .copy-icon:active { + transform: scale(0.95); +} diff --git a/src/components/proposal/ProposalForm.jsx b/src/components/proposal/ProposalForm.jsx index 4c1d7482..afbc721a 100644 --- a/src/components/proposal/ProposalForm.jsx +++ b/src/components/proposal/ProposalForm.jsx @@ -379,14 +379,22 @@ function ProposalForm() { initialStyle={{height: 0, overflow: 'hidden'}} >
- +
+ + + + +

Prepare command is ready to be copied. Please copy and paste it into Syscoin Q.T console for payment txid. @@ -399,7 +407,7 @@ function ProposalForm() { text={prepareCommand} onCopy={copyButton} > - +

@@ -431,14 +439,22 @@ function ProposalForm() {
Important: Please wait at least 5 minutes or 1 block confirmation after sending the payment transaction before running go_submit. Submitting too early may cause your proposal to fail.
- +
+ + + + +

Submit command is ready to be copied. Please copy and paste it into Syscoin Q.T console to submit your proposal. This could take a couple minutes. @@ -451,7 +467,7 @@ function ProposalForm() { text={submitCommand} onCopy={copyButton} > - + From e03913fc91b91f580587b301c717c1d87cbe1aa5 Mon Sep 17 00:00:00 2001 From: Ted Ian Osias Date: Mon, 13 Oct 2025 15:19:00 +0800 Subject: [PATCH 2/3] feat: improve governance page visibility and voting command UX - Add three separate voting command textareas (Yes/No/Abstain) with copy buttons - Create prominent orange gradient 'View Full Proposal' button with high contrast - Reorganize information hierarchy for better user experience - Add color-coded voting command labels with proper spacing - Fix textarea width constraints and add padding to prevent copy icon overlap - Enhance CLI command containers with monospace font and proper sizing Resolves #85 --- src/App.css | 110 +++++++++++++++++ .../governance/ProposalCardInfo.jsx | 116 ++++++++++++++---- 2 files changed, 202 insertions(+), 24 deletions(-) diff --git a/src/App.css b/src/App.css index d7977590..0c123e2a 100644 --- a/src/App.css +++ b/src/App.css @@ -78,3 +78,113 @@ textarea#submitCommand::selection { .cli-command-container .copy-icon:active { transform: scale(0.95); } + +/* Governance Proposal Link Button */ +.proposal-link-button { + display: inline-block; + background: linear-gradient(135deg, #ff6b35, #f7931e); + color: white; + text-decoration: none; + padding: 12px 24px; + border-radius: 8px; + font-weight: 700; + font-size: 16px; + text-align: center; + margin: 16px 0; + box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); + transition: all 0.3s ease; + border: 2px solid transparent; +} + +.proposal-link-button:hover { + background: linear-gradient(135deg, #e55a2b, #e0841a); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4); + color: white; + text-decoration: none; +} + +.proposal-link-button:active { + transform: translateY(0); + box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3); +} + +.proposal-link-section { + text-align: center; + margin: 20px 0; +} + +/* Voting Command Sections */ +.voting-command-section { + margin: 16px 0; + width: 100% !important; + max-width: 100% !important; + clear: both; +} + +.voting-command-section .cli-command-container textarea { + min-height: 60px; + height: auto; + width: 100%; + max-width: 100%; + font-family: 'Courier New', monospace; + font-size: 13px; + line-height: 1.4; + padding: 12px 50px 12px 12px; /* top right bottom left - extra padding on right for copy icon */ + word-break: break-all; + box-sizing: border-box; +} + +.voting-command-label { + display: block; + font-weight: 600; + font-size: 14px; + margin-bottom: 8px; + padding: 4px 8px; + border-radius: 4px; + width: fit-content; +} + +.voting-command-label--yes { + background-color: rgba(34, 197, 94, 0.2); + color: #22c55e; + border: 1px solid rgba(34, 197, 94, 0.3); +} + +.voting-command-label--no { + background-color: rgba(239, 68, 68, 0.2); + color: #ef4444; + border: 1px solid rgba(239, 68, 68, 0.3); +} + +.voting-command-label--abstain { + background-color: rgba(156, 163, 175, 0.2); + color: #9ca3af; + border: 1px solid rgba(156, 163, 175, 0.3); +} + +/* Hash Info Section - Less Prominent */ +.hash-info-section { + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid rgba(255, 255, 255, 0.1); + opacity: 0.8; +} + +.hash-info-section p { + font-size: 12px; + margin: 4px 0; +} + +/* Override width constraints for voting commands in proposal budget section */ +.proposal .budget .voting-command-section { + width: 100% !important; + max-width: 100% !important; + float: none !important; + clear: both; +} + +.proposal .budget .voting-command-section .cli-command-container { + width: 100% !important; + max-width: 100% !important; +} diff --git a/src/components/governance/ProposalCardInfo.jsx b/src/components/governance/ProposalCardInfo.jsx index 291b4cab..a2b36651 100644 --- a/src/components/governance/ProposalCardInfo.jsx +++ b/src/components/governance/ProposalCardInfo.jsx @@ -39,8 +39,13 @@ function ProposalCardInfo({ function proposalUrl(url) { if (url !== "" && url !== "emptyField") { return ( - - View proposal on syscoin.org + + 📄 View Full Proposal on Syscoin.org ); } else { @@ -74,22 +79,12 @@ function ProposalCardInfo({ /> )} -

- Hash: {proposal.Hash} -

-

- Collateral hash:{" "} - - {proposal.ColHash} - -

+ + {/* Prominent View Proposal Button */} +
+ {proposalUrl(proposal.url)} +
+

{days_remaining < 30 ? ( {`(${days_remaining} Day${ @@ -101,20 +96,93 @@ function ProposalCardInfo({ } Remaining)`} )}

- Voting string: -
-
+ Voting Commands: + + {/* Yes Vote Command */} +
+ +