From 9cc0073f64aad41f3ed3feeaabaefaac4602825f Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Tue, 8 Jun 2021 13:10:06 +0500
Subject: [PATCH] fix menu user section ui

---
 .../mobile/src/components/Menu/UserSection.js | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/apps/mobile/src/components/Menu/UserSection.js b/apps/mobile/src/components/Menu/UserSection.js
index b939fadea..1e5e7911a 100644
--- a/apps/mobile/src/components/Menu/UserSection.js
+++ b/apps/mobile/src/components/Menu/UserSection.js
@@ -1,25 +1,31 @@
 import React from 'react';
-import { ActivityIndicator, Platform, TouchableOpacity, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  ActivityIndicator,
+  Platform,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTracked } from '../../provider';
-import { useUserStore } from '../../provider/stores';
-import { DDS } from '../../services/DeviceDetection';
-import { eSendEvent, ToastEvent } from '../../services/EventManager';
+import {useTracked} from '../../provider';
+import {useSettingStore, useUserStore} from '../../provider/stores';
+import {DDS} from '../../services/DeviceDetection';
+import {eSendEvent, ToastEvent} from '../../services/EventManager';
 import Sync from '../../services/Sync';
-import { eOpenLoginDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
+import {eOpenLoginDialog} from '../../utils/Events';
+import {SIZE} from '../../utils/SizeUtils';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
-import { TimeSince } from './TimeSince';
+import {TimeSince} from './TimeSince';
 
 export const UserSection = () => {
   const [state] = useTracked();
   const {colors} = state;
-  
+
   const user = useUserStore(state => state.user);
   const syncing = useUserStore(state => state.syncing);
   const lastSynced = useUserStore(state => state.lastSynced);
+  const deviceMode = useSettingStore(state => state.deviceMode);
 
   const insets = useSafeAreaInsets();
   return (
@@ -32,9 +38,9 @@ export const UserSection = () => {
       }}>
       <View
         style={{
-          flexDirection: DDS.isLargeTablet() ? 'column' : 'row',
+          flexDirection: deviceMode !== 'mobile' ? 'column' : 'row',
           justifyContent: 'space-between',
-          alignItems: DDS.isLargeTablet() ? 'flex-start' : 'center',
+          alignItems: deviceMode !== 'mobile' ? 'flex-start' : 'center',
           paddingRight: 8,
           paddingLeft: 8,
         }}>
@@ -54,7 +60,7 @@ export const UserSection = () => {
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            paddingVertical: DDS.isLargeTablet() ? 5 : 10,
+            paddingVertical: deviceMode !== 'mobile' ? 5 : 10,
             paddingTop: 10,
           }}>
           <Icon
@@ -74,7 +80,7 @@ export const UserSection = () => {
             {!user && (
               <Paragraph
                 style={{
-                  maxWidth: DDS.isLargeTablet() ? '96%' : '100%',
+                  maxWidth: deviceMode !== 'mobile' ? '96%' : '100%',
                 }}
                 color={colors.icon}>
                 Login to encrypt and sync your notes.
@@ -86,12 +92,14 @@ export const UserSection = () => {
         {user && (
           <TouchableOpacity
             activeOpacity={0.8}
-            onPress={async ()=>await Sync.run()}
+            onPress={async () => await Sync.run()}
             style={{
               flexDirection: 'row',
               alignItems: 'center',
-              paddingVertical: DDS.isLargeTablet() ? 0 : 10,
+              paddingVertical: deviceMode !== 'mobile' ? 0 : 10,
               paddingBottom: 10,
+              justifyContent: 'space-between',
+              width: deviceMode !== 'mobile' ? '100%' : null,
             }}>
             <Paragraph
               style={{