make better flow cell text

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx

@@ -23,6 +23,7 @@ interface Props {
 
 const FlowCellMenu: FC<Props> = ({
   onClose,
+  currentView,
   hasDescription,
   toggleViewDescription,
   descriptionEnabled,
@@ -59,7 +60,7 @@ const FlowCellMenu: FC<Props> = ({
           />
         </div>
 
-        {hasDescription && (
+        {hasDescription && currentView !== 'single' && (
           <Group
             className={styles.description}
             horizontal

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/index.tsx

@@ -1,6 +1,7 @@
 import { FC, ReactElement } from 'react';
 
 import classNames from 'classnames';
+import { transparentize, darken, desaturate, getLuminance } from 'color2k';
 
 import { Markdown } from '~/components/common/Markdown';
 import { formatText } from '~/utils/dom';
@@ -11,13 +12,29 @@ import styles from './styles.module.scss';
 interface Props extends DivProps {
   children: string;
   heading: string | ReactElement;
+  color?: string;
 }
 
-const FlowCellText: FC<Props> = ({ children, heading, ...rest }) => (
-  <div {...rest} className={classNames(styles.text, rest.className)}>
+const FlowCellText: FC<Props> = ({ children, heading, color, ...rest }) => {
+  const colorIsBright = !!color && getLuminance(color) > 0.4;
+
+  const textColor = colorIsBright
+    ? desaturate(darken(color, 0.5), 0.1)
+    : undefined;
+
+  return (
+    <div
+      {...rest}
+      className={classNames(styles.text, rest.className)}
+      style={{
+        backgroundColor: color && transparentize(color, 0.5),
+        color: textColor,
+      }}
+    >
       {heading && <div className={styles.heading}>{heading}</div>}
       <Markdown className={styles.description}>{formatText(children)}</Markdown>
     </div>
-);
+  );
+};
 
 export { FlowCellText };

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss

@@ -1,10 +1,16 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .text {
-  padding: $gap;
+  @include blur;
+
+  padding: $gap / 2 $gap $gap $gap;
   line-height: 1.3em;
 }
 
 .heading {
-  margin-bottom: 0.4em;
+  margin-bottom: 0.25em;
+
+  h4 {
+    // line-height: 1.1em;
+  }
 }

src/containers/flow/FlowGrid/components/FlowCell/index.tsx

@@ -111,8 +111,9 @@ const FlowCell: FC<Props> = ({
           <FlowCellText
             className={styles.text}
             heading={<h4 className={styles.title}>{title}</h4>}
+            color={color}
           >
-            {text!}
+            {text}
           </FlowCellText>
         )}
 

src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss

@@ -33,18 +33,20 @@
 
 .text {
   position: absolute;
-  bottom: 5px;
-  left: 5px;
   z-index: 1;
   overflow: hidden;
   border-radius: $radius;
-  max-height: calc(100% - 10px);
-  max-width: calc(100% - 10px);
   box-sizing: border-box;
-  font: $font_16_regular;
+  font: $font_14_medium;
+  line-height: 1.25em;
+  inset: 50% 0 0 0;
+
+  &.bright {
+    color: var(--content_bg_lightest);
+  }
 
   @include tablet {
-    font: $font_14_regular;
+    font: $font_12_medium;
     left: 5px;
     bottom: 5px;
   }
@@ -54,14 +56,19 @@
     opacity: 0.5;
   }
 
-  .quadro &,
   .horizontal & {
-    max-width: calc(50% - 15px);
+    inset: 0 calc(50% + $gap / 2) 0 0;
+    border-radius: $radius 0 0 $radius;
   }
 
-  .quadro &,
   .vertical & {
-    max-height: calc(50% - 15px);
+    inset: calc(50% + $gap / 2) 0 0 0;
+    border-radius: 0 0 $radius $radius;
+  }
+
+  .quadro & {
+    inset: calc(50% + $gap / 2) calc(50% + $gap / 2) 0 0;
+    border-radius: 0 $radius 0 $radius;
   }
 }
 
@@ -76,11 +83,13 @@
 
 .title {
   font: $font_cell_title;
+  line-height: 1.2em;
   text-transform: uppercase;
   word-break: break-word;
+  color: inherit;
 
   @include tablet {
-    font: $font_18_semibold;
+    font: $font_16_semibold;
   }
 }
 

src/styles/themes/_default.scss

@@ -63,10 +63,8 @@ $_brown: #23201f;
     --content_bg_success: #{transparentize($_wisegreen, 0.7)};
     --content_bg_info: #{transparentize($_blue, 0.5)};
     --content_bg_danger: #{transparentize($_red, 0.5)};
-    --content_bg_backdrop: url('/images/noise.png') #{transparentize(
-        $_brown,
-        0.3
-      )};
+    --content_bg_backdrop: url('/images/noise.png')
+      #{transparentize($_brown, 0.3)};
     --content_bg_hero: url('/images/noise.png') #{transparentize($_brown, 0.6)};
 
     // white shades (move to --vars)

src/styles/themes/_horizon.scss

@@ -85,10 +85,8 @@ $_ocean: #25b0bc;
     --gray_90: #{transparentize(white, 0.95)};
 
     // page background
-    --page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg') #{darken(
-        $_cold,
-        4%
-      )} fixed;
+    --page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg')
+      #{darken($_cold, 4%)} fixed;
     --page-background-top: linear-gradient(
       #{$_accent} -150%,
       #{transparentize($_ocean, 0.99)} 100px,