fixed flow hero appearance

src/components/flow/Cell/styles.scss

@@ -100,7 +100,7 @@
 .is_text {
   background: none;
   padding: 10px;
-  box-shadow: inset #444 0 0 0 1px;
+  box-shadow: inset $cell_shade 0 0 0 1px;
 }
 
 .thumbnail {

src/components/flow/FlowHero/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { IFlowState } from '~/redux/flow/reducer';
 import classNames from 'classnames';
 
@@ -70,22 +70,34 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
     history.push(URLS.NODE_URL(current));
   }, [current]);
 
+  const title = useMemo(() => {
+    if (loaded.length === 0) return null;
+
+    const item = heroes.find(hero => hero.id === current);
+
+    if (!item || !item.title) return null;
+
+    return item.title;
+  }, [loaded, current, heroes]);
+
   return (
     <div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
-      <div className={styles.info}>
-        <div className={styles.title_wrap}>
-          <div className={styles.title}>TITLE!</div>
-        </div>
+      {loaded && loaded.length > 0 && (
+        <div className={styles.info}>
+          <div className={styles.title_wrap}>
+            <div className={styles.title}>{title}</div>
+          </div>
 
-        <div className={styles.buttons}>
-          <div className={styles.button} onClick={onPrevious}>
-            <Icon icon="left" />
-          </div>
-          <div className={styles.button} onClick={onNextPress}>
-            <Icon icon="right" />
+          <div className={styles.buttons}>
+            <div className={styles.button} onClick={onPrevious}>
+              <Icon icon="left" />
+            </div>
+            <div className={styles.button} onClick={onNextPress}>
+              <Icon icon="right" />
+            </div>
           </div>
         </div>
-      </div>
+      )}
 
       {heroes.slice(0, limit).map(hero => (
         <div

src/components/flow/FlowHero/styles.scss

@@ -27,6 +27,23 @@
     pointer-events: none;
     touch-action: none;
   }
+
+  &::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      182deg,
+      transparentize($cell_shade, 1) 50%,
+      transparentize($cell_shade, 0) 95%
+    );
+    z-index: 4;
+    pointer-events: none;
+    touch-action: none;
+  }
 }
 
 .hero {
@@ -90,13 +107,13 @@
 .title {
   flex: 0;
   height: 48px;
-  background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 $gap;
+  padding: 0 $gap 0 0;
   border-radius: $radius;
   font: $font_hero_title;
+  text-transform: uppercase;
 }
 
 .buttons {

src/styles/colors.scss

@@ -51,7 +51,7 @@ $node_title_background: darken($main_bg_color, 8%);
 
 $editor_bg: $content_bg;
 $editor_panel_bg: darken($editor_bg, 4%);
-
+$cell_shade: lighten($content_bg, 10%);
 $scroll_color: $red_gradient;
 $scroll_inactive_opacity: 0.5;