Rebrand Proposals table #499

peterjurco · 2024-11-25T12:10:08Z

Closes #461

What does this change?

Restyles the proposals table used in Governance & History page according the new designs (History page is not yet done)
Adds logic for ✅❌icons in the vote bar - previously it was one set of icons, now we have two sets. See slack discussion
Refactors <Tag> element a bit so the styles can be done inside the component based on the type ("primary" or "secondary")
Adds some temporary testing capabilities so we don't need to manually play with proposals locally to get them in the desired state (I will remove it before merge)

How to test it

Go to the src/pages/proposals/proposals.tsx
- uncomment lines 50 -72
- comment out line 76 (const sortedProposals = openProposalsSelector(proposals);)
Go to the src/pages/proposals/test-proposals.json and change data to desired state. Most important fields:
- type can be "primary" or "secondary"
- voterState can be 0 (Unvoted), 1 (Voted for), 2 (Voted against)
- open, executed,
- yea, nay - votes distribution

Anboias

Looking good 👌
Only have two small comments

Many thanks for the testing part

Anboias · 2024-11-26T08:47:42Z

src/pages/proposal-commons/proposal-list/proposal-list.module.scss

  }
 }

 .proposalItemTitle {
-  margin-bottom: $space-md;
+  margin-bottom: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;


Feels like we want the title to go two lines in here. This should do the trick (along with removing white-space: nowrap)

display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

I noticed two lines in some screens but I couldn't tell if this was an intent or a mistake. Why would you put the ellipsis into the middle of the line? I will ask about it on the next design call

Yeah, please do. My opinion is that the ellipsis was left in the middle of the line only to illustrate how the line is supposed to end

Shoot, forgot about this one. Will ask in Figma

src/pages/proposal-commons/proposal-list/proposal-list.module.scss

src/components/tag/tag.tsx

src/utils/image-list.ts

src/pages/proposals/test-proposals.json

peterjurco · 2024-11-30T09:14:22Z

I will remove the test code in #502

* Rebrand Proposals table * Add testing capabilities * Self review (fixing some colors) * Update Tag cursor * Rename Tag to ProposalTag

* Have renovate ignore api3-dao * Bump packages and update Actions workflow (#473) * Bump packages and update Actions workflow * Revert back to Node.js 16 * Update docker/build-push-action action to v6 (#484) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency @typechain/ethers-v5 to v11 (#421) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency prettier to v3 * Prettier * Add prettier:check * Require lint to pass prettier check * Update dependency cypress to v13 * Rol @types/node back to v16 * Rebrand DAO Dashboard - Colors & fonts setup (#458) * Add new color variables * Set up new fonts * Add breakpoints * Add rebrand branch to CI schedule * Fix description font styles * Rebrand page layout (#466) * Update background * Update logo * Update navigation bar * Update Connect button * Update desktop menu * Add External Links * Update layout dimensions * Update footer * Add theme prop to button component * Update error reporting notice * Update account dropdown * Update mobile menu * Fix unit test * Fix CY tests * Fixes after the review * Fix navigation height * Fix issues on the very small screens * Disable scrolling when mobile menu is open * min width for connect button * Use ExternalLink instead of Button for links * Update connected network in the mobile menu * Layout fixes (#494) * The layout fix (footer not stretched to the bottom) * History icon fix * Add menu hover & active states * Rebrand staking page (#474) * Misc additions * Update page header style * Update radial chart * Update Staking page * Move tooltips to own column * Style card title * Correct Connect Wallet info icon size * Correct Connect Wallet box button * Adjust card gap * Add secondary-neutral button variant * Add gradient border to unstaking card * Remove unnecesary global classes and fine-tune unstake panel * Refactor button variants * Adjust staking panel actions buttons * Fix Cy tests * Use data-testid instead of data-cy * Update pending staking card * Fix button unclickable bug * Rebrand tooltips (#488) * Update default tooltip * Update items tooltip * Fix staking pool table tooltips offset * Fix unchecked style * Rebrand Governance page (#496) * Rebrand Governance page * Fix CY test * Update header to <h1> * Rebrand modals (#495) * Remove unnecessary button wrapper * Update Modal component * Add button tertiary variant * Add button text-blue variant * Adapt Input component * Update Deposit modal * Update Withdraw/Stake/Unstake modals * Update Unstake Confirm modal * Update Unsupported Network modal * Self review * Show primary buttons first on mobile * Adapt to Button component without wrapper * Update account dropdown (#505) * Update Account dropdown * Apply background only when dropdown is open * Rebrand New Proposal modal (#500) * Update New Proposal modal body and labels * Refactor AutosizeInput component * Implement Textarea Input component * Final adjustments New Proposal modal * Rename AutosizeInput to Input * Remove old textarea component and update error border color * Separate TextareaInput into Input and Textarea * Rebrand Proposals table (#499) * Rebrand Proposals table * Add testing capabilities * Self review (fixing some colors) * Update Tag cursor * Rename Tag to ProposalTag * Rebrand History page (#501) * Rebrand Proposals table * Add testing capabilities * Self review (fixing some colors) * Update Tag cursor * Rebrand History page * Rename Tag to ProposalTag * Rebrand Unstake banner (#507) * Rebrand unstake banner * Move two line design to lower breakpoint * Add cookie consent logic (#508) * Add Checkbox component * Update Notice banner and align logic with Market * Add Privacy Settings modal * Fix Cypress tests * Initialize analytics and sentry * Add additional check for sentry init * Prevent default on external link click * Revert "Prevent default on external link click" This reverts commit 7c2f4a6. * Stop propagation of external link in privacy modal * Omit target and rel props * Update banner text * Display proposal title in two lines on non-desktop screens (#512) * Change Help tooltip to external link in the New Proposal modal (#515) * Change Help tooltip to external link in the New proposal modal * Fix uncentered modal title * Fix console errors (#516) * Use camelCase in SVG element prop names when they are used as react components * Add forgotten key prop * Do not pass incorrect props to input & textarea * Rebrand Proposal details (#502) * Rebrand proposal details * Add testing capabilities * Fixes after the review * Use react components for error & success icons * Use useId() * Rename 'Target Address' to 'Target Contract Address' * Add 404 page (#510) * Update NotFound page * Add Proposal page 404 redirect * Corrections * Return not found page for undecoded proposal * Add hideHeader flag to layout * Update CTA label * Use BaseLayout * Remove test code (#517) * Rebrand Governance page modals (#509) * Adapt Input component to small size * Update Delegate modal * Update Delegation action modal * Update Undelegate confirmation modal * Update Vot on proposal modal * Shorten class names * Remove value=undefined * Style the Malicious script warning (#518) * Update DAO modals (#522) * Update Unsupported chain modal * Update delegate modals * Update staking modals * Add UI for disconnected state of the proposal page (#523) Add disconnected proposal page * Fix breakpoints on 404 page (#526) * Adjust vote status when voted by delegate (#524) * Adjust vote status when voted by delegate * Update upload-artifact to v4 * Move connect button to the navigation bar on small screens (#525) * Move Connect button to navigation bar also on small screens * More explicit condition * Fix failing cypress test * Add privacy links & copyright to the footer (#527) * Add privacy links & copyright to the footer * Put links into utils file * Remove unused import * Rebrand toast messages (#519) * Update Button component * Preparatory changes * Update Toasts style * Update Clear Storage toast * Self review * Temporary testing toasts * Use customAction and prevent clear storage toast from closing * Fix Storage btn * Keep bg colour when autoClose is false * Remove testing code * Cleanup after the rebrand (#529) * Remove unused button styles * Remove unused BorderedBox component * Remove old breakpoints * Remove unused colors * Remove unused global styles and images * Fix cy test * Fixes after QA (#530) * Return voter status icons * tokens -> API3 tokens * Remove Tracker & Forum external links (#532) * Remove Tracker & Forum external links * Fix CY tests * Fix formatting after prettier update * Remove leftovers * Disable link checking of fleek deployments * Update favicon (#534) * Link DAO docs and not regular docs * Do not link Api3 Market * Remove obsolete market icon * Fix Cypress test --------- Co-authored-by: Derek Croote <dcroote@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Peter Jurčo <62913177+peterjurco@users.noreply.github.com> Co-authored-by: Bogdan Iasinovschi <biasinovschi@gmail.com> Co-authored-by: peterjurco <petrojurco@gmail.com>

peterjurco self-assigned this Nov 25, 2024

peterjurco requested review from mcoetzee and Anboias November 25, 2024 12:11

peterjurco linked an issue Nov 25, 2024 that may be closed by this pull request

Rebrand DAO Dashboard - Proposals table #461

Closed

peterjurco mentioned this pull request Nov 25, 2024

Rebrand History page #501

Merged

Anboias approved these changes Nov 26, 2024

View reviewed changes

Base automatically changed from 460/rebrand-governance-page to rebrand November 27, 2024 09:22

peterjurco mentioned this pull request Nov 27, 2024

Rebrand Proposal details #502

Merged

peterjurco added 3 commits November 27, 2024 13:15

Rebrand Proposals table

9d00f30

Add testing capabilities

acd9542

Self review (fixing some colors)

65ea306

peterjurco force-pushed the 461/rebrand-proposals-table branch from f94a4df to 65ea306 Compare November 27, 2024 12:16

Update Tag cursor

f2b1a04

mcoetzee reviewed Nov 27, 2024

View reviewed changes

src/components/tag/tag.tsx Outdated Show resolved Hide resolved

src/utils/image-list.ts Show resolved Hide resolved

src/pages/proposals/test-proposals.json Show resolved Hide resolved

Rename Tag to ProposalTag

3fa9e91

peterjurco mentioned this pull request Nov 28, 2024

Rebrand DAO Dashboard #506

Closed

10 tasks

peterjurco requested a review from mcoetzee November 28, 2024 10:13

peterjurco added 2 commits November 28, 2024 11:21

Merge branch 'rebrand' into 461/rebrand-proposals-table

3e41702

Merge branch 'rebrand' into 461/rebrand-proposals-table

888d860

mcoetzee approved these changes Nov 29, 2024

View reviewed changes

peterjurco merged commit 0ac0e35 into rebrand Nov 30, 2024
3 of 4 checks passed

peterjurco deleted the 461/rebrand-proposals-table branch November 30, 2024 09:09

PrenaamD mentioned this pull request Dec 2, 2024

Rebrand DAO Dashboard - History page #465

Closed

peterjurco mentioned this pull request Dec 5, 2024

Display proposal title in two lines on non-desktop screens #512

Merged

peterjurco added a commit that referenced this pull request Feb 20, 2025

Rebrand Proposals table (#499)

511e05c

* Rebrand Proposals table * Add testing capabilities * Self review (fixing some colors) * Update Tag cursor * Rename Tag to ProposalTag

bbenligiray pushed a commit that referenced this pull request Mar 3, 2025

Rebrand Proposals table (#499)

da6826e

* Rebrand Proposals table * Add testing capabilities * Self review (fixing some colors) * Update Tag cursor * Rename Tag to ProposalTag

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rebrand Proposals table #499

Rebrand Proposals table #499

peterjurco commented Nov 25, 2024 •

edited

Loading

Anboias left a comment •

edited

Loading

Anboias Nov 26, 2024

peterjurco Nov 26, 2024 •

edited

Loading

Anboias Nov 26, 2024

peterjurco Nov 28, 2024

peterjurco commented Nov 30, 2024

Rebrand Proposals table #499

Rebrand Proposals table #499

Conversation

peterjurco commented Nov 25, 2024 • edited Loading

What does this change?

How to test it

Anboias left a comment • edited Loading

Choose a reason for hiding this comment

Anboias Nov 26, 2024

Choose a reason for hiding this comment

peterjurco Nov 26, 2024 • edited Loading

Choose a reason for hiding this comment

Anboias Nov 26, 2024

Choose a reason for hiding this comment

peterjurco Nov 28, 2024

Choose a reason for hiding this comment

peterjurco commented Nov 30, 2024

peterjurco commented Nov 25, 2024 •

edited

Loading

Anboias left a comment •

edited

Loading

peterjurco Nov 26, 2024 •

edited

Loading