Merge remote-tracking branch 'origin/SLB-296-quote-block-gutenberg' i…

…nto dev
AmazeeLabs · Apr 25, 2024 · b363e1e · b363e1e
2 parents 1564a4e + 46a0772
commit b363e1e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 export function BlockQuote(props: BlockQuoteFragment) {
   return (
-    <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-gray-900">
+    <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-[#111928]">
       <blockquote className="border-l-0 relative pl-0 pb-8 pt-16">
         <svg
           width="32"
@@ -20,7 +20,7 @@ export function BlockQuote(props: BlockQuoteFragment) {
             fill="#9CA3AF"
           />
         </svg>
-        {props.quote && <Html markup={props.quote} />}
+        <p>{props.quote && <Html markup={props.quote} />}</p>
         <div className="flex not-prose items-center flex-wrap">
           {props.image && (
             <Image
@@ -29,7 +29,7 @@ export function BlockQuote(props: BlockQuoteFragment) {
               alt={props.image.alt || 'Author image'}
             />
           )}
-          <div className="not-italic text-base">
+          <div className="not-italic text-base font-semibold">
             {props.author && <p className="not-prose">{props.author}</p>}
           </div>
           {props.role && (

diff --git a/packages/ui/src/tailwind.css b/packages/ui/src/tailwind.css
@@ -6,12 +6,17 @@
 @tailwind utilities;
 
 /* Prose overrides  */
+.prose
+  :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  font-weight: 400;
+}
+
 .lg\:prose-xl
   :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
   padding-left: 0 !important;
 }
 
-.prose :where(blockquote p):not( :where([class~='not-prose']) ) {
+.prose :where(blockquote p):not(:where([class~='not-prose'])) {
   margin-top: 12px !important;
   margin-bottom: 12px !important;
 }