Create and use new formatted text component

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 };

src/components/FormattedText/index.jsx

@@ -0,0 +1 @@
+export { FormattedText } from "./FormattedText";

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>
   );
 };

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
+          textElements={[
-            utilized as a guide to guage the readiness of your device, however
+            {
-            please do your own due diligence prior to commiting any funds. Read
+              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 ",
-            our Health Check Disclosure for more information."
+            },
+            { bold: "Health Check Disclosure" },
+            { text: " for more information." },
+          ]}
         />
         <XStack>
           <ReactButton