Components: ProjectCard design update - Githubissues

curaOS / source

Start a solid foundation of tools for creators+builders.

https://cura.run

15 stars 13 forks source link

Components: ProjectCard design update #107

Closed sekaiking closed 2 years ago

sekaiking commented 2 years ago

Live preview

Summary

theme.ts

Destructured theme.ts into multiple variables, for readability and possibility to export individual theme parts in the future.
Replaced singe quote ' with back quote ` because of linting error.
Added colors variants from the design, in addition to base colors from tailwind
Modified typography to fit design more
Added a new button element and its story (it's called navigation, because it's only used for navigation in design)
Added a tag variable in badges

theme.ts in frontend has an addional style object used to define global styles unique to this frontend like background color

ProjectCard

All div has been replaced with Box to stay consistent
Image replaced with AspectImage to make sure the image is always a square
Most styling is done in theme.ts, except for layout stuff which is done inside the component because it's unique to each component

the padding around the box is added because it looks weird when the background is white, this will make sure it looks good over all colors and it will be the same as design when bg is same color

other

Fonts currently don't work in storybook but will be fixed in #106

vercel[bot] commented 2 years ago

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/7VhLycY6tReoe31Fa98ZZNfZ5yQ3
✅ Preview: https://frontend-git-wipdesignupdate-curaos.vercel.app