diff --git a/App.js b/App.js index 1eb6879..5474c15 100644 --- a/App.js +++ b/App.js @@ -7,16 +7,26 @@ */ import React, {useEffect} from 'react'; -import {Text} from 'react-native'; +import {StatusBar, Text} from 'react-native'; import RNBootSplash from 'react-native-bootsplash'; import {GestureHandlerRootView} from 'react-native-gesture-handler'; -import {Provider as PaperProvider, MD3DarkTheme} from 'react-native-paper'; +import { + Provider as PaperProvider, + MD3DarkTheme, + MD3LightTheme, +} from 'react-native-paper'; import {SafeAreaProvider} from 'react-native-safe-area-context'; import {Provider as StoreProvider} from 'react-redux'; +import PermissionsProvider from './js/components/PermissionsProvider'; import Router from './js/components/Router'; import {configureStore} from './js/redux/store'; -import {CustomDarkTheme, CustomLightTheme, CustomLightTheme1} from './themes'; +import { + CustomDarkTheme, + CustomLightTheme, + CustomLightTheme1, + _customLightTheme, +} from './themes'; const store = configureStore(); const theme2 = CustomLightTheme; @@ -27,7 +37,12 @@ const App = () => { }, []); return ( - + + diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 1f28930..2c871bb 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -2,6 +2,7 @@ package="com.notes"> + - #1C3879 + #FFF9F1 diff --git a/comment_template.txt b/comment_template.txt index 4ec7cd1..49b94fb 100644 --- a/comment_template.txt +++ b/comment_template.txt @@ -22,4 +22,6 @@ const _init = () =>{ } -// return \ No newline at end of file +// return + + diff --git a/constants.js b/constants.js index c8c0aab..1a55dac 100644 --- a/constants.js +++ b/constants.js @@ -60,6 +60,7 @@ export const CONSTANTS = Object.freeze({ FILTER: 'FILTER', MY_DAY: 'MY_DAY', CALENDAR: 'CALENDAR', + SEARCH: 'SEARCH', }, BOTTOM_TAB_BAR_ICONS: { Transactions: 'receipt-long', diff --git a/ios/Notes/BootSplash.storyboard b/ios/Notes/BootSplash.storyboard index dc6b670..e0f1dfc 100644 --- a/ios/Notes/BootSplash.storyboard +++ b/ios/Notes/BootSplash.storyboard @@ -17,14 +17,14 @@ - + - + @@ -40,6 +40,6 @@ - + diff --git a/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png b/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png index 1bc0b1b..3359f81 100644 Binary files a/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png and b/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png differ diff --git a/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@2x.png b/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@2x.png index 5b1743d..908ba60 100644 Binary files a/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@2x.png and b/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@2x.png differ diff --git a/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@3x.png b/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@3x.png index aa35c1c..258273c 100644 Binary files a/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@3x.png and b/ios/Notes/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@3x.png differ diff --git a/js/components/AppbarWithMonths.js b/js/components/AppbarWithMonths.js index 57e2d79..fe91681 100644 --- a/js/components/AppbarWithMonths.js +++ b/js/components/AppbarWithMonths.js @@ -97,9 +97,9 @@ const AppbarWithMonths = ({dispatch, sDate, eDate}) => { alignItems: 'center', }}> - {`${moment(sDate).format('MMMM').substring(0, 3)} ${moment( - sDate, - ).year()}`} + {`${moment(sDate) + .format('MMMM') + .substring(0, 3)} ${moment(sDate).year()}`} diff --git a/js/components/CalenderItemBottomSheet.js b/js/components/CalenderItemBottomSheet.js new file mode 100644 index 0000000..a2945a2 --- /dev/null +++ b/js/components/CalenderItemBottomSheet.js @@ -0,0 +1,148 @@ +import BottomSheet, { + BottomSheetBackdrop, + BottomSheetFlatList, +} from '@gorhom/bottom-sheet'; +import {Q} from '@nozbe/watermelondb'; +import withObservables from '@nozbe/with-observables'; +import moment from 'moment'; +import React, {useCallback, useEffect, useMemo, useRef} from 'react'; +import {StyleSheet} from 'react-native'; +import {Appbar, Divider, useTheme} from 'react-native-paper'; +import {CONSTANTS} from '../../constants'; +import {database} from '../db/db'; +import Task from '../db/models/Task'; +import TaskItem from './TaskItem'; + +const CalendarItemBottomSheet = ({ + tasks, + selectedDateInfo, + setSelectedDateInfo, +}) => { + // hooks + const sheetRef = useRef(null); + const theme = useTheme(); + // console.log({selectedDateInfo}); + + const snapPoints = useMemo(() => ['100%'], []); + + useEffect(() => { + if (!selectedDateInfo) { + _handleCloseFilterSheet(); + } else { + _handleOpenFilterSheet(0); + } + }, [selectedDateInfo, sheetRef]); + + // callbacks + const _handleSheetChange = useCallback(index => {}, []); + const _handleOpenFilterSheet = useCallback(index => { + sheetRef.current?.snapToIndex(index); + }, []); + const _handleCloseFilterSheet = useCallback(() => { + sheetRef.current?.close(); + }, []); + + const _renderBackdrop = useCallback( + props => ( + + ), + [], + ); + /** + * + * @param {object} param0 + * @param {Task} param0.item + * @returns + */ + const _renderTaskItem = ({item, drag, isActive}) => { + return ; + }; + + return ( + setSelectedDateInfo(null)} + onChange={_handleSheetChange}> + + { + setSelectedDateInfo(null); + }} + /> + + + + } + /> + + ); +}; +const enhanceSelectLabel = withObservables( + ['selectedDateInfo'], + ({selectedDateInfo}) => ({ + tasks: + selectedDateInfo && + selectedDateInfo.taskIDs && + Array.isArray(selectedDateInfo.taskIDs) + ? database.collections + .get('tasks') + .query(Q.where('id', Q.oneOf(selectedDateInfo.taskIDs))) + .observe() + : database.collections + .get('tasks') + .query(Q.where('id', Q.oneOf([]))) + .observe(), + }), +); +export const EnhancedCalendarItemBottomSheet = enhanceSelectLabel( + CalendarItemBottomSheet, +); +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: 200, + }, + + transaction_category_filter_title: { + width: '100%', + + color: CONSTANTS.COLORS.DARK_FONT, + fontWeight: '500', + fontSize: 16, + padding: 6, + borderBottomColor: CONSTANTS.COLORS.LIGHT_FONT, + borderBottomWidth: 1, + paddingHorizontal: 12, + }, + transaction_category_avatar_icon: { + borderRadius: 8, + padding: 16, + }, +}); diff --git a/js/components/IconSelectBottomSheet.js b/js/components/IconSelectBottomSheet.js index c5480e0..0a20b62 100644 --- a/js/components/IconSelectBottomSheet.js +++ b/js/components/IconSelectBottomSheet.js @@ -8,13 +8,13 @@ import { Appbar, Divider, Surface, - TouchableRipple, Text, + TouchableRipple, + useTheme, } from 'react-native-paper'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import {CONSTANTS} from '../../constants'; import {IconsData} from '../../icons'; -import {CustomLightTheme} from '../../themes'; export const IconSelectBottomSheet = ({ visible, @@ -24,6 +24,7 @@ export const IconSelectBottomSheet = ({ }) => { // hooks const sheetRef = useRef(null); + const theme = useTheme(); const snapPoints = useMemo(() => ['100%'], []); @@ -50,16 +51,15 @@ export const IconSelectBottomSheet = ({ {...props} appearsOnIndex={0} disappearsOnIndex={-1} - opacity={0.4} + opacity={1} /> ), [], ); const _renderIcons = ({item}) => ( { setSelectedIcon(item); @@ -72,7 +72,7 @@ export const IconSelectBottomSheet = ({ justifyContent: 'flex-start', alignItems: 'center', padding: 12, - backgroundColor: '#00000000', + // backgroundColor: '#00000000', }}> - + {item} @@ -118,14 +117,20 @@ export const IconSelectBottomSheet = ({ setVisible(false); }} /> - + i} renderItem={_renderIcons} - contentContainerStyle={styles.contentContainer} + style={{backgroundColor: theme.colors.surface}} + contentContainerStyle={{ + backgroundColor: theme.colors.surface, + }} ItemSeparatorComponent={() => } /> diff --git a/js/components/LabelItem.js b/js/components/LabelItem.js index 7e39489..66fd8ae 100644 --- a/js/components/LabelItem.js +++ b/js/components/LabelItem.js @@ -11,13 +11,13 @@ import {useNavigation} from '@react-navigation/native'; import React, {useState} from 'react'; import {StyleSheet, View} from 'react-native'; import Collapsible from 'react-native-collapsible'; -import {Menu, MenuItem} from 'react-native-material-menu'; import { Divider, IconButton, Text, TouchableRipple, useTheme, + Menu, } from 'react-native-paper'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import {CONSTANTS} from '../../constants'; @@ -31,7 +31,7 @@ import {EnhancedNoteItem} from './NoteItem'; * @param {Label} param0.label * @returns */ -const LabelItem = ({label, notes, handleDeleteLabel}) => { +const LabelItem = ({label, notes, handleDeleteLabel, handleUnGroupLabel}) => { // ref // variables @@ -55,17 +55,6 @@ const LabelItem = ({label, notes, handleDeleteLabel}) => { // callbacks // render functions - const _renderMenu = () => { - return ( - - Delete label - Edit label - - Ungroup label - - - ); - }; // handle functions const _handleOpenDeleteLabelDialog = () => { @@ -83,6 +72,10 @@ const LabelItem = ({label, notes, handleDeleteLabel}) => { setIsMenuOpen(false); setIsDeleteDialogOpen(false); }; + const _handleUnGroupLabel = () => { + handleUnGroupLabel(label.id); + setIsMenuOpen(false); + }; const _navigateToEditLabelScreen = () => { setIsMenuOpen(false); navigation?.navigate(CONSTANTS.ROUTES.EDIT_LABEL, { @@ -139,7 +132,10 @@ const LabelItem = ({label, notes, handleDeleteLabel}) => { color={theme.colors.onSurface} /> } - {label?.title} + + {label?.title} + { justifyContent: 'flex-end', alignItems: 'center', }}> - {!collapsed && ( - + ) + }> + - )} - {_renderMenu()} + + + + {/* {_renderMenu()} */} { /> + + {notes.map((note, index) => { return ; })} + - ); diff --git a/js/components/LabelSelectBottomSheet.js b/js/components/LabelSelectBottomSheet.js index 5bb31b9..f6a3da3 100644 --- a/js/components/LabelSelectBottomSheet.js +++ b/js/components/LabelSelectBottomSheet.js @@ -11,10 +11,10 @@ import { Surface, TouchableRipple, Text, + useTheme, } from 'react-native-paper'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import {CONSTANTS} from '../../constants'; -import {CustomLightTheme} from '../../themes'; import {database} from '../db/db'; import Label from '../db/models/Label'; @@ -27,6 +27,7 @@ const LabelSelectBottomSheet = ({ }) => { // hooks const sheetRef = useRef(null); + const theme = useTheme(); const snapPoints = useMemo(() => ['100%'], []); @@ -67,9 +68,8 @@ const LabelSelectBottomSheet = ({ const _renderLabels = ({item, index}) => ( { setSelectedLabel(item); @@ -90,8 +90,8 @@ const LabelSelectBottomSheet = ({ { backgroundColor: item === selectedLabel - ? CustomLightTheme.colors.onPrimary - : CustomLightTheme.colors.surfaceVariant, + ? theme.colors.primary + : theme.colors.surfaceVariant, }, ]}> + variant="bodyMedium" + style={[ + {marginLeft: 20, color: theme.colors.onSurface, fontWeight: '700'}, + ]}> {item.title} @@ -114,12 +117,18 @@ const LabelSelectBottomSheet = ({ return ( setVisible(false)} onChange={_handleSheetChange}> @@ -128,13 +137,17 @@ const LabelSelectBottomSheet = ({ setVisible(false); }} /> - + } /> @@ -151,18 +164,7 @@ const styles = StyleSheet.create({ flex: 1, paddingTop: 200, }, - contentContainer: { - backgroundColor: 'white', - }, - transaction_category_item_container: { - padding: 6, - backgroundColor: CONSTANTS.COLORS.WHITE, - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - borderTopColor: CONSTANTS.COLORS.LIGHT_FONT, - borderTopWidth: 1, - }, + transaction_category_filter_title: { width: '100%', @@ -175,9 +177,6 @@ const styles = StyleSheet.create({ paddingHorizontal: 12, }, transaction_category_avatar_icon: { - borderColor: CONSTANTS.COLORS.LIGHT_FONT, - backgroundColor: CONSTANTS.COLORS.LIGHT_100, - borderRadius: 8, padding: 16, }, diff --git a/js/components/NoteItem.js b/js/components/NoteItem.js index 9cb66ab..11e08f6 100644 --- a/js/components/NoteItem.js +++ b/js/components/NoteItem.js @@ -8,21 +8,12 @@ import withObservables from '@nozbe/with-observables'; import {useNavigation} from '@react-navigation/native'; -import React, {useState} from 'react'; -import {Pressable, StyleSheet, TouchableHighlight, View} from 'react-native'; -import Collapsible from 'react-native-collapsible'; -import {Menu, MenuItem} from 'react-native-material-menu'; -import { - Divider, - IconButton, - Text, - TouchableRipple, - useTheme, -} from 'react-native-paper'; +import React from 'react'; +import {StyleSheet, View} from 'react-native'; +import {Text, TouchableRipple, useTheme} from 'react-native-paper'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import {CONSTANTS} from '../../constants'; import Note from '../db/models/Note'; -import {DeleteConfirmationDialog} from './DeleteConfirmationDialog'; /** * @@ -73,7 +64,7 @@ const NoteItem = ({note, tasksCount, handleDeleteNote}) => { paddingVertical: 14, borderLeftColor: note && note.colorString ? note.colorString : theme.colors.error, - borderLeftWidth: 3, + borderLeftWidth: 5, }} onPress={_navigateToNoteScreen}> { + useEffect(() => { + console.log('PermissionStatusProvider', {calendarPermissionState}); + }, [calendarPermissionState]); + return ( + + {isCheckingContactsPermission ? ( + Loading... + ) : !calendarPermissionState ? ( + No permission + ) : ( + children + )} + + ); +}; + +const mapStateToProps = state => { + return { + isCheckingCalendarPermission: state.permission.isCheckingCalendarPermission, + calendarPermissionState: state.permission.calendarPermissionState, + }; +}; +export default connect(mapStateToProps)(PermissionStatusProvider); diff --git a/js/components/Router.js b/js/components/Router.js index 673a497..953e4dd 100644 --- a/js/components/Router.js +++ b/js/components/Router.js @@ -9,7 +9,6 @@ import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; import RNBootSplash from 'react-native-bootsplash'; import {connect} from 'react-redux'; import Home from '../screens/Home'; -import {CustomLightTheme} from '../../themes'; import {CONSTANTS} from '../../constants'; import CreateNewLabelScreen from '../screens/CreateNewLabelScreen'; import {useTheme} from 'react-native-paper'; @@ -21,6 +20,9 @@ import DayScreen from '../screens/DayScreen'; import BookmarkScreen from '../screens/BookmarkScreen'; import TaskScreen from '../screens/TaskScreen'; import CalendarScreen from '../screens/CalendarScreen'; +import {useEffect} from 'react'; +import PermissionsProvider from './PermissionsProvider'; +import {SearchScreen} from '../screens/SearchScreen'; const Stack = createStackNavigator(); @@ -33,6 +35,7 @@ const Router = () => { // states // effects + useEffect(() => {}, []); // callbacks @@ -46,64 +49,71 @@ const Router = () => { // return return ( - RNBootSplash.hide()}> - - - - - - - - - - - - - + + RNBootSplash.hide()}> + + + + + + + + + + + + + + + ); }; diff --git a/js/components/TaskInput.js b/js/components/TaskInput.js index cc280d7..9319bdd 100644 --- a/js/components/TaskInput.js +++ b/js/components/TaskInput.js @@ -8,7 +8,7 @@ import { Chip, } from 'react-native-paper'; import {connect} from 'react-redux'; - +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import BottomSheet, { BottomSheetBackdrop, BottomSheetFlatList, @@ -200,6 +200,7 @@ const TaskInput = ({ onCancel={_handleCloseReminderDateTimePicker} /> ( + + )} onPress={_handleOpenDueDateTimePicker} - style={{marginRight: 12}}> + textStyle={{color: theme.colors.onPrimary}} + style={{marginRight: 12, backgroundColor: theme.colors.primary}}> {dueDateString} ( + + )} onPress={_handleOpenReminderDateTimePicker} - style={{marginRight: 12}}> + textStyle={{color: theme.colors.onPrimary}} + style={{marginRight: 12, backgroundColor: theme.colors.primary}}> {reminderDateString} diff --git a/js/components/TaskItem.js b/js/components/TaskItem.js index efd7400..faed6e7 100644 --- a/js/components/TaskItem.js +++ b/js/components/TaskItem.js @@ -1,6 +1,6 @@ import Task from '../db/models/Task'; import React from 'react'; -import {Card, IconButton, Paragraph} from 'react-native-paper'; +import {Card, IconButton, Paragraph, useTheme} from 'react-native-paper'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import withObservables from '@nozbe/with-observables'; import moment from 'moment'; @@ -19,6 +19,7 @@ const TaskItem = ({task, onLongPress, noteColor, isActive, dispatch}) => { // variables const navigation = useNavigation(); + const theme = useTheme(); // states @@ -48,13 +49,31 @@ const TaskItem = ({task, onLongPress, noteColor, isActive, dispatch}) => { // misc functions const _init = () => {}; const _onDestroy = () => {}; + const _isDue = () => { + return ( + task.endTimestamp && + new Date(task.endTimestamp) < new Date() && + !task.isDone + ); + }; // return return ( { console.log('long pressed'); @@ -62,7 +81,10 @@ const TaskItem = ({task, onLongPress, noteColor, isActive, dispatch}) => { }}> ( { /> )} /> - {task.isDone && ( + + {task.isDone ? ( {`Marked done ${moment(task.doneTimestamp) .calendar() .toLowerCase()}`} + ) : ( + _isDue() && ( + + {`Due on ${moment(task.endTimestamp) + .calendar() + .toLowerCase()}`} + + ) )} ); diff --git a/js/redux/actions/label.js b/js/redux/actions/label.js index ab455e6..327df73 100644 --- a/js/redux/actions/label.js +++ b/js/redux/actions/label.js @@ -103,6 +103,31 @@ export const editLabel = dispatch(editLabelState({loading: false, success: true, error})); } }; +export const unGroupLabel = + ({id}) => + async dispatch => { + dispatch(editLabelState({loading: true, success: false, error: null})); + try { + const notesToBeDetached = await database + .get('notes') + .query(Q.where('label_id', id)) + .fetch(); + const batchUpdateRecords = notesToBeDetached.map(note => { + return note.prepareUpdate(n => { + n.labelID = ''; + }); + }); + database.write(async () => { + database.batch(...batchUpdateRecords); + }); + + dispatch(editLabelState({loading: false, success: true, error: null})); + Logger.pageLogger('unGroupLabel : success'); + } catch (error) { + Logger.pageLogger('unGroupLabel : error', error); + dispatch(editLabelState({loading: false, success: true, error})); + } + }; export const deleteLabel = ({id}) => diff --git a/js/redux/actions/permission.js b/js/redux/actions/permission.js index 5bf8723..a56389a 100644 --- a/js/redux/actions/permission.js +++ b/js/redux/actions/permission.js @@ -8,6 +8,8 @@ import { export const CHECK_CONTACTS_PERMISSION_STATE_CHANGE = 'CHECK_CONTACTS_PERMISSION_STATE_CHANGE'; +export const CHECK_CALENDAR_PERMISSION_STATE_CHANGE = + 'CHECK_CALENDAR_PERMISSION_STATE_CHANGE'; const checkContactsPermissionState = ( isCheckingContactsPermission, @@ -24,22 +26,54 @@ const checkContactsPermissionState = ( }; }; +const checkCalendarPermissionState = ( + isCheckingCalendarPermission, + calendarPermissionState, +) => { + return { + type: CHECK_CALENDAR_PERMISSION_STATE_CHANGE, + isCheckingCalendarPermission, + calendarPermissionState, + }; +}; + const checkContactsPermission = async () => { let result; let permission; if (Platform.OS === 'ios') { result = await checkMultiple([PERMISSIONS.IOS.CONTACTS]); - Logger.pageLogger('checkLocationPermission', {result}); + permission = result['ios.permission.CONTACTS'] === RESULTS.GRANTED; } else if (Platform.OS === 'android') { result = await checkMultiple([PERMISSIONS.ANDROID.READ_CONTACTS]); - Logger.pageLogger('checkLocationPermission', {result}); + permission = result['android.permission.READ_CONTACTS'] === RESULTS.GRANTED; } return permission; }; +const checkCalendarPermission = async () => { + let result; + let permission; + if (Platform.OS === 'ios') { + result = await checkMultiple([PERMISSIONS.IOS.CALENDARS]); + + permission = result['ios.permission.CALENDARS'] === RESULTS.GRANTED; + } else if (Platform.OS === 'android') { + result = await checkMultiple([ + PERMISSIONS.ANDROID.WRITE_CALENDAR, + PERMISSIONS.ANDROID.READ_CALENDAR, + ]); + + permission = + result['android.permission.READ_CALENDAR'] === RESULTS.GRANTED && + result['android.permission.WRITE_CALENDAR'] === RESULTS.GRANTED; + } + + return permission; +}; + export const handleContactsPermissionUsingLibrary = () => async dispatch => { dispatch(checkContactsPermissionState(true, null)); let permission = await checkContactsPermission(); @@ -61,3 +95,26 @@ export const handleContactsPermissionUsingLibrary = () => async dispatch => { } dispatch(checkContactsPermissionState(false, permission)); }; + +export const handleCalendarPermissionUsingLibrary = () => async dispatch => { + dispatch(checkCalendarPermissionState(true, null)); + let permission = await checkCalendarPermission(); + + if (!permission) { + if (Platform.OS === 'ios') { + requestMultiple([PERMISSIONS.IOS.CALENDARS]).then(async result => { + permission = await checkCalendarPermission(); + dispatch(checkCalendarPermissionState(false, permission)); + }); + } else if (Platform.OS === 'android') { + requestMultiple([ + PERMISSIONS.ANDROID.WRITE_CALENDAR, + PERMISSIONS.ANDROID.READ_CALENDAR, + ]).then(async result => { + permission = await checkCalendarPermission(); + dispatch(checkCalendarPermissionState(false, permission)); + }); + } + } + dispatch(checkCalendarPermissionState(false, permission)); +}; diff --git a/js/redux/actions/task.js b/js/redux/actions/task.js index ef09622..9d05b5f 100644 --- a/js/redux/actions/task.js +++ b/js/redux/actions/task.js @@ -5,6 +5,7 @@ import {setEndDate, setStartDate} from './timeFrame'; import {currentEndDate, currentStartDate, getWeek} from '../../utils/dateTime'; import Task from '../../db/models/Task'; import {CONSTANTS} from '../../../constants'; +import ReactNativeCalendarEvents from 'react-native-calendar-events'; export const GET_TASKS = 'GET_TASKS'; export const CREATE_TASK_STATE = 'CREATE_TASK_STATE'; @@ -121,6 +122,24 @@ export const getTaskByID = async id => { } }; +/** + * + * @param {string} id + * @returns {Promise>} + */ +export const getTaskByQuery = async query => { + try { + const t = await database.collections + .get('tasks') + .query(Q.where('title', Q.like(`%${Q.sanitizeLikeString(query)}%`))) + .fetch(); + return t; + } catch (error) { + console.log({error}); + return null; + } +}; + export const createTask = ({ title, @@ -431,3 +450,15 @@ export const deleteMultipleTasks = ); } }; + +export const addTaskToCalendar = async ({calendarID, taskID}) => { + const task = await database.collections.get('tasks').find(taskID); + const startDate = new Date(task.createdAt).toISOString(); + const endDate = new Date(task.end_timestamp).toISOString(); + console.log({startDate, endDate}); + // return ReactNativeCalendarEvents.saveEvent(task.title, { + // calendarId: calendarID, + // startDate, + // endDate, + // }); +}; diff --git a/js/redux/reducers/permission.js b/js/redux/reducers/permission.js index ee60fdc..1a66f2b 100644 --- a/js/redux/reducers/permission.js +++ b/js/redux/reducers/permission.js @@ -1,9 +1,15 @@ -import {CHECK_CONTACTS_PERMISSION_STATE_CHANGE} from '../actions'; +import { + CHECK_CONTACTS_PERMISSION_STATE_CHANGE, + CHECK_CALENDAR_PERMISSION_STATE_CHANGE, +} from '../actions'; export default ( state = { isCheckingContactsPermission: false, contactsPermissionState: null, + + isCheckingCalendarPermission: false, + calendarPermissionState: null, }, action, ) => { @@ -14,6 +20,13 @@ export default ( isCheckingContactsPermission: action.isCheckingContactsPermission, contactsPermissionState: action.contactsPermissionState, }; + + case CHECK_CALENDAR_PERMISSION_STATE_CHANGE: + return { + ...state, + isCheckingCalendarPermission: action.isCheckingCalendarPermission, + calendarPermissionState: action.calendarPermissionState, + }; default: return state; } diff --git a/js/redux/store.js b/js/redux/store.js index 19f7676..07ee8dd 100644 --- a/js/redux/store.js +++ b/js/redux/store.js @@ -1,5 +1,5 @@ import {applyMiddleware, compose, createStore} from 'redux'; -import {} from './actions'; +import {handleCalendarPermissionUsingLibrary} from './actions'; import rootReducer from './reducers'; import thunkMiddleware from 'redux-thunk'; @@ -7,6 +7,6 @@ import thunkMiddleware from 'redux-thunk'; const enhancers = [applyMiddleware(thunkMiddleware)]; export const configureStore = persistedState => { const store = createStore(rootReducer, persistedState, compose(...enhancers)); - + store.dispatch(handleCalendarPermissionUsingLibrary()); return store; }; diff --git a/js/screens/BookmarkScreen.js b/js/screens/BookmarkScreen.js index 69ddf06..6c4e73f 100644 --- a/js/screens/BookmarkScreen.js +++ b/js/screens/BookmarkScreen.js @@ -1,42 +1,15 @@ -import withObservables from '@nozbe/with-observables'; import {Q} from '@nozbe/watermelondb'; +import withObservables from '@nozbe/with-observables'; import {useFocusEffect, useTheme} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; import {FlatList, SafeAreaView, StyleSheet} from 'react-native'; -// import Menu from 'react-native-material-menu'; -// import Menu, {MenuItem} from 'react-native-material-menu'; -import DraggableFlatList, { - ScaleDecorator, -} from 'react-native-draggable-flatlist'; -import {MenuDivider} from 'react-native-material-menu'; -import { - Appbar, - Surface, - Text, - Menu, - Divider, - Button, - FAB, - Card, - IconButton, - Avatar, - RadioButton, -} from 'react-native-paper'; + +import {Appbar, Menu} from 'react-native-paper'; import {connect} from 'react-redux'; -import {DeleteConfirmationDialog} from '../components/DeleteConfirmationDialog'; -import TaskInput from '../components/TaskInput'; +import TaskItem from '../components/TaskItem'; import {database} from '../db/db'; -import Note from '../db/models/Note'; -import { - deleteNote, - editTaskIsBookmark, - editTaskIsDone, - resetDeleteNoteState, -} from '../redux/actions'; import Task from '../db/models/Task'; -import TaskItem from '../components/TaskItem'; -import {CONSTANTS} from '../../constants'; -import moment from 'moment'; +import {resetDeleteNoteState} from '../redux/actions'; /** * @@ -100,10 +73,13 @@ const BookmarkScreen = ({navigation, tasks, deleteNoteSuccess, dispatch}) => { // return return ( - + style={{ + ...StyleSheet.absoluteFillObject, + backgroundColor: theme.colors.surface, + }}> + - + { +import {datesArray} from '../utils/dateTime'; +import {EnhancedCalendarItemBottomSheet} from '../components/CalenderItemBottomSheet'; + +const CalenderCellItem = ({date, tasks, handleOpenCalenderItem}) => { const theme = useTheme(); - const _s = new Date(date); - _s.setHours(0); - _s.setMinutes(0); - _s.setSeconds(0); - _s.setMilliseconds(0); + + const _handleOpenCalenderItem = () => { + const taskIDs = tasks?.map(v => { + return v.id; + }); + + if (Array.isArray(taskIDs) && taskIDs.length > 0) { + handleOpenCalenderItem({date, taskIDs}); + } + }; return ( - - {!String(date).includes('null') && ( - {moment(date).date()} - )} - {tasks && ( - - {tasks.map(task => { - return ( - - ); - })} - - )} - + + {!String(date).includes('null') && moment(date).isValid() && ( + + {moment(date).date()} + + )} + {tasks && ( + + {tasks.map(task => { + return ( + + ); + })} + + )} + + ); }; @@ -89,9 +100,8 @@ const CalenderCellItem = ({date, tasks}) => { * @returns */ const CalendarScreen = ({tasks, sDate, eDate}) => { - // const [items, setItems] = useState([]); - const [dates, setDates] = useState({}); - const fadeAnim = useRef(new Animated.Value(0)).current; + const theme = useTheme(); + const [selectedDateInfo, setSelectedDateInfo] = useState(false); const items = useMemo(() => { var datesOfMonth = calendarize(sDate).flat(); @@ -155,44 +165,59 @@ const CalendarScreen = ({tasks, sDate, eDate}) => { return items; }, [tasks, sDate]); - const _fadeIn = () => { - // Will change fadeAnim value to 1 in 5 seconds - Animated.timing(fadeAnim, { - toValue: 1, - duration: 2000, - useNativeDriver: true, - }).start(); + const _handleOpenCalenderItem = ({date, taskIDs}) => { + setSelectedDateInfo({date, taskIDs}); }; - const _fadeOut = () => { - // Will change fadeAnim value to 0 in 3 seconds - Animated.timing(fadeAnim, { - toValue: 0, - useNativeDriver: true, - duration: 100, - }).start(); - }; - return ( - + - {item}} - maxItemsPerRow={7} - /> + + {moment.weekdaysShort().map((day, index) => { + return ( + + {day} + + ); + })} + ( - + )} maxItemsPerRow={7} /> + ); }; diff --git a/js/screens/CreateNewLabelScreen.js b/js/screens/CreateNewLabelScreen.js index cbf53d8..0c61dbe 100644 --- a/js/screens/CreateNewLabelScreen.js +++ b/js/screens/CreateNewLabelScreen.js @@ -1,12 +1,13 @@ import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; -import {SafeAreaView, StyleSheet} from 'react-native'; +import {useRef} from 'react'; +import {SafeAreaView, StyleSheet, View} from 'react-native'; import { Appbar, Button, + IconButton, Surface, TextInput, - IconButton, useTheme, } from 'react-native-paper'; import {connect} from 'react-redux'; @@ -20,6 +21,7 @@ const CreateNewLabelScreen = ({ createLabelFailure, }) => { // ref + const titleRef = useRef(); // variables const theme = useTheme(); @@ -74,24 +76,39 @@ const CreateNewLabelScreen = ({ // return return ( - + - + - + diff --git a/js/screens/NoteScreen.js b/js/screens/NoteScreen.js index f57a892..019998c 100644 --- a/js/screens/NoteScreen.js +++ b/js/screens/NoteScreen.js @@ -1,41 +1,21 @@ -import withObservables from '@nozbe/with-observables'; import {Q} from '@nozbe/watermelondb'; -import {useFocusEffect, useTheme} from '@react-navigation/native'; +import withObservables from '@nozbe/with-observables'; +import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; -import {FlatList, SafeAreaView, StyleSheet} from 'react-native'; -// import Menu from 'react-native-material-menu'; -// import Menu, {MenuItem} from 'react-native-material-menu'; +import {SafeAreaView, StyleSheet} from 'react-native'; import DraggableFlatList, { ScaleDecorator, } from 'react-native-draggable-flatlist'; -import {MenuDivider} from 'react-native-material-menu'; -import { - Appbar, - Surface, - Text, - Menu, - Divider, - Button, - FAB, - Card, - IconButton, - Avatar, - RadioButton, -} from 'react-native-paper'; +import {Appbar, FAB, Menu, useTheme} from 'react-native-paper'; import {connect} from 'react-redux'; +import {CONSTANTS} from '../../constants'; import {DeleteConfirmationDialog} from '../components/DeleteConfirmationDialog'; import TaskInput from '../components/TaskInput'; +import TaskItem from '../components/TaskItem'; import {database} from '../db/db'; import Note from '../db/models/Note'; -import { - deleteNote, - editTaskIsBookmark, - editTaskIsDone, - resetDeleteNoteState, -} from '../redux/actions'; import Task from '../db/models/Task'; -import TaskItem from '../components/TaskItem'; -import {CONSTANTS} from '../../constants'; +import {deleteNote, resetDeleteNoteState} from '../redux/actions'; /** * @@ -140,14 +120,14 @@ const NoteScreen = ({ // return return ( - + - + @@ -191,8 +171,10 @@ const NoteScreen = ({ margin: 16, right: 0, bottom: 0, - backgroundColor: theme.colors.surface, + // backgroundColor: theme.colors.surface, + backgroundColor: note?.colorString, }} + color={theme.colors.surface} onPress={_handleOpenTaskInput} /> { + // ref + + // variables + const theme = useTheme(); + + // states + const [query, setQuery] = useState(''); + const [tasks, setTasks] = useState([]); + + // effects + useFocusEffect( + useCallback(() => { + _init(); + return _onDestroy; + }, []), + ); + + useEffect(() => { + if (query === '' || !query || query === undefined) { + return; + } else { + getTaskByQuery(query).then(value => { + setTasks(value); + }); + } + }, [query]); + + // callbacks + + // render functions + /** + * + * @param {object} param0 + * @param {Task} param0.item + * @returns + */ + const _renderTaskItem = ({item, drag, isActive}) => { + return ; + }; + + // handle functions + + // navigation functions + const _navigateBack = () => { + navigation?.pop(); + }; + + // misc functions + const _init = () => {}; + const _onDestroy = () => {}; + + // return + return ( + + + + + + + {/* */} + + ); +}; + +const styles = new StyleSheet.create({ + main: { + ...StyleSheet.absoluteFillObject, + }, + container: { + width: '100%', + padding: 12, + flexDirection: 'column', + justifyContent: 'flex-start', + alignItems: 'stretch', + }, +}); diff --git a/js/screens/TaskScreen.js b/js/screens/TaskScreen.js index ea9ee65..83025da 100644 --- a/js/screens/TaskScreen.js +++ b/js/screens/TaskScreen.js @@ -1,7 +1,15 @@ import withObservables from '@nozbe/with-observables'; import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; -import {SafeAreaView, ScrollView, StyleSheet, View} from 'react-native'; +import { + Alert, + SafeAreaView, + ScrollView, + StatusBar, + StyleSheet, + ToastAndroid, + View, +} from 'react-native'; import moment from 'moment'; import { Appbar, @@ -21,6 +29,7 @@ import {DeleteConfirmationDialog} from '../components/DeleteConfirmationDialog'; import {database} from '../db/db'; import Task from '../db/models/Task'; import { + addTaskToCalendar, deleteTask, editTaskEndTimestamp, editTaskIsBookmark, @@ -30,6 +39,9 @@ import { resetDeleteTaskState, } from '../redux/actions'; import DatePicker from 'react-native-date-picker'; +import ReactNativeCalendarEvents from 'react-native-calendar-events'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; +const BOTTOM_APPBAR_HEIGHT = 64; /** * * @param {object} param0 @@ -41,6 +53,7 @@ const TaskScreen = ({navigation, task, deleteTaskSuccess, dispatch}) => { // variables const theme = useTheme(); + const {bottom} = useSafeAreaInsets(); // states const [isMenuOpen, setIsMenuOpen] = useState(false); @@ -68,6 +81,14 @@ const TaskScreen = ({navigation, task, deleteTaskSuccess, dispatch}) => { } }, [deleteTaskSuccess]); + useEffect(() => { + if (_isDue()) { + StatusBar.setBackgroundColor(theme.colors.errorContainer); + } else { + StatusBar.setBackgroundColor(theme.colors.surface); + } + }, [task, task.isDone]); + useEffect(() => { if (task) { setTitle(task.title); @@ -143,6 +164,25 @@ const TaskScreen = ({navigation, task, deleteTaskSuccess, dispatch}) => { const _handleCloseReminderDateTimePicker = () => { setIsReminderDateTimePickerVisible(false); }; + const _handleAddToCalendar = () => { + const startDate = new Date(task.createdAt).getMilliseconds(); + const endDate = new Date(task.endTimestamp).getMilliseconds(); + console.log({startDate, endDate}); + ReactNativeCalendarEvents.saveEvent(task.title, { + calendarId: '1', + startDate, + endDate, + }) + .then(result => { + ToastAndroid.show('Event added'); + }) + .catch(error => { + ToastAndroid.show('Event cannot be added'); + }); + // addTaskToCalendar({calendarID: 1, taskID: task.id}) + + // }; + }; // navigation functions const _navigateBack = () => { @@ -152,12 +192,21 @@ const TaskScreen = ({navigation, task, deleteTaskSuccess, dispatch}) => { // misc functions const _init = () => {}; const _onDestroy = () => { + StatusBar.setBackgroundColor(theme.colors.surface); dispatch(resetDeleteTaskState()); }; + const _isDue = () => { + const _v = + task.endTimestamp && + new Date(task.endTimestamp) < new Date() && + !task.isDone; + return _v; + }; // return return ( - + { onConfirm={_handleOnReminderDateTimeChange} onCancel={_handleCloseReminderDateTimePicker} /> - + - + } /> {/* */} @@ -269,7 +338,7 @@ const TaskScreen = ({navigation, task, deleteTaskSuccess, dispatch}) => { - { + */} + + + + + Add to device calendar + + - + + + + + + {/* - Created {moment(task.createdAt).calendar()} + Created {moment(task.createdAt).calendar().toLowerCase()} { /> - + */} ); }; @@ -343,6 +471,14 @@ const styles = new StyleSheet.create({ main: { ...StyleSheet.absoluteFillObject, }, + bottom: { + backgroundColor: 'aquamarine', + position: 'absolute', + left: 0, + right: 0, + bottom: 0, + justifyContent: 'space-between', + }, container: { width: '100%', padding: 12, diff --git a/package-lock.json b/package-lock.json index 70f45f9..3214247 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "react": "18.0.0", "react-native": "0.69.5", "react-native-bootsplash": "^4.3.2", + "react-native-calendar-events": "^2.2.0", "react-native-collapsible": "^1.6.0", "react-native-date-picker": "^4.2.5", "react-native-draggable-flatlist": "^3.1.2", @@ -13525,6 +13526,14 @@ "node": ">= 10.0.0" } }, + "node_modules/react-native-calendar-events": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-native-calendar-events/-/react-native-calendar-events-2.2.0.tgz", + "integrity": "sha512-tNUbhT6Ief0JM4OQzQAaz1ri0+MCcAoHptBcEXCz2g7q3A05pg62PR2Dio4F9t2fCAD7Y2+QggdY1ycAsF3Tsg==", + "peerDependencies": { + "react-native": ">=0.60.0" + } + }, "node_modules/react-native-codegen": { "version": "0.69.2", "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.69.2.tgz", @@ -26690,6 +26699,12 @@ } } }, + "react-native-calendar-events": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-native-calendar-events/-/react-native-calendar-events-2.2.0.tgz", + "integrity": "sha512-tNUbhT6Ief0JM4OQzQAaz1ri0+MCcAoHptBcEXCz2g7q3A05pg62PR2Dio4F9t2fCAD7Y2+QggdY1ycAsF3Tsg==", + "requires": {} + }, "react-native-codegen": { "version": "0.69.2", "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.69.2.tgz", diff --git a/package.json b/package.json index 269917d..2a74137 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react": "18.0.0", "react-native": "0.69.5", "react-native-bootsplash": "^4.3.2", + "react-native-calendar-events": "^2.2.0", "react-native-collapsible": "^1.6.0", "react-native-date-picker": "^4.2.5", "react-native-draggable-flatlist": "^3.1.2", diff --git a/themes.js b/themes.js index 2228e19..8dbd9dc 100644 --- a/themes.js +++ b/themes.js @@ -1,4 +1,4 @@ -const DefaultDarkTheme = { +const _darkTheme = { animation: {scale: 1}, colors: { backdrop: 'rgba(50, 47, 55, 0.4)', @@ -153,52 +153,51 @@ const DefaultDarkTheme = { version: 3, }; -export const CustomLightTheme = { - animation: {scale: 1}, +const _lightTheme = { + animation: { + scale: 1, + }, colors: { backdrop: 'rgba(50, 47, 55, 0.4)', - background: 'rgba(28, 27, 31, 1)', + background: 'rgba(255, 251, 254, 1)', elevation: { level0: 'transparent', - level1: '#25232a', - level2: 'rgba(28, 27, 31, 1)', - level3: 'rgb(56, 39, 81)', - level4: 'rgb(51, 46, 58)', - level5: 'rgb(52, 49, 63)', + level1: 'rgb(247, 243, 249)', + level2: 'rgb(243, 237, 246)', + level3: 'rgb(238, 232, 244)', + level4: 'rgb(236, 230, 243)', + level5: 'rgb(233, 227, 241)', }, - error: 'rgba(214, 115, 110, 1)', - errorContainer: 'rgba(54, 22, 22, 1)', - successContainer: 'rgba(35, 26, 60, 1)', - success: '#c6b6f4ff', - inverseOnSurface: '#25232a', - inversePrimary: 'rgba(103, 80, 164, 1)', - inverseSurface: 'rgba(230, 225, 229, 1)', - onBackground: 'rgba(230, 225, 229, 1)', - onError: 'rgba(96, 20, 16, 1)', - onErrorContainer: 'rgba(242, 184, 181, 1)', - onPrimary: 'rgba(237, 229, 255, 1)', - onPrimaryContainer: 'rgba(234, 221, 255, 1)', - onSecondary: 'rgba(51, 45, 65, 1)', - onSecondaryContainer: 'rgba(232, 222, 248, 1)', - onSurface: 'rgba(230, 225, 229, 1)', - onSurfaceDisabled: 'rgba(230, 225, 229, 0.38)', - onSurfaceVariant: 'rgba(202, 196, 208, 1)', - onTertiary: 'rgba(73, 37, 50, 1)', - onTertiaryContainer: 'rgba(255, 216, 228, 1)', - outline: 'rgba(147, 143, 153, 1)', - primary: 'rgba(106, 75, 183, 1)', - primaryContainer: 'rgba(74, 62, 106, 1)', - secondary: 'rgba(204, 194, 220, 1)', - secondaryContainer: 'rgba(73, 56, 111, 1)', - surface: '#1c1b1fff', - surfaceDisabled: 'rgba(230, 225, 229, 0.12)', - surfaceVariant: 'rgba(73, 69, 79, 1)', - tertiary: 'rgba(239, 184, 200, 1)', - tertiaryContainer: 'rgba(99, 59, 72, 1)', + error: 'rgba(179, 38, 30, 1)', + errorContainer: 'rgba(249, 222, 220, 1)', + inverseOnSurface: 'rgba(244, 239, 244, 1)', + inversePrimary: 'rgba(208, 188, 255, 1)', + inverseSurface: 'rgba(49, 48, 51, 1)', + onBackground: 'rgba(28, 27, 31, 1)', + onError: 'rgba(255, 255, 255, 1)', + onErrorContainer: 'rgba(65, 14, 11, 1)', + onPrimary: 'rgba(255, 255, 255, 1)', + onPrimaryContainer: 'rgba(33, 0, 93, 1)', + onSecondary: 'rgba(255, 255, 255, 1)', + onSecondaryContainer: 'rgba(29, 25, 43, 1)', + onSurface: 'rgba(28, 27, 31, 1)', + onSurfaceDisabled: 'rgba(28, 27, 31, 0.38)', + onSurfaceVariant: 'rgba(73, 69, 79, 1)', + onTertiary: 'rgba(255, 255, 255, 1)', + onTertiaryContainer: 'rgba(49, 17, 29, 1)', + outline: 'rgba(121, 116, 126, 1)', + primary: 'rgba(103, 80, 164, 1)', + primaryContainer: 'rgba(234, 221, 255, 1)', + secondary: 'rgba(98, 91, 113, 1)', + secondaryContainer: 'rgba(232, 222, 248, 1)', + surface: 'rgba(255, 251, 254, 1)', + surfaceDisabled: 'rgba(28, 27, 31, 0.12)', + surfaceVariant: 'rgba(231, 224, 236, 1)', + tertiary: 'rgba(125, 82, 96, 1)', + tertiaryContainer: 'rgba(255, 216, 228, 1)', }, - dark: true, + dark: false, isV3: true, - mode: 'adaptive', roundness: 4, typescale: { bodyLarge: { @@ -310,51 +309,52 @@ export const CustomLightTheme = { version: 3, }; -export const CustomDarkTheme = { - animation: {scale: 1}, +export const _customLightTheme = { + animation: { + scale: 1, + }, colors: { backdrop: 'rgba(50, 47, 55, 0.4)', - background: 'rgba(28, 27, 31, 1)', + background: '#fff9f1', elevation: { level0: 'transparent', - level1: 'rgb(37, 35, 42)', - level2: 'rgb(44, 40, 49)', - level3: 'rgb(49, 44, 56)', - level4: 'rgb(51, 46, 58)', - level5: 'rgb(52, 49, 63)', + level1: 'rgb(247, 243, 249)', + level2: 'rgb(243, 237, 246)', + level3: 'rgb(238, 232, 244)', + level4: 'rgb(236, 230, 243)', + level5: 'rgb(233, 227, 241)', }, - error: 'rgba(242, 184, 181, 1)', - errorContainer: 'rgba(140, 29, 24, 1)', - inverseOnSurface: 'rgba(49, 48, 51, 1)', - inversePrimary: 'rgba(103, 80, 164, 1)', - inverseSurface: 'rgba(230, 225, 229, 1)', - onBackground: 'rgba(230, 225, 229, 1)', - onError: 'rgba(96, 20, 16, 1)', - onErrorContainer: 'rgba(242, 184, 181, 1)', - onPrimary: 'rgba(56, 30, 114, 1)', - onPrimaryContainer: 'rgba(234, 221, 255, 1)', - onSecondary: 'rgba(51, 45, 65, 1)', - onSecondaryContainer: 'rgba(232, 222, 248, 1)', - onSurface: 'rgba(230, 225, 229, 1)', - onSurfaceDisabled: 'rgba(230, 225, 229, 0.38)', - onSurfaceVariant: 'rgba(202, 196, 208, 1)', - onTertiary: 'rgba(73, 37, 50, 1)', - onTertiaryContainer: 'rgba(255, 216, 228, 1)', - outline: 'rgba(147, 143, 153, 1)', - primary: 'rgba(208, 188, 255, 1)', - primaryContainer: 'rgba(79, 55, 139, 1)', - secondary: 'rgba(204, 194, 220, 1)', - secondaryContainer: 'rgba(74, 68, 88, 1)', - surface: 'rgba(28, 27, 31, 1)', - surfaceDisabled: 'rgba(230, 225, 229, 0.12)', - surfaceVariant: 'rgba(73, 69, 79, 1)', - tertiary: 'rgba(239, 184, 200, 1)', - tertiaryContainer: 'rgba(99, 59, 72, 1)', + error: 'rgba(179, 38, 30, 1)', + errorContainer: '#ffc9c6ff', + inverseOnSurface: 'rgba(244, 239, 244, 1)', + inversePrimary: 'rgba(208, 188, 255, 1)', + inverseSurface: 'rgba(49, 48, 51, 1)', + onBackground: 'rgba(28, 27, 31, 1)', + onError: 'rgba(255, 255, 255, 1)', + onErrorContainer: '#681915ff', + onPrimary: 'rgba(255, 255, 255, 1)', + onPrimaryContainer: 'rgba(33, 0, 93, 1)', + onSecondary: '#fff8f1', + onSecondaryContainer: 'rgba(29, 25, 43, 1)', + onSurface: '#603f19', + onSurfaceDisabled: 'rgba(28, 27, 31, 0.38)', + onSurfaceVariant: '#6b4417', + onTertiary: 'rgba(255, 255, 255, 1)', + onTertiaryContainer: 'rgba(49, 17, 29, 1)', + outline: 'rgba(121, 116, 126, 1)', + primary: '#c67e2b', + primaryContainer: 'rgba(234, 221, 255, 1)', + secondary: '#8b6661ff', + secondaryContainer: 'rgba(232, 222, 248, 1)', + surface: '#fff9f1', + surfaceDisabled: 'rgba(28, 27, 31, 0.12)', + surfaceVariant: '#ffdeb5', + tertiary: '#3e2522ff', + tertiaryContainer: '#ffead1', }, - dark: true, + dark: false, isV3: true, - mode: 'adaptive', - roundness: 2, + roundness: 4, typescale: { bodyLarge: { fontFamily: 'sans-serif', @@ -465,52 +465,51 @@ export const CustomDarkTheme = { version: 3, }; -const DefaultTheme = { - animation: { - scale: 1, - }, +export const CustomDarkTheme = { + animation: {scale: 1}, colors: { backdrop: 'rgba(50, 47, 55, 0.4)', - background: 'rgba(255, 251, 254, 1)', + background: 'rgba(28, 27, 31, 1)', elevation: { level0: 'transparent', - level1: 'rgb(247, 243, 249)', - level2: 'rgb(243, 237, 246)', - level3: 'rgb(238, 232, 244)', - level4: 'rgb(236, 230, 243)', - level5: 'rgb(233, 227, 241)', + level1: 'rgb(37, 35, 42)', + level2: 'rgb(44, 40, 49)', + level3: 'rgb(49, 44, 56)', + level4: 'rgb(51, 46, 58)', + level5: 'rgb(52, 49, 63)', }, - error: 'rgba(179, 38, 30, 1)', - errorContainer: 'rgba(249, 222, 220, 1)', - inverseOnSurface: 'rgba(244, 239, 244, 1)', - inversePrimary: 'rgba(208, 188, 255, 1)', - inverseSurface: 'rgba(49, 48, 51, 1)', - onBackground: 'rgba(28, 27, 31, 1)', - onError: 'rgba(255, 255, 255, 1)', - onErrorContainer: 'rgba(65, 14, 11, 1)', - onPrimary: 'rgba(255, 255, 255, 1)', - onPrimaryContainer: 'rgba(33, 0, 93, 1)', - onSecondary: 'rgba(255, 255, 255, 1)', - onSecondaryContainer: 'rgba(29, 25, 43, 1)', - onSurface: 'rgba(28, 27, 31, 1)', - onSurfaceDisabled: 'rgba(28, 27, 31, 0.38)', - onSurfaceVariant: 'rgba(73, 69, 79, 1)', - onTertiary: 'rgba(255, 255, 255, 1)', - onTertiaryContainer: 'rgba(49, 17, 29, 1)', - outline: 'rgba(121, 116, 126, 1)', - primary: 'rgba(103, 80, 164, 1)', - primaryContainer: 'rgba(234, 221, 255, 1)', - secondary: 'rgba(98, 91, 113, 1)', - secondaryContainer: 'rgba(232, 222, 248, 1)', - surface: 'rgba(255, 251, 254, 1)', - surfaceDisabled: 'rgba(28, 27, 31, 0.12)', - surfaceVariant: 'rgba(231, 224, 236, 1)', - tertiary: 'rgba(125, 82, 96, 1)', - tertiaryContainer: 'rgba(255, 216, 228, 1)', + error: 'rgba(242, 184, 181, 1)', + errorContainer: 'rgba(140, 29, 24, 1)', + inverseOnSurface: 'rgba(49, 48, 51, 1)', + inversePrimary: 'rgba(103, 80, 164, 1)', + inverseSurface: 'rgba(230, 225, 229, 1)', + onBackground: 'rgba(230, 225, 229, 1)', + onError: 'rgba(96, 20, 16, 1)', + onErrorContainer: 'rgba(242, 184, 181, 1)', + onPrimary: 'rgba(56, 30, 114, 1)', + onPrimaryContainer: 'rgba(234, 221, 255, 1)', + onSecondary: 'rgba(51, 45, 65, 1)', + onSecondaryContainer: 'rgba(232, 222, 248, 1)', + onSurface: 'rgba(230, 225, 229, 1)', + onSurfaceDisabled: 'rgba(230, 225, 229, 0.38)', + onSurfaceVariant: 'rgba(202, 196, 208, 1)', + onTertiary: 'rgba(73, 37, 50, 1)', + onTertiaryContainer: 'rgba(255, 216, 228, 1)', + outline: 'rgba(147, 143, 153, 1)', + primary: 'rgba(208, 188, 255, 1)', + primaryContainer: 'rgba(79, 55, 139, 1)', + secondary: 'rgba(204, 194, 220, 1)', + secondaryContainer: 'rgba(74, 68, 88, 1)', + surface: 'rgba(28, 27, 31, 1)', + surfaceDisabled: 'rgba(230, 225, 229, 0.12)', + surfaceVariant: 'rgba(73, 69, 79, 1)', + tertiary: 'rgba(239, 184, 200, 1)', + tertiaryContainer: 'rgba(99, 59, 72, 1)', }, - dark: false, + dark: true, isV3: true, - roundness: 4, + mode: 'adaptive', + roundness: 2, typescale: { bodyLarge: { fontFamily: 'sans-serif', @@ -620,56 +619,53 @@ const DefaultTheme = { }, version: 3, }; - -export const CustomLightTheme1 = { - animation: { - scale: 1, - }, +export const CustomLightTheme = { + animation: {scale: 1}, colors: { backdrop: 'rgba(50, 47, 55, 0.4)', - background: 'rgba(255, 251, 254, 1)', + background: 'rgba(28, 27, 31, 1)', elevation: { level0: 'transparent', - level1: 'rgb(247, 243, 249)', - level2: 'rgb(243, 237, 246)', - level3: 'rgb(238, 232, 244)', - level4: 'rgb(236, 230, 243)', - level5: 'rgb(233, 227, 241)', + level1: '#25232a', + level2: 'rgba(28, 27, 31, 1)', + level3: 'rgb(56, 39, 81)', + level4: 'rgb(51, 46, 58)', + level5: 'rgb(52, 49, 63)', }, - error: 'rgba(220, 64, 55, 1)', - errorContainer: 'rgba(255, 243, 243, 1)', - success: '#9568ffff', - successContainer: '#f7f4ffff', - - inverseOnSurface: 'rgba(244, 239, 244, 1)', - inversePrimary: 'rgba(208, 188, 255, 1)', - inverseSurface: 'rgba(49, 48, 51, 1)', - onBackground: 'rgba(28, 27, 31, 1)', - onError: 'rgba(255, 255, 255, 1)', - onErrorContainer: 'rgba(65, 14, 11, 1)', - onPrimary: 'rgba(255, 255, 255, 1)', - onPrimaryContainer: 'rgba(33, 0, 93, 1)', - onSecondary: 'rgba(255, 255, 255, 1)', - onSecondaryContainer: 'rgba(29, 25, 43, 1)', - onSurface: 'rgba(28, 27, 31, 1)', - onSurfaceDisabled: 'rgba(28, 27, 31, 0.38)', - onSurfaceVariant: 'rgba(73, 69, 79, 1)', - onTertiary: 'rgba(255, 255, 255, 1)', - onTertiaryContainer: 'rgba(49, 17, 29, 1)', - outline: 'rgba(121, 116, 126, 1)', - primary: 'rgba(103, 80, 164, 1)', - primaryContainer: 'rgba(234, 221, 255, 1)', - secondary: 'rgba(98, 91, 113, 1)', - secondaryContainer: 'rgba(232, 222, 248, 1)', - surface: 'rgba(255, 251, 254, 1)', - surfaceDisabled: 'rgba(28, 27, 31, 0.12)', - surfaceVariant: 'rgba(231, 224, 236, 1)', - tertiary: 'rgba(125, 82, 96, 1)', - tertiaryContainer: 'rgba(255, 216, 228, 1)', + error: 'rgba(214, 115, 110, 1)', + errorContainer: 'rgba(54, 22, 22, 1)', + successContainer: 'rgba(35, 26, 60, 1)', + success: '#c6b6f4ff', + inverseOnSurface: '#25232a', + inversePrimary: 'rgba(103, 80, 164, 1)', + inverseSurface: 'rgba(230, 225, 229, 1)', + onBackground: 'rgba(230, 225, 229, 1)', + onError: 'rgba(96, 20, 16, 1)', + onErrorContainer: 'rgba(242, 184, 181, 1)', + onPrimary: 'rgba(237, 229, 255, 1)', + onPrimaryContainer: 'rgba(234, 221, 255, 1)', + onSecondary: 'rgba(51, 45, 65, 1)', + onSecondaryContainer: 'rgba(232, 222, 248, 1)', + onSurface: 'rgba(230, 225, 229, 1)', + onSurfaceDisabled: 'rgba(230, 225, 229, 0.38)', + onSurfaceVariant: 'rgba(202, 196, 208, 1)', + onTertiary: 'rgba(73, 37, 50, 1)', + onTertiaryContainer: 'rgba(255, 216, 228, 1)', + outline: 'rgba(147, 143, 153, 1)', + primary: 'rgba(106, 75, 183, 1)', + primaryContainer: 'rgba(74, 62, 106, 1)', + secondary: 'rgba(204, 194, 220, 1)', + secondaryContainer: 'rgba(73, 56, 111, 1)', + surface: '#1c1b1fff', + surfaceDisabled: 'rgba(230, 225, 229, 0.12)', + surfaceVariant: 'rgba(73, 69, 79, 1)', + tertiary: 'rgba(239, 184, 200, 1)', + tertiaryContainer: 'rgba(99, 59, 72, 1)', }, - dark: false, + dark: true, isV3: true, - roundness: 2, + mode: 'adaptive', + roundness: 4, typescale: { bodyLarge: { fontFamily: 'sans-serif',