Move css to component scope

[farhanlatheef]

• Ref: #2148

Description

• Changed: Moved button css to component level.

Checklist

• [x] I have made corresponding changes to the documentation. ~- [ ] I have updated the types definition of modified exports.~
• [x] I have verified the functionality in some of the neeto web-apps. ~- [ ] I have added tests that prove my fix is effective or that my feature works.~ ~- [ ] I have added proper data-cy and data-testid attributes.~
• [x] I have added the necessary label (patch/minor/major - If package publish is required).

Reviewers

[farhanlatheef]

@josephmathew900 _a Code explanation: https://farhan-ck.neetorecord.com/watch/b1f86e9e-8240-46b1-84a2-aa005aefbd8d

cc: @praveen-murali-ind

[neetogit-bot[bot]]

@farhanlatheef CI is red.

[farhanlatheef]

@praveen-murali-ind _a

[praveen-murali-ind]

Found some edge cases of this approach.

1. neetoUI provides helper classes for managing the text color, background color, border color, flex, text alignment etc. Since the styles are clubbed with the component in this approach, if a page is not using any neetoUI components, these utility classes won’t work. We are using these classes everywhere in neeto products.

2. Some of the neetoUI component classes are being used in host applications to reuse the neetoUI styles. In the new approach, reusing the component classes won’t work if the neetoUI component is not being used on that page.

I had a discussion with @josephmathew900 and @AbhayVAshokan regarding these issues. We will check the feasibility of purging the unused CSS instead of the component-scoped CSS approach. Closing this PR and related PRs in host applications. Will do a separate POC for purging CSS for more optimisations.

cc @farhanlatheef