From f56ac4134fb1322bd6ddb4754c4c0a1f687bfc78 Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Wed, 4 Dec 2024 14:05:22 +0100
Subject: [PATCH 1/5] feat: make ResultBlock responsive and colorable

---
 .../customerCase/CustomerCase.tsx             |  6 +++-
 .../sections/CustomerCaseSection.tsx          |  9 +++--
 .../sections/results/ResultsBlock.tsx         | 19 ++++++++---
 .../sections/results/resultsBlock.module.css  | 33 ++++++++++++++++---
 4 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index 5799db3dd..6ae651dee 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -48,7 +48,11 @@ export default async function CustomerCase({
         </div>
         <div className={styles.sectionsWrapper}>
           {customerCase.sections.map((section) => (
-            <CustomerCaseSection key={section._key} section={section} />
+            <CustomerCaseSection
+              key={section._key}
+              section={section}
+              clientColors={customerCase.clientColors}
+            />
           ))}
         </div>
         {consultantsResult?.ok && (
diff --git a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
index 28deaa63a..e9203e706 100644
--- a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
+++ b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
@@ -1,4 +1,7 @@
-import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/lib/interfaces/customerCases";
+import {
+  CustomerCaseClientColors,
+  CustomerCaseSection as CustomerCaseSectionObject,
+} from "studioShared/lib/interfaces/customerCases";
 
 import ImageSection from "./image/ImageSection";
 import ListBlock from "./list/ListBlock";
@@ -7,8 +10,10 @@ import SplitSection from "./splitSection/SplitSection";
 
 export function CustomerCaseSection({
   section,
+  clientColors,
 }: {
   section: CustomerCaseSectionObject;
+  clientColors: CustomerCaseClientColors;
 }) {
   switch (section._type) {
     case "splitSection":
@@ -16,7 +21,7 @@ export function CustomerCaseSection({
     case "imageBlock":
       return <ImageSection section={section} />;
     case "resultsBlock":
-      return <ResultsBlock section={section} />;
+      return <ResultsBlock section={section} blockColor={clientColors.color} />;
     case "listBlock":
       return <ListBlock section={section} />;
   }
diff --git a/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx b/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
index d3fd50c71..120a752a7 100644
--- a/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
+++ b/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
@@ -5,23 +5,34 @@ import styles from "./resultsBlock.module.css";
 
 export interface ResultsBlockProps {
   section: ResultsBlockObject;
+  blockColor?: string;
 }
 
-export default function ResultsBlock({ section }: ResultsBlockProps) {
+export default function ResultsBlock({
+  section,
+  blockColor,
+}: ResultsBlockProps) {
   return (
     section.resultsBlockTitle && (
       <div className={styles.wrapper}>
         <div>
-          <StackedHighlights section={section}></StackedHighlights>
+          <StackedHighlights
+            section={section}
+            blockColor={blockColor}
+          ></StackedHighlights>
         </div>
       </div>
     )
   );
 }
 
-function StackedHighlights({ section }: ResultsBlockProps) {
+function StackedHighlights({ section, blockColor }: ResultsBlockProps) {
+  const style = {
+    "--block-color": blockColor ?? "var(--surface-yellow)",
+  } as React.CSSProperties;
+
   return (
-    <div className={styles.highlightWrapper}>
+    <div className={styles.highlightWrapper} style={style}>
       <div className={styles.highlightBlock}>
         <Text type="labelRegular" className={styles.highlightOutside}>
           {section.resultsBlockTitle}
diff --git a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
index 648d799e4..cfd660569 100644
--- a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
+++ b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
@@ -5,9 +5,9 @@
 }
 
 .highlightCard {
-  border: 3px solid var(--surface-yellow);
+  border: 3px solid var(--block-color);
   border-radius: 0.25rem;
-  background-color: var(--surface-yellow);
+  background-color: var(--block-color);
 }
 
 .highlightCard .innerContent {
@@ -29,7 +29,7 @@
 }
 
 .highlightOutside {
-  background-color: var(--surface-yellow);
+  background-color: var(--block-color);
   color: var(--text-primary);
   display: inline-block;
   padding: 0.25rem 1.25rem;
@@ -77,6 +77,7 @@
   margin-top: calc(3px * -1);
   border-top-left-radius: 0;
   height: auto;
+  width: 100%;
 }
 
 .highlightRow .highlightCard:not(:last-child) {
@@ -93,6 +94,28 @@
   border-top-left-radius: 0;
 }
 
-.highlightRow .highlightCard {
-  width: 100%;
+@media (max-width: 640px) {
+  div:has(> .highlightWrapper) {
+    width: 100%;
+  }
+
+  .highlightOutside {
+    margin-bottom: 0;
+  }
+
+  .highlightRow {
+    flex-direction: column;
+  }
+
+  .highlightRow .highlightCard:first-child {
+    border-top-right-radius: 0.25rem;
+  }
+
+  .highlightRow .highlightCard:last-child {
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  .highlightRow .highlightCard:not(:first-child) {
+    border-left: 3px solid var(--block-color);
+  }
 }

From 42e7c5d22f88d3a6c577254f2d63be0916d25f21 Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Wed, 4 Dec 2024 15:29:06 +0100
Subject: [PATCH 2/5] fix: split section does not have colors available

---
 .../customerCase/sections/CustomerCaseSection.tsx           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
index e9203e706..c88a52da9 100644
--- a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
+++ b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
@@ -13,7 +13,7 @@ export function CustomerCaseSection({
   clientColors,
 }: {
   section: CustomerCaseSectionObject;
-  clientColors: CustomerCaseClientColors;
+  clientColors?: CustomerCaseClientColors;
 }) {
   switch (section._type) {
     case "splitSection":
@@ -21,7 +21,9 @@ export function CustomerCaseSection({
     case "imageBlock":
       return <ImageSection section={section} />;
     case "resultsBlock":
-      return <ResultsBlock section={section} blockColor={clientColors.color} />;
+      return (
+        <ResultsBlock section={section} blockColor={clientColors?.color} />
+      );
     case "listBlock":
       return <ListBlock section={section} />;
   }

From bf577cedc7ab7b6c2145366ddc85f17837e80cc4 Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Wed, 4 Dec 2024 15:32:31 +0100
Subject: [PATCH 3/5] fix: use mobile breakpoint according to design

---
 .../customerCase/sections/results/resultsBlock.module.css       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
index cfd660569..d96661f38 100644
--- a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
+++ b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
@@ -94,7 +94,7 @@
   border-top-left-radius: 0;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 425px) {
   div:has(> .highlightWrapper) {
     width: 100%;
   }

From bfb4cddef8b9b9fcb512d1ad77b7b68ff2be6982 Mon Sep 17 00:00:00 2001
From: Truls Henrik <39614013+trulshj@users.noreply.github.com>
Date: Thu, 5 Dec 2024 15:48:52 +0100
Subject: [PATCH 4/5] Update
 src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx

Co-authored-by: Petter Hohle <petter.hohle@gmail.com>
---
 .../customerCase/sections/results/ResultsBlock.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx b/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
index 120a752a7..25569167c 100644
--- a/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
+++ b/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
@@ -19,7 +19,7 @@ export default function ResultsBlock({
           <StackedHighlights
             section={section}
             blockColor={blockColor}
-          ></StackedHighlights>
+          />
         </div>
       </div>
     )

From 615bf86c43eedd7e96a515f2924db0247872eaea Mon Sep 17 00:00:00 2001
From: Truls Henrik Jakobsen <thj@variant.no>
Date: Thu, 5 Dec 2024 16:09:58 +0100
Subject: [PATCH 5/5] prettier

---
 .../customerCase/sections/results/ResultsBlock.tsx           | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx b/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
index 25569167c..daa9f3069 100644
--- a/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
+++ b/src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx
@@ -16,10 +16,7 @@ export default function ResultsBlock({
     section.resultsBlockTitle && (
       <div className={styles.wrapper}>
         <div>
-          <StackedHighlights
-            section={section}
-            blockColor={blockColor}
-          />
+          <StackedHighlights section={section} blockColor={blockColor} />
         </div>
       </div>
     )