Card style updated, created a single shared component [Fixes #2251]

[Anuragtech02]

Description

• Updated card style on https://ethereum.org/en/contributing/translation-program/ to match the one on the Languages page: https://ethereum.org/en/languages/
• Created a single shared component in SharedStyledComponents.js

Created a single shared component CardItem in SharedStyledComponents and replaced the cards on /languages and /about ( #2076 & #2195 ) with the new shared component. Doing this also unified card hover transition.

Related Issue #2251

These card styles were outdated:
https://ethereum.org/en/contributing/translation-program/#in-progress so @samajammin I updated them to similar ones like on /languages and /about.

[netlify]

Deploy request for ethereumorg rejected.

Rejected with commit 16789b3

https://docs.netlify.com/configure-builds/environment-variables/#sensitive-variable-policy

[samajammin]

Thanks for the PR! A couple comments. Please let me know if you have any questions 😄

[Anuragtech02]

Thanks @samajammin !, I've made the changes

[wackerow]

@Anuragtech02 Thanks again for the PR =) Spotted two things... one is the redundant external arrow, the other being the bottom row expanding full width (see inline comments). Otherwise should be good to go!

[Anuragtech02]

Thanks @wackerow ! I've added the hideArrow attr and set the flex grow to zero. I've also removed a redundant media query which was trying to set card width to 100% (which was already 100%).

[samajammin]

Almost there @Anuragtech02!

Looking at your preview deploy (https://deploy-preview-2481--ethereumorg.netlify.app/en/languages/) in mobile:

The cards are no longer full width, like they are in production:

I suspect the media query or the flex grow you deleted is actually needed on the language page items.

[Anuragtech02]

Almost there @Anuragtech02!

Looking at your preview deploy (https://deploy-preview-2481--ethereumorg.netlify.app/en/languages/) in mobile:

The cards are no longer full width, like they are in production:

I suspect the media query or the flex grow you deleted is actually needed on the language page items.

@samajammin The media query was not the issue, it was the flex-grow. I added a media query for mobile screens which sets flex grow to 1 which now solves the issue for us.

[wackerow]

👍 @Anuragtech02 Looks good! Added one last little tweak to remove to right margin on mobile screens to even it out. Thanks again!
cc @samajammin

[samajammin]

Thanks for following through on this ❤️

[samajammin]

@all-contributors please add @Anuragtech02 for code.

[allcontributors]

@samajammin

I've put up a pull request to add @Anuragtech02! 🎉