JabRefOnline icon indicating copy to clipboard operation
JabRefOnline copied to clipboard

Enhancement: Add Hover Opacity Effect to Download Buttons on Homepage

Open RAJVEER42 opened this issue 6 months ago • 7 comments

Is your suggestion for improvement related to a problem? Please describe.
Not exactly a problem, but a minor UX improvement. The three download buttons at the bottom of the homepage (Apple Silicon, macOS Intel, and Portable Downloads) currently don’t provide visual feedback when hovered over, which can make them feel a bit static.

Describe the solution you'd like
I’d like to add a subtle hover effect — such as a slight opacity change or shadow — to the download buttons. This would make the interface feel more responsive and modern, and help users visually identify clickable elements.

Additional context
This is a small UI polish to improve interactivity. Here’s a screenshot for reference:

Image Image

Happy to submit a PR if approved!

RAJVEER42 avatar Jun 29 '25 12:06 RAJVEER42

Hi, RAJVEER42! Thanks for reporting!

I moved your issue to JabRef/JabRefOnline repo, as this is the repo that is responsible for the website. JabRef/jabref is for Java app

InAnYan avatar Jun 29 '25 13:06 InAnYan

✌️ @InAnYan Thank you for moving the issue to the appropriate repo! 🙌 I’d love to go ahead and implement the proposed UI enhancements. Could you please assign this to me so I can start working on it? 😊

RAJVEER42 avatar Jun 29 '25 13:06 RAJVEER42

I think you should write /assign-me. Just a GitHub comment

InAnYan avatar Jun 29 '25 13:06 InAnYan

/assign-me

RAJVEER42 avatar Jun 29 '25 13:06 RAJVEER42

Hey, @InAnYan

It looks like the /assign-me command isn't supported in this repo. Could you please assign this issue to me manually? I'd love to start working on it. Thanks! 🙌

RAJVEER42 avatar Jun 29 '25 13:06 RAJVEER42

Yep

InAnYan avatar Jun 29 '25 13:06 InAnYan

Hi @InAnYan 👋,

I've implemented a few UI enhancements to improve the interactivity and user experience in the download section:

Enhancements made:

  • Added hover:opacity-90, hover:shadow-lg, and hover:scale-y-105 effects to the Apple Silicon and macOS Intel buttons for more visual feedback.
  • Introduced hover underline effects to the purple links beneath the download buttons for better clarity.
  • Introduced hover underline effects to the purple links "Or see all download options" for better clarity.
  • Extended the hover underline effects to purple links for Linux and Windows users to maintain consistency.

🚧 Note: I wasn’t able to apply hover effects to the main "Download for Mac" button, but if you're okay leaving it as-is, I'm totally fine with that.

Let me know if you'd like any changes or refinements!

Thanks again for the opportunity to contribute 😊

Best,
Rajveer

RAJVEER42 avatar Jun 29 '25 16:06 RAJVEER42