cartesi/explorer

Update the node-runners page colours and skin tones.

Closed this issue · 0 comments

brunomenezes commented

📄 Context

Here are the node runners main 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

PS: A highlight for the two cases below. observe the spacing and difference in colours in between blocks, meaning they are not glued.

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 new colour and font rules for page title and subtitle.
    • when wallet is disconnected: Apply the new colour and font rules in the alert and connect area.

Case: when the user doesn't have either Staking Pool or Private node

  • Apply colours and font rules to the Create a node or pool in steps title.
  • Apply colours and font rules for the Create a public pool card.
    • Update the icon colour
    • Update the button colour
    • Apply the new colours for the tooltip content (e.g. background colour, font).
  • Apply colours and font rules for the Run a private node card.
    • Update the icon colour
    • Update the button colour
    • Apply the new colours for the tooltip content (e.g. background colour, font).
  • Add here any extra tasks you see fit [Optional]

Case: when there is a Staking Pool and/or Private Node created

  • For the Pool block
    • Apply the new font rules to the title.
    • Apply colours changes to the create pool button
    • Update the look and feel of the Table (check on Figma for table colours reference)
  • For the Private node block
    • Apply the new font rules to the title.
    • Update the look and feel of the Table (check on Figma for table colours reference)

🎯 Definition of Done

  • Node runners' main page matches the design specs on Figma.