[TRACKING ISSUE] Button styles are inconsistent at best, and ineffective and confusing at worst

[jglovier]

TRACKING LIST:

• Second cta button on billing page has wrong text color #346 Second cta button on billing page has wrong text color
• Button not visible properly #313 Button not visible properly
• Primary call to action buttons should be right aligned, secondary buttons beside it to the left #360 Primary call to action buttons should be right aligned, secondary buttons beside it to the left

Expected experience: Button styles in the app should be consistent, and should help indicate what their function is.

Actual experience: Button styles are wildly inconsistent, and often very confusing. For example:

• The styles for disabled buttons do not clearly convey that they are disabled.
• Hover states are unhelpful and confusing (some buttons get darker on hover, some get lighter on hover, and others change color entirely on hover).
• In some places buttons are inconsistent in width.
• Where there should be only one primary call to action, in some places there are up to three.
• Alignment of buttons is inconsistent (in some views they are left aligned, while in others they are right aligned)

Screenshots:

[jglovier]

Interesting idea from @dswanson via #361 (comment)

Another affordance I have seen work is to de-emphasize the actions except when the specific row has focus.

When the user "selects" the row, that row is highlighted and then the actions are made more apparent.
This can be done by making the actions invisible until the highlighting, or just changing their opacity.

[tangollama]

@jglovier is this still relevant? If so, can we make it a HackDay issue?

[aayushsanghavi]

Sir, I would like to take up this issue. I am new to open source so your guidance would be appreciated.
Could you tell me where to start from and which files have these issues.

[jkleinsc]

@aayushsanghavi thank you for your interest. I believe this issue was mislabeled for hacktoberfest as I'm not sure there is anything to do here.

@jglovier isn't this a tracking issue vs a specific issue that folks can work on? Not sure why it has the hacktoberfest label on it.

[Lily418]

Looks like the final item in the checklist has been closed by #983 I think this can now be closed?

[donaldwasserman]

@Lily418 Thanks, looks good.