fixing layout issues in iPad

app/mobile/src/access/create/Create.jsx

@@ -72,6 +72,11 @@ export function Create() {
                 </View>
               </View>
             )}
+            { !state.tokenRequired && state.server === 'databag.coredb.org' && (
+              <View style={styles.demo}>
+                <Text style={styles.demoText}>The default public server is to test out the system. Use a private server othersise.</Text>
+              </View>
+            )}
           </View>
           <View style={styles.inputwrapper}>
             <Ionicons style={styles.icon} name="user" size={18} color="#888888" />

app/mobile/src/access/create/Create.styled.js

@@ -9,6 +9,16 @@ export const styles = StyleSheet.create({
   config: {
     paddingTop: 8,
   },
+  demo: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  demoText: {
+    color: Colors.grey,
+    textAlign: 'center',
+  },
   space: {
     width: 32,
     display: 'flex',

app/mobile/src/session/Session.jsx

@@ -248,7 +248,7 @@ export function Session() {
     };
 
     return (
-      <CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }}
+      <CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '50%' } }}
         drawerContent={(props) => <Cards openContact={setCardContact} openRegistry={openRegistry} />}>
         <CardDrawer.Screen name="home">
           {(props) => <HomeScreen cardNav={props.navigation} {...params} />}
@@ -275,7 +275,7 @@ export function Session() {
     };
 
     return (
-      <RegistryDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }}
+      <RegistryDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '50%' } }}
         drawerContent={(props) => <Registry openContact={setRegistryContact} />}>
         <RegistryDrawer.Screen name="card">
           {(props) => <CardDrawerScreen registryNav={props.navigation} {...params} />}
@@ -301,7 +301,7 @@ export function Session() {
     };
 
     return (
-      <ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
+      <ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '45%' } }}
         drawerContent={(props) => <Contact contact={selected} />}>
         <ContactDrawer.Screen name="registry">
           {(props) => <RegistryDrawerScreen {...params} contactNav={props.navigation} setContact={setContact} />}
@@ -332,7 +332,7 @@ export function Session() {
     };
   
     return (
-      <DetailDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
+      <DetailDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '45%' } }}
           drawerContent={(props) => <Details channel={selected} clearConversation={clearConversation} />}
         >
         <DetailDrawer.Screen name="contact">
@@ -347,9 +347,10 @@ export function Session() {
   return (
     <View style={styles.body}>
       { state.firstRun == true && (
-        <View style={styles.firstRun}>
+        <SafeAreaView edges={['top', 'bottom']}  style={styles.firstRun}>
           <View style={styles.title}>
             <Text style={styles.titleText}>Welcome To Databag</Text>
+            <Text style={styles.tagText}>Communication for the Decentralized Web</Text>
           </View>
           <Image style={styles.splash} source={splash} resizeMode="contain" />
           <View style={styles.steps} >
@@ -369,12 +370,12 @@ export function Session() {
               <Text style={styles.startText}>Get Started</Text>
             </TouchableOpacity>
           </View>
-        </View>
+        </SafeAreaView>
       )}
       { state.firstRun == false && (
         <View style={styles.container}>
           { state.tabbed === false && (
-            <ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
+            <ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '45%' } }}
               drawerContent={(props) => <Profile />}>
               <ProfileDrawer.Screen name="detail">
                 {(props) => <DetailDrawerScreen profileNav={props.navigation}/>}

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

@@ -40,9 +40,15 @@ export const styles = StyleSheet.create({
     fontSize: 20,
     fontWeight: 'bold',
   },
+  tagText: {
+    paddingTop: 8,
+    color: Colors.white,
+    fontSize: 16,
+  },
   title: {
     flexGrow: 1,
     justifyContent: 'center',
+    alignItems: 'center',
   },
   stepText: {
     color: Colors.white,

app/mobile/src/session/cards/Cards.jsx

@@ -102,9 +102,9 @@ export function Cards({ openRegistry, openContact }) {
         </>
       )}
       { !state.tabbed && (
-        <>
+        <SafeAreaView style={styles.drawer} edges={['top', 'right', 'bottom']}>
           <View style={styles.searcharea}>
-            <SafeAreaView edges={['top', 'right']} style={styles.searchbar}>
+            <View style={styles.searchbar}>
               { state.sorting && (
                 <TouchableOpacity style={styles.sort} onPress={actions.unsort}>
                   <AntIcons style={styles.icon} name="menufold" size={18} color={Colors.text} />
@@ -123,16 +123,16 @@ export function Cards({ openRegistry, openContact }) {
               <TouchableOpacity style={styles.add} onPress={openRegistry}>
                 <AntIcons name={'adduser'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
               </TouchableOpacity>
-            </SafeAreaView>
+            </View>
           </View>
-          <SafeAreaView edges={['right']} style={styles.searcharea}>
+          <View style={styles.cardlist}>
             <FlatList style={styles.cards}
               data={state.cards}
               renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
               keyExtractor={item => item.cardId}
             />
-          </SafeAreaView>
-        </>
+          </View>
+        </SafeAreaView>
       )}
     </View>
   );

app/mobile/src/session/cards/Cards.styled.js

@@ -9,6 +9,9 @@ export const styles = StyleSheet.create({
     flexDirection: 'column',
     backgroundColor: Colors.formBackground,
   },
+  drawer: {
+    flexGrow: 1,
+  },
   title: {
     display: 'flex',
     flexDirection: 'row',
@@ -28,6 +31,11 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  cardlist: {
+    flexGrow: 1,
+    borderBottomWidth: 1,
+    borderColor: Colors.divider,
+  },
   searcharea: {
     borderBottomWidth: 1,
     borderColor: Colors.divider,
@@ -35,8 +43,9 @@ export const styles = StyleSheet.create({
   searchbar: {
     display: 'flex',
     flexDirection: 'row',
-    paddingTop: 16,
+    paddingTop: 8,
     paddingLeft: 8,
+    paddingRight: 8,
     paddingBottom: 8,
     alignItems: 'center',
   },
@@ -63,7 +72,6 @@ export const styles = StyleSheet.create({
     paddingLeft: 8,
   },
   cards: {
-    flexGrow: 1,
     width: '100%',
     paddingLeft: 16,
     paddingRight: 16,

app/mobile/src/session/cardsIcon/CardsIcon.jsx

@@ -10,7 +10,7 @@ export function CardsIcon({ size, color, active }) {
   return (
     <View>
       <Ionicons name={'contacts'} size={size} color={color} />
-      { state.curRevision !== state.setRevision && (
+      { state.curRevision && state.curRevision !== state.setRevision && (
         <View style={styles.requested} />
       )}
     </View>

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

@@ -27,6 +27,7 @@ export const styles = StyleSheet.create({
   },
   searchbar: {
     paddingRight: 8,
+    paddingLeft: 16,
     borderBottomWidth: 1,
     borderColor: Colors.divider,
     paddingBottom: 8,
@@ -73,17 +74,16 @@ export const styles = StyleSheet.create({
     flexShrink: 1,
     flexGrow: 1,
     width: '100%',
-    paddingLeft: 16,
-    paddingRight: 16,
   },
   addbottom: {
     backgroundColor: Colors.primary,
     marginRight: 8,
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
     borderRadius: 4,
   },
   add: {
@@ -103,6 +103,8 @@ export const styles = StyleSheet.create({
     paddingTop: 8,
     borderTopWidth: 1,
     borderColor: Colors.divider,
+    display: 'flex',
+    alignItems: 'center',
   },
   cancel: {
     borderWidth: 1,

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

@@ -10,6 +10,8 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     borderBottomWidth: 1,
     borderColor: Colors.itemDivider,
+    paddingLeft: 16,
+    paddingRight: 16,
   },
   detail: {
     paddingLeft: 12,

app/mobile/src/session/contact/Contact.jsx

@@ -170,11 +170,15 @@ export function Contact({ contact, closeContact }) {
             <Text style={styles.nametext}>{ state.name }</Text>
           </View>
           <View style={styles.attribute}>
-            <Ionicons name="enviromento" size={14} color={Colors.text} />
+            <View style={styles.glyph}>
+              <Ionicons name="enviromento" size={14} color={Colors.text} />
+            </View>
             <Text style={styles.locationtext}>{ state.location }</Text>
           </View>
           <View style={styles.attribute}>
-            <Ionicons name="book" size={14} color={Colors.text} />
+            <View style={styles.glyph}>
+              <Ionicons name="book" size={14} color={Colors.text} />
+            </View>
             <Text style={styles.descriptiontext}>{ state.description }</Text>
           </View>
         </View>

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

@@ -24,6 +24,9 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  glyph: {
+    paddingTop: 2,
+  },
   icon: {
     width: 32,
     paddingLeft: 8
@@ -72,6 +75,8 @@ export const styles = StyleSheet.create({
   },
   detail: {
     paddingTop: 32,
+    paddingLeft: 32,
+    paddingRight: 32,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -80,7 +85,6 @@ export const styles = StyleSheet.create({
   attribute: {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center',
     paddingBottom: 8,
   },
   nametext: {

app/mobile/src/session/conversation/Conversation.jsx

@@ -71,7 +71,7 @@ export function ConversationBody() {
   const noop = () => {};
 
   return (
-      <KeyboardAvoidingView style={styles.thread} behavior="padding" keyboardVerticalOffset="100"
+      <KeyboardAvoidingView style={styles.thread} behavior="padding"
           enabled={Platform.OS === 'ios' ? true : false}>
         <FlatList style={styles.conversation}
            contentContainerStyle={styles.topics}
@@ -136,7 +136,7 @@ export function Conversation({ closeConversation, openDetails }) {
 
   return (
     <View style={styles.container}>
-      <SafeAreaView edges={['right']} style={styles.header}>
+      <SafeAreaView edges={['right', 'top']} style={styles.header}>
         <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
         <TouchableOpacity style={styles.action} onPress={openDetails}>
           <Ionicons name="setting" size={24} color={Colors.primary} />

app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx

@@ -9,7 +9,8 @@ export function ImageThumb({ topicId, asset, onAssetView }) {
 
   return (
     <TouchableOpacity activeOpacity={1} onPress={onAssetView}>
-      <Image source={{ uri: state.url }} style={{ borderRadius: 4, width: 92 * state.ratio, height: 92, marginRight: 16 }} resizeMode={'cover'} />
+      <Image source={{ uri: state.url }} style={{ borderRadius: 4, width: 92 * state.ratio, height: 92, marginRight: 16 }}
+          onLoad={actions.loaded} resizeMode={'cover'} />
     </TouchableOpacity>
   );
 

app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js

@@ -17,14 +17,14 @@ export function useImageThumb(topicId, asset) {
 
   useEffect(() => {
     const url = conversation.actions.getTopicAssetUrl(topicId, asset.thumb); 
-    if (url) {
-      Image.getSize(url, (width, height) => {
-        updateState({ url, ratio: width / height });
-      });
-    }
+    updateState({ url });
   }, [topicId, conversation, asset]);
 
   const actions = {
+    loaded: (e) => {
+      const { width, height } = e.nativeEvent.source;
+      updateState({ ratio: width / height });
+    },
   };
 
   return { state, actions };

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

@@ -153,7 +153,9 @@ export function Profile({ navigation }) {
             <Ionicons name="edit" size={16} color={Colors.text} />
           </View>
           <View style={styles.attribute}>
-            <Ionicons name="enviromento" size={14} color={Colors.text} />
+            <View style={styles.icon}>
+              <Ionicons name="enviromento" size={14} color={Colors.text} />
+            </View>
             { state.location && (
               <Text style={styles.locationtext}>{ state.location }</Text>
             )}
@@ -162,7 +164,9 @@ export function Profile({ navigation }) {
             )}
           </View> 
           <View style={styles.attribute}>
-            <Ionicons name="book" size={14} color={Colors.text} />
+            <View style={styles.icon}>
+              <Ionicons name="book" size={14} color={Colors.text} />
+            </View>
             { state.description && (
               <Text style={styles.descriptiontext}>{ state.description }</Text>
             )}
@@ -194,7 +198,7 @@ export function Profile({ navigation }) {
   };
  
   return (
-    <ScrollView>
+    <ScrollView style={styles.wrapper}>
       { state.tabbed && (
         <View style={styles.body}>
           <Body />

app/mobile/src/session/profile/Profile.styled.js

@@ -11,9 +11,14 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  icon: {
+    paddingTop: 2,
+  },
+  wrapper: {
+    backgroundColor: Colors.formBackground,
+  },
   drawer: {
     paddingTop: 16,
-    backgroundColor: Colors.formBackground,
   },
   action: {
     width: 64,
@@ -78,11 +83,12 @@ export const styles = StyleSheet.create({
     flexDirection: 'column',
     alignItems: 'center',
     color: Colors.text,
+    paddingLeft: 32,
+    paddingRight: 32,
   },
   attribute: {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center',
     paddingBottom: 8,
   },
   nonametext: {
@@ -258,7 +264,7 @@ export const styles = StyleSheet.create({
   save: {
     padding: 8,
     borderRadius: 4,
-    backgroundColor: Colors.error,
+    backgroundColor: Colors.primary,
     width: 72,
     display: 'flex',
     alignItems: 'center',

app/mobile/src/session/registry/Registry.jsx

@@ -130,7 +130,7 @@ export function Registry({ closeRegistry, openContact }) {
         </>
       )}
       { !state.tabbed && (
-        <>
+        <SafeAreaView edges={['top', 'right', 'bottom']}>
           <View style={styles.searcharea}>
             <SafeAreaView edges={['right']}>
               <View style={styles.searchbar}>
@@ -151,21 +151,19 @@ export function Registry({ closeRegistry, openContact }) {
               </View>
             </SafeAreaView>
           </View>
-          <SafeAreaView edges={['right']}>
-            { state.accounts.length === 0 && state.searched && (
-              <View style={style.empty}>
-                <Text style={styles.emptyText}>No Contacts Found</Text>
-              </View>
-            )}
-            { state.accounts.length !== 0 && (
-              <FlatList style={styles.accounts}
-                data={state.accounts}
-                renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
-                keyExtractor={item => item.guid}
-              />
-            )}
-          </SafeAreaView>
-        </>
+          { state.accounts.length === 0 && state.searched && (
+            <View style={style.empty}>
+              <Text style={styles.emptyText}>No Contacts Found</Text>
+            </View>
+          )}
+          { state.accounts.length !== 0 && (
+            <FlatList style={styles.accounts}
+              data={state.accounts}
+              renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
+              keyExtractor={item => item.guid}
+            />
+          )}
+        </SafeAreaView>
       )}
     </View>
   );

app/mobile/src/session/registry/Registry.styled.js

@@ -35,7 +35,7 @@ export const styles = StyleSheet.create({
   searchbar: {
     display: 'flex',
     flexDirection: 'row',
-    paddingTop: 16,
+    paddingTop: 8,
     paddingLeft: 8,
     paddingBottom: 8,
     alignItems: 'center',

app/mobile/src/session/useSession.hook.js

@@ -8,8 +8,8 @@ export function useSession() {
 
   const [state, setState] = useState({
     tabbled: null,
-    subWidth: '33%',
-    baseWidth: '33%',
+    subWidth: '50%',
+    baseWidth: '50%',
     cardId: null,
     converstaionId: null,
     firstRun: null,
@@ -38,12 +38,7 @@ export function useSession() {
       if (dimensions.width > config.tabbedWidth) {
         const width = Math.floor((dimensions.width * 33) / 100);
         tabbed.current = false;
-        if (width > 500) {
-          updateStatus({ tabbed: false, baseWidth: 550, subWidth: 500 });
-        }
-        else {
-          updateState({ tabbed: false, baseWidth: width + 50, subWidth: width });
-        }
+        updateState({ tabbed: false, baseWidth: width + 50, subWidth: width });
       }
       else {
         tabbed.current = true;