Update the staking pool stake page colours and skin tones.
Closed this issue ยท 0 comments
brunomenezes commented
๐ Context
Here are the staking pool's 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
- For the page header area:
- Apply the new colours and font changes for the backlink.
- Check if it is necessary to apply the new colours for the address information.
- Check if applying the new colours for the icon when connected as Pool Manager.
- Apply the correct colours and tones to the navigation tabs.
- Apply changes for the breadcrumbs as per design specs.
- When the wallet is disconnected: apply the colours and tones to the
Staking in a few steps
block. i.e. Icons, the text has the correct font and sizes applied to it. - With wallet connected; For the wallet balance and pool allowance, apply the new colours/fonts to it. Include the warning messages using the support system colours as per design.
- Apply design changes to the stake instruction/disclaimer. PS: You may need to clear your
localStorage
to see it. - Apply the colours changes to the following modals:
- Allowance Modal
- Deposit Modal
- Stake Modal
- Unstake Modal
- Withdraw Modal
- Use the support colour system for the
TransactionBanner
blocks for.- Allowance action
- Deposit action
- Stake action
- Unstake action
- Withdrawal action
- For the overall
Staking area
- Apply support system colours for any
notification/warning
message. - Apply new colours and fonts on the info banner that displays while the deposit is maturing.
- Apply new colours and fonts to the deposit button.
- Apply new colours and fonts for the
Your Pool Balance
card. - Apply new colours and fonts for the
Your staked balance
card
- Apply support system colours for any
- Apply updates for
my staking activities
area- Apply new colours and font changes for the icons and copy when there is no activity.
- Apply new colours and font changes for the activity items.
- Add here any extra tasks you see fit [Optional]
๐ฏ Definition of Done
- Staking pool's stake page matches the design specs on Figma.