fix the styling of the challenges card #issue 131

[chilaka-eswari]

#131 issue

summary

Challenges cards originally had poor visibility due to small size and low-contrast colors. This made the buttons hard to notice and the text difficult to read.

To solve this:

-I increased the size of each card for better spacing and layout.

-Improved the color scheme to enhance contrast and visual clarity.

-Made the buttons more visible and accessible.

[greptile-apps]

Greptile Summary

This PR attempts to fix visibility issues with challenge cards on the challenges page (issue #131) by modifying colors and button styling. The changes include hardcoding challenge card description text to a light gray color (#f9f8f8), setting action buttons to white color, and adding new styling for a clearFilters button class.

However, the implementation has significant problems. The developer has hardcoded light colors that will break the existing theme system - CodeClip appears to support both light and dark themes through CSS variables, but these changes bypass that system entirely. Additionally, there's a critical JavaScript integration issue: the HTML changes the Clear Filters button from an ID to a class (clear_btn), but the JavaScript still references the old ID (clearFilters), which will completely break the clear filters functionality.

The root cause of the original visibility problem appears to be improper theme implementation rather than needing hardcoded colors. The existing codebase uses a CSS variable-based theming system that should handle color contrast properly when implemented correctly.

Confidence score: 1/5

• This PR will immediately break existing functionality and create new visual issues
• The hardcoded colors will break the light theme, and the ID/class mismatch will break JavaScript functionality
• Both pages/challenges.html and styles/challenges.css need significant attention before this can be merged safely

_{2 files reviewed, 3 comments}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

syntax: Missing semicolon and hardcoded color breaks theming. Use var(--text-color)

Suggested change

	color:white
	color: var(--text-color);

[greptile-apps]

style: Redundant color declaration since .btn-primary already sets white color

[greptile-apps]

logic: Missing background-color property makes button invisible. Add background-color: var(--accent-color);

Suggested change

	.clearFilters{
	border: none;
	border-radius: 0.5rem;
	padding: 0.55rem 1.1rem;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.3s ease;
	user-select: none;
	}
	.clearFilters{
	border: none;
	border-radius: 0.5rem;
	padding: 0.55rem 1.1rem;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.3s ease;
	user-select: none;
	background-color: var(--accent-color);
	color: white;
	}

[chilaka-eswari]

may i know why my pr gets rejected