WIP: added button component

improve disabled and hover states

app/View/Components/Button.php

@@ -16,35 +16,20 @@ class Button extends Component
 
     public function classes(): string
     {
-        $base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition ' .
-            'duration-150 ease-in-out';
+        $base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out';
 
-        $classes = match ($this->variant) {
-            'secondary' => [
-                'base' => 'bg-secondary text-text',
-                'hover' => 'hover:bg-secondary-dark',
-                'disabled' => 'disabled:bg-secondary',
-            ],
-            'outline' => [
-                'base' => 'bg-outline border border-primary text-primary',
-                'hover' => 'hover:bg-primary hover:text-text-inverted',
-                'disabled' => 'disabled:bg-outline disabled:text-primary',
-            ],
-            default => [
-                'base' => 'bg-primary text-text-inverted',
-                'hover' => 'hover:bg-primary-dark',
-                'disabled' => 'disabled:bg-primary'
-            ]
-        };
+        $variants = [
+            'primary' => 'bg-primary text-text-inverted hover:bg-blue-700',
+            'secondary' => 'bg-secondary text-text hover:bg-gray-300',
+            'outline' => 'border border-primary text-primary hover:bg-red-700',
+        ];
 
-        $baseDisabled = 'disabled:cursor-not-allowed disabled:opacity-60';
+        $disabled = 'disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:opacity-60';
 
         return trim(
             $base . ' ' .
-            $classes['base'] . ' ' .
-            $classes['hover'] . ' ' .
-            $baseDisabled . ' ' .
-            $classes['disabled']
+            ($variants[$this->variant] ?? $variants['primary']) . ' ' .
+            $disabled
         );
     }
 

resources/css/app.css

@@ -19,9 +19,6 @@
     --color-secondary-light: #FCD34D;
     --color-secondary-dark: #B45309;
 
-    /* OUTLINE */
-    --color-outline: rgba(0, 0, 0 ,0);
-
     /* BACKGROUND */
     --color-background: #F8FAFC;
     --color-background-dark: #E2E8F0;