From 4f24f755776aad7fb8c2e44ecbc466e071453a9c Mon Sep 17 00:00:00 2001
From: Ivan Wang <ivan.wang@latitudefinancial.com>
Date: Mon, 2 Oct 2023 23:33:05 +1100
Subject: [PATCH] feat(Message): support custom color for icon and title

---
 src/components/Message.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Message.js b/src/components/Message.js
index 4650f99a..f52d5b6d 100644
--- a/src/components/Message.js
+++ b/src/components/Message.js
@@ -35,6 +35,7 @@ const BACKGROUNDS = [
 
 const DEFAULT_PROPS = {
   bg: "grey.t10",
+  contentColor: null,
   hasBreakpointWidth: false,
 };
 
@@ -61,15 +62,18 @@ function Message(props) {
     role,
     children,
     testId,
+    contentColor,
   } = mergedProps;
   const theme = useTheme();
-  const textAndIconColor = [
-    "highlight.pink.t100",
-    "highlight.purple.t100",
-    "primary.blue.t100",
-  ].includes(bg)
-    ? "white"
-    : "black";
+  const textAndIconColor =
+    contentColor ||
+    ([
+      "highlight.pink.t100",
+      "highlight.purple.t100",
+      "primary.blue.t100",
+    ].includes(bg)
+      ? "white"
+      : "black");
   const switchLayoutAt = "md";
   const iconSize = 32;
   const distanceFromIcon = 8;