Issue 21 Style: Implemented CSS Modules to Counter App

this-mkhy / react-curve

Open source project for creating small UI component to build large scale projects

https://this-react-curve.vercel.app/

7 stars 13 forks source link

Closed rickansen closed 2 years ago

rickansen commented 2 years ago

Resolves #21

Before, the CSS file in the Counter App is not localized which makes it bleed through other pages whenever it is updated.

Now that CSS Module is implemented in the app, everything that is updated in the CSS file will not affect other apps.

vercel[bot] commented 2 years ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-curve	✅ Ready (Inspect)	Visit Preview	Oct 28, 2022 at 8:30AM (UTC)

netlify[bot] commented 2 years ago

Name	Link
Latest commit	956fff2ce46436bf67e484e75e5d65cbbb12c5b6
Latest deploy log	https://app.netlify.com/sites/react-curve/deploys/635b9300ddc99d000806b9a6
Deploy Preview	https://deploy-preview-29--react-curve.netlify.app/
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

rickansen commented 2 years ago

To visualize better, this is before the implementation of CSS modules is counter app

Same class name 'before'. Only the CSS in counter have the background declaration

Even if css is only updated in counter.css, it affects all the elements that have the same class name

Now with CSS Modules

Css from counter does not affect the styles of other pages anymore even with the same classname

rickansen commented 2 years ago

Resolves #21