styling for dark mode

app/mobile/src/constants/Colors.js

@@ -21,6 +21,7 @@ const LightColors = {
   drawerBase: '#eeeeee',
   areaBase: '#ffffff',
   modalBase: '#ffffff',
+  modalBorder: '#555555',
   modalOverlay: 'rgba(52,52,52,0.8)',
   headerBar: '#eeeeee',
   primaryButton: '#448866',
@@ -81,7 +82,8 @@ const DarkColors = {
   screenBase: '#222222',
   drawerBase: '#333333',
   areaBase: '#444444',
-  modalBase: '#333333',
+  modalBase: '#1b1b1b',
+  modalBorder: '#555555',
   modalOverlay: 'rgba(88,88,88,0.8)',
   headerBar: '#555555',
   primaryButton: '#448866',
@@ -145,6 +147,7 @@ export const Colors = {
   screenBase: getColor('screenBase'),
   drawerBase: getColor('drawerBase'),
   areaBase: getColor('areaBase'),
+  modalBorder: getColor('modalBorder'), 
   modalOverlay: getColor('modalOverlay'),
   modalBase: getColor('modalBase'),
   headerBar: getColor('headerBar'),

app/mobile/src/constants/Strings.js

@@ -129,6 +129,7 @@ const Strings = [
     create: 'Create',
     sealed: 'Sealed',
     newTopic: 'New Topic',
+    new: 'New',
 
     // details
     topic: 'Topic',
@@ -267,7 +268,8 @@ const Strings = [
     subject: 'Titre (optionnel)',
     create: 'Créer',
     sealed: 'Protégé', 
-    newTopic: 'Nourveau Sujet',
+    newTopic: 'Nouveau Sujet',
+    new: 'Nouveau',
 
     // details
     topic: 'Sujet',
@@ -407,6 +409,7 @@ const Strings = [
     create: 'Crear',
     sealed: 'Protegida',
     newTopic: 'Nuevo Tema',
+    new: 'Nuevo',
 
     // details
     topic: 'Tema',
@@ -546,6 +549,7 @@ const Strings = [
     create: 'Erstellen',
     sealed: 'Gesichert',
     newTopic: 'Neues Thema',
+    new: 'Neu',
 
     // details
     topic: 'Thema',

app/mobile/src/session/Session.jsx

@@ -158,7 +158,7 @@ function ContactStackScreen({ addChannel }) {
     <SafeAreaView edges={['left', 'right']} style={styles.body}>
       <ContactStack.Navigator screenOptions={({ route }) => (screenParams)} initialRouteName="cards">
 
-        <ContactStack.Screen name="cards" options={{ ...stackParams, headerTitle: (props) => (
+        <ContactStack.Screen name="cards" options={{ ...stackParams, cardStyle: {backgroundColor: Colors.screenBase}, headerTitle: (props) => (
             <CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
           )}}>
           {(props) => <CardsBody filter={filter} sort={sort} openContact={(contact) => openContact(props.navigation, contact)} addChannel={addChannel} />}
@@ -168,7 +168,7 @@ function ContactStackScreen({ addChannel }) {
           {(props) => <Contact contact={contact} back={props.navigation.goBack} />}
         </ContactStack.Screen>
 
-        <ContactStack.Screen name="registry" options={{ ...stackParams, headerTitle: (props) => (
+        <ContactStack.Screen name="registry" options={{ ...stackParams, cardStyle: {backgroundColor: Colors.screenBase}, headerTitle: (props) => (
             <RegistryHeader search={search} setSearch={setSearch} handle={handle} setHandle={setHandle} server={server} setServer={setServer} />
           )}}>
           {(props) => <RegistryBody search={search} handle={handle} server={server} openContact={(contact) => openContact(props.navigation, contact)} />}

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

@@ -52,7 +52,7 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
             </View>
             <TouchableOpacity style={styles.addtop} onPress={actions.showAdding}>
               <Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
-              <Text style={styles.addtext}>New</Text>
+              <Text style={styles.addtext}>{ state.strings.new }</Text>
             </TouchableOpacity>
           </View>
         ),

app/mobile/src/session/contact/Contact.styled.js

@@ -119,6 +119,7 @@ export const styles = StyleSheet.create({
     alignItems: 'flex-start',
     justifyContent: 'center',
     flex: 1,
+    paddingLeft: 16,
   },
   details: {
     minHeight: 32,

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

@@ -148,6 +148,8 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
     borderRadius: 8,
+    borderWidth: 1,
+    borderColor: Colors.modalBorder,
   },
   modalHeader: {
     fontSize: 18,

app/mobile/src/utils/Prompt.styled.js

@@ -23,6 +23,8 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
     borderRadius: 8,
+    borderWidth: 1,
+    borderColor: Colors.modalBorder,
   },
   modalHeader: {
     fontSize: 18,