Standardize CSS in the project

[rishav-jha-mech]

Is your feature request related to a problem? Please describe. There is no global css file linked to the project, it exists but remains unused and unlinked. The problem is the following lines are repeated throughout the project in all the css files

border-bottom: 1px solid #31bb6b;
or
background-color: #31bb6b;

Now this may create issues in future, some contributor may add any other color of their choice, which will cause the design and colors to be used in the website be inconsistent.

Rather it should be used like

border-bottom: 1px solid var(--primary-color);
or
background-color: var(--primary-color);

Now why should we do this ?

1. Dark Mode - We can easily create a dark mode for our Talawa Admin in future. We we keep using Hex colours in css files then once the project becomes too big, it will become really tough to implement dark mode in future.
2. Inconsistent Design - There are several screens, which may use a red color, now in some screen there is a different hex color for red and in other screen there is some other hex color for red.
3. Theme can be changed later - The theme of the application, if wanted could be changed easily in the future, we can also create a feature where the users can select their own custom theme.
4. Collaboration - With a global CSS file, multiple developers can work on the styling of an application simultaneously without stepping on each other's toes. This can help to improve collaboration and productivity.
5. Reusability - By defining global styles in a separate file, we can reuse them across multiple components in our application. This can help to reduce redundancy and improve maintainability.

Describe the solution you'd like Import the global css file in index.tsx file and update CODE_STYLE.md mentioning to not to use colours directly in css files, rather use variables.

Describe alternatives you've considered This is the best way I found, this will keep our code DRY.

Approach to be followed (optional) Change colors that were being used in every file with global variables.

Additional context This will help us greatly in future when would want to customise and develop more features related to UI.

Potential internship candidates Please read this if you are planning to apply for a Palisadoes Foundation internship https://github.com/PalisadoesFoundation/talawa/issues/359

[adi-uchiha]

Css will be completely revamped in admin UI redesign.

[rishav-jha-mech]

@adi-uchiha agreed, but this feature request is about making a global css file which would contain all the css variables used in the application, and maybe when the GSoC period starts the contributor will be able to customise this file.

What I am saying is, right now there is a lot of manual work required to change the hex colours to variables, which is necessary. If we don't have a global CSS file, and then the GSoC contribution period starts, the contributor will have to setup the global CSS again, and setup everything from scratch.

To conclude - This feature request will only make Admin UI Redesign easier, because it can't be done without a global css file and best practices of CSS.

[anshgoyalevil]

@rishav-jha-mech I agree with @adi-uchiha

Any contributor assigned to the idea Admin UI Redesign may want to use an external CSS library, and not depend upon the custom CSS. You might already know that Tailwind Support this Globalization thing out of the box, and your work may become redundant if that happens in future.

That's just an example of Tailwind, the future contributor may use any library of their choice, and redefine this system.

[rishav-jha-mech]

@anshgoyalevil Our project is entirely built upon Bootstrap. Other than this Material UI is also used in our Project Only Spans to 2 Components and 1 Screen.

Yes you are right, any contributor assigned to the idea of Admin UI Redesign may want to use an external CSS library and may not depend upon custom CSS, but do you think it will be possible without breaking the app ? or completely re writing the styles ?

I think we all would agree on the point that we should not use several design libraries in our project

• Just yesterday i removed Ant Design which had almost nothing to do in our project
• Today I figured out that Material Design is being used for only one component (where it has to be completely rewritten in order to be replaceable, NavigationList.tsx) in our project while bringing atleast 3 dependencies.
• Now the problem with these libraries is this, we may need to upgrade them in the future, but do you think its worth it when the library we are using spans to one/two components or screens ?

After all I don't think it will be a wise decision, for a contributor to completely shift from Bootstrap to Tailwind/ Any other design library, or Use two design libraries extensively in the project. (Our project is working so fine for so long because Bootstrap was being used in 100% of the files by default, but only some components/screens were having Ant Design (Removed now) and Material UI).

[anshgoyalevil]

@rishav-jha-mech

Yes you are right, any contributor assigned to the idea of Admin UI Redesign may want to use an external CSS library and may not depend upon custom CSS, but do you think it will be possible without breaking the app ? or completely re writing the styles ?

It depends upon the contributor shifting to the external library

Now the problem with these libraries is this, we may need to upgrade them in the future, but do you think its worth it when the library we are using spans to one/two components or screens ?

Why do you think the library that will be used in future will span across only 1 or 2 components?

We are focusing on Admin UI Redesign That's what a GSoC idea mean. Making the UI more cleaner and slick.

I would request some potential contributors to put their views on it.

@beingnoble03 @EshaanAgg @prathamesh-mutkure @aashimawadhwa

[rishav-jha-mech]

Now the problem with these libraries is this, we may need to upgrade them in the future, but do you think its worth it when the library we are using spans to one/two components or screens ?

Why do you think the library that will be used in future will span across only 1 or 2 components?

I was saying this in the context of Ant Design and Material UI. The newer library that will be used in the project may span to many screens and components, I have no problem/issue with that. I was just saying that either a contributor will have to completely remove Bootstrap and replace it with a different UI library or use a design library along with already existing bootstrap.

Why a contributor should not follow the second case -

https://srafsan.hashnode.dev/why-you-should-avoid-using-bootstrap-and-tailwind-css-together-on-the-same-project https://stackoverflow.com/questions/51295917/downsides-of-using-two-ui-libraries-in-the-same-react-project https://www.reddit.com/r/reactjs/comments/sxq1al/comment/hxtfvrc/

Upgrading two/more design libraries in future will also be another tedious task, I think bootstrap is sort of irreplaceable at this moment in this project, it can be replaced but it will require a lot of manual work.

[aashimawadhwa]

A global CSS file I feel can be initiated by the contributor who's assigned with the redesign project, and in my opinion tailwind will be a great framework to initiate redesign.

moreover making global file may lead in restructuring the whole CSS because there is no point of making it and then leaving it for another person to continue with it.

Tailwind will be a great as Tailwind CSS is a popular utility-first CSS framework that provides a set of pre-built CSS classes for building responsive web applications. One of its key advantages is its flexibility, which allows developers to quickly and easily customize the look and feel of their applications.

[aashimawadhwa]

and this should be decided by the person who will be completing the redesign project, or maybe the developer team after understanding all the needs of the developers who'll be making alot of new changes wrt to front end in the coming GSOC period. I agree with @adi-uchiha @anshgoyalevil .

It is too early to decide globalization and revamping

[prathamesh-mutkure]

We are focusing on Admin UI Redesign That's what a GSoC idea mean. Making the UI more cleaner and slick.

I would request some potential contributors to put their views on it.

Yes, there's a good chance that Talawa Admin will be migrated to some library like Tailwind in the UI Redesign idea and the global CSS files won't be used as much

But I also believe that standardizing things like colors will make the transition smoother and faster

As long as this issue is only about refactoring(like using CSS variables instead of literals), I think it's valid, anything more, and it will become redundant

[palisadoes]

I'm going to close this. The work will be overwritten by the redesign project.