Skip to content

Commit ec696d4

Browse files
osiastedianTed Ian Osias
osiastedian
and
Ted Ian Osias
authored
Improve CLI command visibility and copy functionality (#160)
* 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 * 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 * Fix Governance Details visual presentation - Convert inline format to proper table structure for better alignment - Add dedicated cells for labels and values to prevent text wrapping - Implement responsive table design with improved column widths - Add professional styling with hover effects and visual hierarchy - Fix alignment issues with long date text in SuperBlock information Resolves #86 --------- Co-authored-by: Ted Ian Osias <[email protected]>
1 parent 4228147 commit ec696d4

File tree

5 files changed

+409
-98
lines changed

5 files changed

+409
-98
lines changed

‎src/App.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,151 @@
4040
.ReactCollapse--collapse {
4141
transition: height 500ms;
4242
}
43+
44+
/* Custom selection styles for CLI command textareas */
45+
textarea#prepareCommand::selection,
46+
textarea#submitCommand::selection {
47+
background-color: #0078d4;
48+
color: #ffffff;
49+
}
50+
51+
/* Copy icon positioning for CLI command textareas */
52+
.cli-command-container {
53+
position: relative;
54+
display: inline-block;
55+
width: 100%;
56+
}
57+
58+
.cli-command-container .copy-icon {
59+
position: absolute;
60+
top: 10px;
61+
right: 10px;
62+
z-index: 10;
63+
background: rgba(0, 120, 212, 0.9);
64+
color: white;
65+
border: none;
66+
border-radius: 4px;
67+
padding: 8px 12px;
68+
cursor: pointer;
69+
font-size: 14px;
70+
transition: all 0.2s ease;
71+
}
72+
73+
.cli-command-container .copy-icon:hover {
74+
background: rgba(0, 120, 212, 1);
75+
transform: scale(1.05);
76+
}
77+
78+
.cli-command-container .copy-icon:active {
79+
transform: scale(0.95);
80+
}
81+
82+
/* Governance Proposal Link Button */
83+
.proposal-link-button {
84+
display: inline-block;
85+
background: linear-gradient(135deg, #ff6b35, #f7931e);
86+
color: white;
87+
text-decoration: none;
88+
padding: 12px 24px;
89+
border-radius: 8px;
90+
font-weight: 700;
91+
font-size: 16px;
92+
text-align: center;
93+
margin: 16px 0;
94+
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
95+
transition: all 0.3s ease;
96+
border: 2px solid transparent;
97+
}
98+
99+
.proposal-link-button:hover {
100+
background: linear-gradient(135deg, #e55a2b, #e0841a);
101+
transform: translateY(-2px);
102+
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
103+
color: white;
104+
text-decoration: none;
105+
}
106+
107+
.proposal-link-button:active {
108+
transform: translateY(0);
109+
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
110+
}
111+
112+
.proposal-link-section {
113+
text-align: center;
114+
margin: 20px 0;
115+
}
116+
117+
/* Voting Command Sections */
118+
.voting-command-section {
119+
margin: 16px 0;
120+
width: 100% !important;
121+
max-width: 100% !important;
122+
clear: both;
123+
}
124+
125+
.voting-command-section .cli-command-container textarea {
126+
min-height: 60px;
127+
height: auto;
128+
width: 100%;
129+
max-width: 100%;
130+
font-family: 'Courier New', monospace;
131+
font-size: 13px;
132+
line-height: 1.4;
133+
padding: 12px 50px 12px 12px; /* top right bottom left - extra padding on right for copy icon */
134+
word-break: break-all;
135+
box-sizing: border-box;
136+
}
137+
138+
.voting-command-label {
139+
display: block;
140+
font-weight: 600;
141+
font-size: 14px;
142+
margin-bottom: 8px;
143+
padding: 4px 8px;
144+
border-radius: 4px;
145+
width: fit-content;
146+
}
147+
148+
.voting-command-label--yes {
149+
background-color: rgba(34, 197, 94, 0.2);
150+
color: #22c55e;
151+
border: 1px solid rgba(34, 197, 94, 0.3);
152+
}
153+
154+
.voting-command-label--no {
155+
background-color: rgba(239, 68, 68, 0.2);
156+
color: #ef4444;
157+
border: 1px solid rgba(239, 68, 68, 0.3);
158+
}
159+
160+
.voting-command-label--abstain {
161+
background-color: rgba(156, 163, 175, 0.2);
162+
color: #9ca3af;
163+
border: 1px solid rgba(156, 163, 175, 0.3);
164+
}
165+
166+
/* Hash Info Section - Less Prominent */
167+
.hash-info-section {
168+
margin-top: 24px;
169+
padding-top: 16px;
170+
border-top: 1px solid rgba(255, 255, 255, 0.1);
171+
opacity: 0.8;
172+
}
173+
174+
.hash-info-section p {
175+
font-size: 12px;
176+
margin: 4px 0;
177+
}
178+
179+
/* Override width constraints for voting commands in proposal budget section */
180+
.proposal .budget .voting-command-section {
181+
width: 100% !important;
182+
max-width: 100% !important;
183+
float: none !important;
184+
clear: both;
185+
}
186+
187+
.proposal .budget .voting-command-section .cli-command-container {
188+
width: 100% !important;
189+
max-width: 100% !important;
190+
}

‎src/components/governance/GovDetails.jsx‎

Lines changed: 62 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -47,59 +47,74 @@ class Govdetails extends Component {
4747
<div className="col col--size6">
4848
<div className="article__content">
4949
<h3 className="article__title title-border title-border--left title-border--blue">{t('superblocks.govdetailtable.title')}</h3>
50-
<div className="ministats mndata-governance">
51-
<div className="stat">
52-
{t('superblocks.govdetailtable.current_superblock')}
53-
<div className="stat-data">{this.state.superBlockData.next_superblock}</div>
54-
</div>
55-
<div className="stat">
56-
{t('superblocks.govdetailtable.superblock_budget')}
57-
<div className="stat-data">{this.state.superBlockData.budget} SYS</div>
58-
</div>
59-
<div className="stat">
60-
{t('superblocks.govdetailtable.requested_superblock_budget')}
61-
<div className="stat-data">{this.state.budgetSum} SYS</div>
62-
</div>
63-
<div className="stat">
64-
{t('superblocks.govdetailtable.superblock_date_utc')}
65-
<div className="stat-data">{this.state.superBlockData.superblock_date}</div>
66-
</div>
67-
<div className="stat">
68-
{t('superblocks.govdetailtable.voting_deadline_utc')}
69-
<div className="stat-data">{this.state.superBlockData.voting_deadline}</div>
70-
</div>
50+
<div className="table-responsive">
51+
<table className="table table--governance">
52+
<tbody>
53+
<tr>
54+
<td className="table-label">Current SuperBlock:</td>
55+
<td className="table-value">{this.state.superBlockData.next_superblock}</td>
56+
</tr>
57+
<tr>
58+
<td className="table-label">SuperBlock Budget:</td>
59+
<td className="table-value">{this.state.superBlockData.budget} SYS</td>
60+
</tr>
61+
<tr>
62+
<td className="table-label">Requested SuperBlock Budget:</td>
63+
<td className="table-value">{this.state.budgetSum} SYS</td>
64+
</tr>
65+
<tr>
66+
<td className="table-label">SuperBlock Date (UTC):</td>
67+
<td className="table-value">{this.state.superBlockData.superblock_date}</td>
68+
</tr>
69+
<tr>
70+
<td className="table-label">Voting Deadline (UTC):</td>
71+
<td className="table-value">{this.state.superBlockData.voting_deadline}</td>
72+
</tr>
73+
</tbody>
74+
</table>
7175
</div>
7276
</div>
7377
</div>
7478
<div className="col col--size6">
7579
<div className="article__content">
7680
<h3 className="article__title title-border title-border--left title-border--blue">{t('superblocks.nextsuperblockstable.title')}</h3>
77-
<div className="ministats mndata-governance">
78-
<div className="stat">
79-
{this.state.superBlockData.sb1}
80-
<div className="stat-data">{this.state.superBlockData.sb1Budget.result} SYS</div>
81-
<div className="stat-data">{this.state.superBlockData.sb1Date}</div>
82-
</div>
83-
<div className="stat">
84-
{this.state.superBlockData.sb2}
85-
<div className="stat-data">{this.state.superBlockData.sb2Budget.result} SYS</div>
86-
<div className="stat-data">{this.state.superBlockData.sb2Date}</div>
87-
</div>
88-
<div className="stat">
89-
{this.state.superBlockData.sb3}
90-
<div className="stat-data">{this.state.superBlockData.sb3Budget.result} SYS</div>
91-
<div className="stat-data">{this.state.superBlockData.sb3Date}</div>
92-
</div>
93-
<div className="stat">
94-
{this.state.superBlockData.sb4}
95-
<div className="stat-data">{this.state.superBlockData.sb4Budget.result} SYS</div>
96-
<div className="stat-data">{this.state.superBlockData.sb4Date}</div>
97-
</div>
98-
<div className="stat">
99-
{this.state.superBlockData.sb5}
100-
<div className="stat-data">{this.state.superBlockData.sb5Budget.result} SYS</div>
101-
<div className="stat-data">{this.state.superBlockData.sb5Date}</div>
102-
</div>
81+
<div className="table-responsive">
82+
<table className="table table--governance">
83+
<thead>
84+
<tr>
85+
<th>SuperBlock</th>
86+
<th>Budget</th>
87+
<th>Date</th>
88+
</tr>
89+
</thead>
90+
<tbody>
91+
<tr>
92+
<td className="table-label">{this.state.superBlockData.sb1}</td>
93+
<td className="table-value">{this.state.superBlockData.sb1Budget.result} SYS</td>
94+
<td className="table-value">{this.state.superBlockData.sb1Date}</td>
95+
</tr>
96+
<tr>
97+
<td className="table-label">{this.state.superBlockData.sb2}</td>
98+
<td className="table-value">{this.state.superBlockData.sb2Budget.result} SYS</td>
99+
<td className="table-value">{this.state.superBlockData.sb2Date}</td>
100+
</tr>
101+
<tr>
102+
<td className="table-label">{this.state.superBlockData.sb3}</td>
103+
<td className="table-value">{this.state.superBlockData.sb3Budget.result} SYS</td>
104+
<td className="table-value">{this.state.superBlockData.sb3Date}</td>
105+
</tr>
106+
<tr>
107+
<td className="table-label">{this.state.superBlockData.sb4}</td>
108+
<td className="table-value">{this.state.superBlockData.sb4Budget.result} SYS</td>
109+
<td className="table-value">{this.state.superBlockData.sb4Date}</td>
110+
</tr>
111+
<tr>
112+
<td className="table-label">{this.state.superBlockData.sb5}</td>
113+
<td className="table-value">{this.state.superBlockData.sb5Budget.result} SYS</td>
114+
<td className="table-value">{this.state.superBlockData.sb5Date}</td>
115+
</tr>
116+
</tbody>
117+
</table>
103118
</div>
104119
</div>
105120
</div>

0 commit comments

Comments
 (0)