Fix active styles in Button

actualbudget · Sep 23, 2023 · 2e00ad2 · 2e00ad2
1 parent 5337850
commit 2e00ad2
Showing 1 changed file with 23 additions and 11 deletions.
diff --git a/packages/desktop-client/src/components/common/Button.tsx b/packages/desktop-client/src/components/common/Button.tsx
@@ -102,6 +102,28 @@ const _getPadding = type => {
   }
 };
 
+const _getActiveStyles = (type, bounce) => {
+  switch (type) {
+    case 'bare':
+      return { backgroundColor: theme.buttonBareBackgroundActive };
+    case 'link':
+      return {
+        transform: 'none',
+        boxShadow: 'none',
+      };
+    default:
+      return {
+        transform: bounce && 'translateY(1px)',
+        boxShadow: `0 1px 4px 0 ${
+          type === 'primary'
+            ? theme.buttonPrimaryShadow
+            : theme.buttonNormalShadow
+        }`,
+        transition: 'none',
+      };
+  }
+};
+
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -131,17 +153,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       ...hoveredStyle,
     };
     activeStyle = {
-      ...(type === 'bare'
-        ? { backgroundColor: theme.buttonBareBackgroundActive }
-        : {
-            transform: bounce && 'translateY(1px)',
-            boxShadow:
-              '0 1px 4px 0 ' +
-              (type === 'primary'
-                ? theme.buttonPrimaryShadow
-                : theme.buttonNormalShadow),
-            transition: 'none',
-          }),
+      ..._getActiveStyles(type, bounce),
       ...activeStyle,
     };