Move ListItem hover state styling to trigger

3 files changed, 49 insertions, 43 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/ListItemContent.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/ListItemContent.tsx
index 01f2a3cbf6..76ffe7f082 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/ListItemContent.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-content/ListItemContent.tsx
@@ -1,40 +1,40 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { Flex, FlexProps } from '../../../flex';
-import { levels } from '../../levels';
-import { useListItem } from '../../ListItemContext';
 
 const sizes = {
   full: '100%',
-  small: '44px',
+  small: '56px',
 };
 
-export const StyledFlex = styled(Flex)<{
-  $level: keyof typeof levels;
-  $disabled?: boolean;
-  $size: 'full' | 'small';
+type Size = keyof typeof sizes;
+
+const StyledFlex = styled(Flex)<{
+  $size: Size;
 }>`
-  width: ${({ $size }) => sizes[$size]};
-  height: 100%;
-  background-color: ${({ $disabled, $level }) =>
-    $disabled ? levels[$level].disabled : levels[$level].enabled};
-  &&:has(> :last-child:nth-child(1)) {
-    &&:has(img) {
-      justify-content: center;
-    }
-  }
+  ${({ $size }) => {
+    const size = sizes[$size];
+    return css`
+      --size: ${size};
+      width: var(--size);
+      height: 100%;
+      &&:has(> :last-child:nth-child(1)) {
+        &&:has(img) {
+          justify-content: center;
+        }
+      }
+    `;
+  }}
 `;
 
-export interface ListItemContainerProps extends FlexProps {
-  size?: 'full' | 'small';
+export interface ListItemContentProps extends FlexProps {
+  size?: Size;
 }
 
-export const ListItemContent = ({ size = 'full', ...props }: ListItemContainerProps) => {
-  const { level } = useListItem();
+export const ListItemContent = ({ size = 'full', ...props }: ListItemContentProps) => {
   return (
     <StyledFlex
       $size={size}
-      $level={level}
       $alignItems="center"
       $justifyContent="space-between"
       $gap="small"
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/ListItemItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/ListItemItem.tsx
index 9bee51b0e9..6ac83b137d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/ListItemItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/ListItemItem.tsx
@@ -1,19 +1,29 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import { useBackgroundColor } from './hooks';
 
 export interface ListItemItemProps {
   children: React.ReactNode;
 }
 
-const StyledDiv = styled.div`
-  min-height: 44px;
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  &&:has(> :last-child:nth-child(2)) {
-    grid-template-columns: 1fr 44px;
-  }
+const StyledDiv = styled.div<{ $backgroundColor: string }>`
+  ${({ $backgroundColor }) => {
+    return css`
+      --background-color: ${$backgroundColor};
+      background-color: var(--background-color);
+      min-height: 44px;
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr;
+      background-color: var(--background-color);
+      &&:has(> :last-child:nth-child(2)) {
+        grid-template-columns: 1fr 56px;
+      }
+    `;
+  }}
 `;
 
 export const ListItemItem = ({ children }: ListItemItemProps) => {
-  return <StyledDiv>{children}</StyledDiv>;
+  const backgroundColor = useBackgroundColor();
+  return <StyledDiv $backgroundColor={backgroundColor}>{children}</StyledDiv>;
 };
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 2b80ac2a9e..5d39674918 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
@@ -1,11 +1,14 @@
 import styled, { css } from 'styled-components';
 
 import { colors } from '../../../../foundations';
+import { TransientProps } from '../../../../types';
 import { ButtonBase } from '../../../button';
+import { ListItemProps } from '../../ListItem';
 import { useListItem } from '../../ListItemContext';
-import { StyledFlex } from '../list-item-content';
 
-const StyledButton = styled(ButtonBase)<{ $disabled?: boolean }>`
+// TODO: Colors should be replace with
+// with new color tokens once they are implemented.
+const StyledButton = styled(ButtonBase)<TransientProps<Pick<ListItemProps, 'disabled'>>>`
   display: flex;
   width: 100%;
   ${({ $disabled }) => {
@@ -29,20 +32,13 @@ const StyledButton = styled(ButtonBase)<{ $disabled?: boolean }>`
         outline-offset: -2px;
         z-index: 10;
       }
-      &:active ${StyledFlex} {
-        background-color: ${colors.whiteOnBlue10};
-      }
     `;
   }}
 `;
 
 export type ListItemTriggerProps = React.HtmlHTMLAttributes<HTMLButtonElement>;
 
-export const ListItemTrigger = ({ children, ...props }: ListItemTriggerProps) => {
+export const ListItemTrigger = (props: ListItemTriggerProps) => {
   const { disabled } = useListItem();
-  return (
-    <StyledButton $disabled={disabled} {...props}>
-      {children}
-    </StyledButton>
-  );
+  return <StyledButton $disabled={disabled} disabled={disabled} {...props} />;
 };