Add transition and pressed state to Button component

1 files changed, 16 insertions, 1 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
index 7c10b08a53..27bda0a6d8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
@@ -16,16 +16,19 @@ const styles = {
     primary: {
       background: colors.blue,
       hover: colors.blue60,
+      pressed: colors.blue40,
       disabled: colors.blue40,
     },
     success: {
       background: colors.green,
       hover: colors.green80,
+      pressed: colors.green40,
       disabled: colors.green40,
     },
     destructive: {
       background: colors.red,
       hover: colors.red80,
+      pressed: colors.red40,
       disabled: colors.red40,
     },
   },
@@ -48,10 +51,12 @@ export const StyledButton = styled.button<ButtonProps>`
     return css`
       --background: ${variant.background};
       --hover: ${variant.hover};
+      --pressed: ${variant.pressed};
       --disabled: ${variant.disabled};
       --radius: ${styles.radius};
       --size: ${size};
       --width: ${width};
+      --transition-duration: 0.15s;
 
       display: flex;
       flex: var(--size);
@@ -65,10 +70,20 @@ export const StyledButton = styled.button<ButtonProps>`
       border-radius: var(--radius);
       background: var(--background);
 
-      &:not(:disabled):hover {
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color var(--transition-duration) ease;
+      }
+
+      &&:not(:disabled):hover {
+        --transition-duration: 0s;
         background: var(--hover);
       }
 
+      &&:not(:disabled):active {
+        --transition-duration: 0s;
+        background: var(--pressed);
+      }
+
       &:disabled {
         background: var(--disabled);
       }