[M2-5266] Changed the notification center behavior

src/shared/constants/theme.ts

@@ -21,6 +21,7 @@ export const Theme = {
       accentGreen30: 'rgba(15, 123, 108, 0.30)',
       accentYellow: '#DFAC03',
       accentYellow30: 'rgba(223, 172, 3, 0.30)',
+      accentYellow30AnalogueWithoutOpacity: 'rgb(245, 230, 179)', //  Formula: Color * alpha + Background * (1 - alpha)
       accentOrange: '#D9730D',
       accentOrange30: 'rgba(217, 115, 13, 0.30)',
       inverseOnSurface: '#F0F0F4',

src/shared/ui/NotificationCenter/ui/ErrorNotification.tsx

@@ -31,3 +31,5 @@ export const ErrorNotification = forwardRef((props: Props, ref) => {
     </Box>
   );
 });
+
+ErrorNotification.displayName = 'ErrorNotification';

src/shared/ui/NotificationCenter/ui/Notification.tsx

@@ -36,3 +36,5 @@ export const Notification = forwardRef<HTMLDivElement, Props>(
     }
   },
 );
+
+Notification.displayName = 'Notification';

src/shared/ui/NotificationCenter/ui/NotificationAnimation.tsx

@@ -11,7 +11,9 @@ type Props = PropsWithChildren<{
 }>;
 
 export const NotificationAnimation = ({ notifications, refMap }: Props) => {
-  const transitions = useTransition(notifications, {
+  const lastNotification = notifications[notifications.length - 1];
+
+  const transitions = useTransition(lastNotification, {
     from: { height: '0px' },
     enter: (item) => async (next) => {
       await next({ height: `${refMap.get(item)?.offsetHeight ?? 72}px` });

src/shared/ui/NotificationCenter/ui/NotificationCenter.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo } from 'react';
 
 import Box from '@mui/material/Box';
 
@@ -8,7 +8,11 @@ import { Notification as TNotification } from '../lib/types';
 
 import { eventEmitter, useForceUpdate } from '~/shared/utils';
 
-export const NotificationCenter = () => {
+type Props = {
+  isIntersecting?: boolean;
+};
+
+export const NotificationCenter = forwardRef<HTMLDivElement, Props>((props, ref) => {
   const forceUpdate = useForceUpdate();
   const refMap: WeakMap<TNotification, HTMLDivElement> = useMemo(() => new WeakMap(), []); // Collect refs for each notification element to calculate their height
 
@@ -45,11 +49,20 @@ export const NotificationCenter = () => {
   }, [onNotificationAdded, onNotificationRemoved]);
 
   return (
-    <Box id="app-notification-container" width="100%">
+    <Box
+      ref={ref}
+      id="app-notification-container"
+      width="100%"
+      position="sticky"
+      top={0}
+      zIndex={10}
+    >
       <NotificationAnimation
         notifications={notificationCenterStore.notifications}
         refMap={refMap}
       />
     </Box>
   );
-};
+});
+
+NotificationCenter.displayName = 'NotificationCenter';

src/shared/ui/NotificationCenter/ui/SuccessNotification.tsx

@@ -30,3 +30,5 @@ export const SuccessNotification = forwardRef((props: Props, ref) => {
     </Box>
   );
 });
+
+SuccessNotification.displayName = 'SuccessNotification';

src/shared/ui/NotificationCenter/ui/WarningNotification.tsx

@@ -24,10 +24,12 @@ export const WarningNotification = forwardRef((props: Props, ref) => {
       padding="12px 16px"
       gap="12px"
       minHeight="72px"
-      bgcolor={Theme.colors.light.accentYellow30}
+      bgcolor={Theme.colors.light.accentYellow30AnalogueWithoutOpacity}
     >
       <ErrorRoundedIcon sx={{ color: Theme.colors.light.accentYellow }} />
       <Markdown markdown={props.message} />
     </Box>
   );
 });
+
+WarningNotification.displayName = 'WarningNotification';

src/shared/utils/hooks/index.ts

@@ -10,3 +10,4 @@ export * from './useIsPublic';
 export * from './useFlowType';
 export * from './useForceUpdate';
 export * from './usePrevious';
+export * from './useIntersectionObserver';

src/shared/utils/hooks/useIntersectionObserver.ts

@@ -0,0 +1,37 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+type Return = {
+  containerRef: React.RefObject<HTMLDivElement>;
+  targetRef: React.RefObject<HTMLDivElement>;
+  isIntersecting: boolean;
+};
+
+export const useIntersectionObserver = (): Return => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const targetRef = useRef<HTMLDivElement | null>(null);
+
+  const [isIntersecting, setIsIntersecting] = useState<boolean>(false);
+
+  const observer = useMemo(() => {
+    return new IntersectionObserver(
+      ([notificationCenter]) => {
+        setIsIntersecting(notificationCenter.isIntersecting);
+      },
+      {
+        root: containerRef.current,
+        rootMargin: '0px',
+        threshold: 1,
+      },
+    );
+  }, []);
+
+  useEffect(() => {
+    observer.observe(targetRef.current as Element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [observer]);
+
+  return { containerRef, targetRef, isIntersecting };
+};