Update ListItem hover and pressed state colors

1 files changed, 22 insertions, 12 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-trigger/ListItemTrigger.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-trigger/ListItemTrigger.tsx
index 4e8a72fd3d..2b80ac2a9e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-trigger/ListItemTrigger.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-trigger/ListItemTrigger.tsx
@@ -8,22 +8,32 @@ import { StyledFlex } from '../list-item-content';
 const StyledButton = styled(ButtonBase)<{ $disabled?: boolean }>`
   display: flex;
   width: 100%;
-  ${({ $disabled }) =>
-    !$disabled &&
-    css`
-      &:hover ${StyledFlex} {
-        background-color: ${colors.whiteOnBlue5};
+  ${({ $disabled }) => {
+    return css`
+      --background: transparent;
+      background-color: var(--background);
+      ${!$disabled &&
+      css`
+        --background: ${colors.blue};
+        &:hover {
+          --background: ${colors.whiteOnBlue10};
+          background-color: var(--background);
+        }
+        &:active {
+          --background: ${colors.whiteOnBlue20};
+          background-color: var(--background);
+        }
+      `}
+      &&:focus-visible {
+        outline: 2px solid ${colors.white};
+        outline-offset: -2px;
+        z-index: 10;
       }
       &:active ${StyledFlex} {
         background-color: ${colors.whiteOnBlue10};
       }
-    `}
-
-  &&:focus-visible {
-    outline: 2px solid ${colors.white};
-    outline-offset: -1px;
-    z-index: 10;
-  }
+    `;
+  }}
 `;
 
 export type ListItemTriggerProps = React.HtmlHTMLAttributes<HTMLButtonElement>;