Refactor <Button /> component

[bent0b0x]

There are a few things we should rethink about Button.js

• [ ] it exports raw css styles used by other components
• [ ] it maps properties like props.white to Colors.white, when in fact I think we should just pass in colors directly (there is no point to this abstraction IMO)
• [ ] perhaps the button is not versatile enough to work for all of our use cases. We should work w/ @pedrocasa to outline the different kinds of re-usable buttons we want and write components for all of them, so that we can easily plug them in anywhere we need

cc @jrgarou, let's continue our discussion here (and feel free to bring up any other points)!

[jrgarou]

Great, @bent0b0x

it maps properties like props.white to Colors.white, when in fact I think we should just pass in colors directly (there is no point to this abstraction IMO)

I disagree, but we must define the colors by states: something pretty basic like normal, error, success, warning, disabled, etc. The theme defines these colors. And share these styles(color ou background-color).

Styles

There are two kinds of buttons currently, the button with the colored background and text buttons. We could create this two kind of buttons. I think it's enough.

Button

<Button /> It's uppercase, have background-color(share this style), dropshadow(? @pedrocasa can confirm), text center(vertical and horizontal), border-radius(share the radius value, perhaps UIConstans). Its color should be white, and its background-color should be contrasted with that(yellow could be hard to contrast).

TextButton

<TextButton /> It's uppercase, have colored text(share this style), dropshadow(? @pedrocasa can confirm)

Extra:

TextButton link

This is about the <a> or <button> inside a text or not. It's, basically, the TextButton without uppercase, and perhaps an underline text-decoration

[bent0b0x]

I disagree, but we must define the colors by states: something pretty basic like normal, error, success, warning, disabled, etc. The theme defines these colors. And share these styles(color ou background-color).

@jrgarou I think you are right, this system sounds better 😃

And in general I think everything you have outlined sounds great; I think we'd want some help from @pedrocasa (when he has time, I know this may not be top priority) to define all of the button states/designs and then we can refactor and build them out

[pedrocasa]

I've created 3 states for each button

1 - Regular --> just the button with the original color of it 2- Hoover --> @jrgarou will help us to define how the brightness effect will work 3- Disabled--> buttons with 30% of opacity

(click on the image to open it on original size)

[bent0b0x]

This is great, thanks @pedrocasa !

[jrgarou]

Working on that in https://github.com/Paratii-Video/paratii-portal/tree/fix/ui-design