Paratii-Video / paratii-portal

Component-based web-interface for uploading, browsing and organising content of Paratii's P2P network.
GNU General Public License v3.0
12 stars 5 forks source link

Refactor <Button /> component #737

Closed bent0b0x closed 6 years ago

bent0b0x commented 6 years ago

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

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

jrgarou commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

buttons

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

bent0b0x commented 6 years ago

This is great, thanks @pedrocasa !

jrgarou commented 6 years ago

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