implemented styled channels list

app/mobile/src/constants/Strings.js

@@ -119,6 +119,15 @@ const Strings = [
     messageContact: 'Message Contact',
     callContact: 'Call Contact',
     noContacts: 'No Contacts Found',
+
+    // channels list
+    profile: 'Profile',
+    contacts: 'Contacts',
+    topics: 'Topics',
+    subject: 'Subject (optional)',
+    create: 'Create',
+    sealed: 'Sealed',
+    newTopic: 'New Topic',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -235,6 +244,15 @@ const Strings = [
     messageContact: 'Envoyer un Message',
     callContact: 'Appeler le Contact',
     noContacts: 'Aucun Contact Trouvé',
+
+    // channels list
+    profile: 'Profil',
+    contacts: 'Contacts',
+    topics: 'Sujets',
+    subject: 'Titre (optionnel)',
+    create: 'Créer',
+    sealed: 'Protégé', 
+    newTopic: 'Nourveau Sujet',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -351,6 +369,15 @@ const Strings = [
     messageContact: 'Enviar Mensaje',
     callContact: 'Llamar Contacto',
     noContacts: 'No Encontraron Contactos',
+
+    // channels list
+    profile: 'Perfil',
+    contacts: 'Contactos',
+    topics: 'Temas',
+    subject: 'Título (opcional)',
+    create: 'Crear',
+    sealed: 'Protegida',
+    newTopic: 'Nuevo Tema',
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -467,6 +494,15 @@ const Strings = [
     messageContact: 'Nachricht Senden',
     callContact: 'Kontakt Anrufen',
     noContacts: 'Keine Kontakte Gefunden',
+    
+    // channels list
+    profile: 'Profil',
+    contacts: 'Kontakte',
+    topics: 'Themen',
+    subject: 'Titel (optional)',
+    create: 'Erstellen',
+    sealed: 'Gesichert',
+    newTopic: 'Neues Thema',
   }
 ];
 

app/mobile/src/session/Session.jsx

@@ -43,8 +43,8 @@ const RegistryDrawer = createDrawerNavigator();
 const Tab = createBottomTabNavigator();
 
 function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShareIntent }) {
-  const stackParams = { headerStyle: { backgroundColor: Colors.areaBase }, headerBackTitleVisible: false };
+  const stackParams = { headerStyle: { backgroundColor: Colors.screenBase }, headerBackTitleVisible: false };
-  const screenParams = { headerShown: true };
+  const screenParams = { headerShown: true, headerTintColor: Colors.primary };
 
   const conversation = useContext(ConversationContext);
   const [cardId, setCardId] = useState();
@@ -223,11 +223,11 @@ function HomeScreen({ navParams }) {
       <SafeAreaView edges={['top', 'bottom', 'left']} style={styles.sidebar}>
         <View edges={['left']} style={styles.options}>
           <TouchableOpacity style={styles.option} onPress={openProfile}>
-            <ProfileIcon color={Colors.text} size={20} />
+            <ProfileIcon color={Colors.text} size={24} />
             <Text style={styles.profileLabel}>Profile</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.option} onPress={openCards}>
-            <CardsIcon color={Colors.text} size={20} />
+            <CardsIcon color={Colors.text} size={24} />
             <Text style={styles.profileLabel}>Contacts</Text>
           </TouchableOpacity>
         </View>

app/mobile/src/session/Session.styled.js

@@ -82,7 +82,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     width: '33%',
     maxWidth: 500,
-    borderRightWidth: 1,
+    backgroundColor: Colors.screenBase,
     borderColor: Colors.verticalDivider,
   },
   conversation: {
@@ -135,6 +135,7 @@ export const styles = StyleSheet.create({
   },
   profileLabel: {
     paddingLeft: 8,
+    color: Colors.text,
   },
   headertext: {
     fontSize: 18,

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

@@ -6,6 +6,8 @@ import { useChannels } from './useChannels.hook';
 import { Colors } from 'constants/Colors';
 import { ChannelItem } from './channelItem/ChannelItem';
 import { AddMember } from './addMember/AddMember';
+import { BlurView } from '@react-native-community/blur';
+import { InputField } from 'utils/InputField';
 
 export function Channels({ cardId, channelId, navigation, openConversation, dmChannel, shareChannel }) {
 
@@ -87,7 +89,7 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
         <View style={styles.columnbottom}>
           <TouchableOpacity style={styles.addbottom} onPress={actions.showAdding}>
             <Ionicons name={'message1'} size={16} color={Colors.white} />
-            <Text style={styles.addtext}>New Topic</Text>
+            <Text style={styles.addtext}>{ state.strings.newTopic }</Text>
           </TouchableOpacity>
         </View>
       )}
@@ -98,13 +100,22 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
           supportedOrientations={['portrait', 'landscape']}
           onRequestClose={actions.hideAdding}
         >
-        <KeyboardAvoidingView behavior="height" style={styles.addWrapper}>
+        <View style={styles.modalOverlay}>
-          <View style={styles.addContainer}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
-            <Text style={styles.addHeader}>New Topic:</Text>
+          <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-            <View style={styles.addField}>
+
-              <TextInput style={styles.input} value={state.addSubject} onChangeText={actions.setAddSubject}
+            <View style={styles.modalContainer}>
-                  autoCapitalize="words" placeholder="Subject (optional)" placeholderTextColor={Colors.grey} />
+              <Text style={styles.addHeader}>{ state.strings.newTopic }</Text>
-            </View>
+
+              <InputField
+                label={state.strings.subject}
+                value={state.addSubject}
+                autoCapitalize={'words'}
+                spellCheck={false}
+                style={styles.field}
+                onChangeText={actions.setAddSubject}
+              />
+
               <Text style={styles.label}>Members:</Text>
               { state.contacts.length == 0 && (
                 <View style={styles.emptyMembers}>
@@ -125,24 +136,25 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
                     <>
                       <Switch style={styles.switch} trackColor={styles.track}
                         value={state.sealed} onValueChange={actions.setSealed} />
-                    <Text>Sealed</Text>
+                      <Text style={styles.sealedText}>{ state.strings.sealed }</Text>
                     </>
                   )}
                 </View>
                 <TouchableOpacity style={styles.cancel} onPress={actions.hideAdding}>
-                <Text>Cancel</Text>
+                  <Text style={styles.cancelText}>{ state.strings.cancel }</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={styles.save} onPress={addChannel}>
                   { state.busy && (
-                  <ActivityIndicator color={Colors.white} />
+                    <ActivityIndicator color={Colors.text} />
                   )}
                   { !state.busy && (
-                  <Text style={styles.saveText}>Create</Text>
+                    <Text style={styles.saveText}>{ state.strings.create }</Text>
                   )}
                 </TouchableOpacity>
               </View>
             </View>
           </KeyboardAvoidingView>
+        </View>
       </Modal>
     </View>
   );

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

@@ -7,6 +7,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
+    backgroundColor: Colors.screenBase,
   },
   title: {
     display: 'flex',
@@ -18,10 +19,11 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.inputBase,
     alignItems: 'center',
     flexGrow: 1,
     flexShrink: 1,
+    marginRight: 8,
     paddingTop: 4,
     paddingBottom: 4,
   },
@@ -30,7 +32,7 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
     textAlign: 'center',
     padding: 4,
-    color: Colors.text,
+    color: Colors.inputText,
     fontSize: 14,
   },
   addField: {
@@ -113,15 +115,10 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: 'rgba(52, 52, 52, 0.8)'
   },
-  addContainer: {
-    backgroundColor: Colors.formBackground,
-    padding: 16,
-    width: '80%',
-    maxWidth: 400,
-  },
   addHeader: {
     fontSize: 18,
-    paddingBottom: 16,
+    paddingBottom: 8,
+    color: Colors.text,
   },
   addMembers: {
     width: '100%',
@@ -168,10 +165,16 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   saveText: {
-    color: Colors.white,
+    color: Colors.primaryButtonText,
     paddingRight: 4,
     paddingLeft: 4,
   },
+  cancelText: {
+    color: Colors.cancelButtonText,
+  },
+  sealedText: {
+    color: Colors.text,
+  },
   addControls: {
     display: 'flex',
     flexDirection: 'row',
@@ -192,5 +195,51 @@ 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,
+  },
+  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/channels/channelItem/ChannelItem.jsx

@@ -11,7 +11,7 @@ export function ChannelItem({ cardId, channelId, item, openConversation }) {
 
   return (
     <TouchableOpacity style={container} activeOpacity={1} onPress={() => openConversation(item.cardId, item.channelId, item.revision)}>
-      <Logo src={item.logo} width={32} height={32} radius={3} />
+      <Logo src={item.logo} width={48} height={48} radius={6} />
       <View style={styles.detail}>
         <View style={styles.subject}>
           { item.locked && !item.unlocked && (

app/mobile/src/session/channels/channelItem/ChannelItem.styled.js

@@ -6,7 +6,7 @@ export const styles = StyleSheet.create({
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    height: 48,
+    height: 64,
     alignItems: 'center',
     borderBottomWidth: 1,
     borderColor: Colors.itemDivider,
@@ -17,13 +17,13 @@ export const styles = StyleSheet.create({
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    height: 48,
+    height: 64,
     alignItems: 'center',
     borderBottomWidth: 1,
     borderColor: Colors.itemDivider,
     paddingLeft: 16,
     paddingRight: 16,
-    backgroundColor: Colors.formFocus,
+    backgroundColor: Colors.areaBase,
   },
   detail: {
     paddingLeft: 12,
@@ -42,11 +42,11 @@ export const styles = StyleSheet.create({
   },
   subjectText: {
     color: Colors.text,
-    fontSize: 14,
+    fontSize: 16,
   },
   message: {
     color: Colors.disabled,
-    fontSize: 12,
+    fontSize: 14,
   },
   dot: {
     width: 8,

app/mobile/src/session/channels/useChannels.hook.js

@@ -7,9 +7,11 @@ import { ProfileContext } from 'context/ProfileContext';
 import { getChannelSeals, isUnsealed, getContentKey, encryptChannelSubject, decryptChannelSubject, decryptTopicSubject } from 'context/sealUtil';
 import { getCardByGuid } from 'context/cardUtil';
 import { getChannelSubjectLogo } from 'context/channelUtil';
+import { getLanguageStrings } from 'constants/Strings';
 
 export function useChannels() {
   const [state, setState] = useState({
+    strings: getLanguageStrings(),
     filter: null,
     channels: [],
     adding: false,