fix list header

apps/mobile/src/components/Header/HeaderMenu.js

@@ -21,12 +21,12 @@ export const HeaderMenu = () => {
       style={{
         flexDirection: 'row',
         alignItems: 'center',
-        zIndex:10
+        zIndex:10,
+        height: 35,
       }}>
       <Paragraph
         style={{
           marginRight: 5,
-          height: 35,
           textAlignVertical:'center'
         }}>
         {settings.sort.slice(0, 1).toUpperCase() +
@@ -39,7 +39,6 @@ export const HeaderMenu = () => {
         }
         style={{
           textAlignVertical:'center',
-          height: 30,
         }}
         size={SIZE.md}
       />

apps/mobile/src/components/NoteItem/index.js

@@ -91,7 +91,7 @@ export default class NoteItem extends React.Component {
             width: '92%',
             paddingRight: 5,
           }}>
-          {item.notebook && item.notebook.id && (
+          {item.notebooks && item.notebooks.length > 0 && (
             <View
               style={{
                 flexDirection: 'row',
@@ -135,7 +135,7 @@ export default class NoteItem extends React.Component {
                   color={
                     item.colors[0] ? COLORS_NOTE[item.colors[0]] : colors.accent
                   }>
-                  {db.notebooks.notebook(item.notebook.id).title}
+                  {db.notebooks.notebook(item.notebooks[0].id).title} 
                 </Heading>
               </TouchableOpacity>
             </View>

apps/mobile/src/components/SimpleList/index.js

@@ -6,6 +6,7 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview';
 import {useTracked} from '../../provider';
@@ -87,21 +88,27 @@ const SimpleList = ({
         paddingHorizontal: 12,
         height: 35,
       }}>
-      <Paragraph
+      <TouchableWithoutFeedback
         onPress={() => {
           if (jumpToDialog) {
             eSendEvent(eOpenJumpToDialog);
           }
         }}
-        color={colors.accent}
+        hitSlop={{top: 10, left: 10, right: 30, bottom: 15}}
         style={{
-          height: 35,
-          minWidth: 60,
-          alignSelf: 'center',
-          textAlignVertical: 'center',
+          height: '100%',
+          justifyContent: 'center',
         }}>
-        {item.title}
-      </Paragraph>
+        <Paragraph
+          color={colors.accent}
+          style={{
+            minWidth: 60,
+            alignSelf: 'center',
+            textAlignVertical: 'center',
+          }}>
+          {item.title}
+        </Paragraph>
+      </TouchableWithoutFeedback>
       {index === 1 && sortMenuButton ? <HeaderMenu /> : null}
     </View>
   );

apps/mobile/src/components/SortDialog/index.js

@@ -1,7 +1,7 @@
 import React, {createRef} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { notesnook } from '../../../e2e/test.ids';
+import {notesnook} from '../../../e2e/test.ids';
 import {Actions} from '../../provider/Actions';
 import {defaultState} from '../../provider/DefaultState';
 import {DDS} from '../../services/DeviceDetection';
@@ -158,11 +158,7 @@ class SortDialog extends React.Component {
               <PressableButton
                 key={item}
                 testID={'btn-' + item}
-                color={
-                  this.state.settings.sort === item
-                    ? colors.shade
-                    : 'transparent'
-                }
+                type={this.state.settings.sort === item ? 'shade' : 'gray'}
                 onPress={async () => {
                   await SettingsService.set('sort', item);
                   await this.getSettings();