details for tablet layout

app/mobile/src/constants/Colors.js

@@ -9,6 +9,7 @@ const LightColors = {
   activeBorder: '#338866',
   idleBorder: '#dddddd',
   activeFill: '#66aa88',
+  idleFill: '#888888',
   linkText: '#338866',
   dangerText: '#ff8888',
   labelText: '#555555',
@@ -69,6 +70,7 @@ const DarkColors = {
   activeBorder: '#aaaaaa',
   idleBorder: '#eeeeee',
   activeFill: '#559955',
+  idleFill: '#888888',
   linkText: '#88eecc',
   dangerText: '#ffaaaa',
   labelText: '#eeeeee',
@@ -132,6 +134,7 @@ export const Colors = {
   idleBorder: getColor('idleBorder'),
   activeBorder: getColor('activeBorder'),
   activeFill: getColor('activeFill'),
+  idleFill: getColor('idleFill'),
   linkText: getColor('linkText'),
   dangerText: getColor('dangerText'),
   labelText: getColor('labelText'),

app/mobile/src/constants/Strings.js

@@ -142,6 +142,7 @@ const Strings = [
     deleteTopic: 'Delete Topic',
     blockTopic: 'Block Topic',
     reportTopic: 'Report Topic',
+    unknown: 'unknown',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -280,6 +281,7 @@ const Strings = [
     deleteTopic: 'Supprimer le Sujet',
     blockTopic: 'Bloquer le Sujet',
     reportTopic: 'Signaler le Sujet',
+    unknown: 'Inconnu',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -418,6 +420,7 @@ const Strings = [
     deleteTopic: 'Borrar el Tema',
     blockTopic: 'Bloquer el Tema',
     reportTopic: 'Reportar el Tema',
+    unknown: 'Desconocido',
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -556,6 +559,7 @@ const Strings = [
     deleteTopic: 'Das Thema Löschen',
     blockTopic: 'Blockiere das Thema',
     reportTopic: 'Das Thema Melden',
+    unknown: 'Unbekannt',
   }
 ];
 

app/mobile/src/session/Session.jsx

@@ -30,6 +30,7 @@ import { Call } from './call/Call';
 import { Sharing } from './sharing/Sharing';
 import splash from 'images/session.png';
 import { useNavigate } from 'react-router-dom';
+import { getLanguageStrings } from 'constants/Strings';
 
 const ConversationStack = createStackNavigator();
 const ProfileStack = createStackNavigator();
@@ -180,6 +181,7 @@ function ContactStackScreen({ addChannel }) {
 
 function HomeScreen({ navParams }) {
 
+  const strings = getLanguageStrings();
   const drawerParams = { drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front' };
   const conversation = useContext(ConversationContext);
   const [channel, setChannel] = useState(false);
@@ -222,13 +224,13 @@ function HomeScreen({ navParams }) {
     <View style={styles.home}>
       <SafeAreaView edges={['top', 'bottom', 'left']} style={styles.sidebar}>
         <View edges={['left']} style={styles.options}>
-          <TouchableOpacity style={styles.option} onPress={openProfile}>
+          <TouchableOpacity style={styles.option} onPress={openProfile} activeOpacity={1}>
             <ProfileIcon color={Colors.text} size={24} />
-            <Text style={styles.profileLabel}>Profile</Text>
+            <Text style={styles.profileLabel}>{ strings.account }</Text>
           </TouchableOpacity>
-          <TouchableOpacity style={styles.option} onPress={openCards}>
+          <TouchableOpacity style={styles.option} onPress={openCards} activeOpacity={1}>
             <CardsIcon color={Colors.text} size={24} />
-            <Text style={styles.profileLabel}>Contacts</Text>
+            <Text style={styles.profileLabel}>{ strings.contacts }</Text>
           </TouchableOpacity>
         </View>
         <View style={styles.channels}>

app/mobile/src/session/cards/cardItem/CardItem.styled.js

@@ -80,6 +80,7 @@ export const styles = StyleSheet.create({
   trigger: {
     triggerTouchable: {
       activeOpacity: 70,
+      underlayColor: Colors.screenBase,
     },
   },
   options: {

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

@@ -81,91 +81,10 @@ export function Details({ channel, clearConversation }) {
     });
   }
 
-  const remove = () => {
-    Alert.alert(
-      "Removing Topic",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Remove",
-          onPress: async () => {
-            try {
-              await actions.remove(); 
-              clearConversation();
-            }
-            catch (err) {
-              console.log(err);
-              Alert.alert(
-                'Failed to Delete Topic',
-                'Please try again.'
-              )
-            }
-          },
-        }
-      ]
-    );
-  }
-
-  const block = () => {
-    Alert.alert(
-      "Blocking Topic",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Block",
-          onPress: async () => {
-            try {
-              await actions.block();
-              clearConversation();
-            }
-            catch (err) {
-              console.log(err);
-              Alert.alert(
-                'Failed to Block Topic',
-                'Please try again.'
-              )
-            }
-          },
-        }
-      ]
-    );
-  }
-
-
-  const report = () => {
-    Alert.alert(
-      "Report Topic",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Report",
-          onPress: async () => {
-            try {
-              await actions.report();
-            }
-            catch (err) {
-              console.log(err);
-              Alert.alert(
-                'Failed to Report Topic',
-                'Please try again.'
-              )
-            }
-          },
-        }
-      ]
-    );
-  }
-
   return (
     <View style={styles.body}>
       <View style={styles.details}>
-        <Logo src={state.logo} width={72} height={72} radius={8} />
+        <Logo src={state.logo} width={92} height={92} radius={8} />
         <View style={styles.info}>
           <View style={styles.subject}>
             { state.locked && !state.unlocked && (
@@ -192,7 +111,8 @@ export function Details({ channel, clearConversation }) {
             <Text style={styles.notifyText}>{ state.strings.enableNotifications }</Text>
           </TouchableOpacity>
           { state.notification != null && (
-            <Switch style={styles.switch} value={state.notification} onValueChange={setNotifications} trackColor={styles.track}/>
+            <Switch value={state.notification} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip}
+                ios_backgroundColor={Colors.idleFill} trackColor={styles.track} onValueChange={setNotifications} />
           )}
         </View>
       </View>
@@ -236,7 +156,7 @@ export function Details({ channel, clearConversation }) {
       <View style={styles.members}>
         <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>
+          <Text style={styles.unknown}> (+ {state.count - state.contacts.length}) { state.strings.unknown }</Text>
         )}
       </View>
 

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

@@ -80,7 +80,7 @@ export const styles = StyleSheet.create({
     paddingTop: 24,
     width: '100%',
     borderBottomWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
     display: 'flex',
     flexDirection: 'row',
     backgroundColor: Colors.screenBase,
@@ -183,13 +183,6 @@ export const styles = StyleSheet.create({
     fontSize: 16,
     color: Colors.text,
   },
-  track: {
-    false: Colors.grey,
-    true: Colors.background,
-  },
-  switch: {
-    transform: [{ scaleX: .7 }, { scaleY: .7 }],
-  },
   modalOverlay: {
     width: '100%',
     height: '100%',
@@ -215,7 +208,7 @@ export const styles = StyleSheet.create({
   },
   close: {
     borderWidth: 1,
-    borderColor: Colors.lightgrey,
+    borderColor: Colors.closeButton,
     borderRadius: 4,
     padding: 8,
     marginRight: 8,
@@ -224,7 +217,7 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
   },
   closeText: {
-    color: Colors.cancelButtonText,
+    color: Colors.closeButtonText,
   }, 
   field: {
     input: {
@@ -283,4 +276,11 @@ export const styles = StyleSheet.create({
     color: Colors.linkText,
     fontSize: 10,
   },
+  track: {
+    false: Colors.idleFill,
+    true: Colors.activeFill,
+  },
+  visibleSwitch: {
+    transform: [{ scaleX: .6 }, { scaleY: .6 }],
+  },
 })

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

@@ -50,7 +50,7 @@ export function useDetails(clear) {
       const notification = await conversation.actions.getNotifications();
       updateState({ notification });
     })();
-  }, []);
+  }, [conversation.state.card, conversation.state.channel]);
 
   useEffect(() => {
     let locked;

app/mobile/src/session/profile/Profile.jsx

@@ -121,7 +121,7 @@ export function Profile({ drawer }) {
               <Text style={styles.visibleLabel}>{ state.strings.visibleRegistry }</Text>
             </TouchableOpacity>
             <Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip}
-                ios_backgroundColor={Colors.disabledIndicator} trackColor={styles.track} onValueChange={setVisible} />
+                ios_backgroundColor={Colors.idleFill} trackColor={styles.track} onValueChange={setVisible} />
           </TouchableOpacity>
         </View>
       )}

app/mobile/src/session/settings/Settings.jsx

@@ -173,7 +173,7 @@ export function Settings({ drawer }) {
               <TouchableOpacity activeOpacity={1} onPress={() => setNotifications(!state.pushEnabled)}>
                 <Text style={styles.optionText}>{ state.strings.enableNotifications }</Text>
               </TouchableOpacity>
-              <Switch value={state.pushEnabled} style={Platform.OS==='ios' ? styles.notifications : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
+              <Switch value={state.pushEnabled} style={Platform.OS==='ios' ? styles.notifications : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.idleFill}
                   trackColor={styles.track} onValueChange={setNotifications} />
             </View>
           </TouchableOpacity>