cartesi/explorer

Update the stake page colours and skin tones.

Closed this issue ยท 0 comments

๐Ÿ“„ Context

Here are the stake 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

  • Check if the new colour for the page name is correct. Apply changes if needed.
  • Apply colour changes to the Summary space. i.e. three cards with pool and stake information.
  • Apply colour changes to the My Staking Pools space.
    • Update the look and feel of the Table.
    • Check whether the Address component needs the following update. replace the light blue background with an underline in the address text..
    • Update the staking icon colour in the stake/info column.
  • Apply colour changes to the All Pools Performance space.
    • Apply the changes required to the search input.
    • Update the look and feel of the Table.
    • Check whether the Address component needs the following update. replace the light blue background with an underline in the address text..
    • Update the staking icon colour in the stake/info column.
    • Update the paging component to match design specs.
  • Add here any extra tasks you see fit [Optional]

๐ŸŽฏ Definition of Done

  • Stake page matches the design specs on Figma.