feat: 🎉 New Pop-up Modals & UI changes

Spnetic-5 · Sep 17, 2022 · 937141e · 937141e
1 parent 41dbceb
commit 937141e
Show file tree

Hide file tree

Showing 9 changed files with 399 additions and 117 deletions.
diff --git a/.expo/packager-info.json b/.expo/packager-info.json
@@ -1,6 +1,6 @@
 {
-  "expoServerPort": 19000,
-  "packagerPort": 19000,
+  "expoServerPort": null,
+  "packagerPort": null,
   "packagerPid": null,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,

diff --git a/assets/alert.png b/assets/alert.png
diff --git a/assets/deleted.jpg b/assets/deleted.jpg
diff --git a/components/ModalActions.js b/components/ModalActions.js
@@ -22,6 +22,7 @@ const ModalActions = ({modalVisible, setModalVisible, navigation, id}) => {
     .delete()
     .catch((error) => alert(error.message));  
   }
+
   const deleteExpense = () => {
     setSubmitLoading(true)
     setTimeout(() => {
@@ -38,46 +39,38 @@ const ModalActions = ({modalVisible, setModalVisible, navigation, id}) => {
 
   return (
     <>
-      {
-        deleteModal && (
-          <View style={{ top: '-50%', left: '10%', zIndex: 5, width: '80%', height: '60%', backgroundColor: 'white', borderRadius: 25}}>
-          <Image
-              style={{
-                // flex: 1,
-                borderRadius: 20,
-                width: '100%',
-                resizeMode: 'contain'
-              }}
-              source={require('../assets/greenbg.png')}
-            />
-            <Image
-              style={{
-                // flex: 1,
-                borderRadius: 20,
-                width: '50%',
-                height: '25%',
-                alignSelf: 'center',
-                resizeMode: 'contain',
-                marginTop: '-125%',
-                zIndex: 5
-              }}
-              source={require('../assets/check.png')}
-            />
-            <Text style={{fontSize: 20, fontWeight: 'bold', alignSelf: 'center', top: '40%', color: '#8B0000'}}>
-              Yeahh...!!! 😉️
-            </Text>
-            <Text style={{fontSize: 16, fontWeight: 'bold', alignSelf: 'center', top: '40%', color: '#646279'}}>
-              Transaction deleted successfully! 
-            </Text>
+      <Modal
+        animationType='slide'
+        transparent={true}
+        visible={deleteModal}
+        onRequestClose={() => {
+          alert('Modal has been closed.')
+          setDeleteModal(!deleteModal)
+        }}
+      >
+      <View style={styles.centeredViewNew}>
+        <View style={styles.modalViewNew}>
+        <Image
+            style={{
+              width: '40%',
+              top: '-30%',
+              resizeMode: 'contain'
+            }}
+            source={require('../assets/deleted.jpg')}
+          />
+          <Text style={{fontSize: 16, fontWeight: 'bold', textAlign: 'center',top: '-60%', color: '#402243'}}>
+           Transaction deleted successfully! 🥳️
+          </Text>
+          <View style={{flexDirection: 'row', marginTop: '-40%' ,marginBottom: '2%'}}>
             <Button
               buttonStyle={styles.thank}
               title='Thanks'
               onPress={() => setDeleteModal(false)}
-              loading={submitLoading}
             />
           </View>
-        )
-      }
+        </View>
+      </View>
+      </Modal>
       <View style={styles.centeredView}>
         <Modal
           animationType='slide'
@@ -106,7 +99,7 @@ const ModalActions = ({modalVisible, setModalVisible, navigation, id}) => {
                     <Entypo
                       name='pencil'
                       size={40}
-                      color='#013220'
+                      color='green'
                       onPress={() =>
                         navigation.navigate('Update', {
                           itemId: id,
@@ -119,7 +112,7 @@ const ModalActions = ({modalVisible, setModalVisible, navigation, id}) => {
                         itemId: id,
                       }) & setModalVisible(!modalVisible)
                       } 
-                      style={{color: '#013220', fontSize: 20, fontWeight: '900', padding: 7}}
+                      style={{color: 'green', fontSize: 20, fontWeight: '900', padding: 7}}
                     > Edit </Text>
                 </View>
                 </TouchableOpacity>
@@ -129,11 +122,11 @@ const ModalActions = ({modalVisible, setModalVisible, navigation, id}) => {
                       name='trash'
                       onPress={() => deleteExpense()}
                       size={40}
-                      color='#8B0000'
+                      color='red'
                     />
                     <Text 
                       onPress={() => deleteExpense()}
-                      style={{color: '#8B0000', fontSize: 20, fontWeight: '900', padding: 7}}
+                      style={{color: 'red', fontSize: 20, fontWeight: '900', padding: 7}}
                     > Delete </Text>
                   </View>
                 </TouchableOpacity>
@@ -218,12 +211,36 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   thank: {
-    width: '40%',
-    backgroundColor: '#8B0000',
+    backgroundColor: 'green',
     height: 50,
+    width: 100,
     borderRadius: 20,
-    zIndex: 10,
-    marginTop: '50%',
+    padding: 15,
+    zIndex: 5,
+    fontSize: 18,
     alignSelf: 'center'
   },
+  centeredViewNew: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalViewNew: {
+    margin: 20,
+    backgroundColor: '#ffffff',
+    borderRadius: 15,
+    padding: 25,
+    width: '80%',
+    height: '30%',
+    alignItems: 'center',
+    shadowColor: '#FFF',
+    shadowOffset: {
+      width: 2,
+      height: 5,
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 4,
+    elevation: 10,
+    zIndex: -5
+  },
 })
diff --git a/screens/AddScreen.js b/screens/AddScreen.js
@@ -1,6 +1,6 @@
 import {StatusBar} from 'expo-status-bar'
 import React, {useEffect, useState} from 'react'
-import {StyleSheet, View, KeyboardAvoidingView, TouchableOpacity, TextInput, Image, Keyboard} from 'react-native'
+import {StyleSheet, View, KeyboardAvoidingView, TouchableOpacity, TextInput, Image, Keyboard, Modal} from 'react-native'
 import {Text, Button} from 'react-native-elements'
 import DateTimePicker from '@react-native-community/datetimepicker'
 import format from 'date-fns/format'
@@ -48,7 +48,6 @@ const AddScreen = ({navigation}) => {
 
   const clearInputFields = () => {
     // alert('Created Successfully')
-    setInput('')
     setAmount('')
     setSelDate(new Date())
     setSelectType('expense')
@@ -74,6 +73,8 @@ const AddScreen = ({navigation}) => {
   // Select Dropdown
   const [selectedType, setSelectType] = useState('expense')
 
+
+
   const MainContainer = styled.View`
     background-color: black;
     height: 100%;
@@ -92,6 +93,10 @@ const AddScreen = ({navigation}) => {
   const [isKeyboardVisible, setKeyboardVisible] = useState(false);
   const [uday, setUday] = useState(!isKeyboardVisible);
   useEffect(() => {
+    if(input === '📚️ Other'){
+      setInput('')
+    }
+    selectedType === 'expense' ? setInput('🧆️ Food') : setInput('💵️ Salary');
     const keyboardDidShowListener = Keyboard.addListener(
       'keyboardDidShow',
       () => {
@@ -145,50 +150,56 @@ const AddScreen = ({navigation}) => {
         >
           NAME
         </Text>
-        <View style={styles.inputBoxTe}>
         {
-            selectedType === 'expense' ? (
-              <Picker
-              mode={'dropdown'}
-              style={{marginLeft: '5%'}}
-              dropdownIconColor={'#000000'}
-              selectedValue={input}
-              onValueChange={(itemValue) =>
-                setInput(itemValue)
-              }
-            >
-              <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🧆️ Food' value='🧆️ Food' />
-              <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🚂️ Travel' value='🚂️ Travel' />
-              <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🗒️ Kirana' value='🗒️ Kirana' />
-              <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🛍️ Shopping' value='🛍️ Shopping' />
-              <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🎬️ Movie' value='🎬️ Movie' />
-              <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='📚️ Other' value='📚️ Other' />
-            </Picker>
-            ) : 
-            (
-              <Picker
-              mode={'dropdown'}
-              style={{marginLeft: '5%'}}
-              dropdownIconColor={'#000000'}
-              selectedValue={input}
-              onValueChange={(itemValue) =>
-                setInput(itemValue)
-              }
-            >
-              <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='💵️ Salary' value='💵️ Salary' />
-              <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='💰️ Pocket Money' value='💰️ Pocket Money' />
-              <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🔁️ Returns' value='🔁️ Returns' />
-            </Picker>
-            )
-          }
-        </View>
-        {/* <TextInput
+          (input === '🧆️ Food' || input === '🚂️ Travel' || input === '🗒️ Kirana' || input === '🛍️ Shopping' || input === '🎬️ Movie' || input == '💵️ Salary' || input === '💰️ Pocket Money' || input === '🔁️ Returns')? (
+            <View style={styles.inputBoxTe}>
+          {
+              selectedType === 'expense' ? (
+                <Picker
+                mode={'dropdown'}
+                style={{marginLeft: '5%'}}
+                dropdownIconColor={'#000000'}
+                selectedValue={input}
+                onValueChange={(itemValue) =>
+                  setInput(itemValue)
+                }
+              >
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🧆️ Food' value='🧆️ Food' />
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🚂️ Travel' value='🚂️ Travel' />
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🗒️ Kirana' value='🗒️ Kirana' />
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🛍️ Shopping' value='🛍️ Shopping' />
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🎬️ Movie' value='🎬️ Movie' />
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='📚️ Other' value='' />
+              </Picker>
+              ) : 
+              (
+                <Picker
+                mode={'dropdown'}
+                style={{marginLeft: '5%'}}
+                dropdownIconColor={'#000000'}
+                selectedValue={input}
+                onValueChange={(itemValue) =>
+                  setInput(itemValue)
+                }
+              >
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='💵️ Salary' value='💵️ Salary' />
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='💰️ Pocket Money' value='💰️ Pocket Money' />
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='🔁️ Returns' value='🔁️ Returns' />
+                <Picker.Item style={{backgroundColor: '#FAC7FF', color:'#402243', fontSize: 18}} label='📚️ Other' value='' />
+              </Picker>
+              )
+            }
+          </View>
+          ) : (
+            <TextInput
             style={styles.inputBox}
             onChangeText={(text) => setInput(text)}
             value={input}
             placeholder={selectedType === 'expense' ? "Kaha Udayaa? 😒️" : "Kahase Kamaya? 😉️"}
             placeholderTextColor="#AAAAAA"
-          /> */}
+          />
+          )
+        }
           {show && (
             <DateTimePicker
               testID='dateTimePicker'
@@ -307,7 +318,39 @@ const AddScreen = ({navigation}) => {
         />
         )
       }
-      {
+      <Modal
+        animationType='slide'
+        transparent={true}
+        visible={showModal}
+        onRequestClose={() => {
+          alert('Modal has been closed.')
+          setShowModal(!showModal)
+        }}
+      >
+      <View style={styles.centeredViewNew}>
+        <View style={styles.modalViewNew}>
+        <Image
+            style={{
+              width: '40%',
+              top: '-40%',
+              resizeMode: 'contain'
+            }}
+            source={require('../assets/check.png')}
+          />
+          <Text style={{fontSize: 16, fontWeight: 'bold', textAlign: 'center',top: '-75%', color: '#402243'}}>
+          Transaction added successfully! 🥳️
+          </Text>
+          <View style={{flexDirection: 'row', marginTop: '-50%' ,marginBottom: '2%'}}>
+            <Button
+              buttonStyle={styles.thank}
+              title='Thanks'
+              onPress={() => setShowModal(false) & navigation.navigate("Home")}
+            />
+          </View>
+        </View>
+      </View>
+      </Modal>
+      {/* {
         showModal && (
           <View style={{ top: '-50%', left: '10%', zIndex: 5, width: '80%', height: '60%', backgroundColor: 'white', borderRadius: 25}}>
           <Image
@@ -333,7 +376,7 @@ const AddScreen = ({navigation}) => {
               source={require('../assets/check.png')}
             />
             <Text style={{fontSize: 20, fontWeight: 'bold', alignSelf: 'center', top: '25%', color: '#402243'}}>
-              Woo Hoo! 🥳️
+              ! 🥳️
             </Text>
             <Text style={{fontSize: 16, fontWeight: 'bold', alignSelf: 'center', top: '25%', color: '#646279'}}>
               Transaction added successfully!
@@ -346,7 +389,7 @@ const AddScreen = ({navigation}) => {
             />
           </View>
         )
-      }
+      } */}
     </>
   )
 }
@@ -451,14 +494,38 @@ const styles = StyleSheet.create({
     backgroundColor: '#FAC7FF'
   },
   thank: {
-    width: '40%',
-    backgroundColor: '#402243',
+    backgroundColor: 'green',
     height: 50,
+    width: 100,
     borderRadius: 20,
-    zIndex: 10,
-    marginTop: '45%',
+    padding: 15,
+    zIndex: 5,
+    fontSize: 18,
     alignSelf: 'center'
   },
+  centeredViewNew: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalViewNew: {
+    margin: 20,
+    backgroundColor: '#ffffff',
+    borderRadius: 15,
+    padding: 25,
+    width: '80%',
+    height: '30%',
+    alignItems: 'center',
+    shadowColor: '#FFF',
+    shadowOffset: {
+      width: 2,
+      height: 5,
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 4,
+    elevation: 10,
+    zIndex: -5
+  },
 })