style: change the span to button for badword element #666

[Gopal-001]

**My PR closes #666 **

👨‍💻 Changes proposed(What did you do ?)

Did few changes:

1. Replaced span with button.
2. Added some styling to button and on hover button.
3. Added a gap between the text and button.

✔️ Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• This PR does not contain plagiarized content.
• The title and description of the PR is clear and explains the approach.

Note to reviewers

📷 Screenshots

Normal :




On hover:

[vercel]

Someone is attempting to deploy a commit to the dunsin's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Gopal-001]

@Dun-sin pls review the code, glad to have some feedback.
I was facing issue to go to the component as i visited the actually site (not able to connect to some user... something like that) and also tried to bypass the searching for user in local env. But when nothing works so tried to directly call the badwords component via app to see the changes, so if there is some styling change required pls tell.

[Dun-sin]

@Gopal-001 please stick to the issue description and just change it from button to span, if you have any UI suggestion change, please create a seperate issue

[Gopal-001]

@Gopal-001 please stick to the issue description and just change it from button to span, if you have any UI suggestion change, please create a seperate issue

@Dun-sin reverted the style changes however removed the cursor-pointer as button automatically handles it.

[Dun-sin]

You did great @Gopal-001, thanks for contributing, I hope you will stick around and continue to contribute to this project.

Consider giving this project a star, sharing the project with your friends, and joining the community discord server if you haven't for more resources and opportunities to connect with others. 👉🏽here👈🏽