fix: updated donation progress with heading

[JeevaRamanathan]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

Closes #54156

Updated Block Progress Bar with heading

[lasjorg]

I haven't checked, but are we sure .progress-bar-percent isn't used elsewhere?

I'm not saying the linear-gradient with the animation is working well if it is used elsewhere, but changing it for all instances might not be the correct thing to do here.

Maybe we should make a new class or a modifier class (so it can exist with and without the gradient).

[JeevaRamanathan]

Hi @lasjorg,
The .progress-bar-percent is descendant of an element with the class annual-donation-alert in this file which had the background-image for the animation

freeCodeCamp/client/src/templates/Introduction/intro.css

Line 497 in b12479b

.annual-donation-alert .progress-bar-percent {

Additionally, in the other occurrence in a different file, the background-image property is also not present in this section

freeCodeCamp/client/src/templates/Challenges/components/completion-modal.css

Lines 64 to 70 in b12479b

	.progress-bar-percent {
	height: 10px;
	overflow: hidden;
	position: relative;
	background-color: var(--primary-color);
	transition: width 0ms linear;
	}

Therefore, I believe it would not have an impact. But I would appreciate your input on this.

[lasjorg]

If we remove the gradient, I don't think we need the animation as well.

---

We didn't get any feedback yet in the issue from one of the maintainers, and I realize this is opinionated and gets into the weeds.

Personally, I'm not crazy about the component having different styles depending on its placement. It feels like a side effect, and it's not very transparent to the user of the component. I would want to know the component styles by looking at the component or any variations of the component to be explicit, and not just based on its placement in the DOM.

[JeevaRamanathan]

Oops! Somehow I have missed that, animation has been removed now.

---

Ok, let's see if we hear any feedback from maintainers

[lasjorg]

BTW, how does it look with the paragraph element?

I didn't check, but I would assume the element needs some styles to be larger and have more weight?

[naomi-lgbt]

The new text will need a specific colour set so it does not become illegible in night mode.

[JeevaRamanathan]

@naomi-lgbt, it has been updated with a specific color, and I hope the translation text, which is showing as "learn.donation-heading," will map with its corresponding value once it's live.

[naomi-lgbt]

which is showing as "learn.donation-heading," will map with its corresponding value once it's live.

Yeah, that only shows because I was too lazy to clean the local files when I was switching branches.

[moT01]

LGTM 🎉

Hey @ahmaxed, do you mind taking a look at this redesign before we merge?

[ahmaxed]

This is the final state. Removed the hr as requested. Adding an animation would be nice.

[JeevaRamanathan]

Hi @ahmaxed, I see auto-merge is enabled but could you kindly clarify the conversation that needs resolution and is currently blocking the merge?