Merged
Conversation
Contributor
WalkthroughDark mode support and styling refinements are added to waiting room templates. Both Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 15
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/templates/waiting_room/room_card.html`:
- Around line 34-35: Update the body text color classes on the room description
paragraph in the room_card template: replace the current dark variant class
(dark:text-slate-300) with the standard body dark class dark:text-gray-300 so
the <p> element uses text-gray-600 and dark:text-gray-300; locate the paragraph
with class "text-gray-600 dark:text-slate-300 text-sm line-clamp-2 mb-4" and
change only the dark: class to dark:text-gray-300.
- Around line 6-9: Update the room title heading to use the prescribed heading
classes and adjust the metadata line to use the standard body text dark color:
change the h3 that renders {{ room.title }} (currently using font-semibold
text-lg text-gray-900 dark:text-white) to use a bold heading class (e.g.,
text-2xl font-bold or an appropriate size plus font-bold) and change the
metadata wrapper (the div with classes "flex items-center text-sm text-gray-500
dark:text-slate-400") to use body text color classes text-gray-600
dark:text-gray-300 so the title and metadata follow the project's heading and
body text guidelines.
- Around line 16-20: The status badge for room.status == 'open' needs dark-mode
variants added: update the outer div (currently class "flex items-center
bg-green-50 px-3 py-1 rounded-full shrink-0") to include a dark:bg-* variant
(e.g., dark:bg-green-900 or appropriate contrast) and update the dot div
(currently "h-2 w-2 bg-green-600 rounded-full mr-2 animate-pulse") to include a
dark:bg-* (e.g., dark:bg-green-400) and update the text span (currently
"text-green-700 font-medium text-xs") to include a dark:text-* (e.g.,
dark:text-green-200); apply the same pattern for other status branches so each
status badge uses matching dark:bg-*, dark:dot color, and dark:text-*
alternatives to satisfy the "dark:" prefix guideline.
- Around line 3-4: The card wrapper's class list on the <a href="{% url
\"waiting_room_detail\" room.id %}"> element in room_card.html doesn't match the
project's Tailwind card standard; update its class attribute to use the required
card classes (e.g., bg-white dark:bg-gray-800 rounded-lg shadow-lg) and remove
or adjust non-standard variants (like dark:bg-slate-800 rounded-2xl and custom
dark shadows) so the anchor uses bg-white dark:bg-gray-800 rounded-lg shadow-lg
plus any minimal transition/hover utilities consistent with other cards.
- Around line 42-48: Update the avatar and timestamp classes to use the project
palette and dark text guideline: in the block that renders the avatar initial
(the div wrapping {{ room.creator.username|first|upper }}) replace the
background classes (currently bg-purple-100 dark:bg-purple-900/40) with the
primary palette classes (e.g. bg-teal-300 and an appropriate dark variant such
as dark:bg-teal-600), and change the avatar initial span's text class to the
secondary color (text-gray-600) while keeping sizing (text-sm font-medium); also
update the timestamp span that renders {{ room.created_at|timesince }} ago to
use dark:text-gray-300 instead of dark:text-slate-400 so it follows the
dark-mode text guideline.
- Around line 38-39: The topic chip in the for-loop (the <span> inside "{% for
topic in room_topics|get_item:room.id %}") uses slate-based dark colors; update
its Tailwind classes to use the project's gray palette and dark: prefix —
replace dark:bg-slate-700 with dark:bg-gray-600 and replace dark:text-slate-200
with dark:text-gray-200 so the chip uses bg-gray-100 / dark:bg-gray-600 and
text-gray-700 / dark:text-gray-200 to match the project's color scheme.
In `@web/templates/waiting_rooms.html`:
- Line 32: Update the room tile div to use the standard Tailwind card classes:
replace dark:bg-black with dark:bg-gray-800 and change shadow-md to shadow-lg so
the element using the div with class "bg-white dark:bg-black rounded-lg
shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
follows the guideline "bg-white dark:bg-gray-800 rounded-lg shadow-lg" for
cards.
- Line 85: Update the H2 heading element used for the "Your Waiting Rooms"
section: replace the font weight class font-semibold with font-bold and change
the dark mode text class dark:text-slate-200 to dark:text-gray-300 so it follows
the Tailwind heading guideline (text-2xl font-bold) and uses the standard dark
text color; locate the H2 element with text "Your Waiting Rooms" in
waiting_rooms.html and update its class attribute accordingly.
- Line 27: Update the H2 heading element for "Open Waiting Rooms" to use
Tailwind's recommended heading classes: replace font-semibold with font-bold and
standardize dark mode color to dark:text-gray-300; ensure the class list
includes text-2xl font-bold text-gray-700 dark:text-gray-300 so the heading is
bold in light mode and uses the standard dark text color in dark mode.
- Line 43: Update the section heading element for "Fulfilled Waiting Rooms" to
use Tailwind's heading classes per guidelines: change the class from "text-2xl
font-semibold text-gray-700 dark:text-slate-200" to use "text-2xl font-bold
text-gray-700 dark:text-gray-300" (i.e., replace font-semibold with font-bold
and dark:text-slate-200 with dark:text-gray-300) so the heading is bold and uses
the standard dark-mode text color.
- Line 94: The paragraph showing the room description uses the wrong dark-mode
color class; update the <p> element that renders "{{
room.description|truncatechars:100 }}" (currently using class "text-gray-600
dark:text-slate-300 mb-4") to use the standard body dark class by replacing
"dark:text-slate-300" with "dark:text-gray-300" so it follows the Tailwind body
text guideline.
- Around line 16-17: Update the heading and paragraph Tailwind classes: change
the h2 element (the "What are Waiting Rooms?" heading) to use text-2xl font-bold
... (keep existing color classes) by replacing font-semibold with font-bold, and
adjust the p element's dark mode color from dark:text-white to
dark:text-gray-300 while keeping text-gray-600 for the light mode body text.
- Line 116: The joined-room card div currently uses a custom class string
("bg-white dark:bg-slate-800 rounded-lg shadow-md dark:shadow-lg
dark:shadow-black/30 overflow-hidden border border-gray-200
dark:border-slate-700 hover:shadow-lg transition-shadow duration-300") — replace
that class attribute on the joined room card element in
web/templates/waiting_rooms.html with the standard Tailwind card classes
"bg-white dark:bg-gray-800 rounded-lg shadow-lg" (preserving only any additional
utility classes that are required for layout/overflow if still needed), so the
card uses the standardized styling.
- Around line 12-13: Update the anchor linking to {% url "learn" %} to use the
project's primary button Tailwind classes and add focus styles: replace the
existing class list ("bg-blue-600 hover:bg-blue-700 text-white font-bold py-2
px-4 rounded") with the required primary classes (bg-teal-300 hover:bg-teal-400
text-white px-6 py-2 rounded-lg transition duration-200) and append accessible
focus styles such as focus:outline-none focus:ring-2 focus:ring-teal-200
focus:ring-offset-2 to ensure hover/focus states are present on the "Create
Learning Request" link.
- Line 48: Replace the fulfilled-card div that currently uses the long gradient
class string (the div whose class begins with "bg-gradient-to-br from-blue-50
to-indigo-50 dark:from-slate-800...") with the standard Tailwind card classes:
set the background and shadow classes to "bg-white dark:bg-gray-800 rounded-lg
shadow-lg" while preserving necessary layout utilities like "overflow-hidden"
and transition/hover behavior (e.g., keep "overflow-hidden", "hover:shadow-lg",
"transition-shadow", "duration-300"); update or remove any conflicting
gradient/border classes so the final class list uses the standard card style per
guidelines.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issues
Fixes #950
This issue resolves the UI of WaitingList page
Also implement Dark mode on the page
Checklist
IssueWL.mp4
ResolveWL.mp4
Summary by CodeRabbit