Added the dark mode version of empty states (#3906)

* #3898 added empty states in dark mode version

* resolved eslint issue

packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx

@@ -1,10 +1,13 @@
 import { useEffect } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion, useMotionValue, useTransform } from 'framer-motion';
 import { animate } from 'framer-motion';
 
 import {
   Background,
+  DarkBackground,
+  DarkMovingImage,
   MovingImage,
 } from '@/ui/layout/animated-placeholder/constants/AnimatedImages';
 
@@ -40,6 +43,8 @@ interface AnimatedPlaceholderProps {
 }
 
 const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
+  const theme = useTheme();
+
   const x = useMotionValue(window.innerWidth / 2);
   const y = useMotionValue(window.innerHeight / 2);
 
@@ -84,12 +89,12 @@ const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
   return (
     <StyledContainer>
       <StyledBackgroundImage
-        src={Background[type]}
+        src={theme.name === 'dark' ? DarkBackground[type] : Background[type]}
         alt="Background"
         type={type}
       />
       <StyledMovingImage
-        src={MovingImage[type]}
+        src={theme.name === 'dark' ? DarkMovingImage[type] : MovingImage[type]}
         alt="Moving"
         style={{ translateX, translateY }}
         transition={{ type: 'spring', stiffness: 100, damping: 10 }}

packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts

@@ -2,6 +2,7 @@ export const Background: Record<string, string> = {
   noFile: '/images/placeholders/background/no_file_bg.png',
   noNote: '/images/placeholders/background/no_note_bg.png',
   noRecord: '/images/placeholders/background/no_record_bg.png',
+  noMatchRecord: '/images/placeholders/background/no_match_record_bg.png',
   noTask: '/images/placeholders/background/no_task_bg.png',
   errorIndex: '/images/placeholders/background/error_index_bg.png',
   emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
@@ -16,6 +17,7 @@ export const MovingImage: Record<string, string> = {
   noFile: '/images/placeholders/moving-image/no_file.png',
   noNote: '/images/placeholders/moving-image/no_note.png',
   noRecord: '/images/placeholders/moving-image/no_record.png',
+  noMatchRecord: '/images/placeholders/moving-image/no_match_record.png',
   noTask: '/images/placeholders/moving-image/no_task.png',
   errorIndex: '/images/placeholders/moving-image/error_index.png',
   emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
@@ -25,3 +27,33 @@ export const MovingImage: Record<string, string> = {
   error404: '/images/placeholders/moving-image/404.png',
   error500: '/images/placeholders/moving-image/500.png',
 };
+
+export const DarkBackground: Record<string, string> = {
+  noFile: '/images/placeholders/dark-background/no_file_bg.png',
+  noNote: '/images/placeholders/dark-background/no_note_bg.png',
+  noRecord: '/images/placeholders/dark-background/no_record_bg.png',
+  noMatchRecord: '/images/placeholders/dark-background/no_match_record_bg.png',
+  noTask: '/images/placeholders/dark-background/no_task_bg.png',
+  errorIndex: '/images/placeholders/dark-background/error_index_bg.png',
+  emptyTimeline: '/images/placeholders/dark-background/empty_timeline_bg.png',
+  emptyInbox: '/images/placeholders/dark-background/empty_inbox_bg.png',
+  error404: '/images/placeholders/dark-background/404_bg.png',
+  error500: '/images/placeholders/dark-background/500_bg.png',
+  loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
+  loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
+};
+
+export const DarkMovingImage: Record<string, string> = {
+  noFile: '/images/placeholders/dark-moving-image/no_file.png',
+  noNote: '/images/placeholders/dark-moving-image/no_note.png',
+  noRecord: '/images/placeholders/dark-moving-image/no_record.png',
+  noMatchRecord: '/images/placeholders/dark-moving-image/no_match_record.png',
+  noTask: '/images/placeholders/dark-moving-image/no_task.png',
+  errorIndex: '/images/placeholders/dark-moving-image/error_index.png',
+  emptyTimeline: '/images/placeholders/dark-moving-image/empty_timeline.png',
+  emptyInbox: '/images/placeholders/dark-moving-image/empty_inbox.png',
+  error404: '/images/placeholders/dark-moving-image/404.png',
+  error500: '/images/placeholders/dark-moving-image/500.png',
+  loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
+  loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
+};