Julia - Fix leaderboard GUI

[JuliaHa0902]

Description

• Fix leaderboard responsiveness, making sure users can use the leaderboard in Desktop, Tablet, Mobile
• For the user with intangible hours, the time should be in blue and bold

Related PRS (if any):

This frontend PR is related to the development backend PR.
…

Main changes explained:

• Fix css styles for Leaderboard
  …

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 volunteer/admin/owner user
5. go to dashboard
6. Confirm that the Leaderboard looks good in desktop, tablet, mobile
7. Add Intangible Time Entry
8. Confirm that the intangible time entry shows in bold and blue

Screenshots or videos of changes:

Screen.Recording.2026-01-02.102742.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	8404fd0
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6957f2d09cfe3f000841ffcb
😎 Deploy Preview	https://deploy-preview-4657--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[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

[Anusha-Gali]

Hi Julia,

I have reviewed your PR locally and though the responsiveness of the leaderboard works as per requirement, and the color of intangible time being visible in light mode, it is not visible in dark mode.

Do let me know if it isn't a part of the PR, raising this issue since whoever might work on the page's dark mode might not know this change and miss out in the future.

[JuliaHa0902]

Hi Julia,

I have reviewed your PR locally and though the responsiveness of the leaderboard works as per requirement, and the color of intangible time being visible in light mode, it is not visible in dark mode.

Do let me know if it isn't a part of the PR, raising this issue since whoever might work on the page's dark mode might not know this change and miss out in the future.

Hi @Anusha-Gali, can you let me know what is not visible in the dark mode? It is not part of the PR but I can do a quick fix.

[rohanrastogi311]

Hi Julia,

Well done with the implementation, it looks good.

I think the issue Anisha is referring to is that in light mode, the box is coloured Green whereas in dark mode, it's a shade of dark grey (which isn't contrasting as per dark mode requirements).

[JuliaHa0902]

@rohanrastogi311 @Anusha-Gali Can you maybe red circle the part that is not visible in dark mode, please? I am still not sure what to fix

[Anusha-Gali]

@rohanrastogi311 @Anusha-Gali Can you maybe red circle the part that is not visible in dark mode, please? I am still not sure what to fix

Hi Julia,
I meant the the intangible time number (4) which is in Blue color in the screenshot. In dark mode as you can see that the number is just bold without any color difference to as as in light mode.