Description

Currently, many components in the Music Blocks repository use inline styles for UI elements. This approach makes it difficult to maintain, scale, and enforce a consistent design system across the application. Inline styles also lack the flexibility of reusable CSS classes, leading to duplicated styles and inconsistent theming.

Expected Behavior

• Migrate all inline styles to a structured CSS/SCSS approach.
• Ensure styles are modular, reusable, and follow best practices.
• Improve maintainability by following a consistent styling standard across all components.

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand the issue and the proposed fix.
• I am actively working on this issue . Working on this issue by others will lead to unnecessary duplication of efforts.

Thank you for contributing to the project!

📚 See [contributing instructions](https://github.com/sugarlabs/musicblocks/blob/master/README.md).

🙋🏾🙋🏼 Questions? [Community Matrix Server](https://matrix.to/#/#sugar:matrix.org).