Enhance Project Category Styling with Dedicated CSS System

coderabbitai[bot] commented 1 month ago

Overview

Currently, project category styling uses hardcoded Tailwind color combinations as string literals. We need to improve this by implementing a more maintainable and scalable solution.

Requirements

Create a dedicated CSS file for project category styles
Import these styles into global.css
Update category names to be more meaningful and descriptive
Implement a proper design system for category styling

Current Implementation

The current implementation in project.types.ts uses string literals for Tailwind color combinations, which is not optimal for maintenance and scalability.

References

PR: #128
Discussion: https://github.com/kindfi-org/kindfi/pull/128#discussion_r1947501988

Acceptance Criteria

[ ] Create a dedicated CSS file for project category styles
[ ] Import styles into global.css
[ ] Update category names to be more meaningful
[ ] Document the new styling system
[ ] Update existing components to use the new styling system

Development Notes

Each category colour would map eventually with a BE with a list of available categories. Keep a { label, value } structure for these colours.
- These categories might have a HEX string coming from BE, make the list ready to be dynamic on the render side.

B-uchi commented 1 month ago

Can I try solving this issue?

legend4tech commented 1 month ago

Can I take this issue?

TheRanomial commented 1 month ago

Mind if I take this issue?

Nikhil-550 commented 1 month ago

I’d like to help with this.I am new to open source and would like to contribute to your project.I will do my best work possible.And i also have expericence with this kind of issues.

Luluameh commented 1 month ago

I'm interested in contributing to this issue! As a frontend developer with expertise in CSS architecture, Tailwind CSS, and scalable design systems, I can help refactor the project category styling into a maintainable CSS system.

Why Me? CSS & Tailwind Expertise: Experienced in modularizing styles, ensuring reusability and maintainability. Scalable Design Systems: Familiar with structuring category styles in a dedicated CSS file while ensuring compatibility with global styles. Refactoring Experience: Comfortable updating existing components to adopt new styling methodologies without breaking the UI.

ETA: I can complete this task in 2–3 days, covering:

Extracting hardcoded Tailwind styles into a structured CSS system. Updating category names for better clarity and maintainability. Integrating the new styles into global.css. Ensuring smooth migration by updating affected components. Adding documentation to guide future contributors.

Michaelkingsdev commented 1 month ago

May I take care of this?

Favvie commented 1 month ago

Mind if I try this one? My name is Favour, a frontend engineer experienced in creating scalable and maintainable design systems. I can improve the project category styling by implementing a dedicated CSS file, updating category names for clarity, and integrating the new system into global.css. I’ll also document the changes and ensure seamless updates to existing components. Looking forward to contributing.

chiscookeke11 commented 1 month ago

Is this issue still available?

Luluameh commented 1 month ago

Hello @AndlerRL

I’ve successfully cloned the repository, installed the necessary dependencies, and got the project running on my local machine. I’m now reviewing the issue (#134) regarding enhancing project category styling.

However, I need some clarification to proceed effectively:

File Structure: The issue references project.types.ts, but I couldn’t find this file in the repository. Could you point me to where the current category styling logic is implemented? Category Definition: I don't see a specific "category" component or page. Could you clarify where the project categories are defined and how they are used in the UI? Backend Integration: The issue mentions that categories might eventually come from the backend with HEX color values. Should I structure the CSS to support both static and dynamic category colors? I want to ensure I fully understand the expected approach before making changes. Let me know your thoughts when you have a moment.

AndlerRL commented 1 month ago

@Luluameh thanks for your patience 🙏 and sure, let me help you with those queries🙂

There is a mention about the file structure, naming and conventions here in our code style and conventions guide. Additionally there is a README.md with that in the monorepo. Also the code style and conventions are in the doc monorepo folder.
The categories are for the projects, here we have to create a list of categories associated with a colour and icon, most of them are not 100% defined but we can do prompt engineering to make the list using Lucide Icons, which is the standard for ChatGPT, Claude and Perplexity. for this list, we want to use libraries such as random-a11y-combo for the colour association and a text colour that is readable, similar to tags but this list, is already defined. Below, I am sharing a screenshot on where it is used in the UI. For project creation, it will be used to, @ussyalfaks is making the Tag implementation part in the UI. You might need to sync in order to avoid duplicates (at least in the package installation and usage).
Yes, there will be an initial list as constant and therefore we will be pulling up other set of categories (like tags).

💡 I have a prompt that might help you to get the list of categories, it should be effective with low-power LLMs such as gpt-4o-mini (modify if needed):

<instructions>
 As a data analyser and retrieval expert in the field of social impact crowdfunding, provide a set of categories with related icons coming from Lucide Icons to create a list of categories for the different crowdfunding areas for social impact, asociating it to a colour that can be identified by.
</instructions>

<example>
`\`\`ts
const projectCategories = [{ label: 'Disaster Relief', value: 1, icon: <TreeIcon /> ,colour: '#fff'  }, { label: 'Education', value: 2, icon:  <StudyIcon />, color:  '#ffe'}]
`\`\`
</example>

<objective>
Make a list of categories with the label, value, icon and color associations. Colors must not repeat and associate the icon with the label.
</objective>

AndlerRL commented 3 weeks ago

Hey @Luluameh how is the progress going?

Luluameh commented 3 weeks ago

@AndlerRL

Thank you for checking in! I've made good progress on implementing the category styling system. Here's what I've completed so far:

Created the category components with Lucide icons integration
Implemented the basic styling system for each category (Green, Social Impact, Disaster Relief, Arts & Culture, Humanitarian, and Environmental)
Set up the interactive state handling for the categories
Added proper Next.js client-side component handling with "use client" directives

I've attached a screenshot showing the working implementation. Each category has its own distinct styling and icon as requested.

Would you like me to push these changes for review? Also, I'd appreciate your feedback on the current implementation before I proceed with any additional styling refinements or the backend integration preparation.

AndlerRL commented 3 weeks ago

Yes, push your latest changes into a new PR @Luluameh. So far it looks very good! The colour contrast makes sense 😄 though you might need to add this logic into the create project form, there we added at PR #198 a few changes were applied after the DEMO, you should be able to see it live now.

cc - @Bran18

Luluameh commented 3 weeks ago

Hello @AndlerRL I have implemented all the observations you made , am having issue with pre-commit tests are failing due to missing environment variables for Upstash Redis. while trying to commit so am to push

kindfi-org / kindfi