feat: use new design for FileContributors

[JoeChenJ]

Description

Use new design for FileContributors

Related Issue

#8024 & #14473

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	294f5e8
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/67b448c8ed672e00087f2ec9
😎 Deploy Preview	https://deploy-preview-14898--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 47 (🔴 down 4 from production) Accessibility: 95 (no change from production) Best Practices: 89 (🔴 down 9 from production) SEO: 98 (no change from production) PWA: 59 (no change from production) View the detailed breakdown and full score reports

---

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

[JoeChenJ]

Hey @konopkja, could you take a look at this?

Let me know if anything needs improvement!

[konopkja]

looks awesome!

I think this gap could be 50% of what it is now, but overall its great!

---

I noticed that the component is only visible on desktop, do you intend on preparing it for mobile also? I think there is enough space

[JoeChenJ]

looks awesome!

I think this gap could be 50% of what it is now, but overall its great!

I noticed that the component is only visible on desktop, do you intend on preparing it for mobile also? I think there is enough space

@konopkja Sure, I'll work on this soon!

[JoeChenJ]

Hey @konopkja , I’ve adjusted the gap and made the updates for mobile. I also want to point out a few additional changes I made that you might not notice:

1. I added a “Translator” tag next to the Crowdin contributors.

2. I changed the redirect logic for Crowdin contributors — they now link to their Crowdin profiles instead of GitHub.

3. On pages with Crowdin contributors, the modal now displays both Crowdin and GitHub contributors (it used to show only one or the other).

Could you take a look at those as well and let me know if everything looks fine? Appreciate your feedback!

[konopkja]

Hey @konopkja , I’ve adjusted the gap and made the updates for mobile. I also want to point out a few additional changes I made that you might not notice:

1. I added a “Translator” tag next to the Crowdin contributors.
2. I changed the redirect logic for Crowdin contributors — they now link to their Crowdin profiles instead of GitHub.
3. On pages with Crowdin contributors, the modal now displays both Crowdin and GitHub contributors (it used to show only one or the other).

Could you take a look at those as well and let me know if everything looks fine? Appreciate your feedback!

Hey @JoeChenJ it looks perfect! Really appreciate this particular contribution <3

[konopkja]

shall we discuss extending this component to other pages outside developer docs or would it be better tackled in another PR?

[JoeChenJ]

shall we discuss extending this component to other pages outside developer docs or would it be better tackled in another PR?

I think it would be best to merge this PR first, and then we can extend it in another one, as it might take a bit more time

[JoeChenJ]

Hey @konopkja, I've made some progress on the extension—the component is now available at the end of the markdown pages.

Since this PR is still open, I've pushed the changes here!

[JoeChenJ]

Hey @konopkja for React pages, does placing the component here look good to you?

[nloureiro]

@JoeChenJ, great contribution! Thank you

From my side, this component should always be at the end of the content, before the callouts and widgets.

I would add a border-top to it. See if this screenshot helps.

Are you thinking of all content pages? Something like all pages minus (homepage & Hubpages). Is this the goal?

[JoeChenJ]

@nloureiro thank you for the guidance! Adding a border-top looks much better.

I was planning to add this component on every page, but not sure if it fits well across all designs. Do you think we should exclude certain pages? Would love to get your thought on it!

[nloureiro]

@nloureiro thank you for the guidance! Adding a border-top looks much better.

I was planning to add this component on every page, but not sure if it fits well across all designs. Do you think we should exclude certain pages? Would love to get your thought on it!

There are pages, like the homepage and hub pages, where this does not make sense.
These are pages that drive traffic to others, so they will not have that many contributions.

Another comment: maybe change the copy to :
pages last update: [DATE]

It would be more in line with the copy on the footer, or maybe remove the date from the footer. I don't know. @konopkja, what do you think?
Are those two dates conflicting? Or is it clear to the user that one is for the last site update and the other is for the last page update?

Question: what do you have in mind for its component? You need to go to every page manually and add this, right?

[JoeChenJ]

@nloureiro thank you for the guidance! Adding a border-top looks much better.
I was planning to add this component on every page, but not sure if it fits well across all designs. Do you think we should exclude certain pages? Would love to get your thought on it!

There are pages, like the homepage and hub pages, where this does not make sense. These are pages that drive traffic to others, so they will not have that many contributions.

Another comment: maybe change the copy to : pages last update: [DATE]

It would be more in line with the copy on the footer, or maybe remove the date from the footer. I don't know. @konopkja, what do you think? Are those two dates conflicting? Or is it clear to the user that one is for the last site update and the other is for the last page update?

Question: what do you have in mind for its component? You need to go to every page manually and add this, right?

Yes, for React pages, I need to manually add it on every one.

---

For homepage and hub pages, there are still some GitHub contributors who have fixed bugs or migrated components, as well as Crowdin contributors who help translate the strings (it's still a bit tricky for me to capture translators on React pages though).

If our goal is to recognize the efforts of every contributor, I think it could still be meaningful on these pages. However, I’m concerned about whether adding it to these pages makes sense from a UX or design perspective, what do you think?

[konopkja]

Hi, i think it make some sense to keep the component on most pages with the alternation nuno proposed. I checked the latest deploy and think it looks good. I would probably not include it on homepage for now even though there have been other contributors.

Furthermore i realized that we have no call to action inside the modal window. @JoeChenJ could you please add link to our https://deploy-preview-14898--ethereumorg.netlify.app/en/contributing/ (new tab) in there? Higlighted word could be a link.