better flow appearance

src/components/flow/Cell/index.tsx

@@ -60,7 +60,9 @@ const Cell: FC<IProps> = ({
 
   return (
     <div
-      className={classNames(styles.cell, (flow && flow.display) || 'single', { is_text: false })}
+      className={classNames(styles.cell, styles[(flow && flow.display) || 'single'], {
+        [styles.is_text]: false,
+      })}
     >
       {can_edit && (
         <div className={styles.menu}>
@@ -79,10 +81,12 @@ const Cell: FC<IProps> = ({
         </div>
       )}
 
-      <div className={styles.face} onClick={onClick}>
+      <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>}
         </div>
+      </div>
 
       {thumbnail && (
         <div
@@ -91,6 +95,7 @@ const Cell: FC<IProps> = ({
             backgroundImage: `url("${getURL({ url: thumbnail })}")`,
             opacity: is_loaded ? 1 : 0,
           }}
+          onClick={onClick}
         >
           <img src={getURL({ url: thumbnail })} onLoad={onImageLoad} alt="" />
         </div>

src/components/flow/Cell/styles.scss

@@ -9,13 +9,13 @@
   cursor: pointer;
   color: white;
 
-  &:global(.is_hero) {
+  .is_hero {
     .title {
       font: $font_hero_title;
     }
   }
 
-  &:global(.is_text) {
+  .is_text {
     .title {
       display: none;
     }
@@ -26,7 +26,7 @@
 
 .text {
   font: $font_18_regular;
-  line-height: 23px;
+  line-height: 22px;
   margin-top: $gap;
   letter-spacing: 0.5px;
 
@@ -65,49 +65,30 @@
   margin-bottom: $gap / 2;
 }
 
-:global {
-  .vert-1 {
-    grid-row-end: span 1;
-  }
+.horizontal,
+.quadro {
+  grid-column-end: span 2;
+}
 
-  .vert-2 {
+.vertical,
+.quadro {
   grid-row-end: span 2;
-  }
+}
 
-  .hor-1 {
+@media (max-width: $cell * 2) {
+  .horizontal,
+  .quadro,
+  .vertical,
+  .quadro {
+    grid-row-end: span 1;
     grid-column-end: span 1;
   }
+}
 
-  .hor-2 {
-    grid-column-end: span 2;
-  }
-
-  :global(.horizontal),
-  :global(.quadro) {
-    grid-column-end: span 2;
-  }
-
-  :global(.vertical),
-  :global(.quadro) {
-    grid-row-end: span 2;
-  }
-
-  @media (max-width: $cell * 2) {
-    :global(.vertical),
-    :global(.quadro) {
-      grid-row-end: span 1;
-    }
-
-    :global(.horizontal),
-    :global(.quadro) {
-      grid-column-end: span 1;
-    }
-  }
-  .is_text {
+.is_text {
   background: none;
   padding: 10px;
   box-shadow: inset #444 0 0 0 1px;
-  }
 }
 
 .thumbnail {
@@ -134,6 +115,7 @@
 .face {
   @include outer_shadow();
 
+  display: flex;
   overflow: hidden;
   box-sizing: border-box;
   position: absolute;
@@ -145,6 +127,61 @@
   z-index: 2;
   border-radius: $cell_radius;
   padding: $gap;
+  pointer-events: none;
+  touch-action: none;
+
+  .vertical > &,
+  .horizontal > &,
+  .quadro > & {
+    box-sizing: border-box;
+    background: none;
+    box-shadow: none;
+    padding: $gap / 2;
+
+    &::after {
+      display: none;
+    }
+
+    .face_content {
+      padding: $gap;
+      background: rgba(25, 25, 25, 0.8);
+      border-radius: $radius;
+      overflow: hidden;
+    }
+
+    .text::after {
+      display: none;
+    }
+  }
+
+  .vertical > & {
+    top: auto;
+    bottom: 0;
+    max-height: 50%;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+  }
+
+  .horizontal > & {
+    top: auto;
+    max-height: 50%;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+    bottom: 0;
+  }
+
+  .quadro > & {
+    top: auto;
+    left: auto;
+    max-height: 70%;
+    max-width: 50%;
+    height: auto;
+    width: auto;
+    bottom: 0;
+    right: 0;
+  }
 }
 
 .menu {