fix menu user section ui

This commit is contained in:
ammarahm-ed
2021-06-08 13:10:06 +05:00
parent 645eab4d94
commit 9cc0073f64

View File

@@ -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={{