Fix Text Visibility on Interview Prep Page ✅

Issue Reference

Fixes recodehive#899 - Text not clearly visible on the cards on the interview prep page

Updates

Additional fix for practice question cards based on feedback:

✅ PracticeTab.tsx - Practice Question Cards: Enhanced text visibility in:

• Filter labels ("Filter by Type" and "Filter by Difficulty")
• Question count display
• Category badges
• "Show Hints" button
• Hint list items and text
• "Show Resources" button
• Resource link cards (default type)
• Completed question button text

Changes Made

Text Color Improvements:

• Filter labels: text-gray-700 dark:text-gray-300 → text-gray-800 dark:text-gray-200
• Question count: text-gray-600 dark:text-gray-400 → text-gray-800 dark:text-gray-200
• Category badges: text-gray-600 dark:text-gray-400 → text-gray-800 dark:text-gray-200
• Show Hints button: text-gray-600 dark:text-gray-400 → text-gray-800 dark:text-gray-200
• Hint items: text-gray-700 dark:text-gray-300 → text-gray-800 dark:text-gray-200
• Show Resources button: text-gray-600 dark:text-gray-400 → text-gray-800 dark:text-gray-200
• Resource links: text-gray-700 dark:text-gray-300 → text-gray-800 dark:text-gray-200
• Completed button: text-gray-600 dark:text-gray-300 → text-gray-800 dark:text-gray-200

Button Background and Border Improvements:

Show Hints Button:

• Background: Changed from semi-transparent bg-gray-50 to solid bg-white
• Border: Strengthened from border-gray-200 to border-gray-300
• Hover states: Enhanced with shadow effects
• Badge: Increased saturation from from-blue-100 to from-blue-200 with darker text (text-blue-800)

Show Resources Button:

• Background: Increased saturation from from-indigo-50/via-purple-50/to-pink-50 to from-indigo-100/via-purple-100/to-pink-100
• Border: Strengthened from border-indigo-200/50 to border-indigo-300
• Hover states: More saturated colors for better feedback
• Badge: Increased saturation from from-indigo-100 to from-indigo-200 with darker text (text-indigo-800)

All text elements and buttons on the practice question cards now have improved contrast and visibility in both light and dark modes. Buttons are clearly visible without requiring hover states.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.