Update primary button style

Author: gtsiolis

components/dashboard/src/components/Button.tsx

@@ -49,13 +49,13 @@ 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",
+                              "bg-amber-900 dark:bg-gray-100 hover:bg-gray-800 dark:hover:bg-gray-50",
+                              "text-gray-100 dark:text-gray-900",
                           ]
                         : null,
                     type === "secondary"

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-gray-900 dark:bg-gray-100 hover:bg-gray-800 dark:hover:bg-gray-50 text-gray-100 dark:text-gray-900 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;