preparing details screen

app/mobile/src/constants/Strings.js

@@ -128,6 +128,15 @@ const Strings = [
     create: 'Create',
     sealed: 'Sealed',
     newTopic: 'New Topic',
+
+    // details
+    topic: 'Topic',
+    host: 'host',
+    guest: 'guest',
+    leave: 'Leave',
+    members: 'Members',
+    editSubject: 'Edit Subject',
+    topicMembers: 'Topic Members',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -253,6 +262,15 @@ const Strings = [
     create: 'Créer',
     sealed: 'Protégé', 
     newTopic: 'Nourveau Sujet',
+
+    // details
+    topic: 'Sujet',
+    host: 'Hôte',
+    guest: 'Invité',
+    leave: 'Partir',
+    members: 'Membres',
+    editSubject: 'Modifier le Title',
+    topicMembers: 'Membres du Sujet',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -378,6 +396,15 @@ const Strings = [
     create: 'Crear',
     sealed: 'Protegida',
     newTopic: 'Nuevo Tema',
+
+    // details
+    topic: 'Tema',
+    host: 'Anfitrión',
+    guest: 'Invitado',
+    leave: 'Dejar',
+    members: 'Miembros',
+    editSubject: 'Editar Título',
+    topicMembers: 'Miembros del Tema',
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -503,6 +530,15 @@ const Strings = [
     create: 'Erstellen',
     sealed: 'Gesichert',
     newTopic: 'Neues Thema',
+
+    // details
+    topic: 'Thema',
+    host: 'Gastgeber',
+    guest: 'Gast',
+    leave: 'Verlassen',
+    members: 'Mitglieder',
+    editSubject: 'Titel bearbeiten',
+    topicMembers: 'Themenmitglieder',
   }
 ];
 

app/mobile/src/session/Session.jsx

@@ -87,7 +87,7 @@ function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShar
         </ConversationStack.Screen>
 
         <ConversationStack.Screen name="details" options={{ ...stackParams, headerTitle: (props) => (
-            <Text style={styles.headertext}>Details</Text>
+            <Text style={styles.headertext}></Text>
         )}}>
           {(props) => <Details clearConversation={() => clearConversation(props.navigation)} />}
         </ConversationStack.Screen>

app/mobile/src/session/channels/Channels.jsx

@@ -22,9 +22,9 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
     catch (err) {
       console.log(err);
       Alert.alert(
-        'Failed to Add Topic',
+        state.strings.error,
-        'Please try again.'
+        state.strings.tryAgain,
-      )
+      );
     }
   };
 

app/mobile/src/session/channels/Channels.styled.js

@@ -122,10 +122,10 @@ export const styles = StyleSheet.create({
   },
   addMembers: {
     width: '100%',
-    borderWidth: 1,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
     borderColor: Colors.lightgrey,
-    borderRadius: 4,
+    marginBottom: 16,
-    marginBottom: 8,
     height: 200,
   },
   emptyMembers: {

app/mobile/src/session/details/Details.jsx

@@ -6,6 +6,8 @@ import AntIcons from 'react-native-vector-icons/AntDesign';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Colors from 'constants/Colors';
 import { MemberItem } from './memberItem/MemberItem';
+import { BlurView } from '@react-native-community/blur';
+import { InputField } from 'utils/InputField';
 
 export function Details({ channel, clearConversation }) {
 
@@ -23,8 +25,8 @@ export function Details({ channel, clearConversation }) {
     catch (err) {
       console.log(err);
       Alert.alert(
-        'Failed to Update Membership',
+        state.strings.error,
-        'Please try again.'
+        state.strings.tryAgain,
       );
     }
   };
@@ -37,9 +39,9 @@ export function Details({ channel, clearConversation }) {
     catch (err) {
       console.log(err);
       Alert.alert(
-        'Failed to Save Subject',
+        state.strings.error,
-        'Please try again.'
+        state.strings.tryAgain,
-      )
+      );
     }
   }
 
@@ -50,9 +52,9 @@ export function Details({ channel, clearConversation }) {
     catch (err) {
       console.log(err);
       Alert.alert(
-        'Failed to Update Notifications',
+        state.strings.error,
-        'Please try again.',
+        state.strings.tryAgain,
-      )
+      );
     }
   }
 
@@ -157,7 +159,7 @@ export function Details({ channel, clearConversation }) {
             )}
           </View>
           <Text style={styles.created}>{ state.timestamp }</Text>
-          <Text style={styles.mode}>{ state.hostId ? 'guest' : 'host' }</Text>
+          <Text style={styles.mode}>{ state.hostId ? state.strings.guest : state.strings.host }</Text>
         </View>  
       </View>
 
@@ -203,7 +205,7 @@ export function Details({ channel, clearConversation }) {
 
         <View style={styles.notify}>
           <TouchableOpacity onPress={() => setNotifications(!state.notification)} activeOpacity={1}>
-            <Text style={styles.notifyText}>Enable Notifications</Text>
+            <Text style={styles.notifyText}>{ state.strings.enableNotifications }</Text>
           </TouchableOpacity>
           { state.notification != null && (
             <Switch style={styles.switch} value={state.notification} onValueChange={setNotifications} trackColor={styles.track}/>
@@ -213,7 +215,7 @@ export function Details({ channel, clearConversation }) {
       </View>
 
       <View style={styles.members}>
-        <Text style={styles.membersLabel}>Members:</Text>
+        <Text style={styles.membersLabel}>{ state.strings.members }</Text>
         { state.count - state.members.length > 0 && (
           <Text style={styles.unknown}> (+ {state.count - state.contacts.length} unknown)</Text>
         )}
@@ -232,23 +234,32 @@ export function Details({ channel, clearConversation }) {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideEditSubject}
       >
-        <KeyboardAvoidingView behavior="height" style={styles.editWrapper}>
+        <View style={styles.modalOverlay}>
-          <View style={styles.editContainer}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
-            <Text style={styles.editHeader}>Edit Subject:</Text>
+          <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-            <View style={styles.inputField}>
+            <View style={styles.modalContainer}>
-              <TextInput style={styles.input} value={state.subjectUpdate} onChangeText={actions.setSubjectUpdate}
+              <Text style={styles.editHeader}>{ state.strings.editSubject }</Text>
-                  autoCapitalize="words" placeholder="Subject" placeholderTextColor={Colors.grey} />
+
+              <InputField
+                label={state.strings.subject}
+                value={state.subjectUpdate}
+                autoCapitalize={'words'}
+                spellCheck={false}
+                style={styles.field}
+                onChangeText={actions.setSubjectUpdate}
+              />
+
+              <View style={styles.editControls}>
+                <TouchableOpacity style={styles.close} onPress={actions.hideEditSubject}>
+                  <Text style={styles.closeText}>Cancel</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.save} onPress={saveSubject}>
+                  <Text style={styles.saveText}>Save</Text>
+                </TouchableOpacity>
+              </View>
             </View>
-            <View style={styles.editControls}>
+          </KeyboardAvoidingView>
-              <TouchableOpacity style={styles.cancel} onPress={actions.hideEditSubject}>
+        </View>
-                <Text>Cancel</Text>
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.save} onPress={saveSubject}>
-                <Text style={styles.saveText}>Save</Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </KeyboardAvoidingView>
       </Modal>
 
       <Modal
@@ -258,21 +269,24 @@ export function Details({ channel, clearConversation }) {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideEditMembers}
       >
-        <KeyboardAvoidingView behavior="height" style={styles.editWrapper}>
+        <View style={styles.modalOverlay}>
-          <View style={styles.editContainer}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
-            <Text style={styles.editHeader}>Channel Members:</Text>
+          <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-            <FlatList style={styles.editMembers}
+            <View style={styles.modalContainer}>
-              data={state.connected}
+              <Text style={styles.editHeader}>{ state.strings.topicMembers }</Text>
-              renderItem={({ item }) => <MemberItem item={item} toggle={toggle} />}
+              <FlatList style={styles.editMembers}
-              keyExtractor={item => item.cardId}
+                data={state.connected}
-            />
+                renderItem={({ item }) => <MemberItem item={item} toggle={toggle} />}
-            <View style={styles.editControls}>
+                keyExtractor={item => item.cardId}
-              <TouchableOpacity style={styles.cancel} onPress={actions.hideEditMembers}>
+              />
-                <Text>Done</Text>
+              <View style={styles.editControls}>
-              </TouchableOpacity>
+                <TouchableOpacity style={styles.close} onPress={actions.hideEditMembers}>
+                  <Text style={styles.closeText}>{ state.strings.close }</Text>
+                </TouchableOpacity>
+              </View>
             </View>
-          </View>
+          </KeyboardAvoidingView>
-        </KeyboardAvoidingView>
+        </View>
       </Modal>
 
     </View>

app/mobile/src/session/details/Details.styled.js

@@ -6,6 +6,8 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    backgroundColor: Colors.screenBase,
+    height: '100%',
   },
   details: {
     display: 'flex',
@@ -64,13 +66,13 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 128,
     height: 28,
-    backgroundColor: Colors.primary,
+    backgroundColor: Colors.primaryButton,
     borderRadius: 4,
     margin: 8,
     padding: 2,
   },
   buttonText: {
-    color: Colors.white,
+    color: Colors.primaryButtonText,
     padding: 4,
   },
   members: {
@@ -81,9 +83,11 @@ export const styles = StyleSheet.create({
     borderColor: Colors.divider,
     display: 'flex',
     flexDirection: 'row',
+    backgroundColor: Colors.screenBase,
   },
   membersLabel: {
     paddingLeft: 16,
+    color: Colors.text,
   },
   unknown: {
     color: Colors.grey,
@@ -91,6 +95,7 @@ export const styles = StyleSheet.create({
   },
   cards: {
     width: '100%',
+    backgroundColor: Colors.screenBase,
   },
   save: {
     padding: 8,
@@ -138,6 +143,7 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'flex-end',
+    paddingTop: 16,
   },
   editWrapper: {
     display: 'flex',
@@ -148,19 +154,20 @@ export const styles = StyleSheet.create({
     backgroundColor: 'rgba(52, 52, 52, 0.8)'
   },
   editContainer: {
-    backgroundColor: Colors.formBackground,
+    backgroundColor: Colors.screenBase,
     padding: 16,
     width: '80%',
     maxWidth: 400,
   },
   editHeader: {
     fontSize: 18,
-    paddingBottom: 16,
+    paddingBottom: 8,
+    color: Colors.text,
   },
   editMembers: {
     width: '100%',
     borderWidth: 1,
-    borderColor: Colors.lightgrey,
+    borderColor: Colors.itemDivider,
     borderRadius: 4,
     marginBottom: 8,
     height: 250,
@@ -183,4 +190,63 @@ export const styles = StyleSheet.create({
   switch: {
     transform: [{ scaleX: .7 }, { scaleY: .7 }],
   },
+  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,
+    width: '80%',
+    maxWidth: 400,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: 8,
+    padding: 16,
+  },
+  close: {
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    padding: 8,
+    marginRight: 8,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  closeText: {
+    color: Colors.cancelButtonText,
+  }, 
+  field: {
+    input: {
+      backgroundColor: Colors.inputBase,
+      borderRadius: 8,
+      minHeight: 48,
+      maxHeight: 128,
+      paddingLeft: 8,
+    },
+    inputText: {
+      color: Colors.inputText,
+    },
+    label: {
+      height: 16,
+      paddingLeft: 8,
+    },
+    labelText: {
+      color: Colors.inputPlaceholder,
+      fontSize: 12,
+    },
+    container: {
+      width: '100%',
+    },
+  },
 })

app/mobile/src/session/details/useDetails.hook.js

@@ -7,11 +7,13 @@ import { ProfileContext } from 'context/ProfileContext';
 import { getChannelSubjectLogo } from 'context/channelUtil';
 import { getCardByGuid } from 'context/cardUtil';
 import { getChannelSeals, isUnsealed, getContentKey, updateChannelSubject } from 'context/sealUtil';
+import { getLanguageStrings } from 'constants/Strings';
 import moment from 'moment';
 
 export function useDetails() {
 
   const [state, setState] = useState({
+    strings: getLanguageStrings(),
     subject: null,
     timestamp: null,
     logo: null,