feat: redesign articles list big view

src/entities/Article/ui/ArticleList/ArticleList.tsx

@@ -45,7 +45,7 @@ export const ArticleList = memo((props: ArticleListProps) => {
                     cls[view],
                 ])}
             >
-                <Text size={TextSize.L} title={t('Статьи не найдены')} />
+                <Text size={TextSize.L} title={t('Articles not found')} />
             </div>
         );
     }

src/entities/Article/ui/ArticleListItem/ArticleListItem.module.scss

@@ -1,104 +1,12 @@
 .BIG {
-    .views {
-        margin-left: auto;
-    }
-
-    .header {
-        display: flex;
-        align-items: center;
-    }
-
-    .username {
-        margin-left: 8px;
-    }
-
-    .date {
-        margin-left: auto;
-    }
-
-    .title {
-        margin-top: 8px;
-    }
-
     .img {
         width: 100%;
-        max-height: 250px;
+        max-height: 420px;
         object-fit: cover;
-        margin: 16px 0;
-    }
-
-    .footer {
-        display: flex;
-        align-items: center;
-        margin-top: 16px;
     }
 
     .textBlock {
-        max-height: 200px;
-        overflow-y: hidden;
-    }
-}
-
-.SMALL {
-    width: 230px;
-    transition: 0.2s;
-    cursor: pointer;
-
-    .date {
-        position: absolute;
-        right: 0;
-        top: 0;
-        display: none;
-    }
-
-    &:hover {
-        opacity: 0.8;
-        transform: scale(1.01);
-        cursor: pointer;
-
-        .date {
-            display: block;
-        }
-    }
-
-    .imageWrapper {
-        width: 200px;
-        height: 200px;
-        position: relative;
-    }
-
-    .img {
-        width: 200px;
-        height: 200px;
-        object-fit: cover;
-    }
-
-    .infoWrapper {
-        display: flex;
-        align-items: center;
-        margin-top: 8px;
-    }
-
-    .types p {
-        width: 115px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .views {
-        margin-left: auto;
-        margin-right: 8px;
-    }
-
-    .title {
-        margin-top: 8px;
-    }
-
-    .title p {
-        width: 200px;
-        white-space: nowrap;
+        height: 72px;
         overflow: hidden;
-        text-overflow: ellipsis;
     }
 }

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

@@ -1,20 +1,20 @@
 import { useTranslation } from 'react-i18next';
 import { HTMLAttributeAnchorTarget, memo } from 'react';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { AppLink } from '@/shared/ui/deprecated/AppLink';
-import { Text } from '@/shared/ui/deprecated/Text';
-import { Skeleton } from '@/shared/ui/deprecated/Skeleton';
+import { Button } from '@/shared/ui/redesigned/Button';
+import { AppLink } from '@/shared/ui/redesigned/AppLink';
+import { Text } from '@/shared/ui/redesigned/Text';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import EyeIcon from '@/shared/assets/icons/eye-20-20.svg';
+import EyeIcon from '@/shared/assets/icons/eye.svg';
 import { ArticleBlockType, ArticleView } from '../../model/consts/consts';
-import { ArticleTextBlockComponent } from '../ArticleTextBlockComponent/ArticleTextBlockComponent';
 import { Article, ArticleTextBlock } from '../../model/types/article';
 import cls from './ArticleListItem.module.scss';
 import { getRouteArticleDetails } from '@/shared/const/router';
-import { Icon } from '@/shared/ui/deprecated/Icon';
-import { Card } from '@/shared/ui/deprecated/Card';
-import { Avatar } from '@/shared/ui/deprecated/Avatar';
+import { Icon } from '@/shared/ui/redesigned/Icon';
+import { Card } from '@/shared/ui/redesigned/Card';
+import { Avatar } from '@/shared/ui/redesigned/Avatar';
 import { AppImage } from '@/shared/ui/redesigned/AppImage';
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
 
 interface ArticleListItemProps {
     className?: string;
@@ -29,10 +29,10 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
 
     const types = <Text text={article.type.join(', ')} className={cls.types} />;
     const views = (
-        <>
+        <HStack gap="8">
             <Text text={String(article.views)} className={cls.views} />
             <Icon Svg={EyeIcon} />
-        </>
+        </HStack>
     );
 
     if (view === ArticleView.BIG) {
@@ -41,50 +41,48 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
         ) as ArticleTextBlock;
 
         return (
-            <div
+            <Card
+                padding="24"
+                max
                 data-testid="ArticleListItem"
                 className={classNames(cls.ArticleListItem, {}, [
                     className,
                     cls[view],
                 ])}
             >
-                <Card>
-                    <div className={cls.header}>
-                        <Avatar size={30} src={article.user.avatar} />
-                        <Text
-                            text={article.user.username}
-                            className={cls.username}
-                        />
-                        <Text text={article.createdAt} className={cls.date} />
-                    </div>
-                    <Text text={article.title} className={cls.title} />
-                    {types}
+                <VStack gap="16">
+                    <HStack gap="8">
+                        <Avatar size={32} src={article.user.avatar} />
+                        <Text bold text={article.user.username} />
+                        <Text text={article.createdAt} />
+                    </HStack>
+                    <Text text={article.title} bold />
+                    <Text text={article.subtitle} bold size="s" />
                     <AppImage
                         src={article.img}
                         className={cls.img}
                         alt={article.title}
                         fallback={<Skeleton width="100%" height={250} />}
                         errorFallback={<Skeleton width="100%" height={250} />}
                     />
-                    {textBlock && (
-                        <ArticleTextBlockComponent
-                            block={textBlock}
+                    {textBlock?.paragraphs && (
+                        <Text
                             className={cls.textBlock}
+                            text={textBlock.paragraphs.slice(0, 2).join(' ')}
                         />
                     )}
-                    <div className={cls.footer}>
+
+                    <HStack max justify="between">
                         <AppLink
                             target={target}
                             to={getRouteArticleDetails(article.id)}
                         >
-                            <Button theme={ButtonTheme.OUTLINE}>
-                                {t('Read more...')}
-                            </Button>
+                            <Button>{t('Read more...')}</Button>
                         </AppLink>
                         {views}
-                    </div>
-                </Card>
-            </div>
+                    </HStack>
+                </VStack>
+            </Card>
         );
     }
 

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

@@ -1,6 +1,6 @@
 import { memo } from 'react';
-import { Card } from '@/shared/ui/deprecated/Card';
-import { Skeleton } from '@/shared/ui/deprecated/Skeleton';
+import { Card } from '@/shared/ui/redesigned/Card';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { ArticleView } from '../../model/consts/consts';
 import cls from './ArticleListItem.module.scss';

src/shared/ui/redesigned/Button/Button.module.scss

@@ -1,7 +1,7 @@
 .Button {
     cursor: pointer;
     color: var(--text-redesigned);
-    padding: 8px 16px;
+    padding: 6px 16px;
     display: flex;
     align-items: center;
 
@@ -43,6 +43,16 @@
     border-radius: 34px;
 }
 
+.outline {
+    background: none;
+    border: 2px solid var(--icon-redesigned);
+    border-radius: 34px;
+
+    &:hover {
+        border: 2px solid var(--accent-redesigned);
+    }
+}
+
 .square {
     padding: 0;
 }

src/shared/ui/redesigned/Skeleton/Skeleton.module.scss

@@ -2,7 +2,8 @@
     width: 100%;
     height: 50px;
     position: relative;
-    box-shadow: 0 2px 10px 0 var(--skeleton-shadow);
+    box-shadow: 0 2px 10px 0 var(--light-bg-redesigned);
+    background: var(--light-bg-redesigned);
     overflow: hidden;
 
     &::before {
@@ -13,7 +14,7 @@
         top: 0;
         height: 100%;
         width: 80%;
-        background: linear-gradient(to right, transparent 0%, var(--skeleton-color) 50%, transparent 100%);
+        background: linear-gradient(to right, transparent 0%, var(--dark-bg-redesigned) 50%, transparent 100%);
         animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     }
 }

src/shared/ui/redesigned/Text/Text.module.scss

@@ -67,3 +67,10 @@
         font: var(--font-l-redesigned);
     }
 }
+
+.bold {
+    .title,
+    .text {
+        font-weight: 700;
+    }
+}

src/shared/ui/redesigned/Text/Text.tsx

@@ -15,6 +15,7 @@ interface TextProps {
     variant?: TextVariant;
     align?: TextAlign;
     size?: TextSize;
+    bold?: boolean;
 
     'data-testid'?: string;
 }
@@ -41,6 +42,7 @@ export const Text = memo((props: TextProps) => {
         variant = 'primary',
         align = 'left',
         size = 'm',
+        bold = false,
         'data-testid': dataTestId = 'Text',
     } = props;
 
@@ -50,7 +52,13 @@ export const Text = memo((props: TextProps) => {
     const additionalClasses = [className, cls[variant], cls[align], sizeClass];
 
     return (
-        <div className={classNames(cls.Text, {}, additionalClasses)}>
+        <div
+            className={classNames(
+                cls.Text,
+                { [cls.bold]: bold },
+                additionalClasses,
+            )}
+        >
             {title && (
                 <HeaderTag
                     className={cls.title}