Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 06:59:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

ui improvements

Browse Source
This commit is contained in:
ammarahm-ed
2020-11-16 09:42:50 +05:00
parent b5759d3061
commit f24c0a11ce
1 changed files with 61 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
apps/mobile/src/views/Settings/index.js
View File

@@ -1,38 +1,42 @@
import React, { createRef, useCallback, useEffect } from 'react'; import React, {createRef, useCallback, useEffect} from 'react';
import { import {
Appearance, Appearance,
Linking, Linking,
ScrollView, ScrollView,
Text, Text,
TouchableOpacity, TouchableOpacity,
View View,
} from 'react-native'; } from 'react-native';
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
import Menu, { MenuItem } from 'react-native-reanimated-material-menu'; import Menu, {MenuItem} from 'react-native-reanimated-material-menu';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { Button } from '../../components/Button'; import {Button} from '../../components/Button';
import { PressableButton } from '../../components/PressableButton'; import {PressableButton} from '../../components/PressableButton';
import Seperator from '../../components/Seperator'; import Seperator from '../../components/Seperator';
import { ListHeaderComponent } from '../../components/SimpleList/ListHeaderComponent'; import {ListHeaderComponent} from '../../components/SimpleList/ListHeaderComponent';
import { useTracked } from '../../provider'; import {useTracked} from '../../provider';
import { Actions } from '../../provider/Actions'; import {Actions} from '../../provider/Actions';
import Backup from '../../services/Backup'; import Backup from '../../services/Backup';
import { DDS } from '../../services/DeviceDetection'; import {DDS} from '../../services/DeviceDetection';
import { eSendEvent, ToastEvent } from '../../services/EventManager'; import {eSendEvent, ToastEvent} from '../../services/EventManager';
import NavigationService from '../../services/Navigation'; import NavigationService from '../../services/Navigation';
import PremiumService from '../../services/PremiumService'; import PremiumService from '../../services/PremiumService';
import { dWidth, MenuItemsList, setSetting } from '../../utils'; import {
dWidth,
MenuItemsList,
setSetting,
SUBSCRIPTION_STATUS,
SUBSCRIPTION_STATUS_STRINGS,
} from '../../utils';
import { import {
ACCENT, ACCENT,
COLOR_SCHEME, COLOR_SCHEME,
COLOR_SCHEME_DARK, COLOR_SCHEME_DARK,
COLOR_SCHEME_LIGHT, COLOR_SCHEME_LIGHT,
setColorScheme setColorScheme,
} from '../../utils/Colors'; } from '../../utils/Colors';
import { hexToRGBA, RGB_Linear_Shade } from '../../utils/ColorUtils'; import {hexToRGBA, RGB_Linear_Shade} from '../../utils/ColorUtils';
import { db } from '../../utils/DB'; import {db} from '../../utils/DB';
import { import {
eCloseProgressDialog, eCloseProgressDialog,
eOpenLoginDialog, eOpenLoginDialog,
@@ -42,11 +46,11 @@ import {
eOpenRestoreDialog, eOpenRestoreDialog,
eResetApp, eResetApp,
eScrollEvent, eScrollEvent,
eUpdateSearchState eUpdateSearchState,
} from '../../utils/Events'; } from '../../utils/Events';
import { MMKV } from '../../utils/mmkv'; import {MMKV} from '../../utils/mmkv';
import { opacity, pv, SIZE, WEIGHT } from '../../utils/SizeUtils'; import {opacity, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
import { sleep } from '../../utils/TimeUtils'; import {sleep} from '../../utils/TimeUtils';
let menuRef = createRef(); let menuRef = createRef();
export const Settings = ({navigation}) => { export const Settings = ({navigation}) => {
@@ -89,6 +93,7 @@ export const Settings = ({navigation}) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
console.log(user);
navigation.addListener('focus', onFocus); navigation.addListener('focus', onFocus);
return () => { return () => {
eSendEvent(eScrollEvent, {name: 'Settings', type: 'back'}); eSendEvent(eScrollEvent, {name: 'Settings', type: 'back'});
@@ -102,7 +107,7 @@ export const Settings = ({navigation}) => {
let diff = d2.getTime() - d1.getTime(); let diff = d2.getTime() - d1.getTime();
diff = (diff / (1000 * 3600 * 24)).toFixed(0); diff = (diff / (1000 * 3600 * 24)).toFixed(0);
return diff; return diff < 0 ? 0 : diff;
}; };
const SectionHeader = ({title}) => ( const SectionHeader = ({title}) => (
@@ -172,13 +177,14 @@ export const Settings = ({navigation}) => {
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 6,
width: '100%', width: '100%',
borderRadius: 0, borderRadius: 0,
flexDirection: 'row', flexDirection: 'row',
}}> }}>
<Text <Text
style={{ style={{
fontSize: SIZE.md, fontSize: SIZE.sm,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
textAlignVertical: 'center', textAlignVertical: 'center',
color: colors.pri, color: colors.pri,
@@ -225,11 +231,8 @@ export const Settings = ({navigation}) => {
style={{ style={{
alignSelf: 'center', alignSelf: 'center',
width: '100%', width: '100%',
marginBottom: pv,
marginTop: pv,
borderRadius: 5, borderRadius: 5,
padding: 10, paddingVertical: 12,
backgroundColor: colors.shade,
}}> }}>
<View <View
style={{ style={{
@@ -243,11 +246,23 @@ export const Settings = ({navigation}) => {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}}> }}>
<Icon <View
size={SIZE.md} style={{
color={colors.accent} borderWidth: 1,
name="account-outline" borderRadius: 100,
/> borderColor: colors.accent,
width: 20,
height: 20,
alignItems: 'center',
justifyContent: 'center',
}}>
<Icon
size={SIZE.md}
color={colors.accent}
name="account-outline"
/>
</View>
<Text <Text
style={{ style={{
color: colors.heading, color: colors.heading,
@@ -268,10 +283,10 @@ export const Settings = ({navigation}) => {
<Text <Text
style={{ style={{
color: colors.accent, color: colors.accent,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.bold,
fontSize: SIZE.xs, fontSize: SIZE.sm,
}}> }}>
{user.subscription.status === 1 ? 'Trial' : 'Pro'} {SUBSCRIPTION_STATUS_STRINGS[user.subscription.status]}
</Text> </Text>
</View> </View>
</View> </View>
@@ -285,7 +300,7 @@ export const Settings = ({navigation}) => {
? colors.pri ? colors.pri
: colors.errorText, : colors.errorText,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
fontSize: SIZE.xxl, fontSize: SIZE.lg,
}}> }}>
{getTimeLeft(parseInt(user.subscription.expiry)) + {getTimeLeft(parseInt(user.subscription.expiry)) +
' Days Remaining'}{' '} ' Days Remaining'}{' '}
@@ -310,8 +325,10 @@ export const Settings = ({navigation}) => {
eSendEvent(eOpenPremiumDialog); eSendEvent(eOpenPremiumDialog);
}} }}
width="100%" width="100%"
fontSize={SIZE.md}
title="Get Notesnook Pro" title="Get Notesnook Pro"
height={40} height={50}
type="accent"
/> />
</View> </View>
</View> </View>
@@ -323,7 +340,7 @@ export const Settings = ({navigation}) => {
eSendEvent(eOpenRecoveryKeyDialog); eSendEvent(eOpenRecoveryKeyDialog);
}, },
desc: desc:
'Save your recovery key. If you lose your password, you can recover your data using your recovery key.', 'If you lose your password, you can recover your data using your recovery key.',
}, },
{ {
name: 'Logout', name: 'Logout',
@@ -359,7 +376,7 @@ export const Settings = ({navigation}) => {
}} }}
activeOpacity={opacity / 2} activeOpacity={opacity / 2}
customStyle={{ customStyle={{
paddingVertical: pv + 5, paddingVertical: 12,
width: '100%', width: '100%',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
@@ -394,6 +411,8 @@ export const Settings = ({navigation}) => {
<Text <Text
style={{ style={{
color: colors.accent, color: colors.accent,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}> }}>
Login to sync notes. Login to sync notes.
</Text> </Text>
@@ -422,11 +441,10 @@ export const Settings = ({navigation}) => {
<Text <Text
style={{ style={{
fontSize: SIZE.md, fontSize: SIZE.sm,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
textAlignVertical: 'center', textAlignVertical: 'center',
color: colors.pri, color: colors.pri,
marginTop: pv + 5,
paddingHorizontal: 12, paddingHorizontal: 12,
}}> }}>
Accent Color{'\n'} Accent Color{'\n'}
@@ -630,6 +648,7 @@ export const Settings = ({navigation}) => {
}> }>
{MenuItemsList.slice(0, MenuItemsList.length - 1).map((item) => ( {MenuItemsList.slice(0, MenuItemsList.length - 1).map((item) => (
<MenuItem <MenuItem
key={item.title}
onPress={async () => { onPress={async () => {
await setSetting(settings, 'homepage', item.name); await setSetting(settings, 'homepage', item.name);
}} }}
@@ -666,7 +685,7 @@ export const Settings = ({navigation}) => {
}}> }}>
<Text <Text
style={{ style={{
fontSize: SIZE.md, fontSize: SIZE.sm,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
textAlignVertical: 'center', textAlignVertical: 'center',
color: colors.pri, color: colors.pri,
@@ -786,7 +805,7 @@ export const Settings = ({navigation}) => {
}}> }}>
<Text <Text
style={{ style={{
fontSize: SIZE.md, fontSize: SIZE.sm,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
textAlignVertical: 'center', textAlignVertical: 'center',
color: colors.pri, color: colors.pri,