Theme update to match the rebranding

[brunomenezes]

📄 Context

Cartesi has changed its brand; we must also upgrade our side and reflect on these new colours, fonts and overall look and feel. The Design team is working on batches, and the first is the changes in the skin and colour tones for Dark Mode and Light Mode

PS: This will be an epic issue, holding all the references to other spawn issues related to this work.

✔️ Solution

Upgrade the Chakra-ui theme and make any adjustments to the pages based on the guidelines in the Figma definition for Dark Mode and Light Mode.

Figma Reference: Explorer design system (new Dark mode)
Figma Reference: Explorer design system (new Light Mode)

Another ref: New component update, but mostly can be seen on Figma.

Fonts:

• Plus Jakarta Sans
• Inter

Vercel Deployment (New merges, updates the following): Application Preview

📈 Subtasks

Common

• Setup the new brand typefaces (i.e. Fonts). #54

Dark Mode

• Setup initial colour mode to be Dark instead of Light. #53
• Add the new colours to the theme (e.g. Cyan, Teal, Support system colours, etc.) #55
• Update header and footer colours, and skin tones. #62
• Update the home page colours and skin tones. #56
• Update the stake page colours and skin tones. #57
• Update the staking pool info page colours and skin tones. #58
• Update the staking pool users' page colours and skin tones. #64
• Update the staking pool commissions page colours and skin tones. #65
• Update the staking pool stake page colours and skin tones. #66
• Update the blocks page colours and skin tones. #60
• Update the node-runners page colours and skin tones. #59
• Update the node-runner's private node creation page colours and skin tones (Dark mode) #67
• Update the node-runner's staking pool creation page colours and skin tones (Dark mode) #68
• Update the node-runner's private node management page colours and skin tones (Dark mode) #69
• Update the node-runner's staking pool management page colours and skin tones. #70
• Update the Onboard wallet modal (Dark mode) #96
• Update Rollups home page (Dark Mode) #98
• Update Rollups DApp details page (Dark Mode) #99

Light Mode

• Add new colours to the theme (Light Mode) #81
• Update header and footer colours and skin tones (Light Mode) #82
• Update the home page colours and skin tones (Light Mode) #83
• Update the stake page colours and skin tones (Light Mode) #84
• Update the staking pool info page colours and skin tones (Light Mode) #85
• Update the staking pool users' page colours and skin tones (Light Mode) #86
• Update the staking pool commissions page colours and skin tones (Light Mode) #87
• Update the staking pool stake page colours and skin tones (Light Mode) #88
• Update the node-runners page colours and skin tones (Light Mode) #89
• Update the node-runner's private node creation page colours and skin tones (Light Mode) #90
• Update the node-runner's staking pool creation page colours and skin tones (Light Mode) #91
• Update the node-runner's private node management page colours and skin tones (Light Mode) #92
• Update the node-runners staking pool management page colours and skin tones (Light Mode) #93
• Update the blocks page colours and skin tones (Light Mode) #94
• Update the Onboard wallet modal (Light mode) #97
• Update Rollups home page (Light Mode) #100
• Update Rollups DApp details page (Light Mode) #101

Adjustments

• Staking instructions alert not applying new colours (Private Node Management) #131

🎯 Definition of Done

• All the above sub-issues are implemented.

[brunomenezes]

@nevendyulgerov, @dandheedge,
don't work direct on this epic branch; rather, open the PRs of these sub-issues targetting this branch instead of main. The reason is to not block the main and any releases we want/need to do while this transition happens.

[brunomenezes]

I am removing the Dark mode from the title, and I will accommodate the work for the light mode in this Epic too.

PS: In the coming days all the items in the Light Mode list will become tracked issues.

cc: @dandheedge, @nevendyulgerov