Update primary button style

Author: gtsiolis

components/dashboard/src/components/Button.tsx

@@ -49,15 +49,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 className={classNames(
                     "cursor-pointer my-auto",
                     "text-sm font-medium whitespace-nowrap",
-                    "rounded-md focus:outline-none focus:ring transition ease-in-out",
+                    "rounded-xl focus:outline-none focus:ring transition ease-in-out",
                     spacing === "compact" ? ["px-1 py-1"] : null,
                     spacing === "default" ? ["px-4 py-2"] : null,
-                    type === "primary"
-                        ? [
-                              "bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600",
-                              "text-gray-100 dark:text-green-100",
-                          ]
-                        : null,
+                    type === "primary" ? ["bg-gitpod-kumquat", "text-gray-800 dark:text-gray-900"] : null,
                     type === "secondary"
                         ? [
                               "bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600",

components/dashboard/src/components/SelectableCardSolid.tsx

@@ -27,19 +27,19 @@ function SelectableCardSolid(props: SelectableCardSolidProps) {
 
     return (
         <div
-            className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group transition ease-in-out ${
+            className={`rounded-xl px-2 py-2 flex flex-col cursor-pointer group transition ease-in-out ${
                 isFocused ? "ring-2 ring-blue-500" : ""
             } ${
                 props.selected
-                    ? "bg-gray-800 dark:bg-gray-100"
-                    : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
+                    ? "border-4 border-gray-500 dark:border-gray-50"
+                    : "hover:bg-gray-100 dark:hover:bg-gray-800 border-4 border-gray-100 dark:border-gray-800"
             } ${props.className || ""}`}
             onClick={props.onClick}
         >
             <div className="flex items-center">
                 <p
                     className={`w-full pl-1 text-base font-semibold truncate ${
-                        props.selected ? "text-gray-100 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
+                        props.selected ? "text-gray-600 dark:text-gray-400" : "text-gray-600 dark:text-gray-400"
                     }`}
                     title={props.title}
                 >

components/dashboard/src/index.css

@@ -54,7 +54,7 @@
 @layer components {
     /* TODO: deprecate button styles in favor of using <Button> component and handling there */
     button {
-        @apply cursor-pointer px-4 py-2 my-auto bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600 text-gray-100 dark:text-green-100 text-sm font-medium rounded-md focus:outline-none focus:ring transition ease-in-out;
+        @apply cursor-pointer px-4 py-2 my-auto bg-gitpod-kumquat text-gray-800 text-sm font-medium rounded-xl focus:outline-none focus:ring transition ease-in-out;
     }
     button.secondary {
         @apply bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-100 hover:text-gray-600;

components/dashboard/tailwind.config.js

@@ -28,12 +28,8 @@ module.exports = {
                 sky: colors.sky,
                 rose: colors.rose,
                 "gitpod-black": "#161616",
-                "gitpod-gray": "#8E8787",
                 "gitpod-red": "#CE4A3E",
-                "gitpod-kumquat-light": "#FFE4BC",
                 "gitpod-kumquat": "#FFB45B",
-                "gitpod-kumquat-dark": "#FF8A00",
-                "gitpod-kumquat-darker": "#f28300",
                 "gitpod-kumquat-gradient": "linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)",
             },
             container: {