feat: changed button hover effect

[dhananjay-Byte]

closes #1134

👷🏻 Changes made

Add a background color to show the differentiation between the buttons which is hovered by the user.

📸 Screenshots

Before:

After:

Summary by CodeRabbit

• Style
  • Updated the visual appearance of buttons with the ".solid" class, including color, background color, and transition effects.

[github-actions]

Hello @dhananjay-Byte, thank you for raising a pull request.

Currently, the pull request is marked as https://github.com/MilanCommunity/Milan/labels/status%3A%20todo%20%E2%8F%B3 so please wait until the maintainers/owner review it and provide you with feedback/suggestions to proceed further.

Feel free to reach out to Tamal on Twitter, or drop a mail at [email protected] if you think that this pull request is of critical priority.

Give us a ⭐ to show some support
Happy OpenSource 🚀

[tamalCodes]

Hi @dhananjay-Byte , the changes look good however I would recommend a small change.
In cases where there are two buttons side by side, the solid button can have a hover effect (which you applied), and the other button can be as it is (the previous hover effect).

Please make these changes, and ask for a review. I'll merge it soon.

[dhananjay-Byte]

got it

[tamalCodes]

Let's catch up 🙋🏻‍♂️

Hi there, it has been a while since we last had a conversation so I wanted to know if you are still working on this. Please drop a reply shortly so that we know you are active, feel free to convey any problem you face in the comments, or mail me at [email protected]

[dhananjay-Byte]

sorry for being inactive @tamalCodes ill patch up this work ASAP from now.

[coderabbitai]

Walkthrough

The changes in this pull request primarily focus on enhancing the user interface of the Milan Community website. The CSS styles for the ".solid" class in the GlobalButton component have been modified to provide a more distinctive hover effect for buttons, addressing user feedback.

Changes

File	Change Summary
.../Button/GlobalButton/Button.module.css	The color and background color of the ".solid" class have been changed. A transition property has been added to create a hover effect.

Assessment against linked issues (Beta)

Objective	Addressed	Explanation
Enhance the hover effect of buttons (#1134)	✅	The changes in the CSS styles for the ".solid" class in the GlobalButton component create a more distinctive hover effect.
Use the heading color for the hover effect (#1134)	❓	The background color has been changed to #28183B, but it's unclear if this is the heading color mentioned in the issue.
Improve user understanding that the button will navigate to another page (#1134)	❌	The changes made only affect the visual aspect of the button. There's no clear indication that the button will navigate to another page.

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• If you reply to a review comment from CodeRabbit, the bot will automatically respond.
• To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment
• Note: Review comments are made on code diffs or files, not on the PR overview.
• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai help to get help.
• @coderabbitai resolve to resolve all the CodeRabbit review comments.

Note: For conversation with the bot, please use the review comments on code diffs or files.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 8925170 and d5bfb6d.

Files selected for processing (1)

• src/components/Button/GlobalButton/Button.module.css (1 hunks)

Files skipped from review due to trivial changes (1)

• src/components/Button/GlobalButton/Button.module.css

[github-actions]

This pull request has been deployed to Vercel.

Latest commit:	d5bfb6d
✅ Preview:	https://milan-deoa1ue4b-iamtamal.vercel.app
🔍 Inspect:	https://vercel.com/iamtamal/milan/EwbMGSubgR7rXxLS5QreZ1w8kXap

View Workflow Logs