diff --git a/apps/mobile/App.js b/apps/mobile/App.js index 28b1b5bce..8103d333b 100644 --- a/apps/mobile/App.js +++ b/apps/mobile/App.js @@ -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 ( { width: sidebar, }}> { setSidebar('0%'); }} diff --git a/apps/mobile/src/common/common.js b/apps/mobile/src/common/common.js index e4a29200b..c1b8faf1f 100755 --- a/apps/mobile/src/common/common.js +++ b/apps/mobile/src/common/common.js @@ -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', diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js index b23a3d663..811bccb84 100644 --- a/apps/mobile/src/components/AddNotebookDialog/index.js +++ b/apps/mobile/src/components/AddNotebookDialog/index.js @@ -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, }}> diff --git a/apps/mobile/src/components/Dialog/index.js b/apps/mobile/src/components/Dialog/index.js index 75cd8bcbb..386df7a8b 100644 --- a/apps/mobile/src/components/Dialog/index.js +++ b/apps/mobile/src/components/Dialog/index.js @@ -138,7 +138,7 @@ export const Dialog = ({ width: '48%', justifyContent: 'center', alignItems: 'center', - backgroundColor: '#f0f0f0', + backgroundColor: colors.nav, }}> { marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%', alignSelf: 'center', borderRadius: br, - backgroundColor: '#f0f0f0', + backgroundColor: colors.nav, marginBottom: 20, padding: 5, diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js index 4b0ee4ad3..f29e138e0 100644 --- a/apps/mobile/src/components/Menu/index.js +++ b/apps/mobile/src/components/Menu/index.js @@ -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}) => ( - - {}, hide, update = () => {}}) => { + const [colors, setColors] = useState(COLOR_SCHEME); + const forceUpdate = useForceUpdate(); + + useEffect(() => { + onThemeUpdate(() => { + forceUpdate(); + }); + return () => { + clearThemeUpdateListener(() => { + forceUpdate(); + }); + }; + }, []); + + return ( + - - - 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}) => ( - { - close(); - item.func(); - }} - style={{ - width: '100%', - alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-end', - paddingHorizontal: ph, - paddingVertical: 15, - }}> - - - - {item.name} - - - {item.switch ? ( - - ) : ( - undefined - )} - - )} - /> - - { - close(); - NavigationService.navigate('Tags'); - }} - style={{ - width: '100%', - alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-end', - paddingHorizontal: ph, - marginTop: 15, - }}> + + - - - Tags - - - - View All - - + borderWidth: 1, + borderColor: colors.navbg, + height: 2, + backgroundColor: colors.navbg, + width: '100%', + marginBottom: 5, + marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03, + }} + /> + NavigationService.navigate('Home'), + close: true, + }, - - - {[ - 'home', - 'office', - 'work', - 'book_notes', - 'poem', - 'lists', - 'water', - ].map(item => ( - { - 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}) => ( + { + item.close === false ? null : close(); + item.func(); + }} + style={{ + width: '100%', + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-end', + paddingHorizontal: ph, + paddingVertical: 15, + }}> + + + + {item.name} + + + {item.switch ? ( + + ) : ( + undefined + )} + + )} + /> + + { + close(); + NavigationService.navigate('Tags'); + }} + style={{ + width: '100%', + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-end', + paddingHorizontal: ph, + marginTop: 15, + }}> + + - #{item} + Tags - - ))} - + + + View All + + - - - {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map( - item => ( + + + {[ + 'home', + 'office', + 'work', + 'book_notes', + 'poem', + 'lists', + 'water', + ].map(item => ( { + close(); + NavigationService.navigate('Notes', { + heading: item, + }); + }} style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', margin: 5, }}> - + fontFamily: WEIGHT.regular, + fontSize: SIZE.sm - 2, + color: colors.icon, + }}> + #{item} + - ), - )} - - + ))} + - {/* + - - Upgrade to Pro - - - - - - */} + {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map( + item => ( + + + + ), + )} + + - - { - close(); - - NavigationService.navigate('Login'); - }} - activeOpacity={opacity} + {/* - Login to Sync + Upgrade to Pro - - {/* + + + */} + + - Hi, Ammar! - - + { + 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, + }}> + + Login to Sync + + + + {/* + Hi, Ammar! + + + + 80.45/100 MB + */} + + {/* - 80.45/100 MB - */} - - {/* - - Basic User - - */} - - - -); + Basic User + + */} + + + + ); +}; diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js index 7a5bec05e..b0a2b12a2 100644 --- a/apps/mobile/src/components/NoteItem/index.js +++ b/apps/mobile/src/components/NoteItem/index.js @@ -51,7 +51,7 @@ const NoteItem = props => { width: Platform.isPad ? '95%' : '90%', alignSelf: 'center', borderBottomWidth: 1, - borderBottomColor: '#f0f0f0', + borderBottomColor: colors.nav, }}> { (setMenuRef[props.index] = ref)} button={ diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js index fef62a96d..0f4f28fe4 100644 --- a/apps/mobile/src/components/NotebookItem/index.js +++ b/apps/mobile/src/components/NotebookItem/index.js @@ -38,7 +38,7 @@ export const NotebookItem = ({ paddingHorizontal: ph, marginHorizontal: '5%', borderBottomWidth: 1, - borderBottomColor: '#f0f0f0', + borderBottomColor: colors.nav, paddingVertical: pv, }}> { fetchNotes(); }, [update]); + useEffect(() => { + onThemeUpdate(() => { + setColors(COLOR_SCHEME); + }); + return () => { + clearThemeUpdateListener(() => { + setColors(COLOR_SCHEME); + }); + }; + }, []); + return ( <> { style={{ height: '100%', width: '100%', + backgroundColor: colors.bg, }} ListHeaderComponent={ { 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, diff --git a/apps/mobile/src/components/SearchInput/index.js b/apps/mobile/src/components/SearchInput/index.js index be7213746..17e0d4ae8 100644 --- a/apps/mobile/src/components/SearchInput/index.js +++ b/apps/mobile/src/components/SearchInput/index.js @@ -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, }}> { 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, }}> diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js index 55cb962c6..2a956d1ce 100644 --- a/apps/mobile/src/components/header/index.js +++ b/apps/mobile/src/components/header/index.js @@ -44,8 +44,15 @@ export const Header = ({ justifyContent: 'center', alignItems: 'center', paddingRight: 15, + height: 40, + width: 40, + marginTop: 5, }}> - + ) : ( undefined @@ -78,7 +85,7 @@ export const Header = ({ paddingRight: 0, marginTop: 7, }}> - + diff --git a/apps/mobile/src/views/AccountSettings/index.js b/apps/mobile/src/views/AccountSettings/index.js index e20931ecc..232396a8b 100644 --- a/apps/mobile/src/views/AccountSettings/index.js +++ b/apps/mobile/src/views/AccountSettings/index.js @@ -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 (
@@ -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, }}> {' '} {item.name} @@ -149,9 +164,10 @@ export const AccountSettings = ({navigation}) => { fontFamily: WEIGHT.regular, color: 'white', }}> + + {' '} Logout - ); diff --git a/apps/mobile/src/views/Favorites/index.js b/apps/mobile/src/views/Favorites/index.js index 9c563a1dd..d549560a2 100644 --- a/apps/mobile/src/views/Favorites/index.js +++ b/apps/mobile/src/views/Favorites/index.js @@ -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 (
diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js index 0985e76f7..7203fe31a 100644 --- a/apps/mobile/src/views/Folders/index.js +++ b/apps/mobile/src/views/Folders/index.js @@ -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 ( { setAddNotebook(true); }} style={{ - borderWidth: 1, borderRadius: 5, width: '90%', marginHorizontal: '5%', paddingHorizontal: ph, - borderColor: '#f0f0f0', + paddingVertical: pv + 5, flexDirection: 'row', justifyContent: 'space-between', diff --git a/apps/mobile/src/views/ForgotPassword/index.js b/apps/mobile/src/views/ForgotPassword/index.js index cd2bd8e97..f53f2c0f4 100644 --- a/apps/mobile/src/views/ForgotPassword/index.js +++ b/apps/mobile/src/views/ForgotPassword/index.js @@ -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 ( - + { 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, diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index cadb58a55..7b10f525a 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -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}) => { { diff --git a/apps/mobile/src/views/Login/index.js b/apps/mobile/src/views/Login/index.js index 47f31da0c..74281745e 100644 --- a/apps/mobile/src/views/Login/index.js +++ b/apps/mobile/src/views/Login/index.js @@ -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 ( - + { 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, diff --git a/apps/mobile/src/views/Move/index.js b/apps/mobile/src/views/Move/index.js index d23672949..34937b979 100644 --- a/apps/mobile/src/views/Move/index.js +++ b/apps/mobile/src/views/Move/index.js @@ -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', diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js index 4131bb6a6..70782aa1e 100644 --- a/apps/mobile/src/views/Notebook/index.js +++ b/apps/mobile/src/views/Notebook/index.js @@ -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 ( { 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', diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js index b6aec556f..4e7c154e2 100644 --- a/apps/mobile/src/views/Notes/index.js +++ b/apps/mobile/src/views/Notes/index.js @@ -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) { diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index 81aece12d..25ec05762 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/apps/mobile/src/views/Settings/index.js @@ -19,232 +19,275 @@ 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 ( - -
+ + +
- + + { + NavigationService.navigate('AccountSettings'); + }} + style={{ + borderWidth: 1, + borderRadius: 5, + width: '90%', + marginHorizontal: '5%', + paddingHorizontal: ph, + borderColor: colors.nav, + paddingVertical: pv + 5, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 10, + backgroundColor: colors.bg, + }}> + + My Account + + + + } + renderItem={({item, index}) => ( { - NavigationService.navigate('AccountSettings'); - }} style={{ - borderWidth: 1, - borderRadius: 5, - width: '90%', + borderBottomWidth: 1, + width: item.step ? '85%' : '90%', marginHorizontal: '5%', - paddingHorizontal: ph, - borderColor: '#f0f0f0', + borderBottomColor: colors.nav, paddingVertical: pv + 5, flexDirection: 'row', + paddingHorizontal: ph, justifyContent: 'space-between', alignItems: 'center', - marginBottom: 10, - backgroundColor: colors.bg, + marginLeft: item.step ? '10%' : '5%', }}> - My Account + + {' '} {item.name} + {item.switch ? ( + + ) : null} - - } - renderItem={({item, index}) => ( - + + + - - - {' '} {item.name} - - {item.switch ? ( - - ) : null} - - )} - /> + Accent Color + - - - Accent Color - - - - {[ - '#e6194b', - '#3cb44b', - '#ffe119', - '#1790F3', - '#f58231', - '#911eb4', - '#46f0f0', - '#f032e6', - '#bcf60c', - '#fabebe', - ].map(item => ( - - + {[ + '#e6194b', + '#3cb44b', + '#ffe119', + '#0560FF', + '#f58231', + '#911eb4', + '#46f0f0', + '#f032e6', + '#bcf60c', + '#fabebe', + ].map(item => ( + { + setAccentColor(item); + setColorScheme( + colors.night ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT, + ); + AsyncStorage.setItem('accentColor', item); + }} style={{ - width: 45, - height: 45, - backgroundColor: item, - borderRadius: 100, - justifyContent: 'center', + flexDirection: 'row', + justifyContent: 'flex-start', alignItems: 'center', + marginRight: 10, + marginVertical: 5, }}> - - - - ))} - + + {colors.accent === item ? ( + + ) : null} + + + ))} + + + + + + Terms of Service + + + + + + Privacy Policy + + + + + + About Notes. + + - - - - Terms of Service - - - - - - Privacy Policy - - - - - - About Notes. - - ); }; diff --git a/apps/mobile/src/views/Signup/index.js b/apps/mobile/src/views/Signup/index.js index ddd6e0588..5bd6c7bda 100644 --- a/apps/mobile/src/views/Signup/index.js +++ b/apps/mobile/src/views/Signup/index.js @@ -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 ( - + { 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, diff --git a/apps/mobile/src/views/Tags/index.js b/apps/mobile/src/views/Tags/index.js index 4e9d9fee2..fa4d9ed3b 100644 --- a/apps/mobile/src/views/Tags/index.js +++ b/apps/mobile/src/views/Tags/index.js @@ -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 ( { const [colors, setColors] = useState(COLOR_SCHEME); + const forceUpdate = useForceUpdate(); + useEffect(() => { + onThemeUpdate(() => { + forceUpdate(); + }); + return () => { + clearThemeUpdateListener(() => { + forceUpdate(); + }); + }; + }, []); return ( - +