feat: add new design for Our Team Section

[Anmol-Baranwal]

Fixes Issue

resolves #2176 (creating a new PR)

Changes proposed

@aftabrehan @CBID2
This PR is still in progress. I am currently working on refining the structure. I would appreciate your feedback on the proposed changes.

@rupali-codes
As discussed, the structure would be a combination of these two rather than what is displayed in Figma. This adjustment is necessary due to space constraints for displaying cards properly. Please review and suggest changes. Once finalized, I will update the icons and other elements.

Contributors

The color scheme for this section is suitable.

Note to reviewers

@aftabrehan
Please provide the hex color codes for each maintainer card. I have attempted it on my end, but I found the yellow shade less preferable, and there was an issue with the light theme for your colors.

I need 4 sets of colors for both dark and light theme.

1. Bg color of main section
2. bg color of role (designer)
3. text color of role (designer)
4. icon hover color

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
linkshub	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 22, 2023 1:39pm

[github-actions]

Thank you, Anmol-Baranwal, for creating this pull request and contributing to LinksHub! 💗

The maintainers will review this Pull Request and provide feedback as soon as possible! 😇
We appreciate your patience and contribution, Keep up the great work! 😀

[CBID2]

For some reason, the deployment failed @Anmol-Baranwal

[Anmol-Baranwal]

For some reason, the deployment failed @Anmol-Baranwal

Yeah, looking into it. Might be due to errors. I will tag you, once its deployed.

[Anmol-Baranwal]

@CBID2
Visit here to see the changes: (It's deployed)
https://linkshub-dqndni96d-rupali-codes.vercel.app/contributors

Color palette will be updated, so don't worry about that.

[CBID2]

Love it! :)

[Anmol-Baranwal]

@rupali-codes

There is some problem with this. We can merge it, because it is totally independent.

Or if you want, I will create a new PR to push in dev. Please let me know.

[Anmol-Baranwal]

@rupali-codes @CBID2 @aftabrehan
I think this looks decent. If you need any changes, please let me know.

Dark theme

Light theme

[aftabrehan]

Excellent PR, @Anmol-Baranwal 💪 🚀 💯

I have some questions and suggestions. Please, have a look and help them resolve. Feel free to mention me if you need any clarification on my suggestions. Thank you!

[Anmol-Baranwal]

@aftabrehan
Can you let me know the structure and approach, how can I do it? For the icons.

It needs to change the color based on different maintainer theme. (Id is the problem for me)

Let me know the structure or the code. Thanks

Also review the structure, and resolve the conversations accordingly if everything seems good.

[aftabrehan]

Can you let me know the structure and approach, how can I do it? For the icons.

1. Go to Figma and select the icon

2. Press right-click and copy it as SVG.

3. Create a file github.svg under the assets/icons/svg

4. Paste the copied value in the file.

5. Search for the fill attribute in the nested elements (<path>, <rect>, etc). If the fill attribute doesn't exist, check for the stroke attribute instead.

6. We need to change its value as an empty string ("") to color it using the className attribute when we import it in the Component.

7. Import it into your component as a React component.

import GitHubIcon from 'assets/icons/svg/github.svg'

8. Render it as a React component.

<GitHubIcon />

9. Style it using fill or stroke className prefix; e.g. (fill-red, stroke-red)

<GitHubIcon className="fill-zinc-600 group-hover:fill-primary dark:fill-zinc-400 dark:group-hover:fill-slate-300" />

10. Check Sidebar.tsx for more reference.

Feel free to let me know if you need any clarification. Thank you!

[Anmol-Baranwal]

@aftabrehan
Hehe, I recommend reading the question thoroughly before providing an answer.

The suggested approach may not work; you can verify it on localhost. It needs to exist on type JSX.IntrinsicElements according to the current logic.

Even if I convert it into a JSX component and export it, dynamically setting the color becomes a challenge. In your case, it's straightforward with just two colors, but in this scenario, theme is different.

Perhaps, you could try it on your localhost and let me know. It's just two files that you need to copy.
This way, you'll gain a better understanding.

I find it amusing, that you think I can't export and use a svg icon. xD

[aftabrehan]

@Anmol-Baranwal, oh sorry about that 😬 😅 actually, this approach will work. I think the problem is resolved if svg works like a react component and accepts the className attribute. You can simply create a function or object that provides classes based on Id.

[rupali-codes]

@Anmol-Baranwal are we done with it?

[Anmol-Baranwal]

@Anmol-Baranwal are we done with it?

Yes, I have used icons from Lucide rather than figma. Because there was a problem with changing color based on the theme.
Aftab wanted figma icons to be used.

You can review and let me know. It is deployed.

I've pushed it to the main branch by mistake but it won't be a problem because I never changed anything other than contributors section.

[CBID2]

As far as design goes @Anmol-Baranwal, it looks wonderful! :) The only thing that needs to be fixed is the label near @aftabrehan‘s name.

Since they are a part of the Maintainers team, I think that label should be there instead “developer”.

[Anmol-Baranwal]

Since they are a part of the Maintainers team, I think that label should be there instead “developer”.

Sure! I will change it to maintainer.

[Anmol-Baranwal]

@CBID2
Done!

Please review it now.

[CBID2]

LGTM

[aftabrehan]

Excellent PR, @Anmol-Baranwal 💪 🚀 💯

[CBID2]

@rupali-codes, please review this.

[Anmol-Baranwal]

@rupali-codes, please review this.

Just to let you know, this will be merged in main. I mistakenly created a pr for main, but I guess this can work because there is no fault and the files aren't changed much.

[rupali-codes]

@Anmol-Baranwal the colors and structure would look kinda strange, can you close this PR and make a new one for dev branch

[Anmol-Baranwal]

@Anmol-Baranwal the colors and structure would look kinda strange, can you close this PR and make a new one for dev branch

Sure. I will do it.

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @rupali-codes on Vercel.

@rupali-codes first needs to authorize it.

[Anmol-Baranwal]

@Anmol-Baranwal the colors and structure would look kinda strange, can you close this PR and make a new one for dev branch

Closing this PR as per above discussion.

#2218 will resolve this issue.