From d67d4e46b219b213400a21729eb2a1e4d24832ce Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Fri, 15 Oct 2021 10:44:12 -0300
Subject: [PATCH] [FIX] Markdown quote message style (#23462)

---
 client/components/Message/Body/Quote.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/client/components/Message/Body/Quote.tsx b/client/components/Message/Body/Quote.tsx
index 45118bd1d6c..df314cdf1bb 100644
--- a/client/components/Message/Body/Quote.tsx
+++ b/client/components/Message/Body/Quote.tsx
@@ -1,11 +1,32 @@
+import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
+import colors from '@rocket.chat/fuselage-tokens/colors';
 import { Quote as ASTQuote } from '@rocket.chat/message-parser';
 import React, { FC } from 'react';
 
 import Paragraph from './Paragraph';
 
+const hover = css`
+	&:hover,
+	&:focus {
+		background: ${colors.n200} !important;
+		border-color: ${colors.n300} !important;
+		border-inline-start-color: ${colors.n600} !important;
+	}
+`;
+
 const Quote: FC<{ value: ASTQuote['value'] }> = ({ value }) => (
-	<Box is='blockquote' backgroundColor='neutral-200' pi='x8'>
+	<Box
+		is='blockquote'
+		className={hover}
+		pi='x8'
+		borderRadius='x2'
+		borderWidth='x2'
+		borderStyle='solid'
+		backgroundColor='neutral-100'
+		borderColor='neutral-200'
+		borderInlineStartColor='neutral-600'
+	>
 		{value.map((item, index) => (
 			<Paragraph key={index} value={item.value} mentions={[]} />
 		))}