added hover effects to the card #3893
Conversation
mainly added shadows, hover effects (mainly scaling up the cards), removed the hover border color, and made the profile username font a bit light and color to black
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
It's great having you contribute to this project
Welcome to the community 🤓If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.
| Welcome @whitedevil-glitch! Thank you so much for your first pull request! |
There was a problem hiding this comment.
Please provide a video of the hover transition. Also @eddiejaoude what do you think of the font color. I dont see much of difference between the two
|
here's the video, if needed we can add colors to hover transition or more shadow-drops screen-capture.mp4 |
There was a problem hiding this comment.
The original one looks good it me as there is a clear separation between cards also the UserName is of different color so it stood out from the rest of the information.
The views on the bottom would be a little problematic as it is giving less space for the description of the profile
|
so, we can increase the font weight for UserName instead of using ''text-bold''... which will make the heading separate from the description down below and the orange color (all over the website) can be lighter for eg. #F0A500 or RGB(240, 165, 0) |
|
that less space for description can be solved by adding an anchor tag of more... If a user wants to read the remaining part of the description he can click on the more hyperlink which will redirect to the profile link of the user. In this way, the user will also get more views on his profile. |
|
I'd just wait and let Eddie or the maintainers make a call on this!. Thanks for the contribution <3 |
|
Okay! Cool |
|
I think the orange border looks great also 👍 maybe try with the orange border and the new effects and see how it looks? |
|
@eddiejaoude Oh! I made the change! I think it looks good. Here's the video: Untitled.mp4should I change the code? and it looks slow in the video(because of compression) but it's good when tested on website |
looks good to me :) |
|
@ManishBisht777 @stevenovak123 thank you!! when it will be merged? 😃 |
|
Hey. One of the maintainers will look into it and take a decision |
|
Okay, got it! 👍🏼 |
|
@eddiejaoude can you please check the changes and merge if it's looking good? |
|
Hey. Give it a few days before mentioning. A good period would be 7 days, post that you can reach out to the maintainers on the discord server |
Oh okay, thanks for the info. |
|
@stevenovak123 I just committed a change to the profile username... the username will be underlined once hovered on it. what do you think about that? |
|
Imo it is a good addition, I'm just a person that helps maintainers review. Its the maintainers call if its a good addition to be merged into repo. So make the contribution and wait until a maintainer takes a decision |
done. 👍🏼 |
|
Please can you add a screenshot of the latest changes |
the latest change was the bold black username and underline transition when hovering
and hover effect can be seen in the video I sent earlier in the conversation :) |
* added hover effects to the card mainly added shadows, hover effects (mainly scaling up the cards), removed the hover border color, and made the profile username font a bit light and color to black * added orange border to hover * added underline to header while hovering the card Co-authored-by: Sai-Shankar <saishankar2803@gmail.com>
Added shadows hover effects (mainly scaling up the cards), removed the hover border color, and made the profile username font a bit light and color black
Fixes Issue
Changes proposed
added shadows,
added hover effect,
changed profile username text on the card to light and black
Check List (Check all the applicable boxes)
Screenshots
It's a hover effect so moving the cursor pointer on it will show you the changes, although you may see the change I made in the profile username text
Note to reviewers
Made these changes to make the UI better than before.
The suggestion is to remove the orange box containing profile view numbers which are on the top right of the profile picture. Instead what you can do is:
