fix: make ScrollProgressBar track visible in dark mode using Tailwind…

[ruhelamahi7-code]

Summary

Fixed the ScrollProgressBar component where the track background was invisible in dark mode due to hardcoded inline styles. Migrated all styles to Tailwind CSS classes for proper dark/light mode support.

Description

What changed:

• Removed hardcoded inline background: rgba(0,0,0,0.08) on the track — invisible on dark backgrounds
• Replaced with Tailwind classes bg-black/10 dark:bg-white/10 — visible in both light and dark mode
• Replaced all other inline styles with Tailwind utility classes
• Removed the now-unused ScrollProgressBar.css import and deleted the file
• Fill color migrated from CSS file to Tailwind gradient bg-gradient-to-r from-blue-500 to-purple-500

Why:
The track background was completely invisible in dark mode (the default theme), making the progress bar look broken for all dark mode users.

Related Issue

Fixes #482

Type of Change

• Bug fix
• New feature
• Documentation update
• UI/UX improvement
• Refactoring

Checklist

• Code follows project guidelines
• Tested locally
• No console errors
• Documentation updated if required

UI Evidence

Before:
Track background invisible in dark mode — only the fill portion was visible when scrolling.

After:
Track background now clearly visible in both light (bg-black/10) and dark (bg-white/10) modes. The progress fill uses Tailwind gradient classes matching the app's design.

[ruhelamahi7-code]

@Nsanjayboruds PR is ready for review! 🎉

Here's what was fixed:

• ✅ Track background now uses bg-black/10 dark:bg-white/10 — visible in both modes
• ✅ All inline styles replaced with Tailwind utility classes
• ✅ Removed the now-unused ScrollProgressBar.css file
• ✅ Fill color migrated to Tailwind gradient classes

Could you please:

• 👤 Assign this PR to me
• 🏷️ Add the relevant labels
• 🔍 Review and merge when you get a chance

Thank you! 🙏

[Nsanjayboruds]

@ruhelamahi7-code please provide a screen recording

[ruhelamahi7-code]

@Nsanjayboruds Since the live site is currently down due to missing Firebase env variables on Render, I created a visual demo to show the ScrollProgressBar fix in dark mode.

BEFORE — The track background rgba(0,0,0,0.08) is completely invisible on dark backgrounds. Only the blue/purple fill is visible, making the progress bar look broken.

AFTER — The track now uses bg-black/10 dark:bg-white/10 which is clearly visible as a subtle grey track behind the fill in dark mode.

Hope this clearly demonstrates the fix! 🙏

---

Also, I raised issue #484 — [ENHANCEMENT]: Replace window.confirm() in Cart with a styled confirmation modal — and would love to work on it. I would love to work on that as well since I'm already familiar with the codebase from PR #481 and PR #483.

Could you please assign it to me? 🙏