From f24c0a11cee78e3d35d480a8ec2b95d89d405ed6 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Mon, 16 Nov 2020 09:42:50 +0500 Subject: [PATCH] ui improvements --- apps/mobile/src/views/Settings/index.js | 103 ++++++++++++++---------- 1 file changed, 61 insertions(+), 42 deletions(-) diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index 2817dd2bd..9128e814d 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/apps/mobile/src/views/Settings/index.js @@ -1,38 +1,42 @@ -import React, { createRef, useCallback, useEffect } from 'react'; +import React, {createRef, useCallback, useEffect} from 'react'; import { Appearance, Linking, - ScrollView, - Text, TouchableOpacity, - View + View, } from 'react-native'; 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 { Button } from '../../components/Button'; -import { PressableButton } from '../../components/PressableButton'; +import {Button} from '../../components/Button'; +import {PressableButton} from '../../components/PressableButton'; import Seperator from '../../components/Seperator'; -import { ListHeaderComponent } from '../../components/SimpleList/ListHeaderComponent'; -import { useTracked } from '../../provider'; -import { Actions } from '../../provider/Actions'; +import {ListHeaderComponent} from '../../components/SimpleList/ListHeaderComponent'; +import {useTracked} from '../../provider'; +import {Actions} from '../../provider/Actions'; import Backup from '../../services/Backup'; -import { DDS } from '../../services/DeviceDetection'; -import { eSendEvent, ToastEvent } from '../../services/EventManager'; +import {DDS} from '../../services/DeviceDetection'; +import {eSendEvent, ToastEvent} from '../../services/EventManager'; import NavigationService from '../../services/Navigation'; import PremiumService from '../../services/PremiumService'; -import { dWidth, MenuItemsList, setSetting } from '../../utils'; +import { + dWidth, + MenuItemsList, + setSetting, + SUBSCRIPTION_STATUS, + SUBSCRIPTION_STATUS_STRINGS, +} from '../../utils'; import { ACCENT, COLOR_SCHEME, COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT, - setColorScheme + setColorScheme, } from '../../utils/Colors'; -import { hexToRGBA, RGB_Linear_Shade } from '../../utils/ColorUtils'; -import { db } from '../../utils/DB'; +import {hexToRGBA, RGB_Linear_Shade} from '../../utils/ColorUtils'; +import {db} from '../../utils/DB'; import { eCloseProgressDialog, eOpenLoginDialog, @@ -42,11 +46,11 @@ import { eOpenRestoreDialog, eResetApp, eScrollEvent, - eUpdateSearchState + eUpdateSearchState, } from '../../utils/Events'; -import { MMKV } from '../../utils/mmkv'; -import { opacity, pv, SIZE, WEIGHT } from '../../utils/SizeUtils'; -import { sleep } from '../../utils/TimeUtils'; +import {MMKV} from '../../utils/mmkv'; +import {opacity, pv, SIZE, WEIGHT} from '../../utils/SizeUtils'; +import {sleep} from '../../utils/TimeUtils'; let menuRef = createRef(); export const Settings = ({navigation}) => { @@ -89,6 +93,7 @@ export const Settings = ({navigation}) => { }, []); useEffect(() => { + console.log(user); navigation.addListener('focus', onFocus); return () => { eSendEvent(eScrollEvent, {name: 'Settings', type: 'back'}); @@ -102,7 +107,7 @@ export const Settings = ({navigation}) => { let diff = d2.getTime() - d1.getTime(); diff = (diff / (1000 * 3600 * 24)).toFixed(0); - return diff; + return diff < 0 ? 0 : diff; }; const SectionHeader = ({title}) => ( @@ -172,13 +177,14 @@ export const Settings = ({navigation}) => { justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 12, + paddingVertical: 6, width: '100%', borderRadius: 0, flexDirection: 'row', }}> { style={{ alignSelf: 'center', width: '100%', - marginBottom: pv, - marginTop: pv, borderRadius: 5, - padding: 10, - backgroundColor: colors.shade, + paddingVertical: 12, }}> { justifyContent: 'center', alignItems: 'center', }}> - + + + + { - {user.subscription.status === 1 ? 'Trial' : 'Pro'} + {SUBSCRIPTION_STATUS_STRINGS[user.subscription.status]} @@ -285,7 +300,7 @@ export const Settings = ({navigation}) => { ? colors.pri : colors.errorText, fontFamily: WEIGHT.regular, - fontSize: SIZE.xxl, + fontSize: SIZE.lg, }}> {getTimeLeft(parseInt(user.subscription.expiry)) + ' Days Remaining'}{' '} @@ -310,8 +325,10 @@ export const Settings = ({navigation}) => { eSendEvent(eOpenPremiumDialog); }} width="100%" + fontSize={SIZE.md} title="Get Notesnook Pro" - height={40} + height={50} + type="accent" /> @@ -323,7 +340,7 @@ export const Settings = ({navigation}) => { eSendEvent(eOpenRecoveryKeyDialog); }, 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', @@ -359,7 +376,7 @@ export const Settings = ({navigation}) => { }} activeOpacity={opacity / 2} customStyle={{ - paddingVertical: pv + 5, + paddingVertical: 12, width: '100%', flexDirection: 'row', alignItems: 'center', @@ -394,6 +411,8 @@ export const Settings = ({navigation}) => { Login to sync notes. @@ -422,11 +441,10 @@ export const Settings = ({navigation}) => { Accent Color{'\n'} @@ -630,6 +648,7 @@ export const Settings = ({navigation}) => { }> {MenuItemsList.slice(0, MenuItemsList.length - 1).map((item) => ( { await setSetting(settings, 'homepage', item.name); }} @@ -666,7 +685,7 @@ export const Settings = ({navigation}) => { }}> { }}>