Wrapper flex item

.eslintrc.js

@@ -46,7 +46,15 @@ module.exports = {
             'error',
             {
                 markupOnly: true,
-                ignoreAttribute: ['data-testid', 'to', 'target'],
+                ignoreAttribute: [
+                    'data-testid',
+                    'to',
+                    'target',
+                    'justify',
+                    'align',
+                    'direction',
+                    'gap',
+                ],
             },
         ],
         'max-len': ['error', { ignoreComments: true, code: 125 }],

src/entities/Article/ui/AticleDetails/ArticleDetails.module.scss

@@ -1,34 +1,3 @@
 .ArticleDetails {
     min-height: 100%;
 }
-
-.avatar {
-    margin: 0 auto;
-}
-
-.title {
-    margin-top: 20px;
-}
-
-.skeleton {
-    margin-top: 15px;
-}
-
-.articleInfo {
-    display: flex;
-    align-items: center;
-}
-
-.icon {
-    margin-right: 8px;
-}
-
-.avatarWrapper {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-}
-
-.block {
-    margin-top: 16px;
-}

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

@@ -14,6 +14,7 @@ import EyeIcon from 'shared/assets/icons/eye.svg';
 import CalendarIcon from 'shared/assets/icons/calendar.svg';
 import { Icon } from 'shared/ui/Icon/Icon';
 import { useInitialEffect } from 'shared/lib/hooks/useInitialEffect/useInitialEffect';
+import { HStack, VStack } from 'shared/ui/Stack';
 import { ArticleBlock, ArticleBlockType } from '../../model/types/article';
 import { fetchArticleById } from '../../model/services/fetchArticleById/fetchArticleById';
 import cls from './ArticleDetails.module.scss';
@@ -35,7 +36,7 @@ interface ArticleDetailsProps {
 const reducers: ReducersList = {
     articleDetails: articleDetailsReducer,
 };
-/* eslint-disable indent */
+
 const renderBlock = (block: ArticleBlock) => {
     switch (block.type) {
         case ArticleBlockType.CODE:
@@ -66,7 +67,6 @@ const renderBlock = (block: ArticleBlock) => {
             return null;
     }
 };
-/* eslint-enable indent */
 
 export const ArticleDetails = memo(({ className, id }: ArticleDetailsProps) => {
     const { t } = useTranslation('article-details');
@@ -83,60 +83,59 @@ export const ArticleDetails = memo(({ className, id }: ArticleDetailsProps) => {
 
     if (isLoading) {
         content = (
-            <>
-                <Skeleton
-                    className={cls.avatar}
-                    width={200}
-                    height={200}
-                    border="50%"
-                />
-                <Skeleton className={cls.title} width={200} height={32} />
-                <Skeleton className={cls.skeleton} width={200} height={24} />
-                <Skeleton className={cls.skeleton} width="100%" height={200} />
-                <Skeleton className={cls.skeleton} width="100%" height={200} />
-            </>
+            <VStack gap="16" align="center" max>
+                <Skeleton width={200} height={200} border="50%" />
+                <Skeleton width={200} height={32} />
+                <Skeleton width={200} height={24} />
+                <Skeleton width="100%" height={200} />
+                <Skeleton width="100%" height={200} />
+            </VStack>
         );
     } else if (error) {
         content = (
-            <Text
-                align={TextAlign.CENTER}
-                theme={TextTheme.ERROR}
-                text={t('An error occurred while loading the article')}
-            />
+            <HStack justify="center" max>
+                <Text
+                    align={TextAlign.CENTER}
+                    theme={TextTheme.ERROR}
+                    text={t('An error occurred while loading the article')}
+                />
+            </HStack>
         );
     } else {
         content = (
             <>
-                <div className={cls.avatarWrapper}>
-                    <Avatar
-                        className={cls.avatar}
-                        size={200}
-                        src={article?.img}
+                <HStack justify="center" max>
+                    <Avatar size={200} src={article?.img} />
+                </HStack>
+                <VStack gap="16" max>
+                    <Text
+                        text={article?.subtitle}
+                        title={article?.title}
+                        size={TextSize.L}
                     />
-                </div>
-                <Text
-                    text={article?.subtitle}
-                    title={article?.title}
-                    size={TextSize.L}
-                />
-                <div className={cls.articleInfo}>
-                    <Icon Svg={EyeIcon} className={cls.icon} />
-                    <Text text={String(article?.views)} />
-                </div>
-                <div className={cls.articleInfo}>
-                    <Icon Svg={CalendarIcon} className={cls.icon} />
-                    <Text text={article?.createdAt} />
-                </div>
+                    <HStack gap="8">
+                        <Icon Svg={EyeIcon} />
+                        <Text text={String(article?.views)} />
+                    </HStack>
+                    <HStack gap="8">
+                        <Icon Svg={CalendarIcon} />
+                        <Text text={article?.createdAt} />
+                    </HStack>
+                </VStack>
                 {article?.blocks.map(renderBlock)}
             </>
         );
     }
 
     return (
         <DynamicModuleLoader reducers={reducers}>
-            <div className={classNames(cls.ArticleDetails, {}, [className])}>
+            <VStack
+                max
+                gap="16"
+                className={classNames(cls.ArticleDetails, {}, [className])}
+            >
                 {content}
-            </div>
+            </VStack>
         </DynamicModuleLoader>
     );
 });

src/entities/Comment/ui/CommentCard/CommentCard.module.scss

@@ -2,16 +2,3 @@
     padding: 10px;
     border: 1px solid var(--primary-color);
 }
-
-.header {
-    display: flex;
-    align-items: center;
-}
-
-.text {
-    margin-top: 10px;
-}
-
-.username {
-    margin-left: 10px;
-}

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

@@ -4,6 +4,7 @@ import { Avatar } from 'shared/ui/Avatar/Avatar';
 import { Text } from 'shared/ui/Text/Text';
 import { AppLink } from 'shared/ui/AppLink/AppLink';
 import { RoutePath } from 'shared/config/routeConfig/routeConfig';
+import { HStack, VStack } from 'shared/ui/Stack';
 import cls from './CommentCard.module.scss';
 import { Comment } from '../../model/types/comment';
 
@@ -17,17 +18,20 @@ export const CommentCard = memo(({ className, comment }: CommentCardProps) => {
         return null;
     }
     return (
-        <div className={classNames(cls.CommentCard, {}, [className])}>
-            <AppLink
-                className={cls.header}
-                to={`${RoutePath.profile}${comment.user.id}`}
-            >
-                {comment.user.avatar ? (
-                    <Avatar size={30} src={comment.user.avatar} />
-                ) : null}
-                <Text className={cls.username} title={comment.user.username} />
+        <VStack
+            gap="8"
+            max
+            className={classNames(cls.CommentCard, {}, [className])}
+        >
+            <AppLink to={`${RoutePath.profile}${comment.user.id}`}>
+                <HStack gap="8">
+                    {comment.user.avatar ? (
+                        <Avatar size={30} src={comment.user.avatar} />
+                    ) : null}
+                    <Text title={comment.user.username} />
+                </HStack>
             </AppLink>
-            <Text className={cls.text} title={comment.text} />
-        </div>
+            <Text title={comment.text} />
+        </VStack>
     );
 });

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

@@ -3,7 +3,7 @@ import { classNames } from 'shared/lib/classNames/classNames';
 import { useTranslation } from 'react-i18next';
 import { Text } from 'shared/ui/Text/Text';
 import { Skeleton } from 'shared/ui/Skeleton/Skeleton';
-import cls from './CommentList.module.scss';
+import { HStack, VStack } from 'shared/ui/Stack';
 import { Comment } from '../../model/types/comment';
 import { CommentCard } from '../CommentCard/CommentCard';
 
@@ -18,33 +18,25 @@ export const CommentList = memo(
         const { t } = useTranslation('comments');
         if (isLoading) {
             return (
-                <div className={classNames(cls.CommentCard, {}, [className])}>
-                    <div className={cls.header}>
+                <VStack gap="16" className={classNames('', {}, [className])}>
+                    <HStack gap="10">
                         <Skeleton width={30} height={30} border="50%" />
-                        <Skeleton
-                            height={20}
-                            width={100}
-                            className={cls.username}
-                        />
-                    </div>
-                    <Skeleton className={cls.text} width="100%" height={50} />
-                </div>
+                        <Skeleton height={20} width={100} />
+                    </HStack>
+                    <Skeleton width="100%" height={50} />
+                </VStack>
             );
         }
         return (
-            <div className={classNames('', {}, [className])}>
+            <VStack gap="16" max className={classNames('', {}, [className])}>
                 {comments.length ? (
                     comments.map((comment) => (
-                        <CommentCard
-                            className={cls.comment}
-                            comment={comment}
-                            key={comment.id}
-                        />
+                        <CommentCard comment={comment} key={comment.id} />
                     ))
                 ) : (
                     <Text text={t('No comments')} />
                 )}
-            </div>
+            </VStack>
         );
     },
 );

src/entities/Profile/ui/ProfileCard/ProfileCard.module.scss

@@ -3,20 +3,7 @@
     border: 2px solid var(--inverted-bg-color);
 }
 
-.input {
-    margin-top: 10px;
-}
-
 .loading,
 .error {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     height: 300px;
 }
-
-.avatarWrapper {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}