cognovi-ai / the-cdj

The Cognitive Distortion Journal (CDJ) is a smart journaling tool that helps remedy distorted thinking. It can feel impossible to follow the CBT technique of labeling distorted thinking and finding alternative modes of thought (i.e. reframing) while cognitive distortions are occurring. The CDJ does that work for you. -- The CDJ is in beta testing!!
https://thecdj.app
3 stars 0 forks source link

Styles architecture #37

Closed hiyaryan closed 9 months ago

hiyaryan commented 9 months ago

This issue's related to #36 and #37. The issue with these PR is that they are trying to supply styles without any defined system. They use a combination of named CSS stylesheets, styled components, and inline styles. The issue with this is that it has become very easy for style to override other styles unintentionally.

One possible architectural solution to this would be to select one approach and use only that. Inline styles are convenient but what tends to happen is that the same styles get duplicated easily since there's generally a styled theme the application follows. Named CSS stylesheets (such as Home.css imported into Home.jsx) are effective but they apply styles globally, which makes the styles hierarchy important to abide by, and that can require having to name multiple class variables uniquely which can be tedious and difficult to update. Styled components, make styling components easy by wrapping the component in a style that's applied only to that component. This makes it easy to target specific components, easier to track which styles being applied where, and makes styles reusable.

Having gone through 3 possible options, styled components will be used to apply styles to the application. This will require refactoring the code, to remove inline styles and named stylesheets into their own styles components. Then once the process is down, then we'll be ready to create the home page and apply styles to the remainder of the application.