Components + Frontend | Design update

[sekaiking]

I think the design is finally done Latest working live preview: https://frontend-git-darkmode-curaos.vercel.app/

Closes #98

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/curaos/frontend/3kDpftAb9cCVsAMHQ4xUcy8dG9DF
✅ Preview: https://frontend-git-designupdate-curaos.vercel.app

[sekaiking]

For reviewing, I suggest starting with components and see how the folder structure changed a bit, then theme.ts which has most styling values, then you can review each component individually.

After components is clear, check how theme and fonts is imported in frontend then how I changed the pages to rely on layouts instead of eaching one having thier own styles. Then finalyl you can review each layout individually.

And I think that's it, it seems like a big PR but most changes are not criticial because most changes are CSS and if the overall structure is not broken then it's all good.

I'll also do a browser review, to check if everything looks good in all modern browsers/screens.

[sekaiking]

Description

This PR updates the design of both components and frontend by updating styles in theme.ts and changing the layout inside components and page so they work together properly. I tried to make it as themable as possible, so the styles that affect the look and feel are all inside theme.ts. And the styles that affect the layout (order, padding, margins...) are defined inside the component itself.

Fixes #98

Type of change

• [x] This change requires a components bump
• [x] This change affects the structure of the project

How Has This Been Tested?

Because this change is aimed for design more than functionality, I tested like the following:

• [x] Tested on the majority of screen sizes including different resolution using DevTools and real devices
• [x] Tested on the most important browsers for compatibility, and they are all good except IE

Checklist:

• [x] Components | Changed the structure of the folder to export theme.ts and assets, and modified package.json to include assets folder in the builld package
• [x] Frontend | removed theme.ts and fonts and imported them from components instead
• [x] Components | update theme.ts to have all the styles from the new design (excpect base stuff that it's still imported from tailwand)
• [x] Components | updated each components and tested it for responsivity (the only styles defined inside component are layout related, because they are unique for each components I didn't add them to theme.ts)
• [x] Frontend | Changed the structure of pages so they all use layouts from container/layout to make it easier to maintain
• [x] Frontend | updated each layout and page to work correctly with the updated components
• [x] Frontend | made sure the website looks good on most devices
• [x] Frontend + components | for components that display images, i put a placeholder in components and added the images to frontend
• [x] Frontend + components | added dark mode buttons to Header component but the mode is handled by the frontend.

Notes:

• Vercel deployment won't work before bumping the components
• I changed the layout in Storybook from centered to padded because it affects the styles of components and doesn't represent a real use case

I think that's is it, hopefully :)

[bestatigen]

@achrafismyname bumped components but got this now:

ModuleNotFoundError: Module not found: Error: Can't resolve '@cura/components/dist/assets/fonts/index.css' in '/Users/yassinesania/Coding/Cura/examples/frontend/pages'

[sekaiking]

Hey @devey, From looking at the package here assets folder is missing. I tried bumping them to my own package here and didn't have this issue. I think something went wrong with the scripts that copy assets folder but I'm not sure why exactly.

Because you are in mac you can remove this line https://github.com/curaOS/source/blob/79aa546ce8582040d6533d6dcd47490f5a8e49b1/packages/components/package.json#L14

and replace it with something like this

 "copy-files": " cp -R  src/assets dist/assets", 

[github-actions[bot]]

:tada: This PR is included 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: