better text nodes appearance

src/components/flow/Cell/index.tsx

@@ -1,23 +1,18 @@
 import React, { FC, useState, useCallback } from 'react';
 import { INode } from '~/redux/types';
-import { URLS } from '~/constants/urls';
+import { getURL } from '~/utils/dom';
-import { getImageSize, getURL } from '~/utils/dom';
+import classNames from 'classnames';
-import classNames = require('classnames');
 
 import * as styles from './styles.scss';
+import path from 'ramda/es/path';
 
 interface IProps {
   node: INode;
-  // height?: number;
-  // width?: number;
-  // title?: string;
-  // is_hero?: boolean;
-  // is_stamp?: boolean;
   onSelect: (id: INode['id'], type: INode['type']) => void;
   is_text?: boolean;
 }
 
-const Cell: FC<IProps> = ({ node: { id, title, brief, type }, onSelect, is_text = false }) => {
+const Cell: FC<IProps> = ({ node: { id, title, brief, type, blocks }, onSelect }) => {
   const [is_loaded, setIsLoaded] = useState(false);
 
   const onImageLoad = useCallback(() => {
@@ -26,12 +21,17 @@ const Cell: FC<IProps> = ({ node: { id, title, brief, type }, onSelect, is_text
 
   const onClick = useCallback(() => onSelect(id, type), [onSelect, id]);
 
+  const text = path([0, 'text'], blocks);
+
   return (
     <div
       className={classNames(styles.cell, 'vert-1', 'hor-1', { is_text: false })}
       onClick={onClick}
     >
-      <div className={styles.face}>{title && <div className={styles.title}>{title}</div>}</div>
+      <div className={styles.face}>
+        {title && <div className={styles.title}>{title}</div>}
+        {text && <div className={styles.text}>{text}</div>}
+      </div>
 
       {brief && brief.thumbnail && (
         <div
@@ -49,3 +49,10 @@ const Cell: FC<IProps> = ({ node: { id, title, brief, type }, onSelect, is_text
 };
 
 export { Cell };
+
+/*
+  {type === NODE_TYPES.TEXT && (
+    <div className={styles.text}>{path(['blocks', 0, 'text'], blocks)}</div>
+  )}
+  }
+*/

src/components/flow/Cell/styles.scss

@@ -26,16 +26,10 @@
 }
 
 .text {
-  font: $font_16_regular;
+  font: $font_18_regular;
-  line-height: 1.3em;
+  line-height: 23px;
+  margin-top: $gap;
   letter-spacing: 0.5px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: $gap;
-  background: darken($content_bg, 4%);
-  height: 100%;
-  overflow: hidden;
 
   &::after {
     content: ' ';
@@ -43,10 +37,10 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 100px;
+    height: 160px;
     pointer-events: none;
     touch-action: none;
-    background: linear-gradient(transparentize($content_bg, 1), $content_bg 70px);
+    background: linear-gradient(transparentize($content_bg, 1), $content_bg 95%);
     z-index: 1;
     border-radius: 0 0 $radius $radius;
   }
@@ -55,6 +49,7 @@
 .title,
 .text_title {
   font: $font_cell_title;
+  line-height: 1.1em;
 
   text-transform: uppercase;
   overflow: hidden;
@@ -63,7 +58,7 @@
 }
 
 .title {
-  max-height: 2.6em;
+  // max-height: 3.3em;
 }
 
 .text_title {

src/styles/variables.scss

@@ -52,7 +52,7 @@ $font_10_semibold: $semibold 10px $font;
 $font_8_regular: $regular 8px $font;
 $font_8_semibold: $semibold 8px $font;
 
-$font_cell_title: $font_24_bold;
+$font_cell_title: $bold 30px $font;
 $font_hero_title: $font_48_semibold;
 
 $shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;

src/utils/dom.ts

@@ -68,21 +68,23 @@ export const getImageSize = (file: IFile, size?: string): string => getURL(file)
 // `${process.env.API_HOST}${image}`.replace('{size}', size);
 
 export const formatText = (text: string): string =>
-  text
+  !text
-    .replace(/(\n{2,})/gi, '\n')
+    ? ''
-    .replace(/</g, '&lt;')
+    : text
-    .replace(/>/g, '&gt;')
+        .replace(/(\n{2,})/gi, '\n')
-    .replace(/:\/\//gim, ':|--|')
+        .replace(/</g, '&lt;')
-    .replace(/(\/\/[^\n]+)/gim, '<span class="grey">$1</span>')
+        .replace(/>/g, '&gt;')
-    .replace(/:\|--\|/gim, '://')
+        .replace(/:\/\//gim, ':|--|')
-    .split('\n')
+        .replace(/(\/\/[^\n]+)/gim, '<span class="grey">$1</span>')
-    .map(el => `<p>${el}</p>`)
+        .replace(/:\|--\|/gim, '://')
-    // .map((el, index) =>
+        .split('\n')
-    //   index === 0
+        .map(el => `<p>${el}</p>`)
-    //     ? `${author ? `<p><b class="comment-author">${author}: </b>` : ''}${el}</p>`
+        // .map((el, index) =>
-    //     : `<p>${el}</p>`
+        //   index === 0
-    // )
+        //     ? `${author ? `<p><b class="comment-author">${author}: </b>` : ''}${el}</p>`
-    .join('');
+        //     : `<p>${el}</p>`
+        // )
+        .join('');
 
 export const formatCommentText = (author: string, text: string): string =>
   text