Implement design system buttons

[steff456]

Part of #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

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

Additional information

• This PR depends on first merging Add new colors and define green theme #292

Screenshots

#### Sidebar

Before

After

View Environment

Before

After

Edit Environment

Before

After

Create Environment

Before

After

[trallard]

Quick notes:

• 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

• Edit environment:

  • The Requested packages section has a green border - it should be gray
  • 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
  • Same with the active env dropdown, this has an extra green border

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

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

This is what we have on PST, and it works well because it scales accordingly.

// Define some useful variables for links styling consistency
//
//  Thickness of the underline for links
// the default will be either:
//  - 1px
// - 0.0625rem if it's thicker than 1px because the user has changed the text
//   size in their browser
$link-underline-thickness: unquote("max(1px, .0625rem)") !default;
// Offset of link underlines from text baseline
// The default is 3px expressed as ems, as calculated against the default body
// font size (on desktop).
$link-underline-offset: 0.1578em !default;

This is based on the screenshots @steff456, as I only had a glance at the code. But from this quick glance it looks already much better in terms of maintainability ✨ thank you

[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.

[smeragoel]

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.

Figma Link

[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.