Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] Add a twisted arrow pointing to one icon of the phone at the bottom #195

Open
DevilsAutumn opened this issue Oct 9, 2024 · 20 comments · May be fixed by #208
Open

[UI] Add a twisted arrow pointing to one icon of the phone at the bottom #195

DevilsAutumn opened this issue Oct 9, 2024 · 20 comments · May be fixed by #208
Assignees
Labels
frontend good first issue Good for newcomers hacktoberfest priority: high issues which should be resolved on high priority

Comments

@DevilsAutumn
Copy link
Member

Description

We have a mobile on our Website page which contains some icons, those icons are actually our social media link. At Pycon India 2024 , I got this feedback from a lot of people that its not clear that those links are clickable. Hence to put more focus on it we should add a twisted arrow with "click here" written on it. It should be completely responsive.

Use Case

No response

Screenshot

No response

@DevilsAutumn DevilsAutumn added good first issue Good for newcomers frontend priority: high issues which should be resolved on high priority hacktoberfest labels Oct 9, 2024
@Nemil21
Copy link

Nemil21 commented Oct 10, 2024

Is it okay if i add the arrow in the mobile screen itself? as while making it responsive it would look cleaner.

@DevilsAutumn
Copy link
Member Author

Is it okay if i add the arrow in the mobile screen itself? as while making it responsive it would look cleaner.

Didn't get your point. Maybe if you could put a ss or video for demonstration, it would be helpful.

@Mayuphapale
Copy link

i would like to work on this issue ..please assign this issue to me

@Nemil21
Copy link

Nemil21 commented Oct 13, 2024

Is it okay if i add the arrow in the mobile screen itself? as while making it responsive it would look cleaner.

Didn't get your point. Maybe if you could put a ss or video for demonstration, it would be helpful.

Okay I will try to make an image representation for it.

@Mayuphapale
Copy link

Mayuphapale commented Oct 13, 2024

image
is this type of changes i have to do in the mobile so the users get to know that this icons are clickable ???

@DevilsAutumn
Copy link
Member Author

image is this type of changes i have to do in the mobile so the users get to know that this icons are clickable ???

no

@nitin-1926
Copy link
Contributor

@DevilsAutumn I would like to work on this, please assign it to me.

@nitin-1926
Copy link
Contributor

@DevilsAutumn let me know if something like this is good enough. Let me know if any change in color, direction or icon is needed
Screenshot 2024-10-19 at 11 38 24 AM

@DevilsAutumn
Copy link
Member Author

@nitin-1926 I was thinking the arrow to be outside the phone pointing to the icon, this is affecting the original feel of a phone.

@nitin-1926
Copy link
Contributor

@DevilsAutumn Something like this?
Screenshot 2024-10-19 at 1 03 10 PM

@DevilsAutumn
Copy link
Member Author

curved_arrow_2
Can we use this arrow with click here written with it?

@nitin-1926
Copy link
Contributor

We can, but I thought since it's already mentioned in the paragraph as "Click the icons to follow our accounts and never miss updates on upcoming events, contributions, and more!" so it may sound repetitive.
Do you want the "Click here" text to be floating?

@nitin-1926
Copy link
Contributor

@DevilsAutumn Where should the text be placed?
Screenshot 2024-10-19 at 1 56 21 PM

@DevilsAutumn
Copy link
Member Author

@DevilsAutumn Where should the text be placed?

Screenshot 2024-10-19 at 1 56 21 PM

Yess i think its perfect, just keep that orange circle a little more behind that phone and also make sure its responsive.

@nitin-1926
Copy link
Contributor

Cool, I will do this. The orange circle and green circle are 1 image only. If I push it up, green one will go beyond the section. I think we can let it be like this only as it is today.
Also how should it be in mobile version? I tried something but it doesn't feel that good.
Screenshot 2024-10-19 at 2 59 54 PM

@DevilsAutumn
Copy link
Member Author

Cool, I will do this. The orange circle and green circle are 1 image only. If I push it up, green one will go beyond the section. I think we can let it be like this only as it is today. Also how should it be in mobile version? I tried something but it doesn't feel that good. Screenshot 2024-10-19 at 2 59 54 PM

Umm okay,
I think for mobile version we can move that arrow to top right corner of the phone such that it points the instagram icon?

@nitin-1926
Copy link
Contributor

nitin-1926 commented Oct 20, 2024

@DevilsAutumn Like this??
Screenshot 2024-10-20 at 4 36 46 PM

@DevilsAutumn
Copy link
Member Author

I guess we can move the arrow over the phone and closer to the icon.

@nitin-1926
Copy link
Contributor

Is this good?
Screenshot 2024-10-21 at 9 55 04 AM

@DevilsAutumn
Copy link
Member Author

DevilsAutumn commented Oct 21, 2024

@nitin-1926 perfect👍

@nitin-1926 nitin-1926 linked a pull request Oct 21, 2024 that will close this issue
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend good first issue Good for newcomers hacktoberfest priority: high issues which should be resolved on high priority
Projects
Status: In Progress
Development

Successfully merging a pull request may close this issue.

4 participants