fixed the dark-mode in quick reads

[Rohank3]

Resolves #214

Refactored the Quick Reads page to improve UI consistency, maintainability, and dark mode support.

Key Improvements:

• Replaced inline styles with Tailwind CSS classes
• Added full dark mode support across the page
• Improved markdown rendering styles (code blocks, headings, links, blockquotes)
• Enhanced toast UI with better spacing, shadows, and responsiveness
• Improved layout consistency and spacing
• Refined restricted access and empty state UI

What is the purpose of this pull request?
Refactors the Quick Reads page UI to use Tailwind CSS, improving styling consistency, maintainability, and dark mode support without changing core functionality.

Live Demo (if any)

Note for Maintainer

• This PR focuses purely on UI refactoring and does not modify any business logic
• Improves maintainability by removing inline styles
• Ensures better consistency with Tailwind-based design system
• Enhances dark mode experience

Checkout

• I have read all the contributor guidelines for the repo.

Summary by CodeRabbit

• Style
  • Consolidated and refreshed styling for markdown rendering, visibility badges, editor/preview and empty-state blocks with improved spacing, typography, and dark-mode variants.
  • Updated toast notifications: repositioned on screen, redesigned container visuals, and replaced the close glyph with an inline icon.
• Accessibility
  • Added an accessible label to the toast close control for improved screen-reader support.

[vercel]

@Rohank3 is attempting to deploy a commit to the mrimmortal09's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 02bea0b4-608a-4e8d-a7a2-88a8f59762f6

📥 Commits

Reviewing files that changed from the base of the PR and between 44b3f54 and df828a8.

📒 Files selected for processing (1)

• app/quick-reads/page.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• app/quick-reads/page.tsx

---

Walkthrough

Replaced inline style objects with Tailwind CSS classes in the Quick Reads page, adding dark-mode variants and adjusting UI elements (toast, editor/preview, rendered content, visibility badges, change-type pills, and empty/restricted states). No exported/public APIs were changed.

Changes

Cohort / File(s)

Summary

Quick Reads page app/quick-reads/page.tsx

Replaced inline style objects with Tailwind className strings across markdown renderers and layout. Moved and restyled toast (position, container, added backdrop-blur, SVG close button, aria-label). Converted editor/preview and rendered-content containers and empty-state/Restricted Access blocks to Tailwind. Updated visibility/change-type pill color logic to include dark-mode variants. No signature/API changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

accepted-50

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fixed the dark-mode in quick reads' directly matches the main objective of the PR, which is to add dark mode support to the Quick Reads page.
Linked Issues check	✅ Passed	The PR addresses all coding requirements from issue #214: refactored inline styles to Tailwind classes with comprehensive dark mode support across markdown components, toast UI, editor/preview containers, visibility badges, and empty-state blocks.
Out of Scope Changes check	✅ Passed	All changes are strictly scoped to UI refactoring and dark mode styling improvements; no business logic modifications or unrelated functionality changes are present in the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/quick-reads/page.tsx`:
- Around line 589-594: The close button for the toast (the button calling
setToast(null)) is icon-only and lacks an accessible name; add an accessible
label by giving that button an aria-label (e.g., aria-label="Close toast") or
include visually-hidden text inside the button so screen readers can announce
the action, and ensure the button still calls setToast(null) and retains its
existing classes for styling.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0f97fb00-0fad-4a59-b88e-a6726d0d3c77

📥 Commits

Reviewing files that changed from the base of the PR and between 10e2e8b and 44b3f54.

📒 Files selected for processing (1)

• app/quick-reads/page.tsx

[Rohank3]

Since this PR only introduces UI changes and does not modify any core logic or functionality, the existing docstring coverage remains unaffected. Therefore, no additional documentation updates were required.

[anurag2787]

LGTM 👍

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
student-hub	Ready	Preview, Comment	Apr 12, 2026 9:40am

[MrImmortal09]

Added +5 for quality