Creating a style guide for the buttons

[nsunami]

I was working on abstracting and refactoring the dialog modals (#695) and thought that it would be helpful to have style guides for the buttons.

Perhaps the place to start are the success (e.g., "Publish"), error (e.g., "Delete"), and secondary (e.g., "Cancel") buttons. For each button, we want to specify how they look like in the light and dark modes.

Current implementations

Publish Module Button

className="rounded border border-emerald-500 px-2 py-1.5 text-sm font-medium leading-4 text-emerald-500 hover:bg-emerald-100 focus:outline-none focus:ring-2 focus:ring-emerald-600 focus:ring-offset-2 focus:ring-offset-emerald-50 dark:border-emerald-200 dark:text-emerald-200 dark:hover:bg-emerald-900"

Delete Module Button

className="mr-2 inline-flex rounded-md bg-red-50 py-2 px-4 text-sm font-medium text-red-700 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-0 dark:border dark:border-gray-600 dark:bg-gray-800 dark:text-red-500 dark:hover:border-gray-400 dark:hover:bg-gray-700"

Cancel Button

className="mr-2 inline-flex justify-center rounded-md bg-red-50 py-2 px-4 text-sm font-medium text-red-700 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-0 dark:border dark:border-gray-600 dark:bg-gray-800 dark:text-red-500 dark:hover:border-gray-400 dark:hover:bg-gray-700"

[chartgerink]

GitHub issues can sound so commanding 😅

I hear you on the styleguide - we used to have something more like this in Figma but that is no longer in use. The effort that always has to be put in to make sure design + code are synchronized is also too much for our scale.

We might implement something like Storybook to create a list of our components - it may also help us identify areas for improvement. What do you think? We can discuss this also in terms of our planning meeting coming up.

[nsunami]

@chartgerink Oh, are you referring to the title of the issue being commanding? 😅

I've never used Storybook. But I'm open to learning! I think the goals for a style guide are:

1. Speed up the dev process by having smaller number of choices
2. Keep the look & feel consistent across the app

[chartgerink]

I will make a note to include storybook based components (or something similar) in a future revision as we redo components. Closing this until then.