Fix eslint-plugin-twenty (#1640)

* Fixed color rule

* Fixed naming

* Fix effect component rule

* Deactivated broken rules

* Fixed lint

* Complete eslint-plugin-twenty work

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/checkmark/components/AnimatedCheckmark.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import { motion } from 'framer-motion';
 
 export type CheckmarkProps = React.ComponentProps<typeof motion.path> & {
@@ -9,28 +10,31 @@ export type CheckmarkProps = React.ComponentProps<typeof motion.path> & {
 
 export const AnimatedCheckmark = ({
   isAnimating = false,
-  color = '#FFF',
+  color,
   duration = 0.5,
   size = 28,
   ...restProps
-}: CheckmarkProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 52 52"
-    width={size}
-    height={size}
-  >
-    <motion.path
-      {...restProps}
-      fill="none"
-      stroke={color}
-      strokeWidth={4}
-      d="M14 27l7.8 7.8L38 14"
-      pathLength="1"
-      strokeDasharray="1"
-      strokeDashoffset={isAnimating ? '1' : '0'}
-      animate={{ strokeDashoffset: isAnimating ? '0' : '1' }}
-      transition={{ duration }}
-    />
-  </svg>
-);
+}: CheckmarkProps) => {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 52 52"
+      width={size}
+      height={size}
+    >
+      <motion.path
+        {...restProps}
+        fill="none"
+        stroke={color ?? theme.grayScale.gray0}
+        strokeWidth={4}
+        d="M14 27l7.8 7.8L38 14"
+        pathLength="1"
+        strokeDasharray="1"
+        strokeDashoffset={isAnimating ? '1' : '0'}
+        animate={{ strokeDashoffset: isAnimating ? '0' : '1' }}
+        transition={{ duration }}
+      />
+    </svg>
+  );
+};