updating style for light mode

app/mobile/src/constants/Colors.js

@@ -47,8 +47,8 @@ const LightColors = {
   confirmedIndicator: '#88bb00',
   unknownIndicator: '#dddddd',
   errorIndicator: '#ffaaaa',
-  horizontalDivider: '#bbbbbb',
-  verticalDivider: '#aaaaaa',
+  horizontalDivider: '#dddddd',
+  verticalDivider: '#dddddd',
   itemDivider: '#cccccc',
   unreadIndicator: '#00aa00',
   enabledIndicator: '#8fbea7',

app/mobile/src/constants/Strings.js

@@ -183,6 +183,8 @@ const Strings = [
     agree: 'I agree to Terms of Service',
     terms: 'View Terms of Service',
     policy: 'Terms of Use and User Policy',
+
+    editMessage: 'Edit Message Text',
   },
   {
     languageCode: 'fr',
@@ -362,6 +364,8 @@ const Strings = [
     agree: 'J\'accepte les Conditions d\'Utilisation',
     terms: 'Afficher les Conditions d\'Utilisation',
     policy: 'Conditions d\'Utilisation et Politique d\'Utilisation',
+
+    editMessage: 'Modifier le Texte du Message',
   },
   {
     languageCode: 'es',
@@ -541,6 +545,8 @@ const Strings = [
     agree: 'Acepto los Términos de Servicio',
     terms: 'Ver Términos de Servicio',
     policy: 'Términos de Uso y Política de Usuario',
+
+    editMessage: 'Editar Texto del Mensaje',
   },
   {
     languageCode: 'de',
@@ -720,6 +726,8 @@ const Strings = [
     agree: 'Ich akzeptiere die Nutzungsbedingungen',
     terms: 'Nutzungsbedingungen anzeigen',
     policy: 'Nutzungsbedingungen und Benutzerrichtlinien',
+
+    editMessage: 'Nachrichtentext Bearbeiten',
   },
   {
     languageCode: 'pt',
@@ -885,6 +893,7 @@ const Strings = [
     agree: 'Eu concordo com os Termos de Serviço',
     terms: 'Ver Termos de Serviço',
     policy: 'Termos de Uso e Política do Usuário',
+    editMessage: 'Editar Texto da Mensagem',
   },
 ];
 

app/mobile/src/session/conversation/Conversation.jsx

@@ -8,6 +8,7 @@ import Ionicons from 'react-native-vector-icons/AntDesign';
 import { Logo } from 'utils/Logo';
 import { AddTopic } from './addTopic/AddTopic';
 import { TopicItem } from './topicItem/TopicItem';
+import { BlurView } from "@react-native-community/blur";
 
 export function Conversation({ navigation, cardId, channelId, closeConversation, openDetails, shareIntent, setShareIntent }) {
 
@@ -66,7 +67,6 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
   }, []);
 
   return (
-    
     <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={navigation ? 72 : 0}>
       <View style={styles.container}>
         { !navigation && (
@@ -122,28 +122,31 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
             supportedOrientations={['portrait', 'landscape']}
             onRequestClose={actions.hideEdit}
         >
-        <KeyboardAvoidingView behavior="height" style={styles.modal}>
-          <View style={styles.editContainer}>
-            <Text style={styles.editHeader}>Edit Message Text:</Text>
+          <View style={styles.modalOverlay}>
+            <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+            <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+              <View style={styles.modalContainer}>
+                <Text style={styles.editHeader}>{ state.strings.editMessage }</Text>
                 <View style={styles.inputField}>
                   <TextInput style={styles.input} value={state.editMessage} onChangeText={actions.setEditMessage}
                       autoCapitalize="sentences" placeholder="Message Text" multiline={true} placeholderTextColor={Colors.grey} />
                 </View>
                 <View style={styles.editControls}>
                   <TouchableOpacity style={styles.cancel} onPress={actions.hideEdit}>
-                <Text style={styles.canceltext}>Cancel</Text>
+                    <Text style={styles.canceltext}>{ state.strings.cancel }</Text>
                   </TouchableOpacity>
                   <TouchableOpacity style={styles.save} onPress={updateTopic}>
                     { state.updateBusy && (
                       <ActivityIndicator size="small" color={Colors.white} />
                     )}
                     { !state.updateBusy && (
-                  <Text style={styles.saveText}>Save</Text>
+                      <Text style={styles.saveText}>{ state.strings.save }</Text>
                     )}
                   </TouchableOpacity>
                 </View>
               </View>
             </KeyboardAvoidingView>
+          </View>
         </Modal>
       </View>
     </KeyboardAvoidingView>

app/mobile/src/session/conversation/Conversation.styled.js

@@ -105,11 +105,10 @@ export const styles = StyleSheet.create({
     color: Colors.white,
   },
   canceltext: {
-    color: Colors.text,
+    color: Colors.cancelButtonText,
   },
   cancel: {
-    borderWidth: 1,
-    borderColor: Colors.lightgrey,
+    backgroundColor: Colors.cancelButton,
     borderRadius: 4,
     padding: 8,
     marginRight: 8,
@@ -167,5 +166,30 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  modalOverlay: {
+    width: '100%',
+    height: '100%',
+  },
+  modalBase: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  modalContainer: {
+    backgroundColor: Colors.modalBase,
+    borderColor: Colors.modalBorder,
+    borderWidth: 1,
+    width: '80%', 
+    maxWidth: 400,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: 8,
+    padding: 16,
+  },
 });
 

app/mobile/src/session/conversation/useConversation.hook.js

@@ -5,9 +5,11 @@ import { AccountContext } from 'context/AccountContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { getChannelSubjectLogo } from 'context/channelUtil';
 import { getChannelSeals, isUnsealed, getContentKey, encryptTopicSubject, decryptTopicSubject } from 'context/sealUtil';
+import { getLanguageStrings } from 'constants/Strings';
 
 export function useConversation() {
   const [state, setState] = useState({
+    strings: getLanguageStrings(),
     hosted: null,
     subject: null,
     logo: null,