style(ui): use bg-primary token instead of hex code in progress bar

[delfinacorr]

Changes Applied

This pull request addresses the need to standardize color tokens in the donor profile interface. It has been replaced with a Tailwind CSS semantic token to ensure consistency with the project's design system.

🛠️ Changes Made

• File: apps/web/components/sections/profile/views/donor-profile.tsx

• Refactor: The class bg-[Doc test #124] was changed to bg-primary in the motion.div component that renders donation progress.

• Benefit: Improves maintainability and allows the component to automatically respond to changes in the global color settings.

⚠️ Verification Notes (QA)

• Important Notice: Due to a pre-existing hydration bug in the Navigation component on login, I was unable to perform a full visual validation of the component in the browser.

However, the change has been technically validated: The code compiles correctly without syntax errors.

The bg-primary token was verified to exist in the project's Tailwind configuration.

closes #772

Summary by CodeRabbit

• Style
  • Updated the progress bar color in the donor profile card to align with the primary brand color scheme for improved visual consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
kindfi	Ready	Preview, Comment	Jan 31, 2026 3:59pm

[coderabbitai]

Walkthrough

The progress bar styling in the DonorProfile component is updated to use a semantic color token (bg-primary) instead of a hardcoded color value (bg-[#124]), improving design system consistency.

Changes

Cohort / File(s)	Summary
Semantic Color Token Update apps/web/components/sections/profile/views/donor-profile.tsx	Replaced hardcoded progress bar fill color with semantic bg-primary token for improved design consistency.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

frontend, webapp

Suggested reviewers

• Bran18
• AndlerRL

Poem

🎨 From hardcoded hues to tokens bright,
The progress bar now shines just right,
Semantic colors lead the way,
Design consistency saves the day! ✨

🚥 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 accurately describes the main change: replacing a hardcoded hex color with the bg-primary semantic token in the progress bar component.
Linked Issues check	✅ Passed	The pull request successfully implements the requirement from issue #772 by replacing bg-[#000124] with bg-primary in the progress bar component at the specified location.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to the single file and specific class modification requested in issue #772, with no extraneous alterations.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/donor-profile-ui-refactor

---

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.}