add new settings screen separate from porfile

app/mobile/ios/Databag.xcodeproj/project.pbxproj

@@ -622,7 +622,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.19;
+				MARKETING_VERSION = 1.21;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -656,7 +656,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.19;
+				MARKETING_VERSION = 1.21;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

app/mobile/src/constants/Colors.js

@@ -28,6 +28,8 @@ const LightColors = {
   horizontalDivider: '#eeeeee',
   verticalDivider: '#aaaaaa',
   unreadIndicator: '#00aa00',
+  enabledIndicator: '#8fbea7',
+  disabledIndicator: '#eeeeee',
   disconnectedIndicator: '#aa0000',
 };
 
@@ -59,6 +61,8 @@ const DarkColors = {
   horizonalDivider: '#888888',
   verticalDivider: '#aaaaaa',
   unreadIndicator: '#00aa00',
+  enabledIndicator: '#8fbea7',
+  disabledIndicator: '#eeeeee',
   disconnectedIndicator: '#aa0000',
 };
 
@@ -94,6 +98,8 @@ export const Colors = {
   horizonalDivider: getColor('horizontalDivider'),
   verticalDivider: getColor('verticalDivider'),
   unreadIndicator: getColor('unreadIndicator'),
+  enabledIndicator: getColor('enabledIndicator'),
+  disabledIndicator: getColor('disabledIndicator'),
   disconnectedIndicator: getColor('disconnectedIndicator'),
 
   background: '#8fbea7',

app/mobile/src/constants/Strings.js

@@ -1,4 +1,4 @@
-export getLanguageId(language) {
+export function getLanguageId(language) {
   if (language === 'english') {
     return 0;
   }
@@ -21,7 +21,7 @@ export const Strings = [
     enableNotifications: 'Enable Notifications',
     sealedTopics: 'Sealed Topics',
     colorMode: 'Color Mode',
-    clockMode: 'Hour Format',
+    hourMode: 'Hour Format',
     language: 'Language',
     logout: 'Logout',
     changeLogin: 'Change Login',
@@ -41,7 +41,7 @@ export const Strings = [
     enableNotifications: 'Activer les Notifications',
     sealedTopics: 'Sujets Sécurisés',
     colorMode: 'Mode de Couleur', 
-    clockMode: 'Format d\'Heure',
+    hourMode: 'Format d\'Heure',
     language: 'Langue',
     logout: 'Se Déconnecter',
     changeLogin: 'Changer le Mot de Passe',
@@ -61,7 +61,7 @@ export const Strings = [
     enableNotifications: 'Permitir Notificaciones', 
     sealedTopics: 'Temas Protegidos', 
     colorMode: 'Modo de Color',
-    clockMode: 'Formato de Hora',
+    hourMode: 'Formato de Hora',
     language: 'Idioma',
     logout: 'Cerrar Sesión',
     changeLogin: 'Cambiar la contraseña',
@@ -72,7 +72,7 @@ export const Strings = [
     support: 'Ayuda',
     blocked: 'Oculto',
     actions: 'Métodos',
-    display: 'Pantalla'
+    display: 'Pantalla',
     settings: 'Configuración',
   },
   {
@@ -81,7 +81,7 @@ export const Strings = [
     enableNotifications: 'Benachrichtigungen aktivieren', 
     sealedTopics: 'Gesicherte Themen',
     colorMode: 'Farmodus',
-    clockMode: 'Stundenformat',
+    hourMode: 'Stundenformat',
     language: 'Sprache',
     logout: 'Ausloggen',
     changeLogin: 'Kennwort Aktualisieren',
@@ -97,3 +97,4 @@ export const Strings = [
   }
 ];
 
+export default Strings;

app/mobile/src/session/Session.jsx

@@ -17,6 +17,7 @@ import { ContactHeader, ContactBody, Contact } from './contact/Contact';
 import { Details } from './details/Details';
 import { Conversation, ConversationHeader, ConversationBody } from './conversation/Conversation';
 import { Welcome } from './welcome/Welcome';
+import { Settings } from './settings/Settings';
 import { Channels } from './channels/Channels';
 import { CommonActions } from '@react-navigation/native';
 import { ConversationContext } from 'context/ConversationContext';
@@ -31,6 +32,7 @@ import { useNavigate } from 'react-router-dom';
 
 const ConversationStack = createStackNavigator();
 const ProfileStack = createStackNavigator();
+const SettingsStack = createStackNavigator();
 const ContactStack = createStackNavigator();
 const ProfileDrawer = createDrawerNavigator();
 const ContactDrawer = createDrawerNavigator();
@@ -94,6 +96,21 @@ function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShar
   );
 }
 
+function SettingsStackScreen() {
+  const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
+  const screenParams = { headerShown: false, headerTintColor: Colors.primary };
+
+  return (
+    <SafeAreaView edges={['left', 'right']} style={styles.body}>
+      <SettingsStack.Navigator screenOptions={({ route }) => (screenParams)}>
+        <SettingsStack.Screen name="settings" options={stackParams}>
+          {(props) => <Settings />}
+        </SettingsStack.Screen>
+      </SettingsStack.Navigator>
+    </SafeAreaView>
+  );
+}
+
 function ProfileStackScreen() {
   const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
   const screenParams = { headerShown: true, headerTintColor: Colors.primary };
@@ -435,6 +452,9 @@ export function Session({ sharing, clearSharing }) {
                     if (route.name === 'Conversation') {
                       return <Ionicons name={'message1'} size={size} color={color} />;
                     }
+                    if (route.name === 'Settings') {
+                      return <Ionicons name={'setting'} size={size} color={color} />;
+                    }
                     if (route.name === 'Contacts') {
                       return <CardsIcon size={size} color={color} />;
                     }
@@ -444,8 +464,9 @@ export function Session({ sharing, clearSharing }) {
                   tabBarInactiveTintColor: Colors.disabled,
                 })}>
                 <Tab.Screen name="Conversation" children={()=><ConversationStackScreen dmChannel={dmChannel} shareChannel={shareChannel} shareIntent={shareIntent} setShareIntent={setShareIntent} />} />
-                <Tab.Screen name="Profile" component={ProfileStackScreen} />
                 <Tab.Screen name="Contacts" children={()=><ContactStackScreen addChannel={addChannel} />} />
+                <Tab.Screen name="Profile" component={ProfileStackScreen} />
+                <Tab.Screen name="Settings" component={SettingsStackScreen} />
               </Tab.Navigator>
             )}
             <StatusBar barStyle="dark-content" backgroundColor={Colors.formBackground} /> 

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

@@ -68,6 +68,7 @@ export const styles = StyleSheet.create({
   },
   tabBar: {
     backgroundColor: Colors.primary,
+    maxHeight: 72,
   },
   home: {
     display: 'flex',

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

@@ -0,0 +1,68 @@
+import { ScrollView, View, Text, Switch, TouchableOpacity } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { styles } from './Settings.styled';
+import { useSettings } from './useSettings.hook';
+import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Colors from 'constants/Colors';
+import Strings from 'constants/Strings';
+
+export function Settings() {
+
+  const { state, actions } = useSettings();
+
+  return (
+    <SafeAreaView edges={['left', 'right', 'top', 'bottom']} style={styles.container}>
+      <ScrollView style={styles.content}>
+
+        <Text style={styles.label}>Settings</Text>
+        <View style={styles.group}>
+          <TouchableOpacity style={styles.entry} activeOpacity={1}>
+            <View style={styles.icon}>
+              <MatIcons name="bell-outline" size={20} color={Colors.linkText} />
+            </View>
+            <View style={styles.option}>
+              <Text style={styles.optionLink}>{ Strings[state.lang].enableNotifications }</Text>
+            </View>
+            <View style={styles.control}>
+              <Switch style={styles.notifications} trackColor={styles.track}/>
+            </View>
+          </TouchableOpacity>
+          <View style={styles.divider} />
+          <View style={styles.entry}>
+            <View style={styles.icon}>
+              <MatIcons name="lock-outline" size={20} color={Colors.linkText} />
+            </View>
+            <View style={styles.option}>
+              <Text style={styles.optionLink}>{ Strings[state.lang].sealedTopics }</Text>
+            </View>
+            <View style={styles.control} />
+          </View>
+        </View>
+
+        <Text style={styles.label}>Display</Text>
+        <View style={styles.group}>
+          <TouchableOpacity style={styles.entry} activeOpacity={1}>
+            <View style={styles.icon}>
+              <MatIcons name="progress-clock" size={20} color={Colors.linkText} />
+            </View>
+            <View style={styles.option}>
+              <Text style={styles.optionLink}>{ Strings[state.lang].hourMode }</Text>
+            </View>
+            <View style={styles.control} />
+          </TouchableOpacity>
+          <View style={styles.divider} />
+          <TouchableOpacity style={styles.entry}>
+            <View style={styles.icon}>
+              <MatIcons name="earth" size={20} color={Colors.linkText} />
+            </View>
+            <View style={styles.option}>
+              <Text style={styles.optionLink}>{ Strings[state.lang].language }</Text>
+            </View>
+            <View style={styles.control} />
+          </TouchableOpacity>
+        </View>
+
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

app/mobile/src/session/settings/Settings.styled.js

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.screenBase,
+  },
+  content: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  label: {
+    color: Colors.text,
+    padding: 4,
+  },
+  group: {
+    backgroundColor: Colors.areaBase,
+    width: '100%',
+    borderRadius: 8,
+    marginBottom: 8,
+  },
+  divider: {
+    width: '100%',
+    height: 2,
+    backgroundColor: Colors.screenBase,
+  },
+  entry: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 4,
+    height: 40,
+  },
+  icon: {
+    flex: 2,
+    alignItems: 'center',
+  },
+  option: {
+    flex: 10,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  control: {
+    flex: 2,
+    alignItems: 'center',
+  },
+  optionText: {
+    fontSize: 16,
+    paddingRight: 8,
+    color: Colors.text,
+  },
+  optionLink: {
+    fontSize: 16,
+    paddingRight: 8,
+    color: Colors.linkText,
+  },
+  track: {
+    false: Colors.disabledIndicator,
+    true: Colors.enabledIndicator,
+  },
+  notifications: {
+    transform: [{ scaleX: .6 }, { scaleY: .6 }],
+  },
+});
+

app/mobile/src/session/settings/useSettings.hook.js

@@ -0,0 +1,19 @@
+import { useState, useEffect, useRef, useContext } from 'react';
+
+export function useSettings() {
+
+  const [state, setState] = useState({
+    lang: 0,
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+
+