From f21b8d6bbda7ea692ddf96738e477aff5974cad8 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 23 Oct 2023 08:24:23 -0700
Subject: [PATCH] Update base button styles

- Use brightness filter for hover/focus styles
- Re-add default active style
---
 src/renderer/components/button/index.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/button/index.tsx b/src/renderer/components/button/index.tsx
index 344f7ff1..ae74f9e8 100644
--- a/src/renderer/components/button/index.tsx
+++ b/src/renderer/components/button/index.tsx
@@ -41,8 +41,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     &:not([data-disabled])&:hover {
         color: ${(props) => `var(--btn-${props.variant}-fg) !important`};
         background: ${(props) => `var(--btn-${props.variant}-bg)`};
-        background-image: ${(props) =>
-            props.variant === 'filled' ? 'linear-gradient(rgb(0 0 0/40%) 0 0)' : undefined};
+        filter: brightness(85%);
         border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
 
         svg {
@@ -53,12 +52,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     &:not([data-disabled])&:focus-visible {
         color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
         background: ${(props) => `var(--btn-${props.variant}-bg)`};
-        background-image: ${(props) =>
-            props.variant === 'filled' ? 'linear-gradient(rgb(0 0 0/40%) 0 0)' : undefined};
-    }
-
-    &:active {
-        transform: none;
+        filter: brightness(85%);
     }
 
     & .mantine-Button-centerLoader {