Update themed components with refs and css

lib/component/message/TertiaryMessageBlock.tsx

@@ -1,24 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function TertiaryMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const TertiaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-tertiary-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-purple-200 text-purple-600"
+				"bg-tertiary-xlight text-tertiary-mid"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
 
+TertiaryMessageBlock.displayName = "TertiaryMessageBlock";
+
+export default TertiaryMessageBlock;