1761 objects settings add a cover image (#2096)

* add image

* overflow hidden

* add close button

* add animation to cover image

* use cookie to store user preference

* refactor to have a reusable component called AnimatedFadeOut

* corrected close button position

* modified according to comments

front/src/modules/ui/theme/constants/animation.ts

@@ -5,3 +5,5 @@ export const animation = {
     normal: 0.3,
   },
 };
+
+export type AnimationDuration = 'instant' | 'fast' | 'normal';

front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx

@@ -1,19 +1,26 @@
+import { useTheme } from '@emotion/react';
 import { motion } from 'framer-motion';
 
+import { AnimationDuration } from '@/ui/theme/constants/animation';
+
 type AnimatedEaseInProps = Omit<
   React.ComponentProps<typeof motion.div>,
   'initial' | 'animated' | 'transition'
 > & {
-  duration?: number;
+  duration?: AnimationDuration;
 };
 
 export const AnimatedEaseIn = ({
   children,
-  duration = 0.3,
+  duration = 'normal',
 }: AnimatedEaseInProps) => {
+  const theme = useTheme();
   const initial = { opacity: 0 };
   const animate = { opacity: 1 };
-  const transition = { ease: 'linear', duration };
+  const transition = {
+    ease: 'linear',
+    duration: theme.animation.duration[duration],
+  };
 
   return (
     <motion.div initial={initial} animate={animate} transition={transition}>

front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx

@@ -0,0 +1,42 @@
+import { useTheme } from '@emotion/react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { AnimationDuration } from '@/ui/theme/constants/animation';
+
+type AnimatedFadeOutProps = {
+  isOpen: boolean;
+  children: React.ReactNode;
+  duration?: AnimationDuration;
+  marginBottom?: string;
+  marginTop?: string;
+};
+
+export const AnimatedFadeOut = ({
+  isOpen,
+  children,
+  duration = 'normal',
+  marginBottom,
+  marginTop,
+}: AnimatedFadeOutProps) => {
+  const theme = useTheme();
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{
+            opacity: 1,
+            marginBottom: marginBottom ?? 0,
+            marginTop: marginTop ?? 0,
+          }}
+          exit={{ opacity: 0, height: 0, marginBottom: 0, marginTop: 0 }}
+          transition={{
+            duration: theme.animation.duration[duration],
+            ease: 'easeOut',
+          }}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};