Here are the node runners private node creation 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] Apply new colours and font rules for the page header area, also:
[x] Apply the new colours and font changes for the backlink.
[x] Apply the new colours and font changes for the page title.
[x] Apply the new colours and font changes for the learn from tutorial link.
[x] Apply colour and font changes to the following steps:
[x] For steps involving transactions, apply support system colours for feedback UI, i.e. Alerts, input error messages, spinners, etc.
[x] Update the Set up Ethereum node step.
[x] Update the Set up node step.
[x] Update the Hire node step.
[x] Update the Set allowance step.
[x] On small screens: Apply the new colours and font rules for the StepGroup <Header>.
[x] Add here any extra tasks you see fit [Optional]
🎯 Definition of Done
[x] Node runners' private node creation matches the design specs on Figma for light mode.
📄 Context
Here are the
node runners private node creation
page changes on colour, skin tones and fonts inLight 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
backlink
.page title
.learn from tutorial
link.Set up Ethereum node
step.Set up node
step.Hire node
step.Set allowance
step.StepGroup <Header>
.🎯 Definition of Done