Redesigned sidebar

.eslintrc.js

@@ -58,6 +58,7 @@ module.exports = {
           'border',
           'flexAling',
           'featureName',
+          'variant',
         ],
       },
     ],

.stylelintrc.json

@@ -3,6 +3,7 @@
   "rules": {
     "indentation": [2],
     "selector-class-pattern": null,
-    "no-missing-end-of-source-newline": null
+    "no-missing-end-of-source-newline": null,
+    "max-line-length": 300
   }
 }

src/app/styles/themes/dark.scss

@@ -13,7 +13,7 @@
   --bg-redesigned: #0c1214;
   --light-bg-redesigned: #151c1f;
   --text-redesigned: #dbdbdb;
-  --hint-redesigned: #555555;
+  --hint-redesigned: #555;
   --cancel-redesigned: #d95757;
   --save-redesigned: #6cd98b;
   --icon-redesigned: #74a2b2;

src/app/styles/themes/light.scss

@@ -9,12 +9,12 @@
   --inverted-third-color: #161313;
 
   // redesigned
-  --dark-bg-redesigned: #ffffff;
+  --dark-bg-redesigned: #fff;
   --bg-redesigned: #eff5f6;
   --light-bg-redesigned: #e2eef1;
   --text-redesigned: #141c1f;
   --hint-redesigned: #adbcc0;
-  --cancel-redesigned: #ff7777;
+  --cancel-redesigned: #f77;
   --save-redesigned: #62de85;
   --icon-redesigned: #5ed3f3;
   --accent-redesigned: #00c8ff;

src/app/styles/variables/global.scss

@@ -1,5 +1,5 @@
 :root {
-  --font-family-main: 'Raleway', sans-serif;
+  --font-family-main: "Raleway", sans-serif;
 
   // S
   --font-size-s: 10px;
@@ -42,8 +42,8 @@
   --red-dark: #c90000;
 
   // *Redesigned variavles
-  --font-family-text-redesigned: 'Nunito Sans', sans-serif;
-  --font-family-title-redesigned: font-family: 'Roboto', sans-serif;
+  --font-family-text-redesigned: "Nunito Sans", sans-serif;
+  --font-family-title-redesigned: font-family: "Roboto", sans-serif;
 
   // S
   --font-s-redesigned: var(--font-size-s) / var(--font-line-s) var(--font-family-text-redesigned);
@@ -56,4 +56,7 @@
 
   // XL
   --font-xl-redesigned: var(--font-size-xl) / var(--font-line-xl) var(--font-family-title-redesigned);
+
+  // Sidebar
+  --sidebar-width-collapsed-redesigned: 50px;
 }

src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx

@@ -20,7 +20,7 @@ import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch
 import EyeIcon from '@/shared/assets/icons/eye.svg'
 import CalendarIcon from '@/shared/assets/icons/calendar.svg'
 import { useInitialEffect } from '@/shared/lib/hooks/useInitialEffect/useInitialEffect'
-import { HStack, VStack } from '@/shared/ui/Stack'
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'
 import { Icon } from '@/shared/ui/deprecated/Icon'
 import { Skeleton } from '@/shared/ui/deprecated/Skeleton'

src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx

@@ -11,7 +11,7 @@ import EyeIcon from '@/shared/assets/icons/eye.svg'
 import { getRouteArticleDetails } from '@/shared/const/router'
 import { Icon } from '@/shared/ui/deprecated/Icon'
 import { Text, TextSize } from '@/shared/ui/deprecated/Text'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { AppImage } from '@/shared/ui/deprecated/AppImage'
 import { AppLink } from '@/shared/ui/deprecated/AppLink'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'

src/entities/Comment/ui/CommentCard/CommentCard.tsx

@@ -6,7 +6,7 @@ import cls from './CommentCard.module.scss'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { getRouteProfile } from '@/shared/const/router'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { AppLink } from '@/shared/ui/deprecated/AppLink'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'
 import { Skeleton } from '@/shared/ui/deprecated/Skeleton'

src/entities/Comment/ui/CommentList/CommentList.tsx

@@ -5,7 +5,7 @@ import { Comment } from '../../model/types/comment'
 import { CommentCard } from '../CommentCard/CommentCard'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { Text } from '@/shared/ui/deprecated/Text'
 
 interface CommentListProps {

src/entities/Country/ui/CountrySelect/CountrySelect.tsx

@@ -4,7 +4,7 @@ import React, { memo } from 'react'
 import { Country } from '../../model/types/country'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
-import { ListBox } from '@/shared/ui/Popups/ui/ListBox/ListBox'
+import { ListBox } from '@/shared/ui/redesigned/Popups/ui/ListBox/ListBox'
 
 interface CountrySelectProps {
   className?: string

src/entities/Currency/ui/CurrencySelect/CurrencySelect.tsx

@@ -4,7 +4,7 @@ import React, { memo } from 'react'
 import { Currency } from '../../model/types/currency'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
-import { ListBox } from '@/shared/ui/Popups/ui/ListBox/ListBox'
+import { ListBox } from '@/shared/ui/redesigned/Popups/ui/ListBox/ListBox'
 
 interface CurrencySelectProps {
   className?: string

src/entities/Notification/ui/NotificationList/NotificationList.tsx

@@ -6,7 +6,7 @@ import { NotificationItem } from '../NotificationItem/NotificationItem'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { Skeleton } from '@/shared/ui/deprecated/Skeleton'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 // import cls from './NotificationList.module.scss';
 
 interface NotificationListProps {

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

@@ -6,7 +6,7 @@ import { Profile } from '../../model/types/profile'
 import { classNames, Mods } from '@/shared/lib/ClassNames/ClassNames'
 import { Currency, CurrencySelect } from '@/entities/Currency'
 import { Country, CountrySelect } from '@/entities/Country'
-import { HStack, VStack } from '@/shared/ui/Stack'
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'
 import { Input } from '@/shared/ui/deprecated/Input'
 import { TextTheme, TextAling, Text } from '@/shared/ui/deprecated/Text/ui/Text'

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

@@ -5,7 +5,7 @@ import { BrowserView, MobileView } from 'react-device-detect'
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { Text } from '@/shared/ui/deprecated/Text'
 import { Input } from '@/shared/ui/deprecated/Input'
-import { VStack, HStack } from '@/shared/ui/Stack'
+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'

src/features/ArticleRecomendationsList/ui/ArticleRecomendationsList/ArticleRecomendationsList.tsx

@@ -6,7 +6,7 @@ import { getArticleRecomendationsList } from '../../api/ArticleRecomendationsLis
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { ArticleList } from '@/entities/Article'
 import { Text, TextSize } from '@/shared/ui/deprecated/Text'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 
 // import cls from './ArticleRecomendationsList.module.scss';
 

src/features/AvatarDropdown/ui/AvatarDropdown.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { getUserAuthData, isUserAdmin, isUserManager, userActions } from '@/entities/User'
 import { getRouteAdminPanel, getRouteProfile } from '@/shared/const/router'
-import { Dropdown } from '@/shared/ui/Popups'
+import { Dropdown } from '@/shared/ui/redesigned/Popups'
 import { Avatar } from '@/shared/ui/deprecated/Avatar'
 
 interface AvatarDropdownProps {

src/features/EditableProfileCard/ui/EditableProfileCardHeader/EditableProfileCardHeader.tsx

@@ -10,7 +10,7 @@ import { updateProfileData } from '../../model/services/updateProfileData/update
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { getUserAuthData } from '@/entities/User'
-import { HStack } from '@/shared/ui/Stack'
+import { HStack } from '@/shared/ui/redesigned/Stack'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 import { Text } from '@/shared/ui/deprecated/Text'
 

src/features/LangSwitcher/ui/LangSwitcher.tsx

@@ -2,7 +2,9 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
-import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { Button as ButtonDeprecated, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { Button } from '@/shared/ui/redesigned/Button'
 
 interface LangSwitcherProps {
   className?: string
@@ -18,9 +20,21 @@ export const LangSwitcher: React.FC<LangSwitcherProps> = memo((props) => {
     i18n.changeLanguage(i18n.language === 'ru' ? 'en' : 'ru')
   }
 
-  return (
-    <Button theme={ButtonVariables.CLEAR_THIRD} onClick={switchLanguage} className={classNames('', {}, [className])}>
+  const deprecatedContent = (
+    <ButtonDeprecated
+      theme={ButtonVariables.CLEAR_THIRD}
+      onClick={switchLanguage}
+      className={classNames('', {}, [className])}
+    >
+      {t(short ? 'Короткий язык' : 'Русский')}
+    </ButtonDeprecated>
+  )
+
+  const redesignedContent = (
+    <Button variant="clear" onClick={switchLanguage} className={classNames('', {}, [className])}>
       {t(short ? 'Короткий язык' : 'Русский')}
     </Button>
   )
+
+  return <ToggleFeaturesComponent featureName="isAppRedesigned" on={redesignedContent} off={deprecatedContent} />
 })

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

@@ -4,7 +4,7 @@ import { BrowserView, MobileView } from 'react-device-detect'
 import cls from './NotificationButton.module.scss'
 
 import { NotificationList } from '@/entities/Notification'
-import { Popover } from '@/shared/ui/Popups'
+import { Popover } from '@/shared/ui/redesigned/Popups'
 import Notification from '@/shared/assets/icons/notification.svg'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 import { Drawer } from '@/shared/ui/deprecated/Drawer'

src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx

@@ -2,12 +2,16 @@ import { memo, useCallback } from 'react'
 
 import { Theme, useTheme } from '@/app/providers/ThemeProvider'
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
-import LightIcon from '@/shared/assets/icons/white.svg'
-import DarkIcon from '@/shared/assets/icons/orange.svg'
+import LightIconDeprecated from '@/shared/assets/icons/white.svg'
+import DarkIconDeprecated from '@/shared/assets/icons/orange.svg'
+import ThemeSwitcherIcon from '@/shared/assets/icons/redesign/theme-switcher.svg'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { saveJsonSettings } from '@/entities/User'
-import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
-import { Icon } from '@/shared/ui/deprecated/Icon'
+import { Button as ButtonDeprecated, ButtonVariables } from '@/shared/ui/deprecated/Button'
+import { Icon as IconDeprecated } from '@/shared/ui/deprecated/Icon'
+import { ToggleFeaturesComponent } from '@/shared/lib/features'
+import { Button } from '@/shared/ui/redesigned/Button'
+import { Icon } from '@/shared/ui/redesigned/Icon'
 
 interface ThemeSwitcherProps {
   className?: string
@@ -24,9 +28,21 @@ export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = memo((props) => {
     })
   }, [dispatch, toggleTheme])
 
-  return (
-    <Button theme={ButtonVariables.CLEAR_THIRD} onClick={onToggleHandler} className={classNames('', {}, [className])}>
-      <Icon height={24} width={24} Svg={theme === Theme.DARK ? DarkIcon : LightIcon} />
+  const deprecatedContent = (
+    <ButtonDeprecated
+      theme={ButtonVariables.CLEAR_THIRD}
+      onClick={onToggleHandler}
+      className={classNames('', {}, [className])}
+    >
+      <IconDeprecated height={24} width={24} Svg={theme === Theme.DARK ? DarkIconDeprecated : LightIconDeprecated} />
+    </ButtonDeprecated>
+  )
+
+  const redesignedContent = (
+    <Button variant="clear" onClick={onToggleHandler} className={classNames('', {}, [className])}>
+      <Icon Svg={ThemeSwitcherIcon} />
     </Button>
   )
+
+  return <ToggleFeaturesComponent featureName="isAppRedesigned" on={redesignedContent} off={deprecatedContent} />
 })

src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx

@@ -10,7 +10,7 @@ import cls from './AddCommentForm.module.scss'
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
 import { DynamicModuleLoader, ReducersList } from '@/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader'
-import { HStack } from '@/shared/ui/Stack'
+import { HStack } from '@/shared/ui/redesigned/Stack'
 import { Input } from '@/shared/ui/deprecated/Input'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 

src/pages/ArticleDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx

@@ -10,7 +10,7 @@ import { getArticleCommentsLoading } from '../../model/selectors/getArticleComme
 import { AddCommentForm } from '@/features/addCommentForm'
 import { CommentList } from '@/entities/Comment'
 import { useInitialEffect } from '@/shared/lib/hooks/useInitialEffect/useInitialEffect'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { Text, TextSize } from '@/shared/ui/deprecated/Text'
 
 // import cls from './ArticleDetailsComments.module.scss';

src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx

@@ -13,7 +13,7 @@ import { ArticleRecomendationsList } from '@/features/ArticleRecomendationsList'
 import { ArticleRating } from '@/features/ArticleRating'
 import { toggleFeatures } from '@/shared/lib/features'
 import { Card } from '@/shared/ui/deprecated/Card'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 
 interface ArticleDetailsPageProps {
   className?: string

src/pages/ArticleDetailsPage/ui/ArticleDetailsPageHeader/ArticleDetailsPageHeader.tsx

@@ -8,7 +8,7 @@ import { getCanEditArticle } from '../../model/selectors/getCanEditArticle/getCa
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { getArticleDetailsData } from '@/entities/Article'
 import { getRouteArticleEdit, getRouteArticles } from '@/shared/const/router'
-import { HStack } from '@/shared/ui/Stack'
+import { HStack } from '@/shared/ui/redesigned/Stack'
 import { Button, ButtonVariables } from '@/shared/ui/deprecated/Button'
 
 interface ArticleDetailsPageHeaderProps {

src/pages/ProfilePage/ui/ProfilePage.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
 import { Page } from '@/widgets/Page'
-import { VStack } from '@/shared/ui/Stack'
+import { VStack } from '@/shared/ui/redesigned/Stack'
 import { EditableProfileCard } from '@/features/EditableProfileCard'
 
 interface ProfilePageProps {

src/shared/layouts/MainLayout/ui/MainLayout.module.scss

@@ -1,19 +1,20 @@
 .MainLayout {
   min-width: 100%;
   display: grid;
-  grid-template-areas: 'sidebar content rightbar';
-  grid-template-columns: 284px 1fr 176px;
+  grid-template-areas: "sidebar content rightbar";
+  grid-template-columns: 284px 1fr 100px;
 }
 
 .sidebar {
   grid-area: sidebar;
-  justify-self: center;
   padding: 32px;
 }
+
 .content {
   grid-area: content;
   justify-self: center;
   max-width: 1200px;
+  width: 100%;
   padding: 32px;
 }
 
@@ -23,6 +24,7 @@
   top: 0;
   height: 100vh;
 }
+
 .rightbar {
   display: flex;
   flex-direction: column;

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 
-import { Portal } from '../../../Portal'
+import { Portal } from '../../../redesigned/Portal'
 import cls from './Modal.module.scss'
 import { Overlay } from '../../Overlay'
 

src/shared/ui/Popups/ui/Dropdown/Dropdown.stories.tsx → src/shared/ui/deprecated/Popups/ui/Dropdown/Dropdown.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 
 // eslint-disable-next-line ulbi-tv-plugin/path-checker
 import { Dropdown } from './Dropdown'
-import { Button } from '../../../deprecated/Button'
+import { Button } from '../../../../deprecated/Button'
 
 export default {
   title: 'shared/Popups/Dropdown',

src/shared/ui/Popups/ui/Dropdown/Dropdown.tsx → src/shared/ui/deprecated/Popups/ui/Dropdown/Dropdown.tsx

@@ -5,7 +5,7 @@ import { Menu } from '@headlessui/react'
 import cls from './Dropdown.module.scss'
 import popupCls from '../../styles/Popups.module.scss'
 import { mapDirectionClass } from '../../styles/const'
-import { AppLink } from '../../../deprecated/AppLink'
+import { AppLink } from '../../../../deprecated/AppLink'
 
 import { DropdownDirection } from '@/shared/types/ui'
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'