Skip to content
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.

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

Update the node-runner's private node management page colours and skin tones (Dark mode) #69

Closed
42 of 45 tasks
Tracked by #52
brunomenezes opened this issue Jul 25, 2023 · 0 comments · Fixed by #114 or #127
Closed
42 of 45 tasks
Tracked by #52
Assignees
Labels
staking Changes targeted to the Staking platform type:feature new feature or improvement over an existing feature
Milestone

Comments

@brunomenezes
Copy link
Collaborator

brunomenezes commented Jul 25, 2023

📄 Context

Here are the node-runners private node management page changes on colour, skin tones and fonts in Dark mode to comply with the new Cartesi brand. The application's structure did not change, only the look and feel.

PS: Refer to the parent of this issue for references.
PS²: Don't worry about the header and footer, because that is addressed in a separate issue #62

📈 Subtasks

Overall

  • Make sure the fonts are applied correctly based on the Figma description. i.e. Where to use each font and what size and weight to be applied.
  • Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.

Page sessions

  • For the page header area:
    • Apply the new colours and/or font changes to the backlink.
    • apply new colour and font rules for the page title
  • For the CTSI area:
    • Apply the new colours and font rules to the Wallet Balance block, including Tooltip.
    • Apply the new colours and font rules to the Allowance block, including Tooltip and action button.
    • Apply the new colours and font rules to the Set Allowance modal content, including its feedback UI.
  • Apply design changes to the stake instruction/disclaimer. PS: You may need to clear your localStorage to see it.
  • For the Pool Node area when the node is hired:
    • Apply new colour and font rules to the node information card.
    • Check/Apply new colour and font rules to the action buttons, i.e. RETIRE & AUTHORIZE.
    • Apply new design changes to the tooltip.
    • Apply new colours and font rules to the Node balance modal.
    • Apply new colours and font rules to the Retire node modal.
    • Check/Apply new support system colours to feedback UI. e.g. transaction feedback, warn/info/error messages.
  • For the Pool Node area when the node is not hired:
    • Apply new colour and font rules to the node hiring Form.
    • Check/Apply new support system colours to feedback UI. e.g. transaction feedback, input error messages
  • For the Node history area:
    • Apply new colour and font rules to the node historical Table.
  • For the overall Staking area
    • Apply support system colours for any notification/warning message.
    • Apply new colours and fonts to the action buttons .i.e. Unstake & Stake.
    • Apply new colours and fonts for the Maturing card, including any transitional state, e.g. Timers, etc.
    • Apply new colours and fonts for the Your Staked Balance card, including any transitional state, e.g. Timers, etc.
    • Apply new colours and fonts for the Released card. PS: To see the WITHDRAW action link, you need unstacked CTSI
  • Apply the support colour system for the TransactionBanner blocks (Redundancy check).
    • Allowance action.
    • Node Eth Deposit action.
    • Node Retirement action.
    • Node Authorization action.
    • Node Hiring action.
    • Stake action.
    • Unstake action.
    • Withdrawal action.
  • Apply the colours changes to the following modals (Redundancy check):
    • Allowance Modal
    • Node Balance modal
    • Node Retire modal
    • Stake Modal
    • Unstake Modal
  • Add here any extra tasks you see fit [Optional]

🎯 Definition of Done

  • Node-runners staking pool management page matches the design specs on Figma.
@brunomenezes brunomenezes added staking Changes targeted to the Staking platform draft The issue is in refine mode, information will be added labels Jul 25, 2023
@brunomenezes brunomenezes self-assigned this Jul 25, 2023
@brunomenezes brunomenezes added type:feature new feature or improvement over an existing feature and removed draft The issue is in refine mode, information will be added labels Aug 6, 2023
@brunomenezes brunomenezes removed their assignment Aug 6, 2023
@brunomenezes brunomenezes changed the title [DRAFT]: Update the node-runners private node management page colours and skin tones. Update the node-runners private node management page colours and skin tones. Aug 6, 2023
@brunomenezes brunomenezes added this to the Rebranding milestone Aug 7, 2023
@dandheedge dandheedge self-assigned this Aug 15, 2023
@nevendyulgerov nevendyulgerov changed the title Update the node-runners private node management page colours and skin tones. Update the node-runner's private node management page colours and skin tones. Sep 1, 2023
@nevendyulgerov nevendyulgerov changed the title Update the node-runner's private node management page colours and skin tones. Update the node-runner's private node management page colours and skin tones (Dark mode) Sep 1, 2023
@nevendyulgerov nevendyulgerov linked a pull request Sep 5, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
staking Changes targeted to the Staking platform type:feature new feature or improvement over an existing feature
Projects
Archived in project
3 participants