diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-trigger/ListItemTrigger.tsx | 34 |
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>; |