mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-23 23:19:40 +01:00
add themes & dark mode
This commit is contained in:
ammarahm-ed
@@ -19,378 +19,425 @@ 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}) => (
|
||||
<SafeAreaView
|
||||
style={{
|
||||
height: '100%',
|
||||
opacity: hide ? 0 : 1,
|
||||
backgroundColor: colors.navbg,
|
||||
}}>
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
justifyContent: 'space-between',
|
||||
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%',
|
||||
opacity: hide ? 0 : 1,
|
||||
backgroundColor: colors.navbg,
|
||||
}}>
|
||||
<View>
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: colors.navbg,
|
||||
height: 2,
|
||||
backgroundColor: colors.navbg,
|
||||
width: '100%',
|
||||
marginBottom: 5,
|
||||
marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
|
||||
}}
|
||||
/>
|
||||
<FlatList
|
||||
data={[
|
||||
{
|
||||
name: 'Home',
|
||||
icon: 'home',
|
||||
func: () => NavigationService.navigate('Home'),
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Notebooks',
|
||||
icon: 'book',
|
||||
func: () =>
|
||||
NavigationService.navigate('Folders', {
|
||||
title: 'Notebooks',
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Lists',
|
||||
icon: 'list',
|
||||
func: () => NavigationService.navigate('Lists'),
|
||||
},
|
||||
{
|
||||
name: 'Favorites',
|
||||
icon: 'star',
|
||||
func: () => NavigationService.navigate('Favorites'),
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Dark Mode',
|
||||
icon: 'moon',
|
||||
func: () => NavigationService.navigate('Folders'),
|
||||
switch: true,
|
||||
on: false,
|
||||
},
|
||||
{
|
||||
name: 'Trash',
|
||||
icon: 'trash',
|
||||
func: () => NavigationService.navigate('Trash'),
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
icon: 'settings',
|
||||
func: () => NavigationService.navigate('Settings'),
|
||||
},
|
||||
]}
|
||||
keyExtractor={(item, index) => item.name}
|
||||
renderItem={({item, index}) => (
|
||||
<TouchableOpacity
|
||||
activeOpacity={opacity}
|
||||
onPress={() => {
|
||||
close();
|
||||
item.func();
|
||||
}}
|
||||
style={{
|
||||
width: '100%',
|
||||
alignSelf: 'center',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
paddingHorizontal: ph,
|
||||
paddingVertical: 15,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
}}>
|
||||
<Icon
|
||||
style={{
|
||||
width: 30,
|
||||
}}
|
||||
name={item.icon}
|
||||
color={colors.icon}
|
||||
size={SIZE.md}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.medium,
|
||||
fontSize: SIZE.sm - 1,
|
||||
}}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</View>
|
||||
{item.switch ? (
|
||||
<Icon
|
||||
size={SIZE.lg}
|
||||
color={item.on ? colors.accent : colors.icon}
|
||||
name={item.on ? 'toggle-right' : 'toggle-left'}
|
||||
/>
|
||||
) : (
|
||||
undefined
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
close();
|
||||
NavigationService.navigate('Tags');
|
||||
}}
|
||||
style={{
|
||||
width: '100%',
|
||||
alignSelf: 'center',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
paddingHorizontal: ph,
|
||||
marginTop: 15,
|
||||
}}>
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
justifyContent: 'space-between',
|
||||
height: '100%',
|
||||
backgroundColor: colors.navbg,
|
||||
}}>
|
||||
<View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'flex-end',
|
||||
}}>
|
||||
<Icon
|
||||
style={{
|
||||
width: 30,
|
||||
}}
|
||||
name="tag"
|
||||
color={colors.icon}
|
||||
size={SIZE.md}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.medium,
|
||||
fontSize: SIZE.sm - 1,
|
||||
}}>
|
||||
Tags
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: SIZE.xs,
|
||||
fontFamily: WEIGHT.regular,
|
||||
color: colors.pri,
|
||||
}}>
|
||||
View All
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
borderWidth: 1,
|
||||
borderColor: colors.navbg,
|
||||
height: 2,
|
||||
backgroundColor: colors.navbg,
|
||||
width: '100%',
|
||||
marginBottom: 5,
|
||||
marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
|
||||
}}
|
||||
/>
|
||||
<FlatList
|
||||
data={[
|
||||
{
|
||||
name: 'Home',
|
||||
icon: 'home',
|
||||
func: () => NavigationService.navigate('Home'),
|
||||
close: true,
|
||||
},
|
||||
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: colors.navbg,
|
||||
height: 2,
|
||||
backgroundColor: colors.navbg,
|
||||
width: '100%',
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
paddingHorizontal: '5%',
|
||||
marginBottom: 0,
|
||||
}}>
|
||||
{[
|
||||
'home',
|
||||
'office',
|
||||
'work',
|
||||
'book_notes',
|
||||
'poem',
|
||||
'lists',
|
||||
'water',
|
||||
].map(item => (
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
close();
|
||||
NavigationService.navigate('Notes', {
|
||||
heading: item,
|
||||
});
|
||||
}}
|
||||
{
|
||||
name: 'Notebooks',
|
||||
icon: 'book',
|
||||
func: () =>
|
||||
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: () => {
|
||||
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: 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}
|
||||
renderItem={({item, index}) => (
|
||||
<TouchableOpacity
|
||||
activeOpacity={opacity}
|
||||
onPress={() => {
|
||||
item.close === false ? null : close();
|
||||
item.func();
|
||||
}}
|
||||
style={{
|
||||
width: '100%',
|
||||
alignSelf: 'center',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
paddingHorizontal: ph,
|
||||
paddingVertical: 15,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
}}>
|
||||
<Icon
|
||||
style={{
|
||||
width: 30,
|
||||
}}
|
||||
name={item.icon}
|
||||
color={colors.icon}
|
||||
size={SIZE.md}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.medium,
|
||||
fontSize: SIZE.sm - 1,
|
||||
color: colors.pri,
|
||||
}}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</View>
|
||||
{item.switch ? (
|
||||
<Icon
|
||||
size={SIZE.lg}
|
||||
color={item.on ? colors.accent : colors.icon}
|
||||
name={item.on ? 'toggle-right' : 'toggle-left'}
|
||||
/>
|
||||
) : (
|
||||
undefined
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
close();
|
||||
NavigationService.navigate('Tags');
|
||||
}}
|
||||
style={{
|
||||
width: '100%',
|
||||
alignSelf: 'center',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
paddingHorizontal: ph,
|
||||
marginTop: 15,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
margin: 5,
|
||||
alignItems: 'flex-end',
|
||||
}}>
|
||||
<Icon
|
||||
style={{
|
||||
width: 30,
|
||||
}}
|
||||
name="tag"
|
||||
color={colors.icon}
|
||||
size={SIZE.md}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.sm - 2,
|
||||
color: colors.icon,
|
||||
fontFamily: WEIGHT.medium,
|
||||
fontSize: SIZE.sm - 1,
|
||||
color: colors.pri,
|
||||
}}>
|
||||
#{item}
|
||||
Tags
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: SIZE.xs,
|
||||
fontFamily: WEIGHT.regular,
|
||||
color: colors.pri,
|
||||
}}>
|
||||
View All
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: colors.navbg,
|
||||
height: 2,
|
||||
backgroundColor: colors.navbg,
|
||||
width: '100%',
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
paddingHorizontal: '5%',
|
||||
marginBottom: 15,
|
||||
}}>
|
||||
{['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
|
||||
item => (
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: colors.navbg,
|
||||
height: 2,
|
||||
backgroundColor: colors.navbg,
|
||||
width: '100%',
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
paddingHorizontal: '5%',
|
||||
marginBottom: 0,
|
||||
}}>
|
||||
{[
|
||||
'home',
|
||||
'office',
|
||||
'work',
|
||||
'book_notes',
|
||||
'poem',
|
||||
'lists',
|
||||
'water',
|
||||
].map(item => (
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
close();
|
||||
NavigationService.navigate('Notes', {
|
||||
heading: item,
|
||||
});
|
||||
}}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
margin: 5,
|
||||
}}>
|
||||
<View
|
||||
<Text
|
||||
style={{
|
||||
width: 25,
|
||||
height: 25,
|
||||
backgroundColor: item,
|
||||
borderRadius: 100,
|
||||
}}
|
||||
/>
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.sm - 2,
|
||||
color: colors.icon,
|
||||
}}>
|
||||
#{item}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
),
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
{/* <View
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#F3A712',
|
||||
width: '90%',
|
||||
alignSelf: 'center',
|
||||
borderRadius: 5,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.navbg,
|
||||
height: 2,
|
||||
backgroundColor: colors.navbg,
|
||||
width: '100%',
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
height: 40,
|
||||
paddingHorizontal: ph,
|
||||
marginVertical: 10,
|
||||
flexWrap: 'wrap',
|
||||
paddingHorizontal: '5%',
|
||||
marginBottom: 15,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.medium,
|
||||
color: 'white',
|
||||
}}>
|
||||
Upgrade to Pro
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
...getElevation(5),
|
||||
paddingHorizontal: ph,
|
||||
backgroundColor: 'white',
|
||||
paddingVertical: pv - 8,
|
||||
borderRadius: 5,
|
||||
}}>
|
||||
<Icon name="star" color="#FCBA04" size={SIZE.lg} />
|
||||
</View>
|
||||
</View> */}
|
||||
{['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
|
||||
item => (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
margin: 5,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: 25,
|
||||
height: 25,
|
||||
backgroundColor: item,
|
||||
borderRadius: 100,
|
||||
}}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
),
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: '5%',
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
marginBottom: 20,
|
||||
flexDirection: 'row',
|
||||
}}>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
close();
|
||||
|
||||
NavigationService.navigate('Login');
|
||||
}}
|
||||
activeOpacity={opacity}
|
||||
{/* <View
|
||||
style={{
|
||||
paddingVertical: pv,
|
||||
paddingHorizontal: ph,
|
||||
backgroundColor: '#F3A712',
|
||||
width: '90%',
|
||||
alignSelf: 'center',
|
||||
borderRadius: 5,
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
borderColor: colors.accent,
|
||||
backgroundColor: colors.accent,
|
||||
borderWidth: 1,
|
||||
height: 40,
|
||||
paddingHorizontal: ph,
|
||||
marginVertical: 10,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.medium,
|
||||
color: 'white',
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
Login to Sync
|
||||
Upgrade to Pro
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* <Text
|
||||
<View
|
||||
style={{
|
||||
...getElevation(5),
|
||||
paddingHorizontal: ph,
|
||||
backgroundColor: 'white',
|
||||
paddingVertical: pv - 8,
|
||||
borderRadius: 5,
|
||||
}}>
|
||||
<Icon name="star" color="#FCBA04" size={SIZE.lg} />
|
||||
</View>
|
||||
</View> */}
|
||||
|
||||
<View
|
||||
style={{
|
||||
fontFamily: WEIGHT.semibold,
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.md,
|
||||
marginTop: 10,
|
||||
width: '100%',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: '5%',
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
marginBottom: 20,
|
||||
flexDirection: 'row',
|
||||
}}>
|
||||
Hi, Ammar!
|
||||
</Text>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
close();
|
||||
|
||||
NavigationService.navigate('Login');
|
||||
}}
|
||||
activeOpacity={opacity}
|
||||
style={{
|
||||
paddingVertical: pv,
|
||||
paddingHorizontal: ph,
|
||||
borderRadius: 5,
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderColor: colors.accent,
|
||||
backgroundColor: colors.accent,
|
||||
borderWidth: 1,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.medium,
|
||||
color: 'white',
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
Login to Sync
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* <Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.semibold,
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.md,
|
||||
marginTop: 10,
|
||||
}}>
|
||||
Hi, Ammar!
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.regular,
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.xs,
|
||||
marginTop: 10,
|
||||
}}>
|
||||
80.45/100 MB
|
||||
</Text> */}
|
||||
|
||||
{/* <View
|
||||
style={{
|
||||
borderRadius: 2.5,
|
||||
backgroundColor: colors.accent,
|
||||
marginTop: 10,
|
||||
paddingHorizontal: 5,
|
||||
paddingVertical: 2,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.regular,
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.xs,
|
||||
marginTop: 10,
|
||||
fontFamily: WEIGHT.bold,
|
||||
fontSize: SIZE.xxs,
|
||||
color: 'white',
|
||||
}}>
|
||||
80.45/100 MB
|
||||
</Text> */}
|
||||
|
||||
{/* <View
|
||||
style={{
|
||||
borderRadius: 2.5,
|
||||
backgroundColor: colors.accent,
|
||||
marginTop: 10,
|
||||
paddingHorizontal: 5,
|
||||
paddingVertical: 2,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.bold,
|
||||
fontSize: SIZE.xxs,
|
||||
color: 'white',
|
||||
}}>
|
||||
Basic User
|
||||
</Text>
|
||||
</View> */}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
Basic User
|
||||
</Text>
|
||||
</View> */}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user