From 330fdcf4446c3ebd8e65639e5f0f7c0852ae0346 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 30 Mar 2021 17:49:17 +0700
Subject: [PATCH] Changed lab gaps and colors

---
 src/components/lab/LabBottomPanel/index.tsx   |  4 ++--
 .../lab/LabBottomPanel/styles.module.scss     |  5 +++--
 src/components/lab/LabDescription/index.tsx   | 20 +++++++++++++++++
 .../lab/LabDescription/styles.module.scss     | 22 +++++++++++++++++++
 src/components/lab/LabNodeTitle/index.tsx     |  2 +-
 .../lab/LabNodeTitle/styles.module.scss       |  2 +-
 src/components/lab/LabText/styles.module.scss |  2 +-
 src/redux/node/constants.ts                   |  5 +++--
 8 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 src/components/lab/LabDescription/index.tsx
 create mode 100644 src/components/lab/LabDescription/styles.module.scss

diff --git a/src/components/lab/LabBottomPanel/index.tsx b/src/components/lab/LabBottomPanel/index.tsx
index 5139686a..8b2eac52 100644
--- a/src/components/lab/LabBottomPanel/index.tsx
+++ b/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>
       )}
diff --git a/src/components/lab/LabBottomPanel/styles.module.scss b/src/components/lab/LabBottomPanel/styles.module.scss
index befad74a..7588dc30 100644
--- a/src/components/lab/LabBottomPanel/styles.module.scss
+++ b/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;
diff --git a/src/components/lab/LabDescription/index.tsx b/src/components/lab/LabDescription/index.tsx
new file mode 100644
index 00000000..13f0f1cb
--- /dev/null
+++ b/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 };
diff --git a/src/components/lab/LabDescription/styles.module.scss b/src/components/lab/LabDescription/styles.module.scss
new file mode 100644
index 00000000..b6b8b452
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/components/lab/LabNodeTitle/index.tsx b/src/components/lab/LabNodeTitle/index.tsx
index b44533de..2283b11b 100644
--- a/src/components/lab/LabNodeTitle/index.tsx
+++ b/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>
       )}
diff --git a/src/components/lab/LabNodeTitle/styles.module.scss b/src/components/lab/LabNodeTitle/styles.module.scss
index 432bdc09..dab00963 100644
--- a/src/components/lab/LabNodeTitle/styles.module.scss
+++ b/src/components/lab/LabNodeTitle/styles.module.scss
@@ -24,6 +24,6 @@
 }
 
 .star {
-  fill: $yellow;
+  fill: darken(white, 50%);
   flex: 0 0 24px;
 }
diff --git a/src/components/lab/LabText/styles.module.scss b/src/components/lab/LabText/styles.module.scss
index 25ce5324..be88c331 100644
--- a/src/components/lab/LabText/styles.module.scss
+++ b/src/components/lab/LabText/styles.module.scss
@@ -6,7 +6,7 @@
 
   @include tablet {
     position: relative;
-    max-height: 50vh;
+    max-height: 100vh;
     overflow: hidden;
 
     &::after {
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index f59e053e..3c71e80b 100644
--- a/src/redux/node/constants.ts
+++ b/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],
 };