From f7d06e164479f5b34c2fb89b4b3a8fca26279868 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Thu, 6 Oct 2022 23:09:56 -0700
Subject: [PATCH] rendering formatted text

---
 .../conversation/topicItem/TopicItem.jsx      |  2 +-
 .../topicItem/TopicItem.styled.js             |  3 ---
 .../topicItem/useTopicItem.hook.js            | 23 +++++++++++++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
index dcca9987..518d68be 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
@@ -73,7 +73,7 @@ export function TopicItem({ item }) {
             <AntIcons name="cloudo" size={32} color={Colors.alert} />
           )}
           { state.message && (
-            <Text style={styles.message}>{ state.message }</Text>
+            <Text style={{ paddingLeft: 52, fontSize: state.fontSize, color: state.fontColor }}>{ state.message }</Text>
           )}
         </>
       )}
diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
index 4e4311b1..92a785e1 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
@@ -22,9 +22,6 @@ export const styles = StyleSheet.create({
     paddingTop: 2,
     color: Colors.grey,
   },
-  message: {
-    paddingLeft: 52,
-  },
   carousel: {
     paddingLeft: 52,
     marginTop: 4,
diff --git a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
index 143ca985..0080f637 100644
--- a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
@@ -3,6 +3,7 @@ import { CardContext } from 'context/CardContext';
 import { ProfileContext } from 'context/ProfileContext';
 import moment from 'moment';
 import { useWindowDimensions } from 'react-native';
+import Colors from 'constants/Colors';
 
 export function useTopicItem(item) {
 
@@ -17,6 +18,8 @@ export function useTopicItem(item) {
     width: null,
     height: null,
     activeId: null,
+    fontSize: 14,
+    fontColor: Colors.text,
   });
 
   const profile = useContext(ProfileContext);
@@ -78,16 +81,32 @@ export function useTopicItem(item) {
       }
     }
 
-    let message, assets;
+    let message, assets, fontSize, fontColor;
     try {
       const data = JSON.parse(item.detail.data);
       message = data.text;
       assets = data.assets;
+      if (data.textSize === 'small') {
+        fontSize = 10;
+      }
+      else if (data.textSize === 'large') {
+        fontSize = 20;
+      }
+      else {
+        fontSize = 14;
+      }
+      if (data.textColor) {
+        fontColor = data.textColor;
+      }
+      else {
+        fontColor = Colors.text;
+      }
     }
     catch (err) {
       console.log("empty message");
     }
 
+
     let timestamp;
     const date = new Date(item.detail.created * 1000);
     const now = new Date();
@@ -102,7 +121,7 @@ export function useTopicItem(item) {
       timestamp = moment(date).format('M/DD/YYYY');
     }
 
-    updateState({ logo, name, known, message, timestamp, transform, status, assets });
+    updateState({ logo, name, known, message, fontSize, fontColor, timestamp, transform, status, assets });
   }, [card, item]);
 
   const actions = {