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

add themes & dark mode

Browse Source
This commit is contained in:
ammarahm-ed
2019-12-07 12:05:15 +05:00
parent 58c0e5fb11
commit 72d897a35d
26 changed files with 962 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/mobile/App.js
View File

@@ -12,7 +12,21 @@ import {
Text,
Keyboard,
} from 'react-native';
import {COLOR_SCHEME, SIZE, opacity, WEIGHT, pv, ph} from './src/common/common';
import AsyncStorage from '@react-native-community/async-storage';
import {
COLOR_SCHEME,
COLOR_SCHEME_DARK,
SIZE,
opacity,
WEIGHT,
pv,
ph,
setColorScheme,
onThemeUpdate,
clearThemeUpdateListener,
COLOR_SCHEME_LIGHT,
setAccentColor,
} from './src/common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import ActionButton from 'react-native-action-button';
import Storage from 'notes-core/api/database';
@@ -22,6 +36,7 @@ import {h, w} from './src/utils/utils';
import {Toast} from './src/components/Toast';
import {Menu} from './src/components/Menu';
import SideMenu from 'react-native-side-menu';
import {useForceUpdate} from './src/views/ListsEditor';
const App = () => {
const [colors, setColors] = useState(COLOR_SCHEME);
const [fab, setFab] = useState(true);
@@ -30,11 +45,29 @@ const App = () => {
const [disableGestures, setDisableGesture] = useState(false);
const [buttonHide, setButtonHide] = useState(false);
useEffect(() => {
if (Platform.OS === 'android') {
StatusBar.setBackgroundColor('transparent');
StatusBar.setTranslucent(true);
StatusBar.setBarStyle('dark-content');
let theme = COLOR_SCHEME_LIGHT;
AsyncStorage.getItem('accentColor').then(accentColor => {
if (typeof accentColor !== 'string') {
AsyncStorage.setItem('accentColor', colors.accent);
} else {
setAccentColor(accentColor);
}
});
AsyncStorage.getItem('theme').then(t => {
if (typeof t !== 'string') {
AsyncStorage.setItem('theme', JSON.stringify(theme));
setColorScheme(COLOR_SCHEME_LIGHT);
} else {
let themeToSet = JSON.parse(t);
themeToSet.night
? setColorScheme(COLOR_SCHEME_DARK)
: setColorScheme(COLOR_SCHEME_LIGHT);
StatusBar.setBarStyle(
themeToSet.night ? 'light-content' : 'dark-content',
);
}
});
}, []);
useEffect(() => {
@@ -110,6 +143,14 @@ const App = () => {
};
}, []);
useEffect(() => {
if (Platform.OS === 'android') {
StatusBar.setBackgroundColor('transparent');
StatusBar.setTranslucent(true);
StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
}
}, []);
return (
<View
style={{
@@ -126,7 +167,6 @@ const App = () => {
width: sidebar,
}}>
<Menu
colors={colors}
close={() => {
setSidebar('0%');
}}

91
apps/mobile/src/common/common.js
View File

@@ -1,38 +1,81 @@
import Storage from '../utils/storage';
import {DeviceEventEmitter} from 'react-native';
//COLOR SCHEME
export function setColorScheme(
night = false,
bg = 'white',
fg = '#1790F3',
nav = '#f2f2f2',
pri = 'black',
sec = 'white',
accent = '#1790F3',
normal = 'black',
icon = ICONS_COLOR,
) {
COLOR_SCHEME.bg = bg;
COLOR_SCHEME.fg = fg;
COLOR_SCHEME.nav = nav;
COLOR_SCHEME.pri = pri;
COLOR_SCHEME.sec = sec;
export const ACCENT = {
color: '#0560FF',
};
export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT.color) {
COLOR_SCHEME.bg = colors.bg;
COLOR_SCHEME.fg = accent;
COLOR_SCHEME.navbg = colors.navbg;
COLOR_SCHEME.nav = colors.nav;
COLOR_SCHEME.pri = colors.pri;
COLOR_SCHEME.sec = colors.sec;
COLOR_SCHEME.accent = accent;
COLOR_SCHEME.normal = normal;
COLOR_SCHEME.night = night;
COLOR_SCHEME.icon = icon;
COLOR_SCHEME.normal = colors.normal;
COLOR_SCHEME.night = colors.night;
COLOR_SCHEME.icon = colors.icon;
return;
DeviceEventEmitter.emit('onThemeUpdate');
}
export function setAccentColor(color) {
ACCENT.color = color;
DeviceEventEmitter.emit('onThemeUpdate');
}
export const onThemeUpdate = (func = () => {}) => {
return DeviceEventEmitter.addListener('onThemeUpdate', func);
};
export const clearThemeUpdateListener = (func = () => {}) => {
return DeviceEventEmitter.removeListener('onThemeUpdate', func);
};
export const COLOR_SCHEME = {
night: false,
bg: 'white',
fg: '#0560FF',
fg: ACCENT.color,
navbg: '#f6fbfc',
nav: '#f0f0f0',
pri: 'black',
sec: 'white',
accent: '#0560FF',
accent: ACCENT.color,
normal: 'black',
icon: 'gray',
errorBg: '#FFD2D2',
errorText: '#D8000C',
successBg: '#DFF2BF',
successText: '#4F8A10',
warningBg: '#FEEFB3',
warningText: '#9F6000',
};
export const COLOR_SCHEME_LIGHT = {
night: false,
bg: 'white',
fg: ACCENT.color,
navbg: '#f6fbfc',
nav: '#f0f0f0',
pri: 'black',
sec: 'white',
accent: ACCENT.color,
normal: 'black',
icon: 'gray',
errorBg: '#FFD2D2',
errorText: '#D8000C',
successBg: '#DFF2BF',
successText: '#4F8A10',
warningBg: '#FEEFB3',
warningText: '#9F6000',
};
export const COLOR_SCHEME_DARK = {
night: true,
bg: '#1f1f1f',
fg: ACCENT.color,
navbg: '#1c1c1c',
nav: '#2b2b2b',
pri: 'white',
sec: 'black',
accent: ACCENT.color,
normal: 'black',
icon: 'gray',
errorBg: '#FFD2D2',

6
apps/mobile/src/components/AddNotebookDialog/index.js
View File

@@ -162,7 +162,7 @@ export const AddNotebookDialog = ({visible, close}) => {
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
fontSize: SIZE.sm,
@@ -258,7 +258,7 @@ export const AddNotebookDialog = ({visible, close}) => {
width: '45%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
backgroundColor: colors.nav,
}}>
<Text
style={{
@@ -298,7 +298,7 @@ const TopicItem = ({
alignItems: 'center',
borderRadius: 5,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingHorizontal: ph,
marginTop: 10,
}}>

2
apps/mobile/src/components/Dialog/index.js
View File

@@ -138,7 +138,7 @@ export const Dialog = ({
width: '48%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
backgroundColor: colors.nav,
}}>
<Text
style={{

2
apps/mobile/src/components/ListItem/index.js
View File

@@ -26,7 +26,7 @@ export const ListItem = props => {
marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
alignSelf: 'center',
borderRadius: br,
backgroundColor: '#f0f0f0',
backgroundColor: colors.nav,
marginBottom: 20,
padding: 5,

57
apps/mobile/src/components/Menu/index.js
View File

@@ -19,13 +19,35 @@ import {
opacity,
FONT,
WEIGHT,
COLOR_SCHEME_DARK,
setColorScheme,
COLOR_SCHEME_LIGHT,
clearThemeUpdateListener,
onThemeUpdate,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {getElevation, w, h, Toast} from '../../utils/utils';
import AsyncStorage from '@react-native-community/async-storage';
import {useForceUpdate} from '../../views/ListsEditor';
export const Menu = ({colors, close = () => {}, hide}) => (
export const Menu = ({close = () => {}, hide, update = () => {}}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
return (
<SafeAreaView
style={{
height: '100%',
@@ -36,6 +58,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
contentContainerStyle={{
justifyContent: 'space-between',
height: '100%',
backgroundColor: colors.navbg,
}}>
<View>
<View
@@ -55,6 +78,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
name: 'Home',
icon: 'home',
func: () => NavigationService.navigate('Home'),
close: true,
},
{
@@ -64,34 +88,54 @@ export const Menu = ({colors, close = () => {}, hide}) => (
NavigationService.navigate('Folders', {
title: 'Notebooks',
}),
close: true,
},
{
name: 'Lists',
icon: 'list',
func: () => NavigationService.navigate('Lists'),
close: true,
},
{
name: 'Favorites',
icon: 'star',
func: () => NavigationService.navigate('Favorites'),
close: true,
},
{
name: 'Dark Mode',
icon: 'moon',
func: () => NavigationService.navigate('Folders'),
func: () => {
if (!colors.night) {
AsyncStorage.setItem(
'theme',
JSON.stringify(COLOR_SCHEME_DARK),
);
setColorScheme(COLOR_SCHEME_DARK);
} else {
AsyncStorage.setItem(
'theme',
JSON.stringify(COLOR_SCHEME_LIGHT),
);
setColorScheme(COLOR_SCHEME_LIGHT);
}
},
switch: true,
on: false,
on: colors.night ? true : false,
close: false,
},
{
name: 'Trash',
icon: 'trash',
func: () => NavigationService.navigate('Trash'),
close: true,
},
{
name: 'Settings',
icon: 'settings',
func: () => NavigationService.navigate('Settings'),
close: true,
},
]}
keyExtractor={(item, index) => item.name}
@@ -99,7 +143,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
<TouchableOpacity
activeOpacity={opacity}
onPress={() => {
close();
item.close === false ? null : close();
item.func();
}}
style={{
@@ -128,6 +172,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
color: colors.pri,
}}>
{item.name}
</Text>
@@ -177,6 +222,7 @@ export const Menu = ({colors, close = () => {}, hide}) => (
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
color: colors.pri,
}}>
Tags
</Text>
@@ -393,4 +439,5 @@ export const Menu = ({colors, close = () => {}, hide}) => (
</View>
</ScrollView>
</SafeAreaView>
);
);
};

3
apps/mobile/src/components/NoteItem/index.js
View File

@@ -51,7 +51,7 @@ const NoteItem = props => {
width: Platform.isPad ? '95%' : '90%',
alignSelf: 'center',
borderBottomWidth: 1,
borderBottomColor: '#f0f0f0',
borderBottomColor: colors.nav,
}}>
<Dialog
visible={visible}
@@ -151,6 +151,7 @@ const NoteItem = props => {
<Menu
style={{
borderRadius: 5,
backgroundColor: colors.nav,
}}
ref={ref => (setMenuRef[props.index] = ref)}
button={

4
apps/mobile/src/components/NotebookItem/index.js
View File

@@ -38,7 +38,7 @@ export const NotebookItem = ({
paddingHorizontal: ph,
marginHorizontal: '5%',
borderBottomWidth: 1,
borderBottomColor: '#f0f0f0',
borderBottomColor: colors.nav,
paddingVertical: pv,
}}>
<View
@@ -224,7 +224,7 @@ export const NotebookItem = ({
borderRadius: 5,
width: '20%',
paddingHorizontal: ph - 5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingVertical: pv,
flexDirection: 'row',
justifyContent: 'center',

14
apps/mobile/src/components/Recents/index.js
View File

@@ -18,6 +18,8 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
@@ -41,6 +43,17 @@ export const RecentList = ({update, onScroll, margin}) => {
fetchNotes();
}, [update]);
useEffect(() => {
onThemeUpdate(() => {
setColors(COLOR_SCHEME);
});
return () => {
clearThemeUpdateListener(() => {
setColors(COLOR_SCHEME);
});
};
}, []);
return (
<>
<FlatList
@@ -52,6 +65,7 @@ export const RecentList = ({update, onScroll, margin}) => {
style={{
height: '100%',
width: '100%',
backgroundColor: colors.bg,
}}
ListHeaderComponent={
<View

2
apps/mobile/src/components/Reminder/index.js
View File

@@ -25,7 +25,7 @@ export const Reminder = props => {
marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
alignSelf: 'center',
borderRadius: br,
backgroundColor: props.invert ? '#f0f0f0' : colors.accent,
backgroundColor: props.invert ? colors.nav : colors.accent,
paddingHorizontal: ph,
marginBottom: 20,
padding: 5,

2
apps/mobile/src/components/SearchInput/index.js
View File

@@ -48,7 +48,7 @@ export const Search = props => {
? pv - 3
: pv - 8,
marginBottom: props.hide ? 0 : 10,
borderColor: focus ? colors.navbg : '#f0f0f0',
borderColor: focus ? colors.accent : colors.nav,
height: props.hide ? 0 : 55,
}}>
<TextInput

10
apps/mobile/src/components/VaultDialog/index.js
View File

@@ -96,7 +96,7 @@ export const VaultDialog = ({visible, close}) => {
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
fontSize: SIZE.sm,
@@ -111,7 +111,7 @@ export const VaultDialog = ({visible, close}) => {
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
fontSize: SIZE.sm,
@@ -126,7 +126,7 @@ export const VaultDialog = ({visible, close}) => {
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
fontSize: SIZE.sm,
@@ -182,7 +182,7 @@ export const VaultDialog = ({visible, close}) => {
width: '45%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
backgroundColor: colors.nav,
}}>
<Text
style={{
@@ -222,7 +222,7 @@ const TopicItem = ({
alignItems: 'center',
borderRadius: 5,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingHorizontal: ph,
marginTop: 10,
}}>

11
apps/mobile/src/components/header/index.js
View File

@@ -44,8 +44,15 @@ export const Header = ({
justifyContent: 'center',
alignItems: 'center',
paddingRight: 15,
height: 40,
width: 40,
marginTop: 5,
}}>
<Icon name={'chevron-left'} size={SIZE.xl} />
<Icon
color={colors.pri}
name={'chevron-left'}
size={hide ? SIZE.xl : SIZE.xxl}
/>
</TouchableOpacity>
) : (
undefined
@@ -78,7 +85,7 @@ export const Header = ({
paddingRight: 0,
marginTop: 7,
}}>
<Icon name={'search'} size={SIZE.xl} />
<Icon name={'search'} size={SIZE.xl} color={colors.icon} />
</TouchableOpacity>
</Animatable.View>
</Animatable.View>

22
apps/mobile/src/views/AccountSettings/index.js
View File

@@ -20,23 +20,37 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import NoteItem from '../../components/NoteItem';
import {useForceUpdate} from '../ListsEditor';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const AccountSettings = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
return (
<SafeAreaView
style={{
height: '100%',
backgroundColor: colors.bg,
}}>
<Header colors={colors} heading="" canGoBack={true} />
@@ -110,7 +124,7 @@ export const AccountSettings = ({navigation}) => {
borderBottomWidth: 1,
width: '90%',
marginHorizontal: '5%',
borderBottomColor: '#f0f0f0',
borderBottomColor: colors.nav,
paddingVertical: pv + 5,
flexDirection: 'row',
paddingHorizontal: ph,
@@ -122,6 +136,7 @@ export const AccountSettings = ({navigation}) => {
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
color: colors.pri,
}}>
<Icon name={item.icon} size={SIZE.md} />
{' '} {item.name}
@@ -149,9 +164,10 @@ export const AccountSettings = ({navigation}) => {
fontFamily: WEIGHT.regular,
color: 'white',
}}>
<Icon size={SIZE.lg} color="white" name="log-out" />
{' '}
Logout
</Text>
<Icon size={SIZE.lg} color="white" name="log-out" />
</TouchableOpacity>
</SafeAreaView>
);

14
apps/mobile/src/views/Favorites/index.js
View File

@@ -19,18 +19,32 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import {useForceUpdate} from '../ListsEditor';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Favorites = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
return (
<SafeAreaView>
<Header colors={colors} heading="Favorites" canGoBack={false} />

18
apps/mobile/src/views/Folders/index.js
View File

@@ -21,6 +21,8 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
@@ -40,6 +42,7 @@ export const Folders = ({navigation}) => {
const [notebooks, setNotebooks] = useState([]);
const [hideHeader, setHideHeader] = useState(false);
const [margin, setMargin] = useState(150);
const forceUpdate = useForceUpdate();
const params = navigation.state.params;
let offsetY = 0;
let countUp = 0;
@@ -66,10 +69,22 @@ export const Folders = ({navigation}) => {
console.log(storage.getNotebooks());
}, []);
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
return (
<SafeAreaView
style={{
height: '100%',
backgroundColor: colors.bg,
}}>
<AddNotebookDialog
visible={addNotebook}
@@ -157,12 +172,11 @@ export const Folders = ({navigation}) => {
setAddNotebook(true);
}}
style={{
borderWidth: 1,
borderRadius: 5,
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
borderColor: '#f0f0f0',
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',

24
apps/mobile/src/views/ForgotPassword/index.js
View File

@@ -20,6 +20,8 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import {Reminder} from '../../components/Reminder';
@@ -28,10 +30,22 @@ import {getElevation} from '../../utils/utils';
import {FlatList, TextInput} from 'react-native-gesture-handler';
import {NavigationEvents} from 'react-navigation';
import {Header} from '../../components/header';
import {useForceUpdate} from '../ListsEditor';
export const ForgotPassword = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
useEffect(() => {
DeviceEventEmitter.emit('hide');
return () => {
@@ -40,7 +54,11 @@ export const ForgotPassword = ({navigation}) => {
}, []);
return (
<SafeAreaView>
<SafeAreaView
style={{
backgroundColor: colors.bg,
height: '100%',
}}>
<NavigationEvents
onWillFocus={() => {
DeviceEventEmitter.emit('hide');
@@ -95,14 +113,14 @@ const renderForgotPassword = colors => {
onBlur={() => {
_email.current.setNativeProps({
style: {
borderColor: '#f0f0f0',
borderColor: colors.nav,
},
});
}}
style={{
padding: pv,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
marginHorizontal: '5%',
borderRadius: 5,
fontSize: SIZE.md,

26
apps/mobile/src/views/Home/index.js
View File

@@ -9,7 +9,16 @@ import {
Text,
Keyboard,
} from 'react-native';
import {COLOR_SCHEME, opacity, pv, br, SIZE, WEIGHT} from '../../common/common';
import {
COLOR_SCHEME,
opacity,
pv,
br,
SIZE,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import {styles} from './styles';
import {Search} from '../../components/SearchInput';
import {RecentList} from '../../components/Recents';
@@ -21,6 +30,7 @@ import {storage} from '../../../App';
import Icon from 'react-native-vector-icons/Feather';
import NavigationService from '../../services/NavigationService';
import {ScrollView} from 'react-native-gesture-handler';
import {useForceUpdate} from '../ListsEditor';
export const Home = ({navigation}) => {
const [loading, setLoading] = useState(true);
const [colors, setColors] = useState(COLOR_SCHEME);
@@ -31,6 +41,7 @@ export const Home = ({navigation}) => {
const [hideHeader, setHideHeader] = useState(false);
const [margin, setMargin] = useState(150);
const [buttonHide, setButtonHide] = useState(false);
const forceUpdate = useForceUpdate();
let offsetY = 0;
let countUp = 0;
let countDown = 0;
@@ -43,6 +54,17 @@ export const Home = ({navigation}) => {
}, 1000);
}, []);
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
const onChangeText = value => {
setText(value);
};
@@ -138,10 +160,12 @@ export const Home = ({navigation}) => {
<SafeAreaView
style={{
height: '100%',
backgroundColor: colors.bg,
}}>
<KeyboardAvoidingView
style={{
height: '100%',
backgroundColor: colors.bg,
}}>
<NavigationEvents
onWillFocus={() => {

30
apps/mobile/src/views/Login/index.js
View File

@@ -20,18 +20,32 @@ import {
opacity,
FONT,
WEIGHT,
clearThemeUpdateListener,
onThemeUpdate,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {getElevation} from '../../utils/utils';
import {FlatList, TextInput} from 'react-native-gesture-handler';
import {NavigationEvents} from 'react-navigation';
import {Header} from '../../components/header';
import {useForceUpdate} from '../ListsEditor';
export const Login = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
useEffect(() => {
DeviceEventEmitter.emit('hide');
return () => {
@@ -47,7 +61,11 @@ export const Login = ({navigation}) => {
}, []);
return (
<SafeAreaView>
<SafeAreaView
style={{
backgroundColor: colors.bg,
height: '100%',
}}>
<NavigationEvents
onWillFocus={() => {
DeviceEventEmitter.emit('hide');
@@ -102,14 +120,14 @@ const renderLogin = colors => {
onBlur={() => {
_email.current.setNativeProps({
style: {
borderColor: '#f0f0f0',
borderColor: colors.nav,
},
});
}}
style={{
padding: pv,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
marginHorizontal: '5%',
borderRadius: 5,
fontSize: SIZE.md,
@@ -131,14 +149,14 @@ const renderLogin = colors => {
onBlur={() => {
_pass.current.setNativeProps({
style: {
borderColor: '#f0f0f0',
borderColor: colors.nav,
},
});
}}
style={{
padding: pv,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
marginHorizontal: '5%',
borderRadius: 5,
fontSize: SIZE.md,

2
apps/mobile/src/views/Move/index.js
View File

@@ -73,7 +73,7 @@ export const Move = ({navigation}) => {
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',

20
apps/mobile/src/views/Notebook/index.js
View File

@@ -21,6 +21,8 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
@@ -29,6 +31,7 @@ import {Header} from '../../components/header';
import NoteItem from '../../components/NoteItem';
import {NotebookItem} from '../../components/NotebookItem';
import {Search} from '../../components/SearchInput';
import {useForceUpdate} from '../ListsEditor';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
@@ -38,6 +41,7 @@ export const Notebook = ({navigation}) => {
const params = navigation.state.params;
const [hideHeader, setHideHeader] = useState(false);
const [margin, setMargin] = useState(150);
const forceUpdate = useForceUpdate();
let offsetY = 0;
let countUp = 0;
let countDown = 0;
@@ -57,10 +61,22 @@ export const Notebook = ({navigation}) => {
}, 10);
}
};
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
return (
<SafeAreaView
style={{
height: '100%',
backgroundColor: colors.bg,
}}>
<KeyboardAvoidingView
style={{
@@ -132,7 +148,7 @@ export const Notebook = ({navigation}) => {
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',
@@ -167,12 +183,10 @@ export const Notebook = ({navigation}) => {
setAddNotebook(true);
}}
style={{
borderWidth: 1,
borderRadius: 5,
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
borderColor: '#f0f0f0',
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',

14
apps/mobile/src/views/Notes/index.js
View File

@@ -19,19 +19,33 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import {Search} from '../../components/SearchInput';
import {useForceUpdate} from '../ListsEditor';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Notes = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
let params = navigation.state ? navigation.state.params : null;
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
useEffect(() => {
if (!params) {

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

@@ -19,21 +19,45 @@ import {
opacity,
FONT,
WEIGHT,
setAccentColor,
COLOR_SCHEME_DARK,
COLOR_SCHEME_LIGHT,
setColorScheme,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import {FlatList} from 'react-native-gesture-handler';
import AsyncStorage from '@react-native-community/async-storage';
import {useForceUpdate} from '../ListsEditor';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Settings = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
return (
<SafeAreaView>
<SafeAreaView
style={{
backgroundColor: colors.bg,
height: '100%',
}}>
<View>
<Header colors={colors} heading="Settings" canGoBack={false} />
<FlatList
@@ -68,7 +92,7 @@ export const Settings = ({navigation}) => {
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
borderColor: '#f0f0f0',
borderColor: colors.nav,
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',
@@ -94,7 +118,7 @@ export const Settings = ({navigation}) => {
borderBottomWidth: 1,
width: item.step ? '85%' : '90%',
marginHorizontal: '5%',
borderBottomColor: '#f0f0f0',
borderBottomColor: colors.nav,
paddingVertical: pv + 5,
flexDirection: 'row',
paddingHorizontal: ph,
@@ -107,12 +131,17 @@ export const Settings = ({navigation}) => {
fontSize: item.step ? SIZE.sm : SIZE.md,
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
color: colors.pri,
}}>
<Icon name={item.icon} size={SIZE.md} />
<Icon name={item.icon} size={SIZE.md} color={colors.icon} />
{' '} {item.name}
</Text>
{item.switch ? (
<Icon name="toggle-right" size={item.step ? SIZE.sm : SIZE.md} />
<Icon
name="toggle-right"
color={colors.icon}
size={item.step ? SIZE.sm : SIZE.md}
/>
) : null}
</TouchableOpacity>
)}
@@ -123,7 +152,7 @@ export const Settings = ({navigation}) => {
borderBottomWidth: 1,
width: '90%',
marginHorizontal: '5%',
borderBottomColor: '#f0f0f0',
borderBottomColor: colors.nav,
paddingVertical: pv + 5,
paddingHorizontal: ph,
@@ -134,6 +163,7 @@ export const Settings = ({navigation}) => {
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
color: colors.pri,
}}>
Accent Color
</Text>
@@ -148,7 +178,7 @@ export const Settings = ({navigation}) => {
'#e6194b',
'#3cb44b',
'#ffe119',
'#1790F3',
'#0560FF',
'#f58231',
'#911eb4',
'#46f0f0',
@@ -157,6 +187,13 @@ export const Settings = ({navigation}) => {
'#fabebe',
].map(item => (
<TouchableOpacity
onPress={() => {
setAccentColor(item);
setColorScheme(
colors.night ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT,
);
AsyncStorage.setItem('accentColor', item);
}}
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
@@ -173,7 +210,9 @@ export const Settings = ({navigation}) => {
justifyContent: 'center',
alignItems: 'center',
}}>
{colors.accent === item ? (
<Icon size={SIZE.lg} color="white" name="check" />
) : null}
</View>
</TouchableOpacity>
))}
@@ -186,7 +225,7 @@ export const Settings = ({navigation}) => {
borderBottomWidth: 1,
width: '90%',
marginHorizontal: '5%',
borderBottomColor: '#f0f0f0',
borderBottomColor: colors.nav,
paddingVertical: pv + 5,
flexDirection: 'row',
paddingHorizontal: ph,
@@ -197,6 +236,7 @@ export const Settings = ({navigation}) => {
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
color: colors.pri,
}}>
Terms of Service
</Text>
@@ -208,7 +248,7 @@ export const Settings = ({navigation}) => {
borderBottomWidth: 1,
width: '90%',
marginHorizontal: '5%',
borderBottomColor: '#f0f0f0',
borderBottomColor: colors.nav,
paddingVertical: pv + 5,
flexDirection: 'row',
paddingHorizontal: ph,
@@ -219,6 +259,7 @@ export const Settings = ({navigation}) => {
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
color: colors.pri,
}}>
Privacy Policy
</Text>
@@ -230,7 +271,7 @@ export const Settings = ({navigation}) => {
borderBottomWidth: 1,
width: '90%',
marginHorizontal: '5%',
borderBottomColor: '#f0f0f0',
borderBottomColor: colors.nav,
paddingVertical: pv + 5,
flexDirection: 'row',
paddingHorizontal: ph,
@@ -241,10 +282,12 @@ export const Settings = ({navigation}) => {
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
color: colors.pri,
}}>
About Notes.
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};

28
apps/mobile/src/views/Signup/index.js
View File

@@ -20,6 +20,8 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import {Reminder} from '../../components/Reminder';
@@ -28,10 +30,22 @@ import {getElevation} from '../../utils/utils';
import {FlatList, TextInput} from 'react-native-gesture-handler';
import {NavigationEvents} from 'react-navigation';
import {Header} from '../../components/header';
import {useForceUpdate} from '../ListsEditor';
export const Signup = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
useEffect(() => {
DeviceEventEmitter.emit('hide');
return () => {
@@ -40,7 +54,11 @@ export const Signup = ({navigation}) => {
}, []);
return (
<SafeAreaView>
<SafeAreaView
style={{
height: '100%',
backgroundColor: colors.bg,
}}>
<NavigationEvents
onWillFocus={() => {
DeviceEventEmitter.emit('hide');
@@ -95,14 +113,14 @@ const renderSignup = colors => {
onBlur={() => {
_email.current.setNativeProps({
style: {
borderColor: '#f0f0f0',
borderColor: colors.nav,
},
});
}}
style={{
padding: pv,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
marginHorizontal: '5%',
borderRadius: 5,
fontSize: SIZE.md,
@@ -124,14 +142,14 @@ const renderSignup = colors => {
onBlur={() => {
_pass.current.setNativeProps({
style: {
borderColor: '#f0f0f0',
borderColor: colors.nav,
},
});
}}
style={{
padding: pv,
borderWidth: 1.5,
borderColor: '#f0f0f0',
borderColor: colors.nav,
marginHorizontal: '5%',
borderRadius: 5,
fontSize: SIZE.md,

14
apps/mobile/src/views/Tags/index.js
View File

@@ -20,19 +20,33 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import NoteItem from '../../components/NoteItem';
import {useForceUpdate} from '../ListsEditor';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Tags = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
return (
<SafeAreaView
style={{

19
apps/mobile/src/views/Trash/index.js
View File

@@ -20,21 +20,38 @@ import {
opacity,
FONT,
WEIGHT,
clearThemeUpdateListener,
onThemeUpdate,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import NoteItem from '../../components/NoteItem';
import {useForceUpdate} from '../ListsEditor';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Trash = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
return (
<SafeAreaView>
<SafeAreaView
style={{
backgroundColor: colors.bg,
}}>
<Header colors={colors} heading="Trash" canGoBack={false} />
<FlatList
numColumns={2}