Skip to content

Fix/buttons hover effects#2582

Open
bhavyamsharmaa wants to merge 5 commits intomeshery:masterfrom
bhavyamsharmaa:fix/buttons-hover-effects
Open

Fix/buttons hover effects#2582
bhavyamsharmaa wants to merge 5 commits intomeshery:masterfrom
bhavyamsharmaa:fix/buttons-hover-effects

Conversation

@bhavyamsharmaa
Copy link

Fixed #2389

###What does this PR do?

  1. Primary Button (Download)
    =>Normal: Saffron Yellow (#E4A624)
    =>Hover: Darker Saffron (#c98d0f) for visual feedback.

2 . Secondary Button (Download - Alternate)
=>Normal: Keppel Green (#00b39f)
=>Hover: Darker Green (#008a7a).

3.Tertiary Button (Quick Start)
=>Normal: Transparent background with a Green border.
=>Hover: Adds a subtle Light Green Tint (rgba(0, 179, 159, 0.1)) instead of filling it with a solid color, keeping it distinct from the secondary button

AresPhoenix345 and others added 4 commits January 4, 2026 10:47
- Changed primary button to saffron yellow (#E0C077)
- Changed secondary button to keppel green (#00b39f)
- Added tertiary button with transparent background

Signed-off-by: Aditya Tiwari <phoenixcodeforces@gmail.com>
Signed-off-by: Awanish Tripathi <phoenixcodeforces@gmail.com>
Signed-off-by: Bhavyam <positionbhavyamsharma@gmail.com>
@netlify
Copy link

netlify bot commented Feb 16, 2026

Deploy Preview for mesheryio-preview ready!

Name Link
🔨 Latest commit e712d53
🔍 Latest deploy log https://app.netlify.com/projects/mesheryio-preview/deploys/6993739bfd9adb0008b4adc6
😎 Deploy Preview https://deploy-preview-2582--mesheryio-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @bhavyamsharmaa, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refactors the styling of various buttons across the application to introduce distinct visual feedback on hover. It defines specific color transitions for primary, secondary, and tertiary button types, enhancing the user experience by making interactive elements more responsive and intuitive. The changes ensure a consistent and modern look for button interactions.

Highlights

  • Primary Button Hover Effect: The primary button (Download) now transitions from Saffron Yellow (#E4A624) to a darker Saffron (#c98d0f) on hover, providing clear visual feedback.
  • Secondary Button Hover Effect: The secondary button (Download - Alternate) changes from Keppel Green (#00b39f) to a darker Green (#008a7a) when hovered over.
  • Tertiary Button Hover Effect: The tertiary button (Quick Start) maintains a transparent background with a Green border normally, and on hover, it gains a subtle Light Green Tint (rgba(0, 179, 159, 0.1)) instead of a solid fill.
  • Button Class Refactoring: Existing button elements have been updated to use new CSS classes (import-secondary, import-tertiary) to apply the newly defined styling consistently.
Changelog
  • _includes/models/modal.html
    • Updated button classes from 'import' to 'import-secondary' and 'import-tertiary' for consistency with new styling definitions.
  • _layouts/single-page-model.html
    • Modified button classes from 'import' to 'import-secondary' and 'import-tertiary' to apply new button styles.
  • _sass/catalog.scss
    • Refactored button styling for the '.import' class, changing its default background color to saffron yellow and adding a darker saffron hover effect.
    • Redefined the '.import-secondary' class with a keppel green background and a darker green hover effect.
    • Introduced a new '.import-tertiary' class for buttons with a transparent background, a green border, and a light green tint on hover.
    • Added smooth transition effects to all primary, secondary, and tertiary button hover states.
    • Improved SCSS file formatting by adding blank lines for better readability and consistency.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

The pull request successfully implements the requested button hover effects and color updates. However, there is a discrepancy between the PR description and the implementation for the 'Download' buttons, which are currently using the green secondary style instead of the saffron primary style. Additionally, the tertiary button's white text on a transparent background may cause visibility issues on light-themed pages. Some minor CSS style inconsistencies were also noted.

@bhavyamsharmaa
Copy link
Author

"Hey @saurabhraghuvanshii @Rajesh-Nagarajan-11,

Submitting this fresh PR to wrap up the stale issue. I’ve implemented the missing hover states and fixed the color variables you asked for previously.

Ready for a look when you have a moment!

@bhavyamsharmaa bhavyamsharmaa marked this pull request as draft February 16, 2026 19:39
- Change Download buttons to use primary .import class
- Update tertiary button text color to #00b39f for visibility
- Fix SCSS formatting (spacing around >)

Signed-off-by: Bhavyam <positionbhavyamsharma@gmail.com>
@bhavyamsharmaa bhavyamsharmaa marked this pull request as ready for review February 16, 2026 20:51
@Bhumikagarggg
Copy link
Contributor

@bhavyamsharmaa Thank you for your contribution! Let's discuss this during the website call tomorrow at 6:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Website] Buttons should be of different colors on Models pages

4 participants