update menu

apps/mobile/initializer.root.js

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {Dimensions, Platform, View} from 'react-native';
+import {Dimensions, View} from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
 import {notesnook} from './e2e/test.ids';
 import ContextMenu from './src/components/ContextMenu';
@@ -173,7 +173,7 @@ const AppStack = React.memo(
         console.log(mode);
         DDS.setSize(size);
         dispatch({type: Actions.DEVICE_MODE, state: mode});
-     
+
         return;
       }
 
@@ -190,7 +190,7 @@ const AppStack = React.memo(
       });
 
       setWidthHeight(size);
-      console.log(size,"SIZES")
+      console.log(size, 'SIZES');
       DDS.setSize(size);
       if (DDS.isLargeTablet()) {
         setDeviceMode('tablet', size);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import {notesnook} from '../../../e2e/test.ids';
 import {useTracked} from '../../provider';
+import { DDS } from '../../services/DeviceDetection';
 import Navigation from '../../services/Navigation';
 import SettingsService from '../../services/SettingsService';
 import {SIZE} from '../../utils/SizeUtils';
@@ -19,7 +20,9 @@ export const HeaderLeftMenu = () => {
   };
   return (
     <>
-      {deviceMode === 'mobile' || currentScreen === 'search' ? (
+      {deviceMode === 'mobile' ||
+      currentScreen === 'search' ||
+      !headerMenuState ? (
         <ActionIcon
           testID={notesnook.ids.default.header.buttons.left}
           customStyle={{
@@ -29,12 +32,11 @@ export const HeaderLeftMenu = () => {
             width: 40,
             borderRadius: 100,
             marginLeft: -5,
-            marginRight: 25,
+            marginRight:DDS.isLargeTablet()? 10 : 25,
           }}
           onPress={onLeftButtonPress}
           onLongPress={() => {
             Navigation.popToTop();
-            
           }}
           name={!headerMenuState ? 'arrow-left' : 'menu'}
           size={SIZE.xxxl}

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

@@ -41,7 +41,7 @@ export const HeaderRightMenu = () => {
           type="shade"
           style={{
             marginLeft: 20,
-            width: 60,
+            width: 50,
             height: 35,
           }}
         />

apps/mobile/src/components/Menu/ColorSection.js

@@ -8,16 +8,18 @@ import {
   eUnSubscribeEvent,
 } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
+import {getElevation} from '../../utils';
 import {COLORS_NOTE} from '../../utils/Colors';
 import {db} from '../../utils/DB';
 import {refreshNotesPage} from '../../utils/Events';
 import {SIZE} from '../../utils/SizeUtils';
 import {PressableButton} from '../PressableButton';
+import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
-export const ColorSection = ({noTextMode}) => {
+export const ColorSection = () => {
   const [state, dispatch] = useTracked();
-  const {colorNotes,loading} = state;
+  const {colorNotes, loading} = state;
 
   useEffect(() => {
     if (!loading) {
@@ -25,16 +27,9 @@ export const ColorSection = ({noTextMode}) => {
     }
   }, [loading]);
 
-  return (
+  return colorNotes.map((item, index) => (
-    <View
+    <ColorItem key={item.id} item={item} index={index} />
-      style={{
+  ));
-        width: '100%',
-      }}>
-      {colorNotes.map((item, index) => (
-        <ColorItem key={item.id} item={item} index={index} />
-      ))}
-    </View>
-  );
 };
 
 const ColorItem = ({item, index}) => {
@@ -43,7 +38,9 @@ const ColorItem = ({item, index}) => {
   const [headerTextState, setHeaderTextState] = useState(null);
 
   const onHeaderStateChange = (event) => {
-    if (event.id === item.name) {
+    console.log(event);
+    if (event.id === item.id) {
+      console.log('here');
       setHeaderTextState(event);
     } else {
       setHeaderTextState(null);
@@ -75,54 +72,67 @@ const ColorItem = ({item, index}) => {
 
   return (
     <PressableButton
-      customColor={
+      customColor="transparent"
-        headerTextState?.id === item.id && item.type === headerTextState?.type
-          ? COLORS_NOTE[item.title]
-          : 'transparent'
-      }
       customSelectedColor={COLORS_NOTE[item.title]}
       customAlpha={!colors.night ? -0.02 : 0.02}
       customOpacity={0.12}
       onPress={() => onPress(item)}
       customStyle={{
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
         width: '100%',
+        alignSelf: 'center',
         borderRadius: 0,
-        paddingHorizontal: 10,
+        flexDirection: 'row',
-        height: 50,
+        paddingHorizontal: 8,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: 40,
       }}>
       <View
         style={{
-          width: 35,
+          flexDirection: 'row',
-          height: 35,
+          alignItems: 'center',
-          justifyContent: 'center',
-          alignItems: 'flex-start',
         }}>
         <View
           style={{
-            width: SIZE.md,
+            width: 30,
-            height: SIZE.md,
+            height: 30,
-            backgroundColor: COLORS_NOTE[item.title],
-            borderRadius: 100,
             justifyContent: 'center',
-            marginRight: 10,
+            alignItems: 'flex-start',
-          }}
+          }}>
-        />
+          <View
+            style={{
+              width: SIZE.md,
+              height: SIZE.md,
+              backgroundColor: COLORS_NOTE[item.title],
+              borderRadius: 100,
+              justifyContent: 'center',
+              marginRight: 10,
+            }}
+          />
+        </View>
+        {headerTextState?.id === item.id ? (
+          <Heading color={COLORS_NOTE[item.title.toLowerCase()]} size={SIZE.md}>
+            {item.title.slice(0, 1).toUpperCase() + item.title.slice(1)}
+          </Heading>
+        ) : (
+          <Paragraph color={colors.heading} size={SIZE.md}>
+            {item.title.slice(0, 1).toUpperCase() + item.title.slice(1)}
+          </Paragraph>
+        )}
       </View>
 
       <View
         style={{
-          flexDirection: 'row',
+          backgroundColor:
-          justifyContent: 'space-between',
+            headerTextState?.id === item.id
-          alignItems: 'center',
+              ? COLORS_NOTE[item.title.toLowerCase()]
-          width: '85%',
+              : 'transparent',
-        }}>
+          width: 7,
-        <Paragraph color={colors.heading} size={SIZE.md}>
+          height: 7,
-          {item.title.slice(0, 1).toUpperCase() + item.title.slice(1)}
+          borderRadius: 100,
-        </Paragraph>
+          ...getElevation(5),
-      </View>
+        }}
+      />
     </PressableButton>
   );
 };

apps/mobile/src/components/Menu/MenuListItem.js

@@ -4,8 +4,10 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
+import {getElevation} from '../../utils';
 import {SIZE} from '../../utils/SizeUtils';
 import {PressableButton} from '../PressableButton';
+import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
 export const MenuListItem = ({item, index, noTextMode, testID}) => {
@@ -53,20 +55,16 @@ export const MenuListItem = ({item, index, noTextMode, testID}) => {
       testID={testID}
       key={item.name + index}
       onPress={_onPress}
-      type={
+      type="transparent"
-        headerTextState?.id === item.name.toLowerCase() + '_navigation'
-          ? 'shade'
-          : 'transparent'
-      }
       customStyle={{
-        width: noTextMode ? 50 : '100%',
+        width: '100%',
         alignSelf: 'center',
         borderRadius: 0,
         flexDirection: 'row',
-        paddingHorizontal: noTextMode ? 0 : 8,
+        paddingHorizontal: 8,
-        justifyContent: noTextMode ? 'center' : 'space-between',
+        justifyContent: 'space-between',
         alignItems: 'center',
-        height: 50,
+        height: 40,
       }}>
       <View
         style={{
@@ -75,24 +73,43 @@ export const MenuListItem = ({item, index, noTextMode, testID}) => {
         }}>
         <Icon
           style={{
-            minWidth: noTextMode ? null : 35,
+            minWidth: 30,
             textAlignVertical: 'center',
-            textAlign: noTextMode ? 'center' : 'left',
+            textAlign: 'left',
           }}
           name={item.icon}
           color={colors.accent}
           size={SIZE.md}
         />
-        {noTextMode ? null : <Paragraph size={SIZE.md}>{item.name}</Paragraph>}
+        {headerTextState?.id === item.name.toLowerCase() + '_navigation' ? (
+          <Heading color={colors.accent} size={SIZE.md}>
+            {item.name}
+          </Heading>
+        ) : (
+          <Paragraph size={SIZE.md}>{item.name}</Paragraph>
+        )}
       </View>
 
-      {item.switch && !noTextMode ? (
+      {item.switch ? (
         <Icon
           size={SIZE.lg}
           color={item.on ? colors.accent : colors.icon}
           name={item.on ? 'toggle-switch' : 'toggle-switch-off'}
         />
-      ) : undefined}
+      ) : (
+        <View
+          style={{
+            backgroundColor:
+              headerTextState?.id === item.name.toLowerCase() + '_navigation'
+                ? colors.accent
+                : 'transparent',
+            width: 7,
+            height: 7,
+            borderRadius: 100,
+            ...getElevation(5),
+          }}
+        />
+      )}
     </PressableButton>
   );
 };

apps/mobile/src/components/Menu/TagsSection.js

@@ -89,7 +89,7 @@ export const TagsSection = () => {
           <View
             style={{
               flexGrow: 1,
-              minHeight:"40%",
+              minHeight: '40%',
               justifyContent: 'center',
               alignItems: 'center',
               paddingHorizontal: '10%',
@@ -101,8 +101,8 @@ export const TagsSection = () => {
               style={{textAlign: 'center'}}
               color={colors.icon}
               size={SIZE.xs}>
-              You have not pinned anything yet. You can pin notebooks, topics and tags
+              You have not pinned anything yet. You can pin notebooks, topics
-              here.
+              and tags here.
             </Paragraph>
           </View>
         }
@@ -122,7 +122,7 @@ const PinItem = ({item, index, onPress}) => {
   const [headerTextState, setHeaderTextState] = useState(null);
 
   const onHeaderStateChange = (event) => {
-    if (event?.id === item.name) {
+    if (event?.id === item.id) {
       setHeaderTextState(event);
     } else {
       setHeaderTextState(null);
@@ -163,62 +163,79 @@ const PinItem = ({item, index, onPress}) => {
         </BaseDialog>
       )}
       <PressableButton
-        type={
+        type="transparent"
-          headerTextState?.id === item.id && headerTextState?.type === item.type
-            ? 'shade'
-            : 'transparent'
-        }
         onLongPress={() => setVisible(true)}
         onPress={() => onPress(item)}
         customStyle={{
           flexDirection: 'row',
-          justifyContent: 'flex-start',
+          justifyContent: 'space-between',
           alignItems: 'center',
           width: '100%',
           borderRadius: 0,
           paddingHorizontal: 10,
-          minHeight: 50,
+          minHeight: 40,
         }}>
         <View
           style={{
-            width: 35,
+            flexDirection: 'row',
-            height: 35,
+            alignItems: 'center',
-            justifyContent: 'center',
-            alignItems: 'flex-start',
           }}>
-          {item.type === 'notebook' ? (
+          <View
-            <Icon color={colors.accent} size={SIZE.md} name="book-outline" />
+            style={{
-          ) : item.type === 'tag' ? (
+              width: 30,
-            <Icon color={colors.accent} size={SIZE.md} name="pound" />
+              height: 30,
-          ) : (
+              justifyContent: 'center',
+              alignItems: 'flex-start',
+            }}>
+            {item.type === 'notebook' ? (
+              <Icon color={colors.accent} size={SIZE.md} name="book-outline" />
+            ) : item.type === 'tag' ? (
+              <Icon color={colors.accent} size={SIZE.md} name="pound" />
+            ) : (
+              <Paragraph
+                style={{textAlign: 'center', width: 12}}
+                color={colors.accent}
+                size={SIZE.md}>
+                T
+              </Paragraph>
+            )}
+          </View>
+          <View
+            style={{
+              alignItems: 'flex-start',
+            }}>
+            {headerTextState?.id === item.id ? (
+              <Heading color={colors.heading} size={SIZE.md}>
+                {item.title}
+              </Heading>
+            ) : (
+              <Paragraph color={colors.heading} size={SIZE.md}>
+                {item.title}
+              </Paragraph>
+            )}
             <Paragraph
-              style={{textAlign: 'center', width: 12}}
+              style={{marginTop: 2.5}}
-              color={colors.accent}
+              size={SIZE.xs}
-              size={SIZE.md}>
+              color={colors.icon}>
-              T
+              {item.type.slice(0, 1).toUpperCase() +
+                item.type.slice(1, item.type.length)}{' '}
+              {item.type === 'topic'
+                ? 'in ' + db.notebooks.notebook(item.notebookId).data.title
+                : null}
             </Paragraph>
-          )}
+          </View>
         </View>
+
         <View
           style={{
-            alignItems: 'flex-start',
+            backgroundColor:
-            width: '85%',
+              headerTextState?.id === item.id ? colors.accent : 'transparent',
-          }}>
+            width: 7,
-          <Paragraph size={SIZE.md} color={colors.heading}>
+            height: 7,
-            {item.title}
+            borderRadius: 100,
-          </Paragraph>
+            ...getElevation(5),
-
+          }}
-          <Paragraph
+        />
-            style={{marginTop: 2.5}}
-            size={SIZE.xs}
-            color={colors.icon}>
-            {item.type.slice(0, 1).toUpperCase() +
-              item.type.slice(1, item.type.length)}{' '}
-            {item.type === 'topic'
-              ? 'in ' + db.notebooks.notebook(item.notebookId).data.title
-              : null}
-          </Paragraph>
-        </View>
       </PressableButton>
     </>
   );

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

@@ -185,7 +185,10 @@ const SimpleList = ({
           alignItems: 'center',
         }}>
         <Heading>{placeholderData.heading}</Heading>
-        <Paragraph color={colors.icon}>
+        <Paragraph style={{
+          textAlign:'center',
+          width:"80%"
+        }} color={colors.icon}>
           {loading ? placeholderData.loading : placeholderData.paragraph}
         </Paragraph>
         <Seperator />

apps/mobile/src/views/Trash/index.js

@@ -78,7 +78,7 @@ export const Trash = ({route, navigation}) => {
         type="trash"
         focused={() => navigation.isFocused()}
         placeholderData={{
-          heading: 'Your Trash',
+          heading: 'Trash',
           paragraph:
             'Items in the trash will be permanently deleted after 7 days.',
           button: null,