Fix: Update button colors on Models pages - #2393
Conversation
✅ Deploy Preview for mesheryio-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @phoenixcodeforces-blip, 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 addresses issue #2389 by implementing a comprehensive update to the button styling across the Models pages. The changes ensure that primary and secondary action buttons adhere to specified color palettes, and a new tertiary button style is introduced for additional design flexibility. Specific buttons, such as 'Add New Model' and 'Quick Start', have been re-categorized to align with the new secondary styling, enhancing visual consistency and user experience. Highlights
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the button colors on the Models pages to match the design requirements, addressing issue #2389. The primary action buttons are changed to saffron yellow, secondary buttons to keppel green, and a tertiary button class is added with a transparent background. The 'Add New Model' and 'Quick Start' buttons are updated to use secondary styling. The changes involve modifications to _sass/catalog.scss, _layouts/single-page-model.html, and _includes/models/modal.html. I have identified a potential issue with the color definition for the .import-secondary class in _sass/catalog.scss.
|
Thank you for your contribution! |
|
Hi @Rajesh-Nagarajan-11 |
|
Thank you for your contribution! Add it as an agenda item to the meeting minutes, if you would 🙂 |
kishore08-07
left a comment
kishore08-07
left a comment
There was a problem hiding this comment.
@AresPhoenix345
Re-read the issue description and the desired state.The issue requires three action states (Primary, Secondary, and Tertiary), but only two are currently implemented.Add the tertiary action as specified.
@kishore08-07 Referring to the diff, the tertiary-action exists, I am not sure what the comment is about? please clarify. |
@AresPhoenix345 |
the description of the issue, does not describe/mention adding a new button
@kishore08-07 Did you read the issue? |
|
@AresPhoenix345 |
|
@AresPhoenix345 we have three buttons and each buttons should used diffrent theme and you defined primary secondary tertiary. So used each for one buttons |
- 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>
a0727ab to
17b07f5
Compare
|
Hi @saurabhraghuvanshii Ready for review! |
|
@AresPhoenix345 saffron is not saffron Please check |
Signed-off-by: Awanish Tripathi <phoenixcodeforces@gmail.com>
@saurabhraghuvanshii It was mentioned to be saffron yellow, however I have made it darker in shade. |
|
this is the updated state |
|
@AresPhoenix345 look lgtm!! |
|
Hi @fitzergerald, could you please review this once and let us know if the required changes are desirable? |
|
Hi @saurabhraghuvanshii |
|
@AresPhoenix345 yeah lgtm!!, but I would suggest you to present this item in upcoming meeting so that other can also share their thoughts because it's ui change. Or discuss on slack once. |
Rajesh-Nagarajan-11
left a comment
Rajesh-Nagarajan-11
left a comment
There was a problem hiding this comment.
Can you implement a hover effect for these buttons?
I can, please elaborate what the hover effect should do? like changes to implement... |
@AresPhoenix345 Any updates on this? Was this item discussed in the Websites meeting (held every Monday at 7:00 AM CT | 6:30 PM IST)? |
|
Hi @kishore08-07 I was a bit occupied in academics, will update this soon to add hover effects as instructed by @Rajesh-Nagarajan-11. |
Signed-off-by: Aman Yadav <phoenixcodeforces@gmail.com>
|
Hi @Rajesh-Nagarajan-11 @saurabhraghuvanshii I have updated/added and tested the hover effect . Ready for merge! |
|
@AresPhoenix345 Please resolve the conflicts |
5 participants
Description
This PR fixes #2389 by updating the button colors on the Models pages to match the design requirements.
Changes Made
.import) to saffron yellow (#EBC017).import-secondary) to keppel green (#00B39F).import-tertiary) with transparent background and 1px solid borderFiles Modified
_sass/catalog.scss- Updated button color classes_layouts/single-page-model.html- Changed "Add New Model" button class_includes/models/modal.html- Changed "Quick Start" button classTesting
Screenshots
Notes for Reviewers
Please verify the color values match the design specifications in #2389.
[Signed commits](https://docs.meshery.io/project/contributing#signing-off-on-commits-developer-certificate-of-origin)