Update primary button style

[gtsiolis]

Description

Reviving parts of #16433 to update the primary button style now that #18283 has been merged. 📙

Besides the button color change, this will also increase the border radius to match the button radius used in the marketing website. Cc @chrifro @taliamoyal

Additionally, this will update the theme selection card to avoid clashing with the onboarding.

Summary generated by Copilot

BEFORE	AFTER

How to test

Log in and navigate through the dashboard to observe the new primary button style. 🐈‍⬛

Documentation

Preview status

Gitpod was successfully deployed to your preview environment.

• 🏷️ Name - gt-update-b745e5f9b1
• 🔗 URL - gt-update-b745e5f9b1.preview.gitpod-dev.com/workspaces.
• 📚 Documentation - See our internal documentation for information on how to interact with your preview environment.
• 📦 Version - gt-update-primary-button-style-gha.13852

Build Options

Build

• /werft with-werft
  Run the build with werft instead of GHA
• leeway-no-cache
• /werft no-test
  Run Leeway with --dont-test

Publish

• /werft publish-to-npm
• /werft publish-to-jb-marketplace

Installer

• analytics=segment
• with-dedicated-emulation
• workspace-feature-flags
  Add desired feature flags to the end of the line above, space separated

Preview Environment

• /werft with-local-preview
  If enabled this will build install/preview
• /werft with-preview
• /werft with-large-vm
• /werft with-gce-vm
  If enabled this will create the environment on GCE infra
• with-integration-tests=all
  Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh
• with-monitoring

/hold

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[chrifro]

Great change to align product and website more ✨

Some thoughts:

• nice border-radius 💫
• the orange seems quite pale, it's not the same color as we use on the website, is it?
• the disabled and enabled buttons are very similar and are difficult to distinguish. Would suggest adding a hover effect and more color difference to it
• FWIW, we just slightly updated the primary button for the website with a gradient style. Could look very cool in the product as well. See here

[gtsiolis]

Hey @chrifro! Thanks so much for the feedback.

nice border-radius 💫

Thanks! 🙌

the orange seems quite pale, it's not the same color as we use on the website, is it?

Yeah, but the specific color looks quite good in dark theme, right?

For the light theme I still find it quite bad, but I just realized we're using the black background for such colors in light themes, and I was about to do just that, see screenshot below. 💡

Light	Dark

the disabled and enabled buttons are very similar and are difficult to distinguish. Would suggest adding a hover effect and more color difference to it

I opted out from a hover state for now to avoid having too many kumquat colors around but yeah, I'll try something in this or a follow PR. Disabled buttons are a cancer to UX, and we should remove them all if possible. 🦀

FWIW, we just slightly updated the primary button for the website with a gradient style. Could look very cool in the product as well. See here

Awesome, I wanted to reach out about this. Superb. ✨

[filiptronicek]

This looks really good, great job with it, George.

Not sure if you had anyone specific in mind for the review, but as for me, .

[gtsiolis]

Thanks for taking a look, @filiptronicek. 🌮

Made a few more minor changes:

• Align the log-in buttons to use the same border radius 🤓
• Update some empty states background colors (if only we had a region component for this) 😃

---

I'd like to have another pair of eyes on the UX changes.

@selfcontained any thoughts or strong objections against the colors used on light vs. dark theme? Cc @svenefftinge

[selfcontained]

Changes lgtm.

The only thing I noticed was the hover/active state of the primary button in the light theme was a bit too subtle for me to see.

[gtsiolis]

Thanks for taking a look, @selfcontained. 🌮

Nice catch also on the subtle hover state of the button—for more context, this is by design to also mimic the subtle hover state of the button on the website. 💡

Rebased and pushed.

Removing bold.

/unhold