Implement design system buttons

[steff456]

Part of https://github.com/conda-incubator/conda-store-ui/issues/288

Description

This pull request:

• Implements buttons following the design system

Main buttons

Default

Hover

Focus

Disabled

Icon buttons

Default

Hover

Focus

Toggle switch

Default

Hover / Focus

Pull request checklist

• [x] Did you test this change locally?
• [x] Did you update the documentation (if required)?
• [x] Did you add/update relevant tests for this change (if required)?

Additional information

• [x] This PR depends on first merging https://github.com/conda-incubator/conda-store-ui/pull/292

Screenshots

#### Sidebar **Before** **After** #### View Environment **Before** **After** #### Edit Environment **Before** **After** #### Create Environment **Before** **After**

[smeragoel]

• View environment: there is a slight shade difference (now) between the first environment and the rest. Is this a hover state? If so, this might need tweaking as the change is barely noticeable

I didn't add this component to the design system, but I will.

• The toggle button (white) almost blends with the background. There is a shadow, but it is not enough to make it stand out. Can we add a border instead? @smeragoel

Okay, I will tweak the design so it's visible.

• There is not enough contrast on the disabled buttons (text vs background) - thought disabled buttons would be gray? @smeragoel

They were supposed to be, but because of the greyscale design version, I used a lighter green. Let me work on a fix.

• I am +1 on underlining links and items on focus - though the underline is correct against the text. Can we add an underlined offset?

I have added the offset to the designs as well!

[trallard]

I think we can keep the disabled buttons gray here since this is the "default theme" and deal with the gray theme as the customisation it is

[smeragoel]

Here's the new design for the toggle switch: https://www.figma.com/file/nKifk755TFMsK2SF082igS/conda-store-UI-design?type=design&node-id=1390%3A1571&mode=design&t=Pp6IQLDsLqaq4wps-1

Right now the toggle switch implies off/on states, which is not the most accurate signal to send, since we are just switching between interaction modes. I looked at examples from https://mui.com/material-ui/react-switch/ and used them as inspiration for the switch.

I also added clearer labels and interaction states. The icons (especially the gear for UI) and the content of the labels (GUI?) is up for discussion.

[trallard]

I also added clearer labels and interaction states. The icons (especially the gear for UI) and the content of the labels (GUI?) is up for discussion.

I like these a lot - I prefer the one with the < > as the gear sends my mind straight to settings-like which might not be entirely accurate 🤷🏽‍♀️

GUI and YAML seem perfectly fine as labels

[steff456]

The latest commit fixes the disabled state and the hover style for buttons using the new guidelines.

It has some work in progress for the switch button, but this PR still needs more changes that I will work on after coming back from PTO.

[steff456]

@trallard @smeragoel I just pushed the changes that address all the comments. I also updated the screenshots of all the views in the description and added the switch toggle states to it.

I just want to note that I'm unsure on the style of the dropdown menu style, so this PR only changed the style of the down arrow button that is part of the component. We can iterate on the style of the actual list in a follow up PR.

This PR is ready for another review!

[kcpevey]

I think this should be reviewed by @smeragoel before merging.

[steff456]

One thing I noticed in the sidebar is that the bullets and the environment names are in green when it should be dark grey (secondary-800) by default.

This PR is only focusing on the buttons, I'm currently working in a follow up PR for styling the sidebar as you described in the comment.