changes to reminders modal

components/pages/reminders/addReminderModal.tsx

@@ -7,7 +7,6 @@ import {
   TextField,
   Button,
   View,
-  Checkbox,
   Switch,
   Picker,
 } from "react-native-ui-lib";
@@ -34,10 +33,7 @@ const AddReminderModal = (props: ReminderModalProps) => {
   const [reminderTitle, setReminderTitle] = useState<string>("");
   const [time, setTime] = useState(new Date());
   const [autoRepeat, setAutoRepeat] = useState<boolean>(false);
-  const [reminder, setReminder] = useState<reminderOptions | undefined>({
-    label: "Remind me just in time",
-    value: "just-in-time",
-  });
+  const [reminder, setReminder] = useState<string>("just-in-time");
 
   const reminderOptions = [
     { label: "Remind me just in time", value: "just-in-time" },
@@ -59,7 +55,6 @@ const AddReminderModal = (props: ReminderModalProps) => {
       onDismiss={onClose}
       panDirection={PanningProvider.Directions.RIGHT}
       containerStyle={{ borderRadius: 12, backgroundColor: "white" }}
-      height="70%"
     >
       <View style={styles.container}>
         <Text style={styles.title}>New Reminder</Text>
@@ -78,7 +73,7 @@ const AddReminderModal = (props: ReminderModalProps) => {
               title={"+ Add"}
               size={Button.sizes.xSmall}
               onPress={() => {}}
-            ></ButtonOutlined>
+            />
           </View>
           <View style={styles.iconTitle}>
             <View
@@ -133,14 +128,11 @@ const AddReminderModal = (props: ReminderModalProps) => {
             />
             <Picker
               text70
-              value={reminder?.value}
-              onChange={(item: reminderOptions) => {
-                setReminder({ label: item.label, value: item.value });
-              }}
+              value={reminder}
+              onChange={(item) => setReminder(item)}
               useDialog
               fieldType="form"
               placeholder="Select a reminder"
-              items={reminderOptions}
               trailingAccessory={
                 <Feather
                   name="chevron-down"
@@ -149,7 +141,15 @@ const AddReminderModal = (props: ReminderModalProps) => {
                   color="black"
                 />
               }
-            ></Picker>
+            >
+              {reminderOptions.map((option) => (
+                <Picker.Item
+                  key={option.value}
+                  label={option.label}
+                  value={option.value}
+                />
+              ))}
+            </Picker>
           </View>
         </View>
         <View style={styles.divider} />
@@ -171,14 +171,27 @@ const AddReminderModal = (props: ReminderModalProps) => {
             />
           </View>
         </View>
-        <View style={styles.divider} />
-        <View style={styles.inner}>
-          <View flex row>
-          <ButtonOutlined
-              title={"+ Add"}
-              size={Button.sizes.medium}
-              onPress={() => {}}
-            ></ButtonOutlined>
+        <View style={styles.inner} marginT-10>
+          <View
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              width: "100%",
+            }}
+          >
+            <Button
+              label="Cancel"
+              style={styles.button}
+              color='black'
+            />
+            <Button
+              label="Save"
+              borderRadius={5}
+              backgroundColor="#00c87e"
+              style={{width: '49%'}}
+              
+            />
           </View>
         </View>
       </View>
@@ -189,9 +202,19 @@ const AddReminderModal = (props: ReminderModalProps) => {
 const styles = StyleSheet.create({
   container: {
     paddingVertical: 10,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between'
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+  },
+  button: {
+    backgroundColor: "white",
+    color: "black",
+    borderColor: "lightgray",
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 0,
+    marginHorizontal: 0,
+    width:'49%'
   },
   inner: {
     paddingHorizontal: 20,