fixed flow face appearance

src/components/flow/Cell/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState, useCallback, useEffect } from 'react';
 import { INode } from '~/redux/types';
-import { getURL } from '~/utils/dom';
+import { getURL, formatCellText } from '~/utils/dom';
 import classNames from 'classnames';
 
 import * as styles from './styles.scss';
@@ -84,7 +84,12 @@ const Cell: FC<IProps> = ({
       <div className={classNames(styles.face, { [styles.has_text]: text })}>
         <div className={styles.face_content}>
           {title && <div className={styles.title}>{title}</div>}
-          {text && <div className={styles.text}>{text}</div>}
+          {text && (
+            <div
+              className={styles.text}
+              dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
+            />
+          )}
         </div>
       </div>
 

src/components/flow/Cell/styles.scss

@@ -28,7 +28,11 @@
   font: $font_18_regular;
   line-height: 22px;
   margin-top: $gap;
-  letter-spacing: 0.5px;
+  // letter-spacing: 0.5px;
+
+  p {
+    margin-bottom: $gap;
+  }
 
   &::after {
     content: ' ';
@@ -153,9 +157,21 @@
 
       .face_content {
         padding: $gap;
-        background: rgba(25, 25, 25, 0.8);
+        background: rgba(25, 25, 25, 0.9);
         border-radius: $radius;
         overflow: hidden;
+        position: relative;
+
+        &:after {
+          content: '';
+          background: linear-gradient(transparentize($content_bg, 1), $content_bg);
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          height: 50px;
+          width: 100%;
+          border-radius: 0 0 $cell_radius $cell_radius;
+        }
       }
 
       .text::after {

src/utils/dom.ts

@@ -95,6 +95,8 @@ export const formatCommentText = (author: string, text: string): string =>
       )
     : '';
 
+export const formatCellText = (text: string): string => formatText(text);
+
 export const getPrettyDate = (date: string): string =>
   formatDistanceToNow(new Date(date), { locale: ru, includeSeconds: true, addSuffix: true });