ungroup label, UI changes

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 (
     <StoreProvider store={store}>
-      <PaperProvider theme={MD3DarkTheme}>
+      <PaperProvider theme={_customLightTheme}>
+        <StatusBar
+          barStyle={'dark-content'}
+          backgroundColor={_customLightTheme.colors.surface}
+          // translucent
+        />
         <GestureHandlerRootView style={{flex: 1}}>
           <SafeAreaProvider>
             <Router></Router>

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,7 @@
   package="com.notes">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.WRITE_CALENDAR" />
 
     <application
       android:name=".MainApplication"

android/app/src/main/res/values/colors.xml

@@ -1,3 +1,3 @@
 <resources>
-    <color name="bootsplash_background">#1C3879</color>
+    <color name="bootsplash_background">#FFF9F1</color>
 </resources>

comment_template.txt

@@ -22,4 +22,6 @@ const _init = () =>{
 
   }
 
-// return 
+// return 
+
+

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',

ios/Notes/BootSplash.storyboard

@@ -17,14 +17,14 @@
                         <autoresizingMask key="autoresizingMask"/>
                         <subviews>
                             <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
-                                <rect key="frame" x="123.5" y="271" width="128" height="125"/>
+                                <rect key="frame" x="123.5" y="269.5" width="128" height="128"/>
                                 <accessibility key="accessibilityConfiguration">
                                     <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
                                 </accessibility>
                             </imageView>
                         </subviews>
                         <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
-                        <color key="backgroundColor" red="0.109803921568627" green="0.219607843137255" blue="0.474509803921569" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" red="1.00000000000000" green="0.976470588235294" blue="0.945098039215686" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <accessibility key="accessibilityConfiguration">
                             <accessibilityTraits key="traits" notEnabled="YES"/>
                         </accessibility>
@@ -40,6 +40,6 @@
         </scene>
     </scenes>
     <resources>
-        <image name="BootSplashLogo" width="128" height="125"/>
+        <image name="BootSplashLogo" width="128" height="128"/>
     </resources>
 </document>

js/components/AppbarWithMonths.js

@@ -97,9 +97,9 @@ const AppbarWithMonths = ({dispatch, sDate, eDate}) => {
           alignItems: 'center',
         }}>
         <IconButton icon={'chevron-left'} onPress={_handleDecrementMonth} />
-        <Text>{`${moment(sDate).format('MMMM').substring(0, 3)} ${moment(
-          sDate,
-        ).year()}`}</Text>
+        <Text style={{fontWeight: '700'}}>{`${moment(sDate)
+          .format('MMMM')
+          .substring(0, 3)} ${moment(sDate).year()}`}</Text>
         <IconButton icon={'chevron-right'} onPress={_handleIncrementMonth} />
       </View>
     </Appbar.Header>

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 => (
+      <BottomSheetBackdrop
+        {...props}
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+        opacity={0.4}
+      />
+    ),
+    [],
+  );
+  /**
+   *
+   * @param {object} param0
+   * @param {Task} param0.item
+   * @returns
+   */
+  const _renderTaskItem = ({item, drag, isActive}) => {
+    return <TaskItem task={item} disabled={isActive} onLongPress={drag} />;
+  };
+
+  return (
+    <BottomSheet
+      style={{
+        backgroundColor: theme.colors.surface,
+      }}
+      // containerStyle={{
+      //   backgroundColor: theme.colors.surface,
+      // }}
+      ref={sheetRef}
+      index={-1}
+      snapPoints={snapPoints}
+      enablePanDownToClose={false}
+      handleStyle={{display: 'none'}}
+      backdropComponent={_renderBackdrop}
+      onClose={() => setSelectedDateInfo(null)}
+      onChange={_handleSheetChange}>
+      <Appbar.Header>
+        <Appbar.BackAction
+          onPress={() => {
+            setSelectedDateInfo(null);
+          }}
+        />
+        <Appbar.Content
+          titleStyle={{fontWeight: '700'}}
+          title={moment(selectedDateInfo?.date).format('MMM DD, YYYY')}
+        />
+      </Appbar.Header>
+
+      <BottomSheetFlatList
+        data={tasks}
+        renderItem={_renderTaskItem}
+        style={{backgroundColor: theme.colors.surface}}
+        contentContainerStyle={{
+          backgroundColor: theme.colors.surface,
+          padding: 12,
+        }}
+        ItemSeparatorComponent={() => <Divider />}
+      />
+    </BottomSheet>
+  );
+};
+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,
+  },
+});

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}) => (
     <TouchableRipple
-      rippleColor={CustomLightTheme.colors.elevation.level5}
       style={{
-        backgroundColor: CustomLightTheme.colors.surface,
+        backgroundColor: theme.colors.surface,
       }}
       onPress={() => {
         setSelectedIcon(item);
@@ -72,30 +72,29 @@ export const IconSelectBottomSheet = ({
           justifyContent: 'flex-start',
           alignItems: 'center',
           padding: 12,
-          backgroundColor: '#00000000',
+          // backgroundColor: '#00000000',
         }}>
         <View
           style={[
             styles.transaction_category_avatar_icon,
             {
               backgroundColor:
                 item === selectedIcon
-                  ? CustomLightTheme.colors.onPrimary
-                  : CustomLightTheme.colors.surfaceVariant,
+                  ? theme.colors.primary
+                  : theme.colors.surfaceVariant,
             },
           ]}>
           <MaterialCommunityIcons
             name={item}
             size={32}
             color={
               item === selectedIcon
-                ? CustomLightTheme.colors.inversePrimary
-                : CustomLightTheme.colors.onPrimary
+                ? theme.colors.onPrimary
+                : theme.colors.primary
             }
           />
         </View>
-        <Text
-          style={[{marginLeft: 20, color: CustomLightTheme.colors.onSurface}]}>
+        <Text style={[{marginLeft: 20, color: theme.colors.onSurface}]}>
           {item}
         </Text>
       </Surface>
@@ -118,14 +117,20 @@ export const IconSelectBottomSheet = ({
             setVisible(false);
           }}
         />
-        <Appbar.Content titleStyle={{fontSize: 18}} title="Transaction Icons" />
+        <Appbar.Content
+          title="Transaction Icons"
+          titleStyle={{fontWeight: '700'}}
+        />
       </Appbar.Header>
       <Divider />
       <BottomSheetFlatList
         data={IconsData}
         keyExtractor={i => i}
         renderItem={_renderIcons}
-        contentContainerStyle={styles.contentContainer}
+        style={{backgroundColor: theme.colors.surface}}
+        contentContainerStyle={{
+          backgroundColor: theme.colors.surface,
+        }}
         ItemSeparatorComponent={() => <Divider />}
       />
     </BottomSheet>