Aseem Phase 2: lesson list dark-mode

[aseemdeshmukh]

Description

Related PRS (if any):

This frontend PR is related to the #4579 frontend PR.

Main changes explained:

• Updated file LessonCard.jsx
• Updated file LessonCard.module.css
• Updated file LessonListForm.module.css

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to http://localhost:3000/bmdashboard/lessonlist
6. For Dark mode, verify if the entire Lesson List page—including all components, cards, and controls—renders in consistent dark styling.

Screenshots or videos of changes:

1.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	770ae2c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a5ecbf559ac1b00085fa9a5
😎 Deploy Preview	https://deploy-preview-5372--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[DeepighaJ]

• Tested the PR locally.
• The Export lesson data popup text needs improvement. The black text and title is dificult to read in dark mode.
• In light mode the lesson lists are highlighted in blue and on expansion it shows difference but in dark mode needs improvement in highlighting the lesson and differentiate between list heading and expanded details.
• Selected tag to delete under Delete tags is not in dark mode and delete confirmation popup text also needs improvement.

[kzou55]

Hi Assem,

I ran and tested the PR locally

Issues

1. The Export Data popup has text that is difficult to see in Dark Mode.

   

2. The page in Dark Mode has its layout slightly shifted or smaller. Changing to Dark Mode should only change the colors not the layout of the page. (This might be slightly difficult to notice but the components are slightly shifted or smaller)

   

3. When expanding lessons, in Light Mode the component is separated into 2 different colors. Meanwhile, in Dark Mode it's one unified color

   

4. Tags and Delete Tags are in different color

   

5. I think the Delete button for the tag can still be the color red. Unless, it was specified or required to be in blue.

6. Delete pop up text has poor contrast making it difficult to read the text.

   

[HemanthNidamanuru]

Hi Aseem,

I tested this PR locally and noticed a few styling issues:

The Export Data popup text is difficult to see in dark mode.
When expanding lessons, the component has two different colors in light mode, but in dark mode it appears as one unified color.
Tags and Delete Tags are showing in different colors.
The delete popup text has poor contrast in dark mode.

[BosuBose132]

Tested PR #5372 locally.

I found a dark mode readability issue on the Lesson List page. When dark mode is enabled and I open the “Export Lesson Data” modal, the modal background appears dark, but several text elements such as the title, body text, applied filters, and export details remain too dark/black. This makes the modal difficult to read in dark mode.

Since this PR is intended to make the full Lesson List page render consistently in dark mode, could you please update the Export Lesson Data modal text styling so it has proper contrast in dark mode?

Screenshot attached for reference.

[aseemdeshmukh]

1. Fixed Dark mode for delete tag and tag header now has different colour to seperate it from the tag body. Highlighted the fixes.

2. Fixed delete confirmation pop-up for dark mode and gave the cancel button red colour. Highlighted the fix in the screenshot.

3. Fixed Export Lesson list pop-up for dark mode and gave the cancel button red colour. Highlighted the fix in the screenshot.

[aseemdeshmukh]

Tested PR #5372 locally.

I found a dark mode readability issue on the Lesson List page. When dark mode is enabled and I open the “Export Lesson Data” modal, the modal background appears dark, but several text elements such as the title, body text, applied filters, and export details remain too dark/black. This makes the modal difficult to read in dark mode.

Since this PR is intended to make the full Lesson List page render consistently in dark mode, could you please update the Export Lesson Data modal text styling so it has proper contrast in dark mode?

Screenshot attached for reference.

#5372 (comment)

[aseemdeshmukh]

Hi Aseem,

I tested this PR locally and noticed a few styling issues:

The Export Data popup text is difficult to see in dark mode. When expanding lessons, the component has two different colors in light mode, but in dark mode it appears as one unified color. Tags and Delete Tags are showing in different colors. The delete popup text has poor contrast in dark mode.

#5372 (comment)

[aseemdeshmukh]

Hi Assem,

I ran and tested the PR locally

Issues

1. The Export Data popup has text that is difficult to see in Dark Mode.
   
2. The page in Dark Mode has its layout slightly shifted or smaller. Changing to Dark Mode should only change the colors not the layout of the page. (This might be slightly difficult to notice but the components are slightly shifted or smaller)
   
   
3. When expanding lessons, in Light Mode the component is separated into 2 different colors. Meanwhile, in Dark Mode it's one unified color
   
   
4. Tags and Delete Tags are in different color
   
   
5. I think the Delete button for the tag can still be the color red. Unless, it was specified or required to be in blue.
6. Delete pop up text has poor contrast making it difficult to read the text.
   

#5372 (comment)

[aseemdeshmukh]

• Tested the PR locally.
• The Export lesson data popup text needs improvement. The black text and title is dificult to read in dark mode.
• In light mode the lesson lists are highlighted in blue and on expansion it shows difference but in dark mode needs improvement in highlighting the lesson and differentiate between list heading and expanded details.
• Selected tag to delete under Delete tags is not in dark mode and delete confirmation popup text also needs improvement.

#5372 (comment)

[HemanthNidamanuru]

Hi Aseem,

I tested this PR locally and verified that the previously reported styling issues are resolved.

The Export Data popup text, lesson expansion colors, Tags/Delete Tags colors, and delete popup text contrast issues look good now.

One small suggestion: the Delete button could be shown in red to better indicate it is a destructive action.

[DeepighaJ]

The dark mode functionality is working fine now. The issues are resolved, good to go.

[shree-vaths]

Hello I tested #5372 on my local. And the functionality is working fine dark mode.

Passing Test cases
-The each lesson list is readable in dark mode with their tags and author.
-The expand all and collapse all shows dark mode data correctly.
-The filters are adapted to dark mode.
-Export data button and export data modal are visible in dark mode.

[BosuBose132]

Tested PR #5372 locally on the pr-5372 branch.

What I verified:

• The app started successfully.
• Logged in as an admin user.
• Opened the Lesson List page at /bmdashboard/lessonlist.
• Verified that the full Lesson List page renders with consistent dark mode styling.
• Lesson cards, text, dates, tags, buttons, filters, and controls are readable in dark mode.
• Expand All and Collapse All buttons are visible and usable.
• Hover and focus states remain visible.
• Toggled back to light mode and confirmed the page still renders normally.
• Checked the browser console and did not see related errors.

No issues found during testing. The Lesson List dark mode styling works as expected based on the PR requirements.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[one-community]

Thank you all, merging!