quoteblock

varianter · Oct 30, 2024 · 855fbed · 855fbed
1 parent 3ed62a3
commit 855fbed
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -23,6 +23,7 @@ html {
   --secondary-off-white2: #ece1d3;
 
   --primary-red-error: #b30b0b;
+  --primary-yellow-warning: #ffd02f;
 
   --focus-color: #8b0f40;