diff --git a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx index b188e600..365a29a3 100644 --- a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx +++ b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx @@ -23,6 +23,7 @@ interface Props { const FlowCellMenu: FC = ({ onClose, + currentView, hasDescription, toggleViewDescription, descriptionEnabled, @@ -59,7 +60,7 @@ const FlowCellMenu: FC = ({ /> - {hasDescription && ( + {hasDescription && currentView !== 'single' && ( = ({ children, heading, ...rest }) => ( -
- {heading &&
{heading}
} - {formatText(children)} -
-); +const FlowCellText: FC = ({ children, heading, color, ...rest }) => { + const colorIsBright = !!color && getLuminance(color) > 0.4; + + const textColor = colorIsBright + ? desaturate(darken(color, 0.5), 0.1) + : undefined; + + return ( +
+ {heading &&
{heading}
} + {formatText(children)} +
+ ); +}; export { FlowCellText }; diff --git a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss index 7a421447..2624f594 100644 --- a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss +++ b/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; + } } diff --git a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx index 25e9d158..ed305920 100644 --- a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx +++ b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx @@ -111,8 +111,9 @@ const FlowCell: FC = ({ {title}} + color={color} > - {text!} + {text} )} diff --git a/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss b/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss index 511f7d4e..708196e0 100644 --- a/src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss +++ b/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; } } diff --git a/src/styles/themes/_default.scss b/src/styles/themes/_default.scss index dea7ea0e..ea630d2e 100644 --- a/src/styles/themes/_default.scss +++ b/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) diff --git a/src/styles/themes/_horizon.scss b/src/styles/themes/_horizon.scss index 4707b2f8..4d36e19b 100644 --- a/src/styles/themes/_horizon.scss +++ b/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,