fixed test cells

src/components/flow/Cell/index.tsx

@@ -33,8 +33,11 @@ const Cell: FC<IProps> = ({
       // gridColumnEnd: `span ${width}`,
     }}
   >
-    {is_text && <div className={styles.text}>{TEXTS.LOREM_IPSUM}</div>}
+    {is_text && <div className={styles.text}>
-    { title && <div className={styles.title}>{title}</div> }
+      <div className={styles.text_title}>{title}</div>
+      {TEXTS.LOREM_IPSUM}
+      </div>}
+    {title && <div className={styles.title}>{title}</div>}
   </div>
 );
 

src/components/flow/Cell/styles.scss

@@ -14,34 +14,64 @@
     }
   }
 
+  &:global(.is_text) {
+    .title {
+      display: none;
+    }
+  }
+
   @include outer_shadow();
 }
 
 .text {
-  line-height: 1.6em;
+  font: $font_16_regular;
-  font-size: 18px;
+  line-height: 1.3em;
-  font: $font_18_regular;
+  letter-spacing: 0.5px;
   position: absolute;
   top: 0;
   left: 0;
   padding: $gap;
+  background: $content_bg;
+  height: 100%;
+  overflow: hidden;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    pointer-events: none;
+    touch-action: none;
+    background: linear-gradient(transparentize($content_bg, 1), $content_bg 70px);
+    z-index: 1;
+    border-radius: 0 0 $radius $radius;
+  }
 }
 
-.title {
+.title, .text_title {
   font: $font_cell_title;
 
   text-transform: uppercase;
-  height: 1em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding: 0 $gap;
 
+
+  box-sizing: border-box;
+}
+
+.title {
+  padding: 0 $gap;
   position: absolute;
   bottom: $gap;
   left: 0;
   width: 100%;
-  box-sizing: border-box;
+}
+
+.text_title {
+  margin-bottom: $gap / 2;
 }
 
 :global {

src/components/main/Header/style.scss

@@ -3,8 +3,7 @@
   align-items: center;
   justify-content: flex-end;
   font-weight: 500;
-  height: 96px;
+  height: 80px;
-  margin-top: -20px;
 }
 
 .spacer {

src/containers/App.tsx

@@ -23,13 +23,10 @@ type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {
 const Component: FC<IProps> = ({ is_shown }) => (
   <ConnectedRouter history={history}>
     <BlurWrapper is_blurred={is_shown}>
+        <MainLayout>
           <Modal />
           <Sprites />
 
-      <Switch>
-
-
-        <MainLayout>
           <Switch>
             <Route exact path={URLS.BASE} component={FlowLayout} />
             <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
@@ -39,7 +36,6 @@ const Component: FC<IProps> = ({ is_shown }) => (
             <Redirect to="/" />
           </Switch>
         </MainLayout>
-      </Switch>
     </BlurWrapper>
   </ConnectedRouter>
 );