Merge pull request #400 from abilpraju-aot/fwf-4167

updated styling of custom info

forms-flow-components/src/components/CustomComponents/CustomInfo.tsx

@@ -1,4 +1,4 @@
-import React ,{ FC } from "react";
+import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { InfoIcon } from "../SvgIcons/index";
 
@@ -14,16 +14,24 @@ export const CustomInfo: FC<CustomInfoProps> = ( {
     content ,
     className ,
 }) => { 
-    const { t } = useTranslation();
-    return (
-        <div className={`info-panel ${className}`}>
-        <div className="d-flex align-items-center">
-          <InfoIcon />
-          <div className="field-label ms-2">{t(heading)}</div>
-        </div>
-        <div className="info-content">
-          {t(content)}
-        </div>
+  const { t } = useTranslation();
+
+   // Replace `\n` with <br /> tags and use the line itself as a key
+   const formattedContent = content.split("\n").map((line) => (
+    <React.Fragment key={line.trim().replace(/\s+/g, "-")}>
+      {t(line)}
+      <br />
+    </React.Fragment>
+  ));
+
+
+  return (
+    <div className={`info-panel ${className}`}>
+      <div className="d-flex align-items-center">
+        <InfoIcon />
+        <div className="field-label ms-2">{t(heading)}</div>
       </div>
-    )
+      <div className="info-content">{formattedContent}</div> {/* Render formatted content */}
+    </div>
+  );
 };