From b18d6e4e9c79243e382ed5b5595d9e61b9e7ed91 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sat, 22 Jul 2023 10:18:31 +0300
Subject: [PATCH] Create and use new formatted text component

---
 .../FormattedText/FormattedText.jsx           | 27 +++++++++++++++++++
 src/components/FormattedText/index.jsx        |  1 +
 .../InformationBox/InformationBox.jsx         | 11 +++++---
 .../DeviceHealthCheck/DeviceHealthCheck.jsx   | 12 +++++----
 4 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 src/components/FormattedText/FormattedText.jsx
 create mode 100644 src/components/FormattedText/index.jsx

diff --git a/src/components/FormattedText/FormattedText.jsx b/src/components/FormattedText/FormattedText.jsx
new file mode 100644
index 00000000..c3463616
--- /dev/null
+++ b/src/components/FormattedText/FormattedText.jsx
@@ -0,0 +1,27 @@
+import { Text } from "tamagui";
+
+const FormattedText = ({ textElements, color, fontSize }) => {
+  return (
+    <Text color={color} fontSize={fontSize}>
+      {textElements.map((textElement, index) => {
+        if (textElement.bold) {
+          return (
+            <span key={index} style={{ fontWeight: "bold" }}>
+              {textElement.bold}
+            </span>
+          );
+        }
+        if (textElement.italic) {
+          return (
+            <span key={index} style={{ fontStyle: "italic" }}>
+              {textElement.italic}
+            </span>
+          );
+        }
+        return <span key={index}>{textElement.text}</span>;
+      })}
+    </Text>
+  );
+};
+
+export { FormattedText };
diff --git a/src/components/FormattedText/index.jsx b/src/components/FormattedText/index.jsx
new file mode 100644
index 00000000..22519ef1
--- /dev/null
+++ b/src/components/FormattedText/index.jsx
@@ -0,0 +1 @@
+export { FormattedText } from "./FormattedText";
diff --git a/src/components/InformationBox/InformationBox.jsx b/src/components/InformationBox/InformationBox.jsx
index 995baf4b..8c32d3ea 100644
--- a/src/components/InformationBox/InformationBox.jsx
+++ b/src/components/InformationBox/InformationBox.jsx
@@ -1,7 +1,8 @@
-import { Paragraph, XStack } from "tamagui";
+import { XStack } from "tamagui";
 import { Icon } from "../Icon";
+import { FormattedText } from "../FormattedText";
 
-const InformationBox = ({ icon, text }) => {
+const InformationBox = ({ icon, textElements }) => {
   return (
     <XStack
       style={{
@@ -14,7 +15,11 @@ const InformationBox = ({ icon, text }) => {
       space={"$2"}
     >
       <Icon source={icon} width={12} height={12} style={{ marginTop: "6px" }} />
-      <Paragraph color={"#647084"}>{text}</Paragraph>
+      <FormattedText
+        textElements={textElements}
+        color={"#647084"}
+        fontSize={"$3"}
+      />
     </XStack>
   );
 };
diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.jsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.jsx
index fa18ed97..e7d03dc6 100644
--- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.jsx
+++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.jsx
@@ -3,7 +3,6 @@ import { ReactButton } from "../../components/ReactButton";
 import { Logo } from "../../components/Logo";
 import { InformationBox } from "../../components/InformationBox";
 import { Titles } from "../../components/Titles";
-import { IconText } from "../../components/IconText/IconText";
 import { BackgroundImage } from "../../components/BackgroundImage";
 import { PageWrapper } from "../../components/PageWrapper";
 import { StatisticBoxes } from "./StatisticBoxes/StatisticBoxes";
@@ -26,10 +25,13 @@ const DeviceHealthCheck = () => {
         <StatisticTexts />
         <InformationBox
           icon="/icons/close.png"
-          text="The information provided in the Nodes Health Check is meant to
-            utilized as a guide to guage the readiness of your device, however
-            please do your own due diligence prior to commiting any funds. Read
-            our Health Check Disclosure for more information."
+          textElements={[
+            {
+              text: "The information provided in the Nodes Health Check is meant to be utilized as a guide to gauge the readiness of your device, however please do your own due diligence prior to commiting any funds. Read our ",
+            },
+            { bold: "Health Check Disclosure" },
+            { text: " for more information." },
+          ]}
         />
         <XStack>
           <ReactButton