Add dim animation to all list item children

5 files changed, 37 insertions, 11 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx
index 344dc67d64..8dafeffc62 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled, { css, RuleSet } from 'styled-components';
 
 import {
   ListItemContent,
@@ -11,11 +12,22 @@ import {
   ListItemTextField,
   ListItemTrigger,
 } from './components';
+import { useListItemAnimation } from './hooks';
 import { levels } from './levels';
 import { ListItemProvider } from './ListItemContext';
 
 export type ListItemAnimation = 'flash' | 'dim';
 
+export const StyledListItem = styled.div<{
+  $animation?: RuleSet<object>;
+}>`
+  ${({ $animation }) => {
+    return css`
+      ${$animation}
+    `;
+  }}
+`;
+
 export type ListItemProps = {
   level?: keyof typeof levels;
   disabled?: boolean;
@@ -23,10 +35,19 @@ export type ListItemProps = {
   children: React.ReactNode;
 } & React.ComponentPropsWithRef<'div'>;
 
-const ListItem = ({ level = 0, disabled, animation, children, ...props }: ListItemProps) => {
+const ListItem = ({
+  level = 0,
+  disabled,
+  animation: animationProp,
+  children,
+  ...props
+}: ListItemProps) => {
+  const animation = useListItemAnimation(animationProp);
   return (
-    <ListItemProvider level={level} disabled={disabled} animation={animation}>
-      <div {...props}>{children}</div>
+    <ListItemProvider level={level} disabled={disabled} animation={animationProp}>
+      <StyledListItem $animation={animationProp == 'dim' ? animation : undefined} {...props}>
+        {children}
+      </StyledListItem>
     </ListItemProvider>
   );
 };
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 36abcefebf..ce751b7587 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,7 +1,9 @@
 import React from 'react';
 import styled, { css, RuleSet } from 'styled-components';
 
-import { useAnimation, useBackgroundColor } from './hooks';
+import { useListItemAnimation } from '../../hooks';
+import { useListItem } from '../../ListItemContext';
+import { useBackgroundColor } from './hooks';
 
 export type ListItemItemProps = {
   children: React.ReactNode;
@@ -32,9 +34,13 @@ export const StyledListItemItem = styled.div<{
 
 export function ListItemItem({ children, ...props }: ListItemItemProps) {
   const backgroundColor = useBackgroundColor();
-  const animation = useAnimation();
+  const { animation: contextAnimation } = useListItem();
+  const animation = useListItemAnimation(contextAnimation);
   return (
-    <StyledListItemItem $backgroundColor={backgroundColor} $animation={animation} {...props}>
+    <StyledListItemItem
+      $backgroundColor={backgroundColor}
+      $animation={contextAnimation === 'flash' ? animation : undefined}
+      {...props}>
       {children}
     </StyledListItemItem>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/hooks/index.ts
index b4f31dabf3..9cc5be2e57 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/hooks/index.ts
@@ -1,2 +1 @@
 export * from './useBackgroundColor';
-export * from './useAnimation';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/hooks/index.ts
new file mode 100644
index 0000000000..48a1ff267c
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useListItemAnimation';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/hooks/useAnimation.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/hooks/useListItemAnimation.tsx
index cdc46332e7..e93a2c951b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-item/hooks/useAnimation.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/hooks/useListItemAnimation.tsx
@@ -1,7 +1,7 @@
 import { css, keyframes } from 'styled-components';
 
-import { colors } from '../../../../../foundations';
-import { useListItem } from '../../../ListItemContext';
+import { colors } from '../../../foundations';
+import { ListItemAnimation } from '../ListItem';
 
 const flash = keyframes`
   0%   { background-color: var(--background-color) }
@@ -17,8 +17,7 @@ const dim = keyframes`
   100% { opacity: 100% }
 `;
 
-export const useAnimation = () => {
-  const { animation } = useListItem();
+export const useListItemAnimation = (animation: ListItemAnimation | undefined) => {
   if (animation === 'flash') {
     return css`
       animation: ${flash} 0.75s ease-in-out 0s 2 normal forwards;