Modal, Drawer, Portal fix and redesign

src/app/App.tsx

@@ -1,14 +1,15 @@
 import { FC, Suspense, useEffect } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch';
-import { Navbar } from '@/widgets/Navbar';
-import { Aside } from '@/widgets/Aside';
 import { useAppSelector } from '@/shared/lib/hooks/useAppSelector';
-import { getUserMounted, initAuthData } from '@/entities/User';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
+// import { Skeleton as SkeletonDeprecatedLoading } from '@/shared/ui/deprecated/Skeleton';
+import { MainLayout } from '@/shared/layouts/MainLayout';
 import { useTheme } from '@/shared/lib/hooks/useTheme';
 import { ToggleFeatures } from '@/shared/lib/features';
-import { Skeleton } from '@/shared/ui/deprecated/Skeleton';
-import { MainLayout } from '@/shared/layouts/MainLayout';
+import { getUserMounted, initAuthData } from '@/entities/User';
+import { Navbar } from '@/widgets/Navbar';
+import { Aside } from '@/widgets/Aside';
 import { AppRouter } from './providers/RouterProvider';
 
 const App: FC = () => {
@@ -21,43 +22,74 @@ const App: FC = () => {
     dispatch(initAuthData());
   }, [dispatch, theme]);
 
+  /**
+   * @deprecated
+   */
+  // const SkeletonDeprecated = (
+  //   <div className={classNames('App', {}, ['scroll'])} id="App">
+  //     <SkeletonDeprecatedLoading width="100%" height={50} />
+  //     <div className="content-page">
+  //       <SkeletonDeprecatedLoading width="var(--aside-width)" height="calc(100vh - var(--navbar-height))" />
+  //     </div>
+  //   </div>
+  // );
+
+  const SkeletonRedesigned = (
+    <div className={classNames('App', {}, ['scroll'])} id="App">
+      <div className={classNames('App_redesigned', {}, ['scroll'])} id="App">
+        <Suspense fallback="">
+          <MainLayout
+            header={<Skeleton width={170} height={48} margin="16px 16px 0 0" borderRadius={32} />}
+            aside={<Skeleton width={220} height="100%" borderRadius={32} />}
+            content={<Skeleton width="100%" height="100%" borderRadius={32} />}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+
   if (!_mounted) {
     return (
-      <div className={classNames('App', {}, ['scroll'])}>
-        <Skeleton width="100%" height={50} />
-        <div className="content-page">
-          <Skeleton width="var(--aside-width)" height="calc(100vh - var(--navbar-height))" />
-        </div>
-      </div>
+      <ToggleFeatures
+        name="isAppRedesigned"
+        on={SkeletonRedesigned}
+        off={SkeletonRedesigned}
+      />
     );
   }
 
+  /**
+   * @deprecated
+   */
+  const AppDeprecated = (
+    <div className={classNames('App', {}, ['scroll'])} id="App">
+      <Suspense fallback="">
+        <Navbar />
+        <div className="content-page">
+          <Aside />
+          <AppRouter />
+        </div>
+      </Suspense>
+    </div>
+  );
+
+  const AppRedesigned = (
+    <div className={classNames('App_redesigned', {}, ['scroll'])} id="App">
+      <Suspense fallback="">
+        <MainLayout
+          header={<Navbar />}
+          aside={<Aside />}
+          content={<AppRouter />}
+        />
+      </Suspense>
+    </div>
+  );
+
   return (
     <ToggleFeatures
       name="isAppRedesigned"
-      on={(
-        <div className={classNames('App_redesigned', {}, ['scroll'])}>
-          <Suspense fallback="">
-            <MainLayout
-              header={<Navbar />}
-              aside={<Aside />}
-              content={<AppRouter />}
-              // toolbar={<div>asdasdasd</div>}
-            />
-          </Suspense>
-        </div>
-      )}
-      off={(
-        <div className={classNames('App', {}, ['scroll'])}>
-          <Suspense fallback="">
-            <Navbar />
-            <div className="content-page">
-              <Aside />
-              <AppRouter />
-            </div>
-          </Suspense>
-        </div>
-      )}
+      on={AppRedesigned}
+      off={AppDeprecated}
     />
   );
 };

src/app/providers/ThemeProvider/ui/ThemeProvider.tsx

@@ -11,7 +11,7 @@ interface ThemeProviderProps {
 const ThemeProvider: FC<ThemeProviderProps> = ({ children, initialTheme }) => {
   const { theme: defaultTheme } = useJsonSettings();
   const [themeInited, setThemeInited] = useState<boolean>(false);
-  const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme || Theme.BLUE);
+  const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme || Theme.DARK);
 
   useEffect(() => {
     if (!themeInited && defaultTheme) {

src/entities/Profile/ui/ProfileCardRedesigned/ProfileCard.redesigned.tsx

@@ -75,7 +75,7 @@ export const ProfileCardRedesigned: FC<ProfileCardComponentProps> = (props) => {
       <VStack gap={32}>
         {data?.avatar && (
           <HStack justify="center">
-            <Avatar src={data.avatar} alt="Profile Avatar" />
+            <Avatar size={128} src={data.avatar} alt="Profile Avatar" />
           </HStack>
         )}
         <HStack gap={32}>

src/entities/Rating/ui/RatingCard/RatingCard.tsx

@@ -6,10 +6,10 @@ import { Card } from '@/shared/ui/deprecated/Card';
 import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
 import { Text } from '@/shared/ui/deprecated/Text';
 import { StarRating } from '@/shared/ui/deprecated/StarRating';
-import { Modal } from '@/shared/ui/deprecated/Modal';
+import { Modal } from '@/shared/ui/redesigned/Modal';
 import { Input } from '@/shared/ui/deprecated/Input';
 import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { Drawer } from '@/shared/ui/deprecated/Drawer';
+import { Drawer } from '@/shared/ui/redesigned/Drawer';
 import cls from './RatingCard.module.scss';
 
 interface RatingCardProps {

src/features/ArticlePageGreetings/ui/ArticlePageGreetings/ArticlePageGreetings.tsx

@@ -1,6 +1,6 @@
 import { FC, memo, useEffect, useState } from 'react';
 import { useAppTranslation } from '@/shared/lib/hooks/useAppTranslation';
-import { Modal } from '@/shared/ui/deprecated/Modal';
+import { Modal } from '@/shared/ui/redesigned/Modal';
 import { VStack } from '@/shared/ui/redesigned/Stack';
 import { Text } from '@/shared/ui/deprecated/Text';
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch';

src/features/AuthByUserName/ui/LoginModal/LoginModal.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction, Suspense } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { Loader } from '@/shared/ui/deprecated/Loader';
-import { Modal } from '@/shared/ui/deprecated/Modal';
+import { Modal } from '@/shared/ui/redesigned/Modal';
 import { LoginFormLazy } from '../LoginForm/LoginForm.lazy';
 
 interface LoginModalProps {

src/features/AvatarDropdown/ui/AvatarDropdown.tsx

@@ -12,6 +12,7 @@ import { Text as TextDeprecated, TextTheme as TextThemeDeprecated } from '@/shar
 import { getUserAuthData, isUserAdmin, isUserManager, userActions } from '@/entities/User';
 import { ToggleFeatures } from '@/shared/lib/features';
 import { Avatar } from '@/shared/ui/redesigned/Avatar';
+import { Text } from '@/shared/ui/redesigned/Text';
 
 interface AvatarDropdownProps {
   className?: string;
@@ -71,7 +72,7 @@ export const AvatarDropdown: FC<AvatarDropdownProps> = memo(({ className, transl
           position="bottom right"
           component={(
             <HStack gap={8}>
-              <TextDeprecated theme={TextThemeDeprecated.INVERTED} text={authData?.username} />
+              <Text text={authData?.username} />
               <Avatar src={authData?.avatar} alt="Avatar" size={40} />
             </HStack>
           )}

src/features/OpenNotificationsList/ui/OpenNotificationsList.tsx

@@ -5,7 +5,7 @@ import { NotificationIcon as NotificationIconDeprecated } from '@/shared/assets/
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { Icon as IconDeprecated } from '@/shared/ui/deprecated/Icon';
 import { Popover as PopoverDeprecated } from '@/shared/ui/deprecated/Popups';
-import { Drawer } from '@/shared/ui/deprecated/Drawer';
+import { Drawer } from '@/shared/ui/redesigned/Drawer';
 import { Button as ButtonDeprecated, ButtonTheme as ButtonThemeDeprecated } from '@/shared/ui/deprecated/Button';
 import { ToggleFeatures } from '@/shared/lib/features';
 import { Icon } from '@/shared/ui/redesigned/Icon';

src/shared/lib/features/service/updateFeatureFlags.ts

@@ -24,6 +24,8 @@ export const updateFeatureFlags = createAsyncThunk<void, UpdateFeatureFlagsOptio
       }));
 
       window.location.reload();
+
+      return undefined;
     } catch (error) {
       console.log(error);
 

src/shared/ui/deprecated/Drawer/Drawer.module.scss → src/shared/ui/redesigned/Drawer/Drawer.module.scss

@@ -13,7 +13,6 @@
   height: calc(100vh + 100px);
   width: 96vw;
   border-radius: 12px 12px 0;
-  background: var(--card-bg);
   touch-action: none;
   padding: 20px;
 }
@@ -26,4 +25,16 @@
   .content {
     transform: translateY(0%);
   }
+}
+
+.drawer-new {
+  .sheet {
+    background: var(--light-bg);
+  }
+}
+
+.drawer-old {
+  .sheet {
+    background: var(--card-bg);
+  }
 }

src/shared/ui/deprecated/Drawer/Drawer.stories.tsx → src/shared/ui/redesigned/Drawer/Drawer.stories.tsx

@@ -1,6 +1,6 @@
-import { Button } from '../Button';
-import { VStack } from '../../redesigned/Stack';
-import { Text } from '../Text';
+import { Button } from '../../deprecated/Button';
+import { VStack } from '../Stack';
+import { Text } from '../../deprecated/Text';
 import { Drawer } from './Drawer';
 import type { Meta, StoryObj } from '@storybook/react';
 

src/shared/ui/deprecated/Drawer/Drawer.tsx → src/shared/ui/redesigned/Drawer/Drawer.tsx

@@ -2,8 +2,9 @@ import { cloneElement, FC, FormEvent, ReactElement, ReactNode, useCallback, useE
 import { classNames, Mods } from '@/shared/lib/classNames/classNames';
 import { AnimationProvider, useAnimationModules } from '@/shared/lib/components/AnimationProvider';
 import { useTheme } from '@/shared/lib/hooks/useTheme';
-import { Overlay } from '../../redesigned/Overlay';
-import { Portal } from '../../redesigned/Portal';
+import { toggleFeatures } from '@/shared/lib/features';
+import { Overlay } from '../Overlay';
+import { Portal } from '../Portal';
 import cls from './Drawer.module.scss';
 
 interface DrawerProps {
@@ -83,11 +84,20 @@ export const DrawerContent: FC<DrawerProps> = ({ className, children, onClose, c
     }
   }, [root, onCloseDrawer]);
 
+  const rootClasses = [className, theme, 'app_drawer', toggleFeatures({
+    name: 'isAppRedesigned',
+    on: () => cls['drawer-new'],
+    off: () => cls['drawer-old'],
+  })];
+
   return (
     <>
       {clonedTrigger}
       <Portal>
-        <RootWrapper onSubmit={onSubmit} className={classNames(cls.Drawer, mods, [className, theme, 'app_drawer'])}>
+        <RootWrapper
+          onSubmit={onSubmit}
+          className={classNames(cls.Drawer, mods, rootClasses)}
+        >
           <Overlay onClick={onCloseDrawer} />
           <Spring.a.div
             style={{ display, bottom: `calc(-100vh + ${height - 200}px)`, y }}
@@ -111,10 +121,7 @@ export const DrawerAsync: FC<DrawerProps> = (props) => {
 
   return <DrawerContent {...props} />;
 };
-/**
- * Deprecated component. Please use updated version in `@/shared/ui/redesigned`
- * @deprecated
- */
+
 export const Drawer: FC<DrawerProps> = (props) => {
   return (
     <AnimationProvider>

src/shared/ui/deprecated/Modal/Modal.module.scss → src/shared/ui/redesigned/Modal/Modal.module.scss

@@ -18,6 +18,20 @@
   max-width: 50%;
 }
 
+.modal-old {
+  .content {
+    color: var(--primary-color);
+    background: var(--bg-color);
+  }
+}
+
+.modal-new {
+  .content {
+    color: var(--primary-color);
+    background: var(--light-bg);
+  }
+}
+
 .opened {
   pointer-events: all;
   transition: var(--app-transition);

src/shared/ui/deprecated/Modal/Modal.tsx → src/shared/ui/redesigned/Modal/Modal.tsx

@@ -1,7 +1,8 @@
 import { Dispatch, FC, ReactNode, SetStateAction, useCallback, useEffect, useState } from 'react';
 import { classNames, Mods } from '@/shared/lib/classNames/classNames';
-import { Overlay } from '../../redesigned/Overlay';
-import { Portal } from '../../redesigned/Portal/Portal';
+import { toggleFeatures } from '@/shared/lib/features';
+import { Overlay } from '../Overlay';
+import { Portal } from '../Portal/Portal';
 import cls from './Modal.module.scss';
 
 interface ModalProps {
@@ -12,10 +13,7 @@ interface ModalProps {
   onCloseCallback?: () => void;
   lazy?: boolean;
 }
-/**
- * Deprecated component. Please use updated version in `@/shared/ui/redesigned`
- * @deprecated
- */
+
 export const Modal: FC<ModalProps> = ({ children, className, isOpen, onClose, onCloseCallback, lazy }) => {
   const [isMounted, setIsMounted] = useState<boolean>(false);
 
@@ -54,9 +52,18 @@ export const Modal: FC<ModalProps> = ({ children, className, isOpen, onClose, on
     return null;
   }
 
+  const modalRootClasses = classNames(cls.Modal, mods, [
+    className,
+    toggleFeatures({
+      name: 'isAppRedesigned',
+      on: () => cls['modal-new'],
+      off: () => cls['modal-old'],
+    }),
+  ]);
+
   return (
     <Portal>
-      <div className={classNames(cls.Modal, mods, [className])}>
+      <div className={modalRootClasses}>
         <Overlay onClick={onCloseHandler} />
         <div className={classNames(cls.content)}>
           {children}

src/shared/ui/redesigned/Portal/Portal.tsx

@@ -2,10 +2,12 @@ import { FC, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 interface PortalProps {
-	children: ReactNode;
-	element?: HTMLElement;
+  children: ReactNode;
+  element?: HTMLElement;
 }
 
-export const Portal: FC<PortalProps> = ({ children, element = document.body }) => (
-  createPortal(children, element)
-);
+export const Portal: FC<PortalProps> = ({ children, element = document.getElementById('App') ?? document.body }) => {
+  return (
+    createPortal(children, element)
+  );
+};

src/shared/ui/redesigned/Skeleton/Skeleton.tsx

@@ -7,10 +7,11 @@ interface SkeletonProps {
   height?: string | number;
   width?: string | number;
   borderRadius?: string | number;
+  margin?: string;
 }
 
-export const Skeleton: FC<SkeletonProps> = memo(({ className, height, width, borderRadius }) => {
-  const styles: CSSProperties = { borderRadius, width, height };
+export const Skeleton: FC<SkeletonProps> = memo(({ className, height, width, borderRadius, margin }) => {
+  const styles: CSSProperties = { borderRadius, width, height, margin };
 
   return (
     <section className={classNames(cls.Skeleton, {}, [className])} style={styles} />