Changed lab gaps and colors

src/components/lab/LabBottomPanel/index.tsx

@@ -31,14 +31,14 @@ const LabBottomPanel: FC<Props> = ({ node, hasNewComments, commentCount }) => {
           horizontal
           className={classNames(styles.comments, { [styles.active]: hasNewComments })}
         >
-          <Icon icon={hasNewComments ? 'comment_new' : 'comment'} size={16} />
+          <Icon icon={hasNewComments ? 'comment_new' : 'comment'} size={24} />
           <span>{commentCount}</span>
         </Grid>
       )}
 
       {!!node.like_count && node.like_count > 0 && (
         <Grid horizontal className={classNames(styles.like)}>
-          <Icon icon={node.is_liked ? 'heart_full' : 'heart'} size={16} />
+          <Icon icon={node.is_liked ? 'heart_full' : 'heart'} size={24} />
           <span>{node.like_count}</span>
         </Grid>
       )}

src/components/lab/LabBottomPanel/styles.module.scss

@@ -11,13 +11,14 @@
 
 .comments, .like {
   flex: 0;
-  font: $font_14_semibold;
+  font: $font_16_semibold;
   color: darken(white, 50%);
   fill: currentColor;
   stroke: none;
-  column-gap: $gap / 2 !important;
+  column-gap: $gap !important;
   align-items: center;
   justify-content: center;
+  padding-left: $gap;
 
   &.active {
     color: $red;

src/components/lab/LabDescription/index.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { INodeComponentProps } from '~/redux/node/constants';
+import styles from './styles.module.scss';
+import { Markdown } from '~/components/containers/Markdown';
+import { formatText } from '~/utils/dom';
+
+const LabDescription: FC<INodeComponentProps> = ({ node }) => {
+  if (!node.description) {
+    return null;
+  }
+
+  return (
+    <Markdown
+      className={styles.wrap}
+      dangerouslySetInnerHTML={{ __html: formatText(node.description) }}
+    />
+  );
+};
+
+export { LabDescription };

src/components/lab/LabDescription/styles.module.scss

@@ -0,0 +1,22 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  padding: $lab_gap $lab_gap 0;
+  line-height: 1.3em;
+
+  @include tablet {
+    position: relative;
+    max-height: 30vh;
+    overflow: hidden;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      background: linear-gradient(transparentize($lab_post_bg, 1), $lab_post_bg 80%);
+      bottom: 0;
+      left: auto;
+      width: 100%;
+      height: 100px;
+    }
+  }
+}

src/components/lab/LabNodeTitle/index.tsx

@@ -23,7 +23,7 @@ const LabNodeTitle: FC<IProps> = ({ node }) => {
       {node.is_heroic && (
         <Tippy content="Важный пост">
           <div className={styles.star}>
-            <Icon icon="star_full" />
+            <Icon icon="star_full" size={24} />
           </div>
         </Tippy>
       )}

src/components/lab/LabNodeTitle/styles.module.scss

@@ -24,6 +24,6 @@
 }
 
 .star {
-  fill: $yellow;
+  fill: darken(white, 50%);
   flex: 0 0 24px;
 }

src/components/lab/LabText/styles.module.scss

@@ -6,7 +6,7 @@
 
   @include tablet {
     position: relative;
-    max-height: 50vh;
+    max-height: 100vh;
     overflow: hidden;
 
     &::after {

src/redux/node/constants.ts

@@ -19,6 +19,7 @@ import { LabNodeTitle } from '~/components/lab/LabNodeTitle';
 import { LabText } from '~/components/lab/LabText';
 import { LabImage } from '~/components/lab/LabImage';
 import { LabPad } from '~/components/lab/LabPad';
+import { LabDescription } from '~/components/lab/LabDescription';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -88,8 +89,8 @@ export type INodeComponentProps = {
 export type INodeComponents = Record<ValueOf<typeof NODE_TYPES>, FC<INodeComponentProps>>;
 
 export const LAB_PREVIEW_LAYOUT: Record<string, FC<INodeComponentProps>[]> = {
-  [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle],
-  [NODE_TYPES.VIDEO]: [NodeVideoBlock, LabPad, LabNodeTitle],
+  [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabDescription],
+  [NODE_TYPES.VIDEO]: [NodeVideoBlock, LabPad, LabNodeTitle, LabDescription],
   [NODE_TYPES.AUDIO]: [LabPad, LabNodeTitle, LabPad, NodeAudioImageBlock, NodeAudioBlock, LabPad],
   [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad],
 };