Refactor Components to Use BEM Convention

[hughsaffar]

Why?
Refactoring components to adopt the BEM (Block Element Modifier) convention for styling and utilizing TailwindCSS as the default styling framework. This change aims to enhance the clarity, maintainability, and customization of the components' styles.

What?

• BEM Convention: Each component is now styled using the BEM convention, providing a clear and structured naming system for CSS classes.
• TailwindCSS Defaults: Default styles are applied using TailwindCSS utilities, ensuring a consistent look and feel out-of-the-box.
• Customization: Users can easily customize the appearance by overriding the appropriate BEM classes.

Testing:
The changes have been manually tested to ensure that they function correctly. However, it is highly recommended that @n1crack conducts a comprehensive test drive to verify all aspects of the integration and functionality.

---

Thank you for considering this update. I believe this refactor will significantly improve the maintainability and flexibility of the Vuefinder.

[n1crack]

Thanks for the contribution, I will check it asap when I'm home.

[n1crack]

There was some errors, doesn't allow to use @ apply with custom classes.
In settings page, Its better to use dropdown without flex. for better readability.

Not fixed yet:
Context menus' borders are not visible.
Last, about the icons shown below. Those icons seems they doesn't have standard colors/sizes

Other than that, seems ok. (Still I'm not a fan of using styles in sfc's. but its ok if it's useful)

[hughsaffar]

@n1crack Sounds good! Let me know if you need help.

[hughsaffar]

@n1crack was there any specific error that blocking this PR?

[n1crack]

Another project and other things steal my time :). There are small issues, I want to be sure the appearance is exact same as before. It will be merged this weekend.

Sorry about the delay

[hughsaffar]

Another project and other things steal my time :). There are small issues, I want to be sure the appearance is exact same as before. It will be merged this weekend.

Sorry about the delay

I appreciate it. Let me know if I can help.

[n1crack]

Separated the styles from sfc files. created their own css (mostly).

when we use apply, i think it should be in @ layer, otherwise the result can be different. anyway I think it is ok now.

Thanks again.. I will wait for your custom theme :)

[hughsaffar]

Separated the styles from sfc files. created their own css (mostly).

when we use apply, i think it should be in @ layer, otherwise the result can be different. anyway I think it is ok now.

Thanks again.. I will wait for your custom theme :)

Super! I appreciate it. ❤️