Fix styling (deprecated)

SwaprHQ / swapr-dapp

DEX meta agregator

https://swapr.eth.limo/

GNU General Public License v3.0

49 stars 57 forks source link

Fix styling (deprecated) #1023

Open berteotti opened 2 years ago

berteotti commented 2 years ago

~~The way we style components is a bit confusing. Sometimes we might use styled-components, other times we use rebass components with style props and even inline styling.

We should follow a rule do define how we style components and follow it everytime.

Even rebass might be a candidate for replacement as it is somewhat limited, documentation is very poor and the project is stale.

We might also have to simplify our base components, so they could be more composable and clean some unnecessary CSS style. ~~

adamazad commented 2 years ago

Good observation. I believe Flex from rebass is the most imported component. Other than that, it is a burden package.

berteotti commented 2 years ago

And an important CSS style like gap isn't supported as a prop in their Flex component. We should find something we can really use (and isn't stale) or we just might build it ourselves.

Diogomartf commented 2 years ago

I think we would gain a lot on moving to a simpler system like tailwind. We could get rid of styled components and rebass in one play. Me and @berteotti worked with tailwind for the past year and it's a breeze. Highly recommend. It might look odd with utility classes but has a really small learning curve and once you get in it, you don't want something else.

Examples of sites using tailwind:

And we can transition to tailwind incrementally. Both rebass/styled components and tailwind can live together for a transition period.

Mi-Lan commented 2 years ago

Yeah I think we are not using rebass properly at all. I think we should either agree to use it properly since it does offer alot which we are not using. Or we switch to something else.

I think tailwindCSS is really good my only concern is the learning curve and onboarding new developers might take longer time
Also this would mean we would need to refactor entire codebase and all styles as we go along which will take lot of time at the start and will slowdown development short-term but will speed up development in the future. @Diogomartf @berteotti Would love to have chat with you guys how you used it and how we would implement it!

Mi-Lan commented 2 years ago

I was just looking into rebass and it hasn't been updated since 2019 and even their website is unsafe to go to xD https://rebassjs.org/ I think we should remove it altogether.

berteotti commented 2 years ago

Hey Milan! Since this issue is deprecated, I suggest we continue this discussion in issue #1016 .