revert to old ui for user section in menu

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

@@ -1,16 +1,15 @@
 import React from 'react';
-import {View} from 'react-native';
+import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {useTracked} from '../../provider';
-import {DDS} from '../../services/DeviceDetection';
+import { useTracked } from '../../provider';
 import Navigation from '../../services/Navigation';
-import {SIZE} from '../../utils/SizeUtils';
-import {PressableButton} from '../PressableButton';
+import { SIZE } from '../../utils/SizeUtils';
+import { PressableButton } from '../PressableButton';
 import Paragraph from '../Typography/Paragraph';
 
 export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
   const [state, dispatch] = useTracked();
-  const {currentScreen, colors} = state;
+  const {headerTextState, colors} = state;
 
   const _onPress = (event) => {
     if (item.func) {
@@ -38,13 +37,13 @@ export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
       key={item.name + index}
       onPress={_onPress}
       color={
-        currentScreen === item.name.toLowerCase() ? colors.shade : 'transparent'
+        headerTextState.id === item.name.toLowerCase() + "_navigation" ? colors.shade : 'transparent'
       }
       selectedColor={colors.accent}
       alpha={!colors.night ? -0.02 : 0.02}
       opacity={0.12}
       customStyle={{
-        width: '100%',
+        width: noTextMode ? 50 : '100%',
         alignSelf: 'center',
         borderRadius: 0,
         flexDirection: 'row',
@@ -60,13 +59,13 @@ export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
         }}>
         <Icon
           style={{
-            minWidth: noTextMode ? 5 : 35,
+            minWidth: noTextMode ? null : 35,
             textAlignVertical: 'center',
-            textAlign: 'left',
+            textAlign: noTextMode ? 'center' : 'left',
           }}
           name={item.icon}
           color={colors.accent}
-          size={DDS.isTab ? SIZE.md + 5 : SIZE.md + 1}
+          size={SIZE.md}
         />
         {noTextMode ? null : <Paragraph size={SIZE.md}>{item.name}</Paragraph>}
       </View>

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import {ActivityIndicator, Text, TouchableOpacity, View} from 'react-native';
-import {color} from 'react-native-reanimated';
+import {ActivityIndicator, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -8,7 +7,7 @@ import {eSendEvent, ToastEvent} from '../../services/EventManager';
 import {showContext, SUBSCRIPTION_STATUS_STRINGS} from '../../utils';
 import {db} from '../../utils/DB';
 import {eOpenLoginDialog} from '../../utils/Events';
-import {pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {pv, SIZE} from '../../utils/SizeUtils';
 import {PressableButton} from '../PressableButton';
 import Paragraph from '../Typography/Paragraph';
 import {TimeSince} from './TimeSince';
@@ -21,7 +20,9 @@ export const UserSection = ({noTextMode}) => {
     <View
       style={{
         width: '100%',
-        borderRadius: 0,
+        borderRadius: 5,
+        alignSelf: 'center',
+        backgroundColor: colors.shade,
       }}>
       <View
         style={{
@@ -30,7 +31,9 @@ export const UserSection = ({noTextMode}) => {
           alignItems: 'center',
           backgroundColor: colors.accent,
           paddingHorizontal: 6,
-          paddingVertical: 8,
+          paddingVertical: 6,
+          borderTopRightRadius: 5,
+          borderTopLeftRadius: 5,
         }}>
         <Paragraph color="white">
           <Icon name="account-outline" /> {user.username}
@@ -41,6 +44,7 @@ export const UserSection = ({noTextMode}) => {
       </View>
 
       <TouchableOpacity
+        activeOpacity={0.8}
         onPress={async () => {
           dispatch({
             type: Actions.SYNCING,
@@ -68,7 +72,7 @@ export const UserSection = ({noTextMode}) => {
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
-          paddingHorizontal: 5,
+          paddingRight: 5,
           paddingVertical: 12,
         }}>
         <View
@@ -80,7 +84,7 @@ export const UserSection = ({noTextMode}) => {
             style={{
               marginLeft: 5,
             }}>
-            {syncing ? 'Syncing ' : 'Synced '}
+            {syncing ? 'Syncing ' : 'Last synced: '}
             {!syncing ? (
               user?.lastSynced ? (
                 <TimeSince time={user.lastSynced} />
@@ -112,10 +116,7 @@ export const UserSection = ({noTextMode}) => {
       onPress={() => {
         eSendEvent(eOpenLoginDialog);
       }}
-      onLongPress={(event) => {
-        showContext(event, 'Login');
-      }}
-      color="transparent"
+      color={colors.accent}
       selectedColor={colors.accent}
       alpha={!colors.night ? -0.02 : 0.1}
       opacity={0.12}
@@ -123,7 +124,7 @@ export const UserSection = ({noTextMode}) => {
         paddingVertical: 12,
         marginVertical: 5,
         marginTop: pv + 5,
-        borderRadius: 0,
+        borderRadius: 5,
         width: '100%',
         flexDirection: 'row',
         alignItems: 'center',

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {ScrollView, View} from 'react-native';
+import {FlatList, ScrollView, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -13,10 +13,7 @@ import {
 } from '../../utils/Colors';
 import {MenuItemsList} from '../../utils/index';
 import {MMKV} from '../../utils/mmkv';
-import {SIZE} from '../../utils/SizeUtils';
 import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
 import {ColorSection} from './ColorSection';
 import {MenuListItem} from './MenuListItem';
 import {TagsSection} from './TagsSection';
@@ -65,52 +62,49 @@ export const Menu = React.memo(
           backgroundColor: DDS.isLargeTablet() ? colors.nav : colors.bg,
           paddingTop: insets.top,
         }}>
-        <ScrollView
+        <FlatList
           alwaysBounceVertical={false}
           contentContainerStyle={{
-            minHeight: '50%',
             flexGrow: 1,
           }}
-          showsVerticalScrollIndicator={false}>
-          {MenuItemsList.map((item, index) => (
-            <MenuListItem
-              testID={item.name}
-              key={item.name}
-              item={item}
-              index={index}
-              noTextMode={noTextMode}
-            />
-          ))}
-          <ColorSection noTextMode={noTextMode} />
-          <TagsSection />
-        </ScrollView>
+          showsVerticalScrollIndicator={false}
+          data={[0]}
+          keyExtractor={() => 'mainMenuView'}
+          renderItem={() => (
+            <>
+              {MenuItemsList.map((item, index) => (
+                <MenuListItem
+                  testID={item.name}
+                  key={item.name}
+                  item={item}
+                  index={index}
+                  noTextMode={noTextMode}
+                />
+              ))}
+              <ColorSection noTextMode={noTextMode} />
+              <TagsSection />
+            </>
+          )}
+        />
 
+        {BottomItemsList.map((item, index) => (
+          <MenuListItem
+            testID={item.name == 'Night mode' ? 'night_mode' : item.name}
+            key={item.name}
+            item={item}
+            index={index}
+            ignore={true}
+            noTextMode={false}
+          />
+        ))}
         <View
           style={{
             width: '100%',
-            justifyContent: noTextMode ? 'center' : 'center',
-            alignItems: 'center',
-            alignSelf: 'center',
-            marginBottom: 15,
+            padding: 8,
           }}>
-          <View
-            style={{
-              width: '100%',
-            }}>
-            {BottomItemsList.map((item, index) => (
-              <MenuListItem
-                testID={item.name == 'Night mode' ? 'night_mode' : item.name}
-                key={item.name}
-                item={item}
-                index={index}
-                ignore={true}
-                noTextMode={noTextMode}
-              />
-            ))}
-          </View>
           <Seperator half />
-
           <UserSection noTextMode={noTextMode} />
+          <Seperator />
         </View>
       </View>
     );