feat: implement new SnackBar design (#5515)

Closes #5383

## Light theme

<img width="905" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/ab0683c5-ded3-420c-ace6-684d38794a2d">

## Dark theme

<img width="903" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/4e43ca35-438d-4ba0-8388-1f061c6ccfb0">

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/hooks/__tests__/usePausableTimeout.test.tsx

@@ -1,47 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-
-import { usePausableTimeout } from '@/ui/feedback/snack-bar-manager/hooks/usePausableTimeout';
-
-jest.useFakeTimers();
-
-describe('usePausableTimeout', () => {
-  it('should pause and resume timeout', () => {
-    let callbackExecuted = false;
-    const callback = () => {
-      callbackExecuted = true;
-    };
-
-    const { result } = renderHook(() => usePausableTimeout(callback, 1000));
-
-    // timetravel 500ms into the future
-    act(() => {
-      jest.advanceTimersByTime(500);
-    });
-
-    expect(callbackExecuted).toBe(false);
-
-    act(() => {
-      result.current.pauseTimeout();
-    });
-
-    // timetravel another 500ms into the future
-    act(() => {
-      jest.advanceTimersByTime(500);
-    });
-
-    // The callback should not have been executed while paused
-    expect(callbackExecuted).toBe(false);
-
-    act(() => {
-      result.current.resumeTimeout();
-    });
-
-    // advance all timers controlled by Jest to their final state
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    // The callback should now have been executed
-    expect(callbackExecuted).toBe(true);
-  });
-});

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/hooks/usePausableTimeout.ts

@@ -1,56 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-import { isDefined } from '~/utils/isDefined';
-
-export const usePausableTimeout = (callback: () => void, delay: number) => {
-  // eslint-disable-next-line @nx/workspace-no-state-useref
-  const savedCallback = useRef<() => void>(callback);
-  // eslint-disable-next-line @nx/workspace-no-state-useref
-  const remainingTime = useRef<number>(delay);
-  // eslint-disable-next-line @nx/workspace-no-state-useref
-  const startTime = useRef<number>(Date.now());
-  // eslint-disable-next-line @nx/workspace-no-state-useref
-  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const tick = () => {
-    if (isDefined(savedCallback.current)) {
-      savedCallback.current();
-    }
-  };
-
-  const startTimeout = useCallback(() => {
-    startTime.current = Date.now();
-    timeoutId.current = setTimeout(tick, remainingTime.current);
-  }, []);
-
-  // Remember the latest callback
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  // Set up the timeout loop
-  useEffect(() => {
-    if (delay !== null) {
-      startTimeout();
-      return () => {
-        if (isDefined(timeoutId.current)) {
-          clearTimeout(timeoutId.current);
-        }
-      };
-    }
-  }, [delay, startTimeout]);
-
-  const pauseTimeout = () => {
-    if (isDefined(timeoutId.current)) {
-      clearTimeout(timeoutId.current);
-    }
-    const elapsedTime = Date.now() - startTime.current;
-    remainingTime.current = remainingTime.current - elapsedTime;
-  };
-
-  const resumeTimeout = () => {
-    startTimeout();
-  };
-
-  return { pauseTimeout, resumeTimeout };
-};