Implement components new designs

[bestatigen]

Overview

The new designs are available on Figma. . The structure of the pages under examples/frontend stays the same so this should for the most part be about updating theme-ui to use the new style guide (to be extracted from the Figma). Preferably supporting two themes (light/dark) from the beginning would be great, and to keep an eye on while updating the current component's styles; for how the code is now it shouldn't be too much overhead.

Instead of me creating an issue for each of the components that need to be updated, you can create issues when you pick up the component you are working on.

I can only think of font and theme to change as overall configurations now, but if you find something else needs to be updated feel free to create an issue for it.

---

Issues

• [x] #97
• [x] #106
• [x] #118
• [x] #96

Components

• [x] #103
• [x] #108
• [x] #109
• [x] #158
• [x] #162
• [x] #161
• [x] #160
• [x] #159
• [x] #158
• [x] #157
• [x] #163

Leave last

• [x] #164
• [x] #104

[sekaiking]

Hey @devey, I think it would be good to have a different branch for design where we open pull requests and merge until the design is fully implemented. Because the design will look weird when some components are updated and some aren't.

I made a new branch called design_update which should be the same as master but with the new design. And all design PRs should go there and be reviewed and merged, and once we are done from the design we can merge it into master.

[bestatigen]

Sounds good, @achrafismyname! Thanks for setting it up; it makes sense to have this until the new designs are merged. If you want to take charge of this Epic and add the missing issues to it based on what needs to work on, that would be great!

[sekaiking]

okay I can do that!

[github-actions[bot]]

:tada: This issue has been resolved in version @cura/components-v1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: