From da4c1e2cfd2dae73ccb8fd2199d285b3783d7791 Mon Sep 17 00:00:00 2001
From: Yassine Doghri <yassine@doghri.fr>
Date: Fri, 10 May 2024 09:06:10 +0000
Subject: [PATCH] style(buttons): add tint to variants

---
 app/Resources/styles/custom.css |  2 +-
 app/Views/Components/Button.php | 17 ++++++++---------
 tailwind.config.cjs             |  5 ++++-
 themes/cp_auth/login.php        |  2 +-
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/Resources/styles/custom.css b/app/Resources/styles/custom.css
index 6dfa93b1..40035875 100644
--- a/app/Resources/styles/custom.css
+++ b/app/Resources/styles/custom.css
@@ -6,7 +6,7 @@
   }
 
   .ring-accent {
-    @apply outline-none ring-2 ring-offset-2;
+    @apply outline-none ring-2 ring-offset-2 ring-accent-base;
 
     /* FIXME: why doesn't ring-accent-base work? */
     --tw-ring-opacity: 1;
diff --git a/app/Views/Components/Button.php b/app/Views/Components/Button.php
index b63c9750..68de5081 100644
--- a/app/Views/Components/Button.php
+++ b/app/Views/Components/Button.php
@@ -34,17 +34,16 @@ class Button extends Component
 
     public function render(): string
     {
-        $this->mergeClass('gap-x-2 flex-shrink-0 inline-flex items-center justify-center font-semibold rounded-full');
+        $this->mergeClass('shadow gap-x-2 flex-shrink-0 inline-flex items-center justify-center font-semibold rounded-full');
 
         $variantClass = match ($this->variant) {
-            'primary'   => 'shadow-sm text-accent-contrast bg-accent-base hover:bg-accent-hover',
-            'secondary' => 'shadow-sm ring-2 ring-accent ring-inset text-accent-base bg-white hover:border-accent-hover hover:text-accent-hover',
-            'success'   => 'shadow-sm ring-2 ring-pine-700 ring-inset text-pine-700 hover:ring-pine-800 hover:text-pine-800',
-            'danger'    => 'shadow-sm ring-2 ring-red-700 ring-inset text-red-700 hover:ring-red-800 hover:text-red-800',
-            'warning'   => 'shadow-sm ring-2 ring-yellow-700 ring-inset text-yellow-700 hover:ring-yellow-800 hover:text-yellow-800',
-            'info'      => 'shadow-sm ring-2 ring-blue-700 ring-inset text-blue-700 hover:ring-blue-800 hover:text-blue-800',
-            'disabled'  => 'shadow-sm text-black bg-gray-300 cursor-not-allowed',
-            default     => 'shadow-sm text-black bg-gray-100 hover:bg-gray-300',
+            'primary'   => 'text-accent-contrast bg-accent-base hover:bg-accent-hover',
+            'secondary' => 'ring-2 ring-accent-base ring-inset text-accent-base bg-white hover:border-accent-hover hover:text-accent-hover hover:ring-accent-hover',
+            'danger'    => 'bg-red-50 ring-2 ring-red-700 ring-inset text-red-700 hover:ring-red-800 hover:text-red-800',
+            'warning'   => 'bg-yellow-50 ring-2 ring-yellow-700 ring-inset text-yellow-700 hover:ring-yellow-800 hover:text-yellow-800',
+            'info'      => 'bg-blue-50 ring-2 ring-blue-700 ring-inset text-blue-700 hover:ring-blue-800 hover:text-blue-800',
+            'disabled'  => 'text-black bg-gray-300 cursor-not-allowed',
+            default     => 'text-black bg-gray-50 hover:bg-gray-200',
         };
 
         $sizeClass = match ($this->size) {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 50cea743..a0abf165 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -76,7 +76,10 @@ module.exports = {
         },
       },
       colors: {
-        accent: "hsl(var(--color-accent-base) / <alpha-value>)",
+        accent: {
+          base: "hsl(var(--color-accent-base) / <alpha-value>)",
+          hover: "hsl(var(--color-accent-hover) / <alpha-value>)",
+        },
         background: {
           header: "hsl(var(--color-background-header) / <alpha-value>)",
           base: "hsl(var(--color-background-base) / <alpha-value>)",
diff --git a/themes/cp_auth/login.php b/themes/cp_auth/login.php
index fafe2221..9d9558fd 100644
--- a/themes/cp_auth/login.php
+++ b/themes/cp_auth/login.php
@@ -32,7 +32,7 @@
 
     <!-- Remember me -->
     <?php if (setting('Auth.sessionConfig')['allowRemembering']): ?>
-        <x-Forms.Toggler name="remember" isChecked="<?= old('remember') ?>" size="small"><?= lang('Auth.rememberMe') ?></x-Forms.Toggler>
+        <x-Forms.Checkbox name="remember" isChecked="<?= old('remember') ?>" size="small"><?= lang('Auth.rememberMe') ?></x-Forms.Checkbox>
     <?php endif; ?>
 
     <x-Button variant="primary" type="submit" class="self-end"><?= lang('Auth.login') ?></x-Button>