Update ListItemProps animation prop to allow sending false

8 files changed, 15 insertions, 27 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-adult-content-setting/BlockAdultContentSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-adult-content-setting/BlockAdultContentSetting.tsx
index c49f91e10e..d7dd67c140 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-adult-content-setting/BlockAdultContentSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-adult-content-setting/BlockAdultContentSetting.tsx
@@ -9,7 +9,7 @@ export function BlockAdultContentSetting() {
   return (
     <SettingsToggleListItem
       level={1}
-      animation={undefined}
+      animation={false}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockAdultContent}
       onCheckedChange={setBlockAdultContent}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-gambling-setting/BlockGamblingSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-gambling-setting/BlockGamblingSetting.tsx
index c8a14887a4..b46acebc12 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-gambling-setting/BlockGamblingSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-gambling-setting/BlockGamblingSetting.tsx
@@ -9,7 +9,7 @@ export function BlockGamblingSetting() {
   return (
     <SettingsToggleListItem
       level={1}
-      animation={undefined}
+      animation={false}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockGambling}
       onCheckedChange={setBlockGambling}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-malware-setting/BlockMalwareSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-malware-setting/BlockMalwareSetting.tsx
index 8274ab997a..bf3b21f526 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-malware-setting/BlockMalwareSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-malware-setting/BlockMalwareSetting.tsx
@@ -11,7 +11,7 @@ export function BlockMalwareSetting() {
   return (
     <SettingsToggleListItem
       level={1}
-      animation={undefined}
+      animation={false}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockMalware}
       onCheckedChange={setBlockMalware}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-social-media-setting/BlockSocialMediaSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-social-media-setting/BlockSocialMediaSetting.tsx
index b4e35ce6cd..b49dcc4b17 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-social-media-setting/BlockSocialMediaSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-social-media-setting/BlockSocialMediaSetting.tsx
@@ -9,7 +9,7 @@ export function BlockSocialMediaSetting() {
   return (
     <SettingsToggleListItem
       level={1}
-      animation={undefined}
+      animation={false}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockSocialMedia}
       onCheckedChange={setBlockSocialMedia}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-trackers-setting/BlockTrackersSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-trackers-setting/BlockTrackersSetting.tsx
index 1f5f85270f..308d61a5da 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-trackers-setting/BlockTrackersSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-trackers-setting/BlockTrackersSetting.tsx
@@ -9,7 +9,7 @@ export function BlockTrackersSetting() {
   return (
     <SettingsToggleListItem
       level={1}
-      animation={undefined}
+      animation={false}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockTrackers}
       onCheckedChange={setBlockTrackers}>
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 8dafeffc62..eb2abd95c2 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
@@ -31,7 +31,7 @@ export const StyledListItem = styled.div<{
 export type ListItemProps = {
   level?: keyof typeof levels;
   disabled?: boolean;
-  animation?: ListItemAnimation;
+  animation?: ListItemAnimation | false;
   children: React.ReactNode;
 } & React.ComponentPropsWithRef<'div'>;
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItemContext.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItemContext.tsx
index 53b8a817e5..8c75627059 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItemContext.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItemContext.tsx
@@ -1,32 +1,20 @@
-import { createContext, ReactNode, useContext } from 'react';
+import { createContext, useContext } from 'react';
 
 import { levels } from './levels';
-import { ListItemAnimation } from './ListItem';
+import { ListItemProps } from './ListItem';
 
-interface ListItemContextType {
+type ListItemContextType = {
   level: keyof typeof levels;
   disabled?: boolean;
-  animation?: ListItemAnimation;
-}
+  animation?: ListItemProps['animation'];
+};
 
 const ListItemContext = createContext<ListItemContextType | undefined>(undefined);
 
-interface ListItemProviderProps extends ListItemContextType {
-  animation?: ListItemAnimation;
-  children: ReactNode;
-}
+type ListItemProviderProps = React.PropsWithChildren<ListItemContextType>;
 
-export const ListItemProvider = ({
-  level,
-  disabled,
-  animation,
-  children,
-}: ListItemProviderProps) => {
-  return (
-    <ListItemContext.Provider value={{ level, disabled, animation }}>
-      {children}
-    </ListItemContext.Provider>
-  );
+export const ListItemProvider = ({ children, ...props }: ListItemProviderProps) => {
+  return <ListItemContext.Provider value={props}>{children}</ListItemContext.Provider>;
 };
 
 export const useListItemContext = (): ListItemContextType => {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/hooks/use-list-item-animation.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/hooks/use-list-item-animation.ts
index b6d7a87bd8..75a6a26a76 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/hooks/use-list-item-animation.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/hooks/use-list-item-animation.ts
@@ -16,7 +16,7 @@ const dim = keyframes`
   100% { opacity: 100% }
 `;
 
-export const useListItemAnimation = (animation: ListItemAnimation | undefined) => {
+export const useListItemAnimation = (animation?: ListItemAnimation | false) => {
   const flashDuration = 200;
   const flashDelay = 450;
   const dimDuration = (flashDelay + flashDuration * 4) * 1.1;