tweaking settings layout

app/mobile/src/constants/Colors.js

@@ -4,6 +4,8 @@ const LightColors = {
   tabBar: '#448866',
   activeTabIcon: '#ffffff',
   idleTabIcon: '#cccccc',
+  activeBorder: '#338866',
+  idleBorder: '#dddddd',
   linkText: '#338866',
   dangerText: '#ff8888',
   labelText: '#555555',
@@ -37,6 +39,8 @@ const DarkColors = {
   tabBar: '#111111',
   activeTabIcon: '#dddddd',
   idleTabIcon: '#aaaaaa',
+  activeBorder: '#aa8866',
+  idleBorder: '#eeeeee',
   linkText: '#88eecc',
   dangerText: '#ffaaaa',
   labelText: '#eeeeee',
@@ -74,6 +78,8 @@ export const Colors = {
   tabBar: getColor('tabBar'),
   activeTabIcon: getColor('activeTabIcon'),
   idleTabIcon: getColor('idleTabIcon'),
+  idleBorder: getColor('idleBorder'),
+  activeBorder: getColor('activeBorder'),
   linkText: getColor('linkText'),
   dangerText: getColor('dangerText'),
   labelText: getColor('labelText'),

app/mobile/src/constants/Strings.js

@@ -7,8 +7,8 @@ const Strings = [
     enableNotifications: 'Enable Notifications',
     sealedTopics: 'Sealed Topics',
     colorMode: 'Color Mode',
-    hourMode: 'Hour Format',
-    dateMode: 'Date Format',
+    hourMode: 'Hour',
+    dateMode: 'Date',
     language: 'Language',
     logout: 'Logout',
     changeLogin: 'Change Login',
@@ -19,7 +19,7 @@ const Strings = [
     support: 'Support',
     blocked: 'Blocked',
     account: 'Account',
-    display: 'Display',
+    display: 'Format',
     messaging: 'Messaging',
   },
   {
@@ -28,8 +28,8 @@ const Strings = [
     enableNotifications: 'Activer les Notifications',
     sealedTopics: 'Sujets Sécurisés',
     colorMode: 'Mode de Couleur',
-    hourMode: 'Format d\'Heure',
-    dateMode: 'Format de Date',
+    hourMode: 'Heure',
+    dateMode: 'Date',
     language: 'Langue',
     logout: 'Se Déconnecter',
     changeLogin: 'Changer le Mot de Passe',
@@ -40,7 +40,7 @@ const Strings = [
     support: 'Aide',
     blocked: 'Supprimé',
     account: 'Compte',
-    display: 'Écran',
+    display: 'Format',
     messaging: 'Messagerie',
   },
   {
@@ -49,8 +49,8 @@ const Strings = [
     enableNotifications: 'Permitir Notificaciones',
     sealedTopics: 'Temas Protegidos',
     colorMode: 'Modo de Color',
-    hourMode: 'Formato de Hora',
-    dateMode: 'Formato de Fecha',
+    hourMode: 'Hora',
+    dateMode: 'Fecha',
     language: 'Idioma',
     logout: 'Cerrar Sesión',
     changeLogin: 'Cambiar la contraseña',
@@ -61,7 +61,7 @@ const Strings = [
     support: 'Ayuda',
     blocked: 'Oculto',
     account: 'Cuenta',
-    display: 'Pantalla',
+    display: 'Formato',
     messaging: 'Mensajería',
   },
   {
@@ -70,8 +70,8 @@ const Strings = [
     enableNotifications: 'Benachrichtigungen aktivieren',
     sealedTopics: 'Gesicherte Themen',
     colorMode: 'Farmodus',
-    hourMode: 'Stundenformat',
-    dateMode: 'Datumsformat',
+    hourMode: 'Stunde',
+    dateMode: 'Datum',
     language: 'Sprache',
     logout: 'Ausloggen',
     changeLogin: 'Kennwort Aktualisieren',
@@ -82,7 +82,7 @@ const Strings = [
     support: 'Helfen',
     blocked: 'Versteckt',
     account: 'Konto',
-    display: 'Bildschirm',
+    display: 'Format',
     messages: 'Nachrichtenübermittlung',
   }
 ];

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

@@ -41,24 +41,38 @@ export function Settings() {
 
         <Text style={styles.label}>{ state.strings.display }</Text>
         <View style={styles.group}>
-          <TouchableOpacity style={styles.entry} activeOpacity={1}>
+          <View style={styles.entry}>
             <View style={styles.icon}>
-              <MatIcons name="progress-clock" size={20} color={Colors.linkText} />
+              <MatIcons name="progress-clock" size={20} color={Colors.text} />
             </View>
-            <View style={styles.option}>
-              <Text style={styles.optionLink}>{ state.strings.hourMode }</Text>
+            <View style={styles.optionControl}>
+              <Text style={styles.optionText}>{ state.strings.hourMode }</Text>
+              <TouchableOpacity style={styles.radio} activeOpacity={1}>
+                <View style={styles.idleRadioCircle} />
+                <Text style={styles.radioLabel}>12h</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.radio} activeOpacity={1}>
+                <View style={styles.idleRadioCircle} />
+                <Text style={styles.radioLabel}>24h</Text>
+              </TouchableOpacity>
             </View>
-            <View style={styles.control} />
-          </TouchableOpacity>
+          </View>
           <View style={styles.divider} />
           <TouchableOpacity style={styles.entry} activeOpacity={1}>
             <View style={styles.icon}>
-              <MatIcons name="calendar-month-outline" size={20} color={Colors.linkText} />
+              <MatIcons name="calendar-month-outline" size={20} color={Colors.text} />
             </View>
-            <View style={styles.option}>
-              <Text style={styles.optionLink}>{ state.strings.dateMode }</Text>
+            <View style={styles.optionControl}>
+              <Text style={styles.optionText}>{ state.strings.dateMode }</Text>
+              <TouchableOpacity style={styles.radio} activeOpacity={1}>
+                <View style={styles.idleRadioCircle} />
+                <Text style={styles.radioLabel}>mm/dd</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.radio} activeOpacity={1}>
+                <View style={styles.idleRadioCircle} />
+                <Text style={styles.radioLabel}>dd/mm</Text>
+              </TouchableOpacity>
             </View>
-            <View style={styles.control} />
           </TouchableOpacity>
  
         </View>
@@ -102,30 +116,27 @@ export function Settings() {
             <View style={styles.icon}>
               <MatIcons name="account-multiple-outline" size={20} color={Colors.linkText} />
             </View>
-            <View style={styles.option}>
+            <View style={styles.optionControl}>
               <Text style={styles.optionLink}>{ state.strings.contacts }</Text>
             </View>
-            <View style={styles.control} />
           </TouchableOpacity>
           <View style={styles.divider} />
           <TouchableOpacity style={styles.entry} activeOpacity={1}>
             <View style={styles.icon}>
               <MatIcons name="book-open-outline" size={20} color={Colors.linkText} />
             </View>
-            <View style={styles.option}>
+            <View style={styles.optionControl}>
               <Text style={styles.optionLink}>{ state.strings.topics }</Text>
             </View>
-            <View style={styles.control} />
           </TouchableOpacity>
           <View style={styles.divider} />
           <TouchableOpacity style={styles.entry} activeOpacity={1}>
             <View style={styles.icon}>
               <MatIcons name="comment-text-multiple-outline" size={20} color={Colors.linkText} />
             </View>
-            <View style={styles.option}>
+            <View style={styles.optionControl}>
               <Text style={styles.optionLink}>{ state.strings.messages }</Text>
             </View>
-            <View style={styles.control} />
           </TouchableOpacity>
         </View>
 
@@ -135,10 +146,9 @@ export function Settings() {
             <View style={styles.icon}>
               <MatIcons name="help-network-outline" size={20} color={Colors.linkText} />
             </View>
-            <View style={styles.option}>
+            <View style={styles.optionControl}>
               <Text style={styles.optionLink}>github.com/balzack/databag</Text>
             </View>
-            <View style={styles.control} />
           </TouchableOpacity>
         </View>
 

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

@@ -15,6 +15,23 @@ export const styles = StyleSheet.create({
     padding: 4,
     fontFamily: 'Roboto',
   },
+  radio: {
+    marginLeft: 34,
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  idleRadioCircle: {
+    borderWidth: 1,
+    borderColor: Colors.activeBorder,
+    borderRadius: 8,
+    width: 16,
+    height: 16,
+  },
+  radioLabel: {
+    color: Colors.linkText,
+    paddingLeft: 8,
+    fontFamily: 'Roboto',
+  },
   group: {
     backgroundColor: Colors.areaBase,
     width: '100%',
@@ -44,6 +61,12 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  optionControl: {
+    flex: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   control: {
     flex: 2,
     alignItems: 'center',