From 48cce8f1277e984a86a9d439015198721ab29efe Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 31 Oct 2019 13:40:50 +0700
Subject: [PATCH] fixed flow face appearance

---
 src/components/flow/Cell/index.tsx   |  9 +++++++--
 src/components/flow/Cell/styles.scss | 20 ++++++++++++++++++--
 src/utils/dom.ts                     |  2 ++
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx
index 9441171b..d389f9b4 100644
--- a/src/components/flow/Cell/index.tsx
+++ b/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>
 
diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss
index 948b8e50..91d9253c 100644
--- a/src/components/flow/Cell/styles.scss
+++ b/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 {
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 62a4a020..08ee639c 100644
--- a/src/utils/dom.ts
+++ b/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 });