add missing css for blockquote

RocketChat · Jan 8, 2025 · 59dc701 · 59dc701
1 parent 4d80839
commit 59dc701
Showing 1 changed file with 18 additions and 7 deletions.
diff --git a/packages/markups/src/blocks/QuoteBlock.js b/packages/markups/src/blocks/QuoteBlock.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ParagraphBlock from './ParagraphBlock';
+import { css } from '@emotion/react';
+import { useTheme } from '@embeddedchat/ui-elements';
 
-const QuoteBlock = ({ contents }) => (
-  <blockquote>
-    {contents.map((paragraph, index) => (
-      <ParagraphBlock key={index} contents={paragraph.value} />
-    ))}
-  </blockquote>
-);
+const QuoteBlock = ({ contents }) => {
+  const { theme } = useTheme();
+  return (
+    <blockquote
+      css={css`
+        background-color: ${theme.colors.secondary};
+        border-left: 1.7px solid ${theme.colors.primary};
+        padding-left: 0.5rem;
+        `}
+    >
+      {contents.map((paragraph, index) => (
+        <ParagraphBlock key={index} contents={paragraph.value} />
+      ))}
+    </blockquote>
+  );
+};
 
 export default QuoteBlock;