Feat: Implement custom button

[Lukas0912]

You can test the buttons on the /elements page

[marinovl7]

Left detailed comment about the theming and the coloring of the button component. Generally make use of existing functionalities and features of the libraries we use and do not think about how to implement this alone. Everything will be handled by the libraries for you, thats why we use them, not to define and do everything ourselves!

Also make sure you always merge main into your branch before creating a PR and always check for conflicts!

[marinovl7]

remove @constructor

[marinovl7]

This file contains a lot of duplicated code. Generally all cases could be summarized in one and there is no need of having the same component with few changes for all cases. Imagine having 100 variants for the button, this simply will not work and the file will grow a lot. It's considered a good practice to separate the concerns (here styling and react component).

Nevertheless we use tailwindcss, which means we do not use style on the component but everything will be with className="tailwindClasses". Also you do not need to check for the theme here, neither you do need the useEffects for the theme switch. Everything you need will be handled by NextUI and TailwindCSS. Colors and everything will be defined in thiw way, not custom css colors: Check here. Also check the existing tailwind.config.js and research how to apply all colors and customize them there.

[Lukas0912]

Since the tailwind classes work properly now I refactored everything and made use of the tailwind classes. The colors when hovering don't align perfectly with Figma because NextUI automatically lowers the opacity when hovered. The alternative would have been to disable this functionality but this could also have an effect on other components.

[marinovl7]

LGTM!