Description

Currently, the extension is using an outdated Button component, which needs to be replaced with the new Button component. The new Button component is available from ui/components/component-library.

This is a massive undertaking by itself and creating a single PR would be too large. Smaller PRs can be submitted against this issue to ensure easier review and gradual improvements. PRs should contain no more than 3 files

Technical Details

• The old Button component (ui/components/ui/button/button.component.js)
• The new Button component (ui/components/component-library/button/button.js) storybook documentation
• Component APIs are slightly different so ensure all props have been migrated appropriately

Acceptance Criteria

• The old Button component (ui/components/ui/button/button.component.js) is completely replaced with the new Button component (ui/components/component-library/button/button.js) throughout all files included in the PR.
• The component APIs are updated to reflect the changes in the new Button component.
• Each Pull Request (PR) should include no more than 3 files with Button replacements.
• The code changes should pass Jest tests, linting, and all CI checks without any errors.
• The PR must include before and after screenshots of the UI to ensure there are no visual regressions.

If the acceptance criteria are not met, PRs may be closed.

Difficulty: Intermediate

Good first issue for: External contributors who are familiar with running the extension locally, have knowledge of React, component props, Jest tests, linting, and Storybook, and want to contribute to improving the cohesiveness of UI in the extension