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,86 +67,88 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
   }, []);
 
   return (
-    
-  <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={navigation ? 72 : 0}>
-    <View style={styles.container}>
-      { !navigation && (
-        <View style={styles.header}>
-          { state.loaded && (
-            <TouchableOpacity style={styles.headertitle} onPress={openDetails} activeOpacity={1}>
-              <Logo src={state.logo} width={32} height={32} radius={2} />
-              <Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
-              <Ionicons name={'setting'} size={24} color={Colors.linkText} style={styles.titlebutton} />
+    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={navigation ? 72 : 0}>
+      <View style={styles.container}>
+        { !navigation && (
+          <View style={styles.header}>
+            { state.loaded && (
+              <TouchableOpacity style={styles.headertitle} onPress={openDetails} activeOpacity={1}>
+                <Logo src={state.logo} width={32} height={32} radius={2} />
+                <Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
+                <Ionicons name={'setting'} size={24} color={Colors.linkText} style={styles.titlebutton} />
+              </TouchableOpacity>
+            )}
+            <TouchableOpacity style={styles.headerclose} onPress={closeConversation}>
+              <Ionicons name={'close'} size={22} color={Colors.descriptionText} style={styles.titlebutton} />
             </TouchableOpacity>
-          )}
-          <TouchableOpacity style={styles.headerclose} onPress={closeConversation}>
-            <Ionicons name={'close'} size={22} color={Colors.descriptionText} style={styles.titlebutton} />
-          </TouchableOpacity>
-        </View>
-      )}
-      <View style={styles.thread}>
-        <View style={styles.messages}>
-          { !state.loaded && state.delayed && (
-            <View style={styles.loading}>
-              <ActivityIndicator color={Colors.grey} size="large" />
-            </View>
-          )}
-          { state.moreBusy && state.topics.length > 32 && (
-            <ActivityIndicator style={styles.more} color={Colors.primary} />
-          )}
-          { state.loaded && state.topics.length !== 0 && (
-            <FlatList style={{ ...styles.conversation, transform: [{rotate: '180deg'}]}}
-               contentContainerStyle={styles.topics}
-               data={state.topics}
-               initialNumToRender={16}
-               onEndReached={loadMore}
-               onEndReachedThreshold={0.1}
-               renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} 
-                 focus={() => actions.setFocus(item.topicId)} hosting={state.hosted}
-                 remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic}
-                 report={actions.reportTopic} contentKey={state.contentKey} /> }
-              keyExtractor={item => item.topicId}
-            />
-          )}
-          { state.loaded && state.topics.length === 0 && (
-            <View style={styles.empty}>
-              <Text style={styles.emptytext}>Empty Topic</Text>
-            </View>
-          )}
-        </View>
-        <AddTopic contentKey={state.contentKey} shareIntent={shareIntent} setShareIntent={setShareIntent} />
-      </View>
-      <Modal
-          animationType="fade"
-          transparent={true}
-          visible={state.editing}
-          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.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>
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.save} onPress={updateTopic}>
-                { state.updateBusy && (
-                  <ActivityIndicator size="small" color={Colors.white} />
-                )}
-                { !state.updateBusy && (
-                  <Text style={styles.saveText}>Save</Text>
-                )}
-              </TouchableOpacity>
-            </View>
           </View>
-        </KeyboardAvoidingView>
-      </Modal>
-    </View>
-      </KeyboardAvoidingView>
+        )}
+        <View style={styles.thread}>
+          <View style={styles.messages}>
+            { !state.loaded && state.delayed && (
+              <View style={styles.loading}>
+                <ActivityIndicator color={Colors.grey} size="large" />
+              </View>
+            )}
+            { state.moreBusy && state.topics.length > 32 && (
+              <ActivityIndicator style={styles.more} color={Colors.primary} />
+            )}
+            { state.loaded && state.topics.length !== 0 && (
+              <FlatList style={{ ...styles.conversation, transform: [{rotate: '180deg'}]}}
+                 contentContainerStyle={styles.topics}
+                 data={state.topics}
+                 initialNumToRender={16}
+                 onEndReached={loadMore}
+                 onEndReachedThreshold={0.1}
+                 renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} 
+                   focus={() => actions.setFocus(item.topicId)} hosting={state.hosted}
+                   remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic}
+                   report={actions.reportTopic} contentKey={state.contentKey} /> }
+                keyExtractor={item => item.topicId}
+              />
+            )}
+            { state.loaded && state.topics.length === 0 && (
+              <View style={styles.empty}>
+                <Text style={styles.emptytext}>Empty Topic</Text>
+              </View>
+            )}
+          </View>
+          <AddTopic contentKey={state.contentKey} shareIntent={shareIntent} setShareIntent={setShareIntent} />
+        </View>
+        <Modal
+            animationType="fade"
+            transparent={true}
+            visible={state.editing}
+            supportedOrientations={['portrait', 'landscape']}
+            onRequestClose={actions.hideEdit}
+        >
+          <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}>{ 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}>{ 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,