From 855fbedd74467f30b8caffbfb8d9e417216210d8 Mon Sep 17 00:00:00 2001
From: Ane <ane-ness@hotmail.no>
Date: Wed, 30 Oct 2024 11:25:32 +0100
Subject: [PATCH] quoteblock

---
 .../customerCase/CustomerCase.tsx             | 12 ++++++++--
 .../customerCase/customerCase.module.css      | 24 +++++++++++++------
 src/components/text/text.module.css           |  8 ++++++-
 src/styles/global.css                         |  1 +
 4 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index 593e59610..93ef95d76 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -23,8 +23,16 @@ function CustomerCaseSection({
       return (
         section.quote && (
           <div className={styles.quoteBlock}>
-            <Text>{section.quote}</Text>
-            {section.author && <Text>- {section.author}</Text>}
+            <div className={styles.quoteBlockInner}>
+              <Text type="quoteNormal">
+                {"“"}
+                {section.quote}
+                {"”"}
+              </Text>
+              {section.author && (
+                <Text type="labelRegular">- {section.author}</Text>
+              )}
+            </div>
           </div>
         )
       );
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
index 40be280f0..959c04db7 100644
--- a/src/components/customerCases/customerCase/customerCase.module.css
+++ b/src/components/customerCases/customerCase/customerCase.module.css
@@ -111,11 +111,21 @@
 }
 
 .quoteBlock {
-  border: 2px solid #f1c40f; /* Yellow border */
-  border-radius: 8px; /* Rounded corners */
-  padding: 16px; /* Inner padding */
-  background-color: #f9f9f9; /* Light background */
-  color: #333; /* Text color */
-  max-width: 400px; /* Set max-width if desired */
-  font-family: Arial, sans-serif; /* Basic font */
+  align-self: center;
+  max-width: 960px;
+  width: 100%;
+  border: 2px solid var(--primary-yellow-warning);
+  border-radius: 0.5rem;
+  background-color: var(--primary-yellow-warning);
+}
+
+.quoteBlockInner {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-bg);
+  border-radius: 1.5rem;
+  padding: 1rem;
+  gap: 1.25rem;
+  width: 100%;
+  align-items: center;
 }
diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
index 750297b3c..044971cf3 100644
--- a/src/components/text/text.module.css
+++ b/src/components/text/text.module.css
@@ -141,4 +141,10 @@
 /* .labelSemibold, */
 /* .labelBold, */
 /* .quoteItalic, */
-/* .quoteNormal, */
+
+.quoteNormal {
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 130%;
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 4361eb38e..48dc2e3e7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -23,6 +23,7 @@ html {
   --secondary-off-white2: #ece1d3;
 
   --primary-red-error: #b30b0b;
+  --primary-yellow-warning: #ffd02f;
 
   --focus-color: #8b0f40;