Fix: Improve Hover Contrast for Discussion Cards in Dark Mode#782
Fix: Improve Hover Contrast for Discussion Cards in Dark Mode#782A1L13N merged 5 commits intoalphaonelabs:mainfrom
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughUpdated forum topic list item styling: hover background colors changed to darker shades for better dark-mode contrast, and conditional rounded corners added to first/last items via Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~5–15 minutes
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (2)**/*.html📄 CodeRabbit inference engine (.cursorrules)
Files:
web/templates/**/*.html📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧠 Learnings (1)📓 Common learnings🔇 Additional comments (3)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @Ankushkr14, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses two user interface issues related to the hover effects on forum discussion cards. The changes improve the visual consistency and readability of these cards, particularly in dark mode, by refining the hover background color and ensuring that the hover effect correctly adheres to the container's rounded edges. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request successfully addresses the hover contrast issue for discussion cards in both light and dark modes. The fix for rounded corners is correctly implemented for the single-loop scenario in web/templates/web/forum/category.html. However, there's a logical error in web/templates/web/forum/categories.html where the rounded corners are applied incorrectly within nested loops. I've left a specific comment with a suggested fix to ensure the corners are rounded only for the very first and very last items in the list.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
web/templates/web/forum/categories.html (1)
116-116: Consistent hover styling implementation across forum templates.The topic list item styling mirrors the parallel fix in
category.html(line 131). Conditional rounded corners correctly prevent background overflow for first/last items. Same WCAG contrast verification applies as noted in the category.html review.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
web/templates/web/forum/categories.html(1 hunks)web/templates/web/forum/category.html(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.html
📄 CodeRabbit inference engine (.cursorrules)
**/*.html: Always use Tailwind CSS utility classes for styling HTML elements
Never use inline styles on elements (no style="...")
Use the project color scheme via Tailwind classes: teal-300 (primary), gray-600 (secondary), green-600 (success), yellow-600 (warning), red-600 (danger), with dark: variants
Containers should use: container mx-auto px-4
Cards should use: bg-white dark:bg-gray-800 rounded-lg shadow-lg
Form inputs should use: w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500
Form labels should use: block text-sm font-medium text-gray-700 dark:text-gray-300
Primary buttons should use: bg-teal-300 hover:bg-teal-400 text-white px-6 py-2 rounded-lg transition duration-200
Secondary buttons should use: bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300
Headings use Tailwind typography: text-2xl font-bold (adjust size as needed)
Body text should use: text-gray-600 dark:text-gray-300
Links should use: text-blue-600 hover:text-blue-800 dark:text-blue-400
Use flex and grid utilities for layouts instead of custom CSS
Use consistent spacing with gap-{size} and space-{x|y}-{size} utilities
Ensure responsive design using Tailwind responsive prefixes (sm:, md:, lg:, xl:)
Always include dark mode alternatives using the dark: prefix where appropriate
Use dark:bg-gray-800 for card backgrounds in dark mode
Use dark:text-gray-300 for text in dark mode
Maintain proper heading hierarchy (h1 > h2 > h3...)
Include appropriate ARIA labels and roles where needed
Ensure sufficient color contrast between text and background
Add visible hover and focus states for all interactive elements
Files:
web/templates/web/forum/categories.htmlweb/templates/web/forum/category.html
web/templates/**/*.html
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
web/templates/**/*.html: Format HTML/Django templates with djlint using 120-character line length
Use Tailwind CSS classes only in templates (no custom CSS or inline styles)
Include dark mode variants using the "dark:" prefix in templates
Ensure proper HTML structure and accessibility in templates
Follow project color scheme in templates (teal-300, gray-600, green-600, yellow-600, red-600)
Files:
web/templates/web/forum/categories.htmlweb/templates/web/forum/category.html
🧠 Learnings (1)
📓 Common learnings
Learnt from: Abhishek-Punhani
Repo: alphaonelabs/alphaonelabs-education-website PR: 337
File: web/templates/courses/detail.html:1506-1560
Timestamp: 2025-04-07T11:33:41.277Z
Learning: For the alphaonelabs-education-website project, the team prefers to keep PRs focused and manageable in size. Additional enhancements like accessibility improvements should be addressed in separate follow-up issues rather than expanding the scope of an existing PR.
Learnt from: Abhishek-Punhani
Repo: alphaonelabs/alphaonelabs-education-website PR: 337
File: web/templates/courses/detail.html:1563-1617
Timestamp: 2025-04-07T13:47:38.326Z
Learning: Abhishek-Punhani prefers to handle accessibility-related improvements (like adding ARIA roles) in separate dedicated issues rather than including them in feature implementation PRs.
Learnt from: CR
Repo: alphaonelabs/alphaonelabs-education-website PR: 0
File: .cursorrules:0-0
Timestamp: 2025-08-25T00:43:03.755Z
Learning: Applies to **/*.html : Use dark:bg-gray-800 for card backgrounds in dark mode
Learnt from: CR
Repo: alphaonelabs/alphaonelabs-education-website PR: 0
File: .cursorrules:0-0
Timestamp: 2025-08-25T00:43:03.755Z
Learning: Applies to **/*.html : Cards should use: bg-white dark:bg-gray-800 rounded-lg shadow-lg
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm divide-y divide-gray-200 dark:divide-gray-700"> | ||
| {% for topic in topics %} | ||
| <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors duration-150"> | ||
| <div class="p-4 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-150 {% if forloop.first %}rounded-t-lg{% endif %} {% if forloop.last %}rounded-b-lg{% endif %}"> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Tailwind CSS gray color palette hex values gray-200 gray-400 gray-600 gray-700 gray-800 gray-100
💡 Result:
gray-100: #f3f4f6. [1]
gray-200: #e5e7eb. [1]
gray-400: #9ca3af. [1]
gray-600: #4b5563. [1]
gray-700: #374151. [1]
gray-800: #1f2937. [1]
Sources: Tailwind CSS default palette. [1] Tailwind docs — Default color palette. [2] Tailwind 3 gray reference.
🏁 Script executed:
python3 << 'EOF'
def hex_to_rgb(hex_color):
"""Convert hex color to RGB tuple"""
hex_color = hex_color.lstrip('#')
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
def relative_luminance(rgb):
"""Calculate relative luminance per WCAG"""
r, g, b = [x / 255.0 for x in rgb]
r = r / 12.92 if r <= 0.03928 else ((r + 0.055) / 1.055) ** 2.4
g = g / 12.92 if g <= 0.03928 else ((g + 0.055) / 1.055) ** 2.4
b = b / 12.92 if b <= 0.03928 else ((b + 0.055) / 1.055) ** 2.4
return 0.2126 * r + 0.7152 * g + 0.0722 * b
def contrast_ratio(color1, color2):
"""Calculate contrast ratio between two colors"""
l1 = relative_luminance(hex_to_rgb(color1))
l2 = relative_luminance(hex_to_rgb(color2))
lighter = max(l1, l2)
darker = min(l1, l2)
return (lighter + 0.05) / (darker + 0.05)
# Color combinations to test
combinations = [
("Light mode - gray-800 on gray-200", "#1f2937", "#e5e7eb"),
("Light mode - gray-600 on gray-200", "#4b5563", "#e5e7eb"),
("Dark mode - gray-100 on gray-700", "#f3f4f6", "#374151"),
("Dark mode - gray-400 on gray-700", "#9ca3af", "#374151"),
]
wcag_aa_threshold = 4.5
print("WCAG AA Contrast Ratio Analysis\n" + "=" * 60)
print(f"WCAG AA threshold for normal text: {wcag_aa_threshold}:1\n")
for description, text_color, bg_color in combinations:
ratio = contrast_ratio(text_color, bg_color)
status = "✓ PASS" if ratio >= wcag_aa_threshold else "✗ FAIL"
print(f"{description}")
print(f" Text: {text_color} | Background: {bg_color}")
print(f" Ratio: {ratio:.2f}:1 {status}\n")
EOFRepository: alphaonelabs/alphaonelabs-education-website
Length of output: 230
🏁 Script executed:
[skip_cloning]
python3 << 'EOF'
def hex_to_rgb(hex_color):
"""Convert hex color to RGB tuple"""
hex_color = hex_color.lstrip('#')
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
def relative_luminance(rgb):
"""Calculate relative luminance per WCAG"""
r, g, b = [x / 255.0 for x in rgb]
r = r / 12.92 if r <= 0.03928 else ((r + 0.055) / 1.055) ** 2.4
g = g / 12.92 if g <= 0.03928 else ((g + 0.055) / 1.055) ** 2.4
b = b / 12.92 if b <= 0.03928 else ((b + 0.055) / 1.055) ** 2.4
return 0.2126 * r + 0.7152 * g + 0.0722 * b
def contrast_ratio(color1, color2):
"""Calculate contrast ratio between two colors"""
l1 = relative_luminance(hex_to_rgb(color1))
l2 = relative_luminance(hex_to_rgb(color2))
lighter = max(l1, l2)
darker = min(l1, l2)
return (lighter + 0.05) / (darker + 0.05)
# Color combinations to test
combinations = [
("Light mode - gray-800 on gray-200", "#1f2937", "#e5e7eb"),
("Light mode - gray-600 on gray-200", "#4b5563", "#e5e7eb"),
("Dark mode - gray-100 on gray-700", "#f3f4f6", "#374151"),
("Dark mode - gray-400 on gray-700", "#9ca3af", "#374151"),
]
wcag_aa_threshold = 4.5
print("WCAG AA Contrast Ratio Analysis\n" + "=" * 60)
print(f"WCAG AA threshold for normal text: {wcag_aa_threshold}:1\n")
for description, text_color, bg_color in combinations:
ratio = contrast_ratio(text_color, bg_color)
status = "PASS" if ratio >= wcag_aa_threshold else "FAIL"
print(f"{description}")
print(f" Text: {text_color} | Background: {bg_color}")
print(f" Ratio: {ratio:.2f}:1 [{status}]\n")
EOFRepository: alphaonelabs/alphaonelabs-education-website
Length of output: 230
🌐 Web query:
WCAG AA contrast ratio #9ca3af text on #374151 background gray-400 on gray-700
💡 Result:
Contrast ratio ≈ 4.06:1. It fails WCAG AA for normal text (needs ≥4.5:1) but passes AA for large text (≥3:1). [1][2]
Sources:
[1] W3C Understanding WCAG 1.4.3 (contrast requirements).
[2] MDN — Color contrast / WCAG recommended ratios.
🌐 Web query:
WCAG contrast ratio #4b5563 text on #e5e7eb background gray-600 on gray-200
💡 Result:
Contrast ratio ≈ 6.09:1.
- Outcome: Meets WCAG AA for normal text (>= 4.5:1) and meets AAA for large text (>= 4.5:1 for large), but does NOT meet WCAG AAA for normal text (7:1). (w3.org)
(Colors: text #4b5563 on background #e5e7eb.)
Citations:
🌐 Web query:
WCAG contrast ratio #1f2937 text on #e5e7eb background gray-800 on gray-200
💡 Result:
Contrast ratio (foreground #1f2937 on background #e5e7eb): ≈ 11.9:1.
WCAG pass/fail:
- WCAG 2.1 AA (normal text ≥4.5:1): Pass. [1]
- WCAG 2.1 AA (large text ≥3:1): Pass. [1]
- WCAG 2.1/2.2 AAA (normal text ≥7:1): Pass. [2]
Method: calculated using WCAG relative-luminance / contrast formula for sRGB. [3]
Sources:
[1] W3C WCAG 2.1 — Contrast (Minimum) requirements.
[2] WCAG Contrast (Enhanced) — 7:1 requirement for AAA.
[3] WebAIM / WCAG contrast formula and explanation.
🌐 Web query:
WCAG contrast ratio #f3f4f6 text on #374151 background gray-100 on gray-700
💡 Result:
- Contrast ratio (text #f3f4f6 on background #374151): ≈ 12:1 — passes WCAG AA (normal & large text) and AAA (large text and normal text also well above 7:1). [1][2]
Sources:
- Tailwind gray hex values (#f3f4f6 = gray-100, #374151 = gray-700). [1]
- WCAG contrast requirements (4.5:1 AA normal, 3:1 AA large, 7:1 AAA). [2]
WCAG AA Contrast ratio verification reveals a real accessibility issue that needs correction.
The dark mode gray-400 text on gray-700 background combination fails WCAG AA standards at 4.06:1 (requires ≥4.5:1 for normal text). However, the light mode gray-600 text on gray-200 background passes comfortably at 6.09:1. The gray-100 and gray-800 combinations both exceed WCAG AA by significant margins (12:1 and 11.9:1 respectively).
The gray-400 text color on dark:hover:bg-gray-700 fails WCAG AA accessibility standards (4.06:1 vs. required 4.5:1). Consider using gray-300 or higher contrast text color for dark mode hover states to meet accessibility requirements.
🤖 Prompt for AI Agents
In web/templates/web/forum/category.html around line 131 the hover state uses
dark:hover:bg-gray-700 while the text color in dark mode remains gray-400 which
fails WCAG AA contrast; update the hover state to also set a higher-contrast
text color in dark mode (for example add dark:hover:text-gray-300 or another
class that yields ≥4.5:1 contrast against gray-700) so the text meets WCAG AA on
hover, keeping the existing rounded and transition classes intact.
Ankushkr14
left a comment
Ankushkr14
left a comment
There was a problem hiding this comment.
fix as per the suggestions
2 participants
Fix: Improve Hover Contrast for Discussion Cards in Dark Mode
Fixes #776
Description
This pull request resolves two UI bugs related to the hover effect on forum discussion cards, improving both usability and visual polish.
Screenshots(Before)
Screenshots (After)
Checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.