Refactor CSS to TailwindCSS (lil by lil)

[mathcodes]

NOT ALL AT ONCE.

This will be an ongoing issue until the transition is complete. WIth clean code full of that sweet, concise Tailwind goodness. 😜

[jackz070]

I guess the first thing to do is setting up tailwind in our project. I could do this today / tomorrow.

Also I believe that there are some things to consider while doing that.

1. Style guide. Is there any idea design side of things? If we'd like to get some even basic design system (like custom names for colors so that people don't have to pay attention to getting them right every time) we could set that up at the start so that all tailwind code ahead will be conforming to that.

2. Dark mode. I think we should implement dark mode from the start. Do you or anyone have a strong opinion on ways to do it with tailwind? I'm not a big fan of using their method of adding dark-specific classes to everything, if we'd like to start simple there's a nice approach I'm using with my portfolio website that I'm building right now that involves switching values for custom colors so that every color class we set up automatically works with dark mode class switch on body. You can check it out here https://github.com/jackz070/jaceksmoter.dev - files of interes are

[mathcodes]

I'd be interested in checking your method out. I've either done it manually or with MaterialUI (MUI). MUI is kind of a beast but it delivers. But either way, and going you're route, we would basically have a set of colors defined for dark and light mode that we can access using variables throughout the app (like you mentioned)? Works for me if you want to give it a shot. You may want to wait until we clean this up a bit first. I'll try and get in there and de-clutter what I guess were good intentions in the past... lol.

How is it working out in your app so far? I'm about to check it out. Also, if you'd like to step up and help my maintain this project, its very low key and a great experience if you're looking for work or people to network with...

[jackz070]

It's one variable per pair of light & dark colors, its value is chosen from two separate palettes based on whether dark class is there on the root element or not. It works well for me so far, but I've noticed once or twice (on iOS Safari) that it may not instantly load in the right mode based on system preference, it takes a second and switches leaving the switch unchanged - I' looking for improvements. Does it work instantly and reliably for system preference with other solutions?

You want to do clean-up before adding Tailwind at all? I will see if my changes would affect anything else around and if not just give it a shot, we can always change the approach later and define the styles later on (but before rewriting CSS into Tailwind so that it incorporates it).

I'm not yet ready for becoming a maintainer, I hardly have any understanding of the backend part and the general scope of the project, will consider it though!

[jackz070]

Additional question: do we refactor while keeping MUI components or replace them with equivalents styled with tailwind? I'm not sure what's the gain with MUI components for our current basic needs such as boxes, grids, even the navbar (this one would need a piece of state or two but that's about it).

I guess it comes down to: do we use tailwind to replace our sass styling, or also MUI? (if that makes sense)

I'd got for the latter unless MUI components would save us much work down the road.

Edit: I guess data grid / table is one component that is of huge value. Maybe keeping it visually consistent with things like navbar/buttons would be worth it? I'm not sure lol. There seems to be a suggested way of sticking with MUI components and styling them with tailwind here: https://mui.com/base/guides/working-with-tailwind-css/

I'd love to work on the refactor, but I think that we should really agree on some general guidelines and document them so that everyone can create consistent code without too much guess work needed.

[mathcodes]

Let's keep it simple. If you're down, let's go 100% tailwind for now. We don't need sass, tailwind supports it if we need it down the road, and we also don't need MUI yet so feel free to comment out, then delete any scss or MUI styling.

Once we get it cleaned up with 1 library of styles, we can assess if we need anything else. Good questions and thoughts. Thanks for your input and time on this!

But does that make sense. Hit me up if not.

[jackz070]

Makes sense to me! I will start with some small components and perhaps try to come up with some consistent basic styling over everything we have, because I feel we're kind of missing that as of now.

[jackz070]

@mathcodes Please check out my closed PR above (#139)with details in a comment and let me know if it can be salvaged or if I should just redo the stuff, would like to continue working on this but my further changes depend on that PR.

[mathcodes]

Checking it now, thanks Jack 👍

[mathcodes]

I will break this up into components and pages so we don't overlap again, sorry @jackz070 !

[jackz070]

I've looked through the new issues and (with all respect for breaking this up!) I think it's a little bit of a mess with out structure to be honest. I'll use this general issue / thread to outline what I mean.

So, I think that to move to the next level (which is in my book 1) nice and clean UI 2) ability to slap "good first issue" with how clear contributing is) with our frontend side of things we need:

1. clear architecture of pages and components. The issues are unclear on things like homepage PAGE vs homepage COMPONENT. Is there any convention on where / how it could be documented? Are code comments the way to go or maybe including structure in readme?
2. clear design guidelines so that we don't keep rewriting things over and over again regarding UI. Everyone's making visual decisions independently and it will get even worse with further pages and components, the platform pages, the items inside, the problem and solution components.

Regarding 2., now that our homepage is pretty much all on tailwind I'd be happy to propose a redesign to lighter and more consistent, minimal and more modern UI (AKA a theme). I'd include a whole redesign of the hero component for homepage based on current text. I'd probably touch other homepage components as well. I came across a nice design which I'd like to take as loose inspiration (https://dribbble.com/shots/20014822-Kiddiz-Free-Learning-Resource-Center). I think it would take me a day or two to make a proposal with a color palette and light/dark mode variants. Would you be okay with that? I can create an issue where I'd post screenshots and start a discussion once I'm done.

So I guess I'd like to be assigned to homepage page / component issues and contributor component (though it's tailwind already).