3696 add emails tab empty state on shows (#3702)

* empty inbox

* fix No Files alignment

* add animation when exiting the screen

* update calendar settings to be singular

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

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import styled from '@emotion/styled';
 import { motion, useMotionValue, useTransform } from 'framer-motion';
+import { animate } from 'framer-motion';
 
 import {
   Background,
@@ -56,12 +57,27 @@ const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
       y.set(clientY);
     };
 
+    const handleLeave = () => {
+      animate(x, window.innerWidth / 2, {
+        type: 'spring',
+        stiffness: 100,
+        damping: 10,
+      });
+      animate(y, window.innerHeight / 2, {
+        type: 'spring',
+        stiffness: 100,
+        damping: 10,
+      });
+    };
+
     window.addEventListener('mousemove', handleMove);
     window.addEventListener('touchmove', handleMove);
+    window.document.addEventListener('mouseleave', handleLeave);
 
     return () => {
       window.removeEventListener('mousemove', handleMove);
       window.removeEventListener('touchmove', handleMove);
+      window.document.removeEventListener('mouseleave', handleLeave);
     };
   }, [x, y]);
 

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

@@ -9,7 +9,6 @@ export const StyledEmptyContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(6)};
   justify-content: center;
   text-align: center;
-  margin: ${({ theme }) => theme.spacing(16)} 0px;
 `;
 
 export const StyledEmptyTextContainer = styled.div`

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

@@ -5,6 +5,7 @@ export const Background: Record<string, string> = {
   noTask: '/images/placeholders/background/no_task_bg.png',
   errorIndex: '/images/placeholders/background/error_index_bg.png',
   emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
+  emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
   error404: '/images/placeholders/background/404_bg.png',
   error500: '/images/placeholders/background/500_bg.png',
 };
@@ -16,6 +17,7 @@ export const MovingImage: Record<string, string> = {
   noTask: '/images/placeholders/moving-image/no_task.png',
   errorIndex: '/images/placeholders/moving-image/error_index.png',
   emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
+  emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
   error404: '/images/placeholders/moving-image/404.png',
   error500: '/images/placeholders/moving-image/500.png',
 };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -114,7 +114,7 @@ export const Submenu: Story = {
             />
             <NavigationDrawerItem
               level={2}
-              label="Calendars"
+              label="Calendar"
               Icon={IconCalendarEvent}
               soon
             />