From c9979d6e79621877d5ef0d18cc262b80bfaf77a8 Mon Sep 17 00:00:00 2001
From: Matt Shaver <60105315+matthewshaver@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:03:55 -0500
Subject: [PATCH 1/3] Color options for text

---
 website/src/components/ColoredText/index.js | 11 +++++++++++
 website/src/css/custom.css                  | 10 ++++++++++
 website/src/theme/MDXComponents/index.js    |  2 ++
 3 files changed, 23 insertions(+)
 create mode 100644 website/src/components/ColoredText/index.js

diff --git a/website/src/components/ColoredText/index.js b/website/src/components/ColoredText/index.js
new file mode 100644
index 00000000000..70957a3049e
--- /dev/null
+++ b/website/src/components/ColoredText/index.js
@@ -0,0 +1,11 @@
+// src/components/ColoredText.js
+import React from 'react';
+import clsx from 'clsx';
+
+const ColoredText = ({ color, className, children }) => (
+  <span style={color ? { color } : {}} className={clsx(className)}>
+    {children}
+  </span>
+);
+
+export default ColoredText;
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e240a5dfabf..22e842988e0 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -2112,3 +2112,13 @@ h2.anchor.clicked a.hash-link:before {
     flex-direction: column;
   }
 }
+
+.text-green {
+  color: #42f54e;
+}
+.text-red {
+  color: #ff171f;
+}
+.text-yellow {
+  color: #f5ea20;
+}
diff --git a/website/src/theme/MDXComponents/index.js b/website/src/theme/MDXComponents/index.js
index d136222a0ce..fae74936bab 100644
--- a/website/src/theme/MDXComponents/index.js
+++ b/website/src/theme/MDXComponents/index.js
@@ -44,6 +44,7 @@ import Lifecycle from '@site/src/components/lifeCycle';
 import DetailsToggle from '@site/src/components/detailsToggle';
 import Expandable from '@site/src/components/expandable';
 import ConfettiTrigger from '@site/src/components/confetti/';
+import ColoredText from '@site/src/components/ColoredText';
 
 const MDXComponents = {
   Head,
@@ -95,5 +96,6 @@ const MDXComponents = {
   DetailsToggle: DetailsToggle,
   Expandable: Expandable,
   ConfettiTrigger: ConfettiTrigger,
+  ColoredText: ColoredText,
 };
 export default MDXComponents;

From a1ea2f5dacab9f7fb39c65fa4b57596280e51c8d Mon Sep 17 00:00:00 2001
From: Matt Shaver <60105315+matthewshaver@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:07:38 -0500
Subject: [PATCH 2/3] Removing note

---
 website/src/components/ColoredText/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/src/components/ColoredText/index.js b/website/src/components/ColoredText/index.js
index 70957a3049e..5f0c009b5d0 100644
--- a/website/src/components/ColoredText/index.js
+++ b/website/src/components/ColoredText/index.js
@@ -1,4 +1,3 @@
-// src/components/ColoredText.js
 import React from 'react';
 import clsx from 'clsx';
 

From 82617b61702e6d91f712ace7864fd200001e78bc Mon Sep 17 00:00:00 2001
From: Matt Shaver <60105315+matthewshaver@users.noreply.github.com>
Date: Wed, 20 Nov 2024 08:55:06 -0500
Subject: [PATCH 3/3] Updates

---
 website/src/components/{ColoredText => TextColor}/index.js | 4 ++--
 website/src/theme/MDXComponents/index.js                   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename website/src/components/{ColoredText => TextColor}/index.js (63%)

diff --git a/website/src/components/ColoredText/index.js b/website/src/components/TextColor/index.js
similarity index 63%
rename from website/src/components/ColoredText/index.js
rename to website/src/components/TextColor/index.js
index 5f0c009b5d0..bcc6d50998a 100644
--- a/website/src/components/ColoredText/index.js
+++ b/website/src/components/TextColor/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import clsx from 'clsx';
 
-const ColoredText = ({ color, className, children }) => (
+const TextColor = ({ color, className, children }) => (
   <span style={color ? { color } : {}} className={clsx(className)}>
     {children}
   </span>
 );
 
-export default ColoredText;
+export default TextColor;
diff --git a/website/src/theme/MDXComponents/index.js b/website/src/theme/MDXComponents/index.js
index 2552987ddb1..c12e5d28e1a 100644
--- a/website/src/theme/MDXComponents/index.js
+++ b/website/src/theme/MDXComponents/index.js
@@ -45,7 +45,7 @@ import Lifecycle from '@site/src/components/lifeCycle';
 import DetailsToggle from '@site/src/components/detailsToggle';
 import Expandable from '@site/src/components/expandable';
 import ConfettiTrigger from '@site/src/components/confetti/';
-import ColoredText from '@site/src/components/ColoredText';
+import TextColor from '@site/src/components/TextColor';
 
 const MDXComponents = {
   Head,