From 6739198591701c839b163fe9183a0f18cd9086dd Mon Sep 17 00:00:00 2001
From: Nothingg <nothing9537@gmail.com>
Date: Mon, 30 Oct 2023 10:30:28 -0500
Subject: [PATCH] Modal, Drawer, Portal fix and redesign

---
 src/app/App.tsx                               | 100 ++++++++++++------
 .../ThemeProvider/ui/ThemeProvider.tsx        |   2 +-
 .../ProfileCard.redesigned.tsx                |   2 +-
 .../Rating/ui/RatingCard/RatingCard.tsx       |   4 +-
 .../ArticlePageGreetings.tsx                  |   2 +-
 .../ui/LoginModal/LoginModal.tsx              |   2 +-
 .../AvatarDropdown/ui/AvatarDropdown.tsx      |   3 +-
 .../ui/OpenNotificationsList.tsx              |   2 +-
 .../features/service/updateFeatureFlags.ts    |   2 +
 .../Drawer/Drawer.module.scss                 |  13 ++-
 .../Drawer/Drawer.stories.tsx                 |   6 +-
 .../Drawer/Drawer.tsx                         |  21 ++--
 .../Drawer/index.ts                           |   0
 .../Modal/Modal.module.scss                   |  14 +++
 .../Modal/Modal.stories.tsx                   |   0
 .../Modal/Modal.tsx                           |  21 ++--
 .../{deprecated => redesigned}/Modal/index.ts |   0
 src/shared/ui/redesigned/Portal/Portal.tsx    |  12 ++-
 .../ui/redesigned/Skeleton/Skeleton.tsx       |   5 +-
 src/widgets/Navbar/ui/Navbar/Navbar.tsx       |  45 ++++++--
 20 files changed, 183 insertions(+), 73 deletions(-)
 rename src/shared/ui/{deprecated => redesigned}/Drawer/Drawer.module.scss (75%)
 rename src/shared/ui/{deprecated => redesigned}/Drawer/Drawer.stories.tsx (88%)
 rename src/shared/ui/{deprecated => redesigned}/Drawer/Drawer.tsx (87%)
 rename src/shared/ui/{deprecated => redesigned}/Drawer/index.ts (100%)
 rename src/shared/ui/{deprecated => redesigned}/Modal/Modal.module.scss (71%)
 rename src/shared/ui/{deprecated => redesigned}/Modal/Modal.stories.tsx (100%)
 rename src/shared/ui/{deprecated => redesigned}/Modal/Modal.tsx (78%)
 rename src/shared/ui/{deprecated => redesigned}/Modal/index.ts (100%)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 0fb6b5b..afcfa81 100644
--- a/src/app/App.tsx
+++ b/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}
     />
   );
 };
diff --git a/src/app/providers/ThemeProvider/ui/ThemeProvider.tsx b/src/app/providers/ThemeProvider/ui/ThemeProvider.tsx
index c3439a5..bb1c859 100644
--- a/src/app/providers/ThemeProvider/ui/ThemeProvider.tsx
+++ b/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) {
diff --git a/src/entities/Profile/ui/ProfileCardRedesigned/ProfileCard.redesigned.tsx b/src/entities/Profile/ui/ProfileCardRedesigned/ProfileCard.redesigned.tsx
index 6a88732..f2fc9f3 100644
--- a/src/entities/Profile/ui/ProfileCardRedesigned/ProfileCard.redesigned.tsx
+++ b/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}>
diff --git a/src/entities/Rating/ui/RatingCard/RatingCard.tsx b/src/entities/Rating/ui/RatingCard/RatingCard.tsx
index 63ae554..1367ab0 100644
--- a/src/entities/Rating/ui/RatingCard/RatingCard.tsx
+++ b/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 {
diff --git a/src/features/ArticlePageGreetings/ui/ArticlePageGreetings/ArticlePageGreetings.tsx b/src/features/ArticlePageGreetings/ui/ArticlePageGreetings/ArticlePageGreetings.tsx
index d41a7c6..69319f8 100644
--- a/src/features/ArticlePageGreetings/ui/ArticlePageGreetings/ArticlePageGreetings.tsx
+++ b/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';
diff --git a/src/features/AuthByUserName/ui/LoginModal/LoginModal.tsx b/src/features/AuthByUserName/ui/LoginModal/LoginModal.tsx
index 8a0cf4b..43783e9 100644
--- a/src/features/AuthByUserName/ui/LoginModal/LoginModal.tsx
+++ b/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 {
diff --git a/src/features/AvatarDropdown/ui/AvatarDropdown.tsx b/src/features/AvatarDropdown/ui/AvatarDropdown.tsx
index 136505a..2b3836e 100644
--- a/src/features/AvatarDropdown/ui/AvatarDropdown.tsx
+++ b/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>
           )}
diff --git a/src/features/OpenNotificationsList/ui/OpenNotificationsList.tsx b/src/features/OpenNotificationsList/ui/OpenNotificationsList.tsx
index 0ad8655..d7424d0 100644
--- a/src/features/OpenNotificationsList/ui/OpenNotificationsList.tsx
+++ b/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';
diff --git a/src/shared/lib/features/service/updateFeatureFlags.ts b/src/shared/lib/features/service/updateFeatureFlags.ts
index c739c58..916d2f0 100644
--- a/src/shared/lib/features/service/updateFeatureFlags.ts
+++ b/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);
 
diff --git a/src/shared/ui/deprecated/Drawer/Drawer.module.scss b/src/shared/ui/redesigned/Drawer/Drawer.module.scss
similarity index 75%
rename from src/shared/ui/deprecated/Drawer/Drawer.module.scss
rename to src/shared/ui/redesigned/Drawer/Drawer.module.scss
index 0b11f9e..827bc50 100644
--- a/src/shared/ui/deprecated/Drawer/Drawer.module.scss
+++ b/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);
+  }
 }
\ No newline at end of file
diff --git a/src/shared/ui/deprecated/Drawer/Drawer.stories.tsx b/src/shared/ui/redesigned/Drawer/Drawer.stories.tsx
similarity index 88%
rename from src/shared/ui/deprecated/Drawer/Drawer.stories.tsx
rename to src/shared/ui/redesigned/Drawer/Drawer.stories.tsx
index ee7caf5..3dbb92b 100644
--- a/src/shared/ui/deprecated/Drawer/Drawer.stories.tsx
+++ b/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';
 
diff --git a/src/shared/ui/deprecated/Drawer/Drawer.tsx b/src/shared/ui/redesigned/Drawer/Drawer.tsx
similarity index 87%
rename from src/shared/ui/deprecated/Drawer/Drawer.tsx
rename to src/shared/ui/redesigned/Drawer/Drawer.tsx
index cc7baa6..49a09d5 100644
--- a/src/shared/ui/deprecated/Drawer/Drawer.tsx
+++ b/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>
diff --git a/src/shared/ui/deprecated/Drawer/index.ts b/src/shared/ui/redesigned/Drawer/index.ts
similarity index 100%
rename from src/shared/ui/deprecated/Drawer/index.ts
rename to src/shared/ui/redesigned/Drawer/index.ts
diff --git a/src/shared/ui/deprecated/Modal/Modal.module.scss b/src/shared/ui/redesigned/Modal/Modal.module.scss
similarity index 71%
rename from src/shared/ui/deprecated/Modal/Modal.module.scss
rename to src/shared/ui/redesigned/Modal/Modal.module.scss
index cf5590e..ab7c00f 100644
--- a/src/shared/ui/deprecated/Modal/Modal.module.scss
+++ b/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);
diff --git a/src/shared/ui/deprecated/Modal/Modal.stories.tsx b/src/shared/ui/redesigned/Modal/Modal.stories.tsx
similarity index 100%
rename from src/shared/ui/deprecated/Modal/Modal.stories.tsx
rename to src/shared/ui/redesigned/Modal/Modal.stories.tsx
diff --git a/src/shared/ui/deprecated/Modal/Modal.tsx b/src/shared/ui/redesigned/Modal/Modal.tsx
similarity index 78%
rename from src/shared/ui/deprecated/Modal/Modal.tsx
rename to src/shared/ui/redesigned/Modal/Modal.tsx
index 26521c0..35f7881 100644
--- a/src/shared/ui/deprecated/Modal/Modal.tsx
+++ b/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}
diff --git a/src/shared/ui/deprecated/Modal/index.ts b/src/shared/ui/redesigned/Modal/index.ts
similarity index 100%
rename from src/shared/ui/deprecated/Modal/index.ts
rename to src/shared/ui/redesigned/Modal/index.ts
diff --git a/src/shared/ui/redesigned/Portal/Portal.tsx b/src/shared/ui/redesigned/Portal/Portal.tsx
index a243be6..1caad20 100644
--- a/src/shared/ui/redesigned/Portal/Portal.tsx
+++ b/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)
+  );
+};
diff --git a/src/shared/ui/redesigned/Skeleton/Skeleton.tsx b/src/shared/ui/redesigned/Skeleton/Skeleton.tsx
index 7352785..dd61552 100644
--- a/src/shared/ui/redesigned/Skeleton/Skeleton.tsx
+++ b/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} />
diff --git a/src/widgets/Navbar/ui/Navbar/Navbar.tsx b/src/widgets/Navbar/ui/Navbar/Navbar.tsx
index 923b49d..dc70fe5 100644
--- a/src/widgets/Navbar/ui/Navbar/Navbar.tsx
+++ b/src/widgets/Navbar/ui/Navbar/Navbar.tsx
@@ -5,11 +5,13 @@ import { AvatarDropdown } from '@/features/AvatarDropdown';
 import { useAppTranslation } from '@/shared/lib/hooks/useAppTranslation';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useAppSelector } from '@/shared/lib/hooks/useAppSelector';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import { Button as ButtonDeprecated, ButtonTheme as ButtonThemeDeprecated } from '@/shared/ui/deprecated/Button';
 import { Text, TextTheme } from '@/shared/ui/deprecated/Text';
 import { getUserAuthData } from '@/entities/User';
 import { HStack } from '@/shared/ui/redesigned/Stack';
+import { Button } from '@/shared/ui/redesigned/Button';
 import { ToggleFeatures } from '@/shared/lib/features';
+
 import cls from './Navbar.module.scss';
 
 interface NavbarProps {
@@ -43,7 +45,7 @@ export const Navbar: FC<NavbarProps> = memo(({ className }) => {
     </header>
   );
 
-  const AuthDataNavbar = (
+  const AuthDataNavbarRedesigned = (
     <header className={classNames(cls.NavbarRedesigned, {}, [className])}>
       <HStack width="fit-content" className={cls.links}>
         <OpenNotificationsList />
@@ -57,16 +59,39 @@ export const Navbar: FC<NavbarProps> = memo(({ className }) => {
       <ToggleFeatures
         name="isAppRedesigned"
         off={AuthDataNavBarDeprecated}
-        on={AuthDataNavbar}
+        on={AuthDataNavbarRedesigned}
       />
     );
   }
 
-  return (
-    <header className={classNames(cls.navbar, {}, [className])}>
+  /**
+   * @deprecated
+   */
+  const NonAuthDataNavbarDeprecated = (
+    <header
+      className={classNames(cls.navbar, {}, [className])}
+    >
+      <ButtonDeprecated
+        className={cls.links}
+        theme={ButtonThemeDeprecated.CLEAR_INVERTED}
+        onClick={onLoginHandler}
+      >
+        {t('login')}
+      </ButtonDeprecated>
+      <LoginModal
+        isOpen={isAuthModal}
+        onClose={setIsAuthModal}
+      />
+    </header>
+  );
+
+  const NonAuthDataNavbarRedesigned = (
+    <header
+      className={classNames(cls.NavbarRedesigned, {}, [className])}
+    >
       <Button
+        variant="contained"
         className={cls.links}
-        theme={ButtonTheme.CLEAR_INVERTED}
         onClick={onLoginHandler}
       >
         {t('login')}
@@ -77,4 +102,12 @@ export const Navbar: FC<NavbarProps> = memo(({ className }) => {
       />
     </header>
   );
+
+  return (
+    <ToggleFeatures
+      name="isAppRedesigned"
+      on={NonAuthDataNavbarRedesigned}
+      off={NonAuthDataNavbarDeprecated}
+    />
+  );
 });