style

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={[]} />
 		))}