From 1ebaf6267494e163b00a700dca76c76161919add Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Wed, 1 Jan 2025 14:25:11 -0800
Subject: [PATCH] setting text size and color

---
 app/client/mobile/package.json                |  1 +
 .../src/conversation/Conversation.styled.ts   | 30 +++++++++++
 .../mobile/src/conversation/Conversation.tsx  | 53 ++++++++++++++-----
 app/client/mobile/yarn.lock                   | 17 ++++++
 4 files changed, 87 insertions(+), 14 deletions(-)

diff --git a/app/client/mobile/package.json b/app/client/mobile/package.json
index 1e791d85..3b715e5c 100644
--- a/app/client/mobile/package.json
+++ b/app/client/mobile/package.json
@@ -38,6 +38,7 @@
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-vector-icons": "^10.1.0",
     "react-native-video": "^6.8.2",
+    "react-native-wheel-color-picker": "^1.3.1",
     "react-router-dom": "^6.26.0",
     "react-router-native": "^6.26.0"
   },
diff --git a/app/client/mobile/src/conversation/Conversation.styled.ts b/app/client/mobile/src/conversation/Conversation.styled.ts
index f6cc650e..05e2675e 100644
--- a/app/client/mobile/src/conversation/Conversation.styled.ts
+++ b/app/client/mobile/src/conversation/Conversation.styled.ts
@@ -5,6 +5,36 @@ export const styles = StyleSheet.create({
   conversation: {
     flex: 1
   },
+  closeIcon: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    backgroundColor: 'transparent',
+  },
+  modal: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  colorArea: {
+    position: 'relative',
+    display: 'flex',
+    alignItem: 'center',
+    justifyContent: 'center',
+    height: 300,
+    width: 300,
+    padding: 16,
+    borderRadius: 8,
+  },
+  blur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
   messageList: {
     width: '100%',
   },
diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx
index 1950aa11..09f596a4 100644
--- a/app/client/mobile/src/conversation/Conversation.tsx
+++ b/app/client/mobile/src/conversation/Conversation.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import {KeyboardAvoidingView, Platform, SafeAreaView, Pressable, View, FlatList, TouchableOpacity} from 'react-native';
+import {KeyboardAvoidingView, Modal, Platform, SafeAreaView, Pressable, View, FlatList, TouchableOpacity} from 'react-native';
 import {styles} from './Conversation.styled';
 import {useConversation} from './useConversation.hook';
 import {Message} from '../message/Message';
@@ -7,6 +7,8 @@ import {Surface, Icon, Text, TextInput, Menu, IconButton, Divider} from 'react-n
 import { ActivityIndicator } from 'react-native-paper';
 import { Colors } from '../constants/Colors';
 import { Confirm } from '../confirm/Confirm';
+import ColorPicker from 'react-native-wheel-color-picker'
+import {BlurView} from '@react-native-community/blur';
 
 const SCROLL_THRESHOLD = 16;
 
@@ -25,6 +27,7 @@ export function Conversation({close}: {close: ()=>void}) {
   const [ sending, setSending ] = useState(false);
   const [ selected, setSelected ] = useState(null as null | string);
   const [ sizeMenu, setSizeMenu ] = useState(false);
+  const [ colorMenu, setColorMenu ] = useState(false);
   const thread = useRef();
   const scrolled = useRef(false);
   const contentHeight = useRef(0);
@@ -167,27 +170,37 @@ export function Conversation({close}: {close: ()=>void}) {
       <Divider style={styles.border} bold={true} />
       <Confirm show={alert} params={alertParams} />
       <View style={styles.add}>
-        <TextInput multiline={true} mode="outlined" style={styles.message} spellcheck={false} autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage} 
-                value={state.message}
-                onChangeText={value => actions.setMessage(value)}
+        <TextInput multiline={true} mode="outlined" style={{ ...styles.message, fontSize: state.textSize }}
+            textColor={state.textColorSet ? state.textColor : undefined} outlineColor="transparent" activeOutlineColor="transparent"spellcheck={false}
+            autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage} placeholderTextColor={state.textColorSet ? state.textColor : undefined}
+            cursorColor={state.textColorSet ? state.textColor : undefined} value={state.message} onChangeText={value => actions.setMessage(value)} />
 
-/>
         <View style={styles.controls}>
           <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
           <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
           <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="volume-high" size={24} color={Colors.primary} /></Surface></Pressable>
           <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="file-outline" size={24} color={Colors.primary} /></Surface></Pressable>
           <Divider style={styles.separator} />
-          <Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} /></Surface></Pressable>
+          <Pressable style={styles.control} onPress={()=>setColorMenu(true)}>
+            <Surface style={styles.surface} elevation={2}>
+              <Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} />
+            </Surface>
+          </Pressable>
 
-        <Menu
-          visible={sizeMenu}
-          onDismiss={()=>setSizeMenu(false)}
-          anchor={<Pressable style={styles.control} onPress={()=>setSizeMenu(true)}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="format-size" size={24} color={Colors.primary} /></Surface></Pressable>}>
-          <Menu.Item onPress={() => { actions.setTextSize(12); setSizeMenu(false) }} title={state.strings.textSmall} />
-          <Menu.Item onPress={() => { actions.setTextSize(16); setSizeMenu(false) }} title={state.strings.textMedium} />
-          <Menu.Item onPress={() => { actions.setTextSize(20); setSizeMenu(false) }} title={state.strings.textLarge} />
-        </Menu>
+          <Menu
+            visible={sizeMenu}
+            onDismiss={()=>setSizeMenu(false)}
+            anchor={(
+              <Pressable style={styles.control} onPress={()=>setSizeMenu(true)}>
+                <Surface style={styles.surface} elevation={2}>
+                  <Icon style={styles.button} source="format-size" size={24} color={Colors.primary} />
+                </Surface>
+              </Pressable>
+            )}>
+            <Menu.Item onPress={() => { actions.setTextSize(12); setSizeMenu(false) }} title={state.strings.textSmall} />
+            <Menu.Item onPress={() => { actions.setTextSize(16); setSizeMenu(false) }} title={state.strings.textMedium} />
+            <Menu.Item onPress={() => { actions.setTextSize(20); setSizeMenu(false) }} title={state.strings.textLarge} />
+          </Menu>
 
           <View style={styles.end}>
             <Pressable style={styles.control} onPress={sendMessage}><Surface style={styles.surface} elevation={2}>
@@ -204,6 +217,18 @@ export function Conversation({close}: {close: ()=>void}) {
           </View>
         </View>
       </View>
+
+      <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={colorMenu} onRequestClose={()=>setColorMenu(false)}>
+        <View style={styles.modal}>
+          <Pressable style={styles.blur} onPress={()=>setColorMenu(false)}>
+            <BlurView style={styles.blur} blurType="dark" blurAmount={6} reducedTransparencyFallbackColor="dark" />
+          </Pressable>
+          <Surface elevation={2} style={styles.colorArea}>
+            <ColorPicker color={state.textColorSet ? state.textColor : undefined} onColorChange={actions.setTextColor} onColorChangeComplete={actions.setTextColor} swatched={false} />
+            <IconButton style={styles.closeIcon} icon="close" compact="true" mode="contained" size={20} onPress={()=>setColorMenu(false)} />
+          </Surface>
+        </View>
+      </Modal>
     </KeyboardAvoidingView>
   );
 }
diff --git a/app/client/mobile/yarn.lock b/app/client/mobile/yarn.lock
index a99a4673..bbde2bc1 100644
--- a/app/client/mobile/yarn.lock
+++ b/app/client/mobile/yarn.lock
@@ -3454,6 +3454,7 @@ __metadata:
     react-native-sqlite-storage: ^6.0.1
     react-native-vector-icons: ^10.1.0
     react-native-video: ^6.8.2
+    react-native-wheel-color-picker: ^1.3.1
     react-router-dom: ^6.26.0
     react-router-native: ^6.26.0
     react-test-renderer: 18.2.0
@@ -8860,6 +8861,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-elevation@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "react-native-elevation@npm:1.0.0"
+  checksum: 988edf86b441459e65f5121b0f916087c94dc0fb4bf7a36da4718b633644dbf10313054208cc4758302fbaa7e1d7b99d29004efc937466ecd7d66c2372f47129
+  languageName: node
+  linkType: hard
+
 "react-native-file-type@npm:^1.0.0":
   version: 1.0.0
   resolution: "react-native-file-type@npm:1.0.0"
@@ -9048,6 +9056,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-wheel-color-picker@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "react-native-wheel-color-picker@npm:1.3.1"
+  dependencies:
+    react-native-elevation: ^1.0.0
+  checksum: a9f34ff91e4181c3fb77b436393f3bd2232d7644c0193553b2ccbe3a9f71dd77f1d61884577c3be882f16baed2e91ef533d341fc874795fe1acd613b27549506
+  languageName: node
+  linkType: hard
+
 "react-native@npm:*":
   version: 0.76.5
   resolution: "react-native@npm:0.76.5"