fixes and improvements in ui while on a tablet

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

@@ -7,16 +7,14 @@ import {
   View,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
+import {pv, SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eOpenLoginDialog} from '../../services/events';
-import NavigationService from '../../services/NavigationService';
-import {db, DDS, hexToRGBA, ToastEvent} from '../../utils/utils';
-import {TimeSince} from './TimeSince';
-import {sideMenuRef} from '../../utils/refs';
+import {db, hexToRGBA, showContext, ToastEvent} from '../../utils/utils';
 import {PressableButton} from '../PressableButton';
+import {TimeSince} from './TimeSince';
 
 export const UserSection = ({noTextMode}) => {
   const [state, dispatch] = useTracked();
@@ -143,7 +141,10 @@ export const UserSection = ({noTextMode}) => {
       onPress={() => {
         eSendEvent(eOpenLoginDialog);
       }}
-      color={colors.shade}
+      onLongPress={(event) => {
+        showContext(event, 'Login');
+      }}
+      color={noTextMode ? 'transparent' : colors.shade}
       selectedColor={colors.accent}
       alpha={!colors.night ? -0.02 : 0.1}
       opacity={0.12}
@@ -151,8 +152,8 @@ export const UserSection = ({noTextMode}) => {
         paddingVertical: 12,
         marginVertical: 5,
         marginTop: pv + 5,
-        borderRadius: 5,
-        width: '93%',
+        borderRadius: noTextMode ? 0 : 5,
+        width: noTextMode ? '100%' : '93%',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: noTextMode ? 'center' : 'flex-start',
@@ -161,7 +162,7 @@ export const UserSection = ({noTextMode}) => {
       <View
         style={{
           width: 30,
-          backgroundColor: colors.accent,
+          backgroundColor: noTextMode ? 'transparent' : colors.accent,
           height: 30,
           borderRadius: 100,
           alignItems: 'center',
@@ -172,9 +173,9 @@ export const UserSection = ({noTextMode}) => {
             textAlign: 'center',
             textAlignVertical: 'center',
           }}
-          name="account-outline"
-          color="white"
-          size={SIZE.md}
+          name={noTextMode ? 'login-variant' : 'account-outline'}
+          color={noTextMode ? colors.accent : 'white'}
+          size={noTextMode ? SIZE.md + 5 : SIZE.md + 1}
         />
       </View>
       {noTextMode ? null : (