Here are the staking pool's stake page changes on colour, skin tones and fonts in Light 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 #82
📈 Subtasks
Overall
[x] 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.
[x] Make sure the components are round, like the design. We're transitioning from a squared-based design to a round one.
Page sessions
[x] For the page header area:
[x] Apply the new colours and font changes for the backlink.
[x] Check if it is necessary to apply the new colours for the address information.
[x] Check if applying the new colours for the icon when connected as Pool Manager.
[x] Apply the correct colours and tones to the navigation tabs.
[x] Apply changes for the breadcrumbs as per design specs.
[x] 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.
[x] 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.
[x] Apply design changes to the stake instruction/disclaimer. PS: You may need to clear your localStorage to see it.
[x] Apply the colours changes to the following modals:
[x] Allowance Modal
[x] Deposit Modal
[x] Stake Modal
[x] Unstake Modal
[x] Withdraw Modal
[x] Use the support colour system for the TransactionBanner blocks for.
[x] Allowance action
[x] Deposit action
[x] Stake action
[x] Unstake action
[x] Withdrawal action
[x] For the overall Staking area
[x] Apply support system colours for any notification/warning message.
[x] Apply new colours and fonts on the info banner that displays while the deposit is maturing.
[x] Apply new colours and fonts to the deposit button.
[x] Apply new colours and fonts for the Your Pool Balance card.
[x] Apply new colours and fonts for the Your staked balance card
[x] Apply updates for my staking activities area
[x] Apply new colours and font changes for the icons and copy when there is no activity.
[x] Apply new colours and font changes for the activity items.
[ ] Add here any extra tasks you see fit [Optional]
🎯 Definition of Done
[x] Staking pool's stake page matches the design specs on Figma for Light mode.
📄 Context
Here are the staking pool's stake page changes on colour, skin tones and fonts in
Light 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 #82
📈 Subtasks
Overall
Page sessions
Staking in a few steps
block. i.e. Icons, the text has the correct font and sizes applied to it.localStorage
to see it.TransactionBanner
blocks for.Staking area
notification/warning
message.Your Pool Balance
card.Your staked balance
cardmy staking activities
area🎯 Definition of Done