Redesigned drawer and modal

src/app/App.tsx

@@ -41,13 +41,13 @@ function App() {
 
   if (!inited) {
     deprecatedContent = (
-      <div className={classNames('app', {}, [theme])}>
+      <div id="app" className={classNames('app', {}, [theme])}>
         <PageLoader />
       </div>
     )
 
     redesignedContent = (
-      <div className={classNames('app_redesigned', {}, [theme])}>
+      <div id="app" className={classNames('app_redesigned', {}, [theme])}>
         <PageLoader />
       </div>
     )

src/entities/Rating/ui/RatingCart/RatingCart.tsx

@@ -9,8 +9,8 @@ import { VStack, HStack } from '@/shared/ui/redesigned/Stack'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 import { ButtonSizes } from '@/shared/ui/deprecated/Button/ui/Button'
 import { Card } from '@/shared/ui/deprecated/Card'
-import { Drawer } from '@/shared/ui/deprecated/Drawer'
-import { Modal } from '@/shared/ui/deprecated/Modal'
+import { Drawer } from '@/shared/ui/redesigned/Drawer'
+import { Modal } from '@/shared/ui/redesigned/Modal'
 import { StarRating } from '@/shared/ui/deprecated/StarRating'
 
 interface RatingCartProps {

src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx

@@ -2,7 +2,7 @@ import { Suspense } from 'react'
 
 import { LoginFormAsync } from '../LoginForm/LoginForm.async'
 
-import { Modal } from '@/shared/ui/deprecated/Modal'
+import { Modal } from '@/shared/ui/redesigned/Modal'
 import { Loader } from '@/shared/ui/deprecated/Loader'
 
 interface LoginModalProps {

src/features/NotificationButton/ui/NotificationButton/NotificationButton.tsx

@@ -8,7 +8,7 @@ import { Popover as PopoverDeprecated } from '@/shared/ui/deprecated/Popups'
 import NotificationDeprecated from '@/shared/assets/icons/notification.svg'
 import Notification from '@/shared/assets/icons/redesign/norification.svg'
 import { Button as ButtonDeprecated, ButtonVariables } from '@/shared/ui/deprecated/Button'
-import { Drawer } from '@/shared/ui/deprecated/Drawer'
+import { Drawer } from '@/shared/ui/redesigned/Drawer'
 import { Icon as IconDeprecated } from '@/shared/ui/deprecated/Icon'
 import { ToggleFeaturesComponent } from '@/shared/lib/features'
 import { Icon } from '@/shared/ui/redesigned/Icon'

src/features/articlePageGetting/ui/ArticlePageGetting/ArticlePageGetting.tsx

@@ -5,8 +5,8 @@ import { isMobile } from 'react-device-detect'
 import { saveJsonSettings, useJsonUserSettings } from '@/entities/User'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { Text } from '@/shared/ui/deprecated/Text'
-import { Drawer } from '@/shared/ui/deprecated/Drawer'
-import { Modal } from '@/shared/ui/deprecated/Modal'
+import { Drawer } from '@/shared/ui/redesigned/Drawer'
+import { Modal } from '@/shared/ui/redesigned/Modal'
 
 export const ArticlePageGetting = memo(() => {
   const { t } = useTranslation('articles-page')

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

@@ -26,7 +26,18 @@
   height: calc(100vh + 100px);
   width: 96vw;
   border-radius: 12px 12px 0;
-  background: var(--bg-color);
   touch-action: none;
   padding: 15px;
 }
+
+.drawerNew {
+  .sheet {
+    background-color: var(--light-bg-redesigned);
+  }
+}
+
+.drawerOld {
+  .sheet {
+    background-color: var(--bg-color);
+  }
+}

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

@@ -3,11 +3,12 @@ import { useTranslation } from 'react-i18next'
 import { Portal } from '@headlessui/react'
 
 import cls from './Drawer.module.scss'
-import { Overlay } from '../../../redesigned/Overlay'
+import { Overlay } from '../../Overlay'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { useTheme } from '@/app/providers/ThemeProvider'
 import { AnimationProvider, useAnimationLibs } from '@/shared/lib/components/AnimationProvider'
+import { toggleFeatures } from '@/shared/lib/features'
 
 interface DrawerProps {
   className?: string
@@ -19,11 +20,6 @@ interface DrawerProps {
 
 const height = window.innerHeight - 100
 
-/**
- * Компонент устарел. Сейчас используем новые из папки redesigned
- * @deprecated
- */
-
 export const DrawerContent = React.memo((props: DrawerProps) => {
   const { className, isOpen, onClose, children, lazy } = props
   const { t } = useTranslation()
@@ -78,9 +74,15 @@ export const DrawerContent = React.memo((props: DrawerProps) => {
     return null
   }
 
+  const drawerClass = toggleFeatures({
+    name: 'isAppRedesigned',
+    on: () => cls.drawerNew,
+    off: () => cls.drawerOld,
+  })
+
   return (
     <Portal>
-      <div className={classNames(cls.Drawer, {}, [className, theme, 'app_drawer'])}>
+      <div className={classNames(cls.Drawer, {}, [className, theme, 'app_drawer', drawerClass])}>
         <Overlay onClick={close} flexAling="end" />
         <Spring.a.div
           className={cls.sheet}

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

@@ -7,18 +7,28 @@
   opacity: 0;
   z-index: -1;
   pointer-events: none;
-  color: var(--inverted-primary-color);
 }
 
 .content {
   padding: 1.5rem;
   border-radius: 0.75rem;
-  background-color: var(--bg-color);
   transition: 0.2s ease transform;
   transform: scale(0.9);
   max-width: 60%;
 }
 
+.modalNew {
+  .content {
+    background-color: var(--light-bg-redesigned);
+  }
+}
+
+.modalOld {
+  .content {
+    background-color: var(--bg-color);
+  }
+}
+
 .opened {
   z-index: var(--modal-z-index);
   opacity: 1;

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

@@ -1,12 +1,13 @@
 import React, { ReactNode } from 'react'
 
-import { Portal } from '../../../redesigned/Portal'
+import { Portal } from '../../Portal'
 import cls from './Modal.module.scss'
-import { Overlay } from '../../../redesigned/Overlay'
+import { Overlay } from '../../Overlay'
 
 import { useTheme } from '@/app/providers/ThemeProvider'
 import { classNames, Mods } from '@/shared/lib/ClassNames/ClassNames'
 import { useModal } from '@/shared/lib/hooks/useModal/useModal'
+import { toggleFeatures } from '@/shared/lib/features'
 
 interface ModalProps {
   className?: string
@@ -41,9 +42,15 @@ export const Modal = (props: ModalProps) => {
     return null
   }
 
+  const modalClass = toggleFeatures({
+    name: 'isAppRedesigned',
+    on: () => cls.modalNew,
+    off: () => cls.modalOld,
+  })
+
   return (
     <Portal>
-      <div className={classNames(cls.Modal, mods, [className, theme])}>
+      <div className={classNames(cls.Modal, mods, [className, theme, modalClass])}>
         <Overlay flexAling="center" className={cls.overlay} onClick={closeHandler}>
           <div className={cls.content} onClick={onContentClick}>
             {children}