From a775d44be1ae7061e8169035542b3cc1dd507cdb Mon Sep 17 00:00:00 2001
From: ShivaniVora <shivanivora797@icloud.com>
Date: Sun, 13 Oct 2024 01:09:41 -0500
Subject: [PATCH] Updated settings screen

---
 package.json                            |  11 +-
 src/screens/Settings/SettingsScreen.jsx | 183 ++++++++++++++----------
 src/screens/Settings/TimePicker.jsx     |  74 ++++++++--
 src/styles/settings.js                  |  47 +++++-
 4 files changed, 222 insertions(+), 93 deletions(-)

diff --git a/package.json b/package.json
index 4bbe6f53..add655d4 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@babel/preset-env": "^7.22.14",
     "@expo/cli": "^0.10.11",
+    "@fontsource/poppins": "^5.1.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/slider": "4.5.2",
@@ -34,18 +35,18 @@
     "axios": "^1.5.0",
     "bcrypt": "^5.1.1",
     "dotenv": "^16.3.1",
-    "expo": "^51.0.32",
+    "expo": "^51.0.37",
     "expo-auth-session": "~5.5.2",
     "expo-av": "~14.0.7",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",
     "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.25",
-    "expo-notifications": "~0.28.16",
+    "expo-dev-client": "~4.0.28",
+    "expo-notifications": "~0.28.18",
     "expo-random": "~14.0.1",
-    "expo-splash-screen": "~0.27.5",
+    "expo-splash-screen": "~0.27.6",
     "expo-status-bar": "~1.12.1",
-    "expo-updates": "~0.25.24",
+    "expo-updates": "~0.25.27",
     "expo-web-browser": "~13.0.3",
     "firebase": "^10.4.0",
     "jwt-decode": "^3.1.2",
diff --git a/src/screens/Settings/SettingsScreen.jsx b/src/screens/Settings/SettingsScreen.jsx
index ebad5233..3dd4412f 100644
--- a/src/screens/Settings/SettingsScreen.jsx
+++ b/src/screens/Settings/SettingsScreen.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { View, Switch, TouchableOpacity, Linking } from "react-native";
 // import { Notifications } from "expo";
 import * as Notifications from "expo-notifications";
@@ -10,6 +10,9 @@ import { useFocusEffect } from "@react-navigation/native";
 import Text from "../../components/Text";
 import defaultSettings from "../../components/DefaultSettings";
 import SettingsStyle from "../../styles/settings";
+import { Slider } from "react-native-elements";
+import '@fontsource/poppins';
+import TimePicker from "./TimePicker";
 
 const termsURL = "https://gtbitsofgood.github.io/brain-exercise/terms/";
 const privacyURL = "https://gtbitsofgood.github.io/brain-exercise/privacy/";
@@ -43,12 +46,16 @@ const {
   text,
   section,
   subtext,
-  animationRow,
   timeButton,
   icon,
   rowInfo,
-  firstSection,
   touchableRow,
+  buttonText,
+  thumbStyle,
+  trackStyle,
+  slider,
+  minSize,
+  maxSize,
 } = SettingsStyle;
 
 // Settings Navigation
@@ -58,6 +65,47 @@ function SettingsScreen({ navigation }) {
   const [animationToggleOn, setAnimationToggleOn] = useState(
     settings.animationOn,
   );
+  const [fontSize, setFontSize] = useState(settings.fontSize);
+  const [timePickerOpen, setTimePickerOpen] = useState(false);
+  const [soundEffectsToggleOn, setSoundEffectsToggleOn] = useState(
+    settings.soundEffectsOn || defaultSettings.soundEffectsOn,
+  );
+  const [voiceOverToggleOn, setVoiceOverToggleOn] = useState(
+    settings.voiceOverOn || defaultSettings.voiceOverOn,
+  );
+
+  const setSoundEffectsToggleOnWrapper = async () => {
+    setSoundEffectsToggleOn(!soundEffectsToggleOn);
+    settings.soundEffectsOn = !soundEffectsToggleOn;
+    const jsonSettings = JSON.stringify(settings);
+    //console.log(settings.soundEffectsOn)
+    await AsyncStorage.setItem("SETTINGS", jsonSettings);
+  }
+
+  const setVoiceOverToggleOnWrapper = async () => {
+    setVoiceOverToggleOn(!voiceOverToggleOn);
+    settings.voiceOveron = !voiceOverToggleOn;
+    const jsonSettings = JSON.stringify(settings);
+    //console.log(settings.soundEffectsOn)
+    await AsyncStorage.setItem("SETTINGS", jsonSettings);
+  }
+
+  const setAnimationOnWrapper = async () => {
+    setAnimationToggleOn(!animationToggleOn);
+    settings.animationOn = !animationToggleOn;
+    const jsonSettings = JSON.stringify(settings);
+    //console.log(settings.soundEffectsOn)
+    await AsyncStorage.setItem("SETTINGS", jsonSettings);
+  }
+
+  useEffect(() => {
+    updateFontSize();
+  }, [fontSize]);
+
+  const updateFontSize = async () => {
+    settings.fontSize = fontSize;
+    await storeSettings(settings);
+  }
 
   useFocusEffect(
     React.useCallback(() => {
@@ -108,17 +156,14 @@ function SettingsScreen({ navigation }) {
 
   return (
     <View style={root}>
-      <View style={[section, firstSection]}>
+      <View style={section}>
         <View style={notifications}>
-          <Icon size={30} style={icon} name="notifications-none" />
           <Text style={text}>Notifications</Text>
         </View>
-      </View>
-      <View style={section}>
         <View style={notificationChildren}>
-          <Text style={subtext}>Daily Reminders</Text>
+          <Text style={subtext}>Daily Reminders (Mon-Fri)</Text>
           <Switch
-            trackColor={{ false: "#ffffff", true: "#2a652c" }}
+            trackColor={{ false: "#ffffff", true: "#05cd99" }}
             onValueChange={toggleSwitch}
             value={toggleOn}
             accessibilityRole="switch"
@@ -126,90 +171,78 @@ function SettingsScreen({ navigation }) {
         </View>
         {toggleOn && (
           <View style={notificationChildren}>
-            <Text style={subtext}>Reminder Time</Text>
+            <Text style={subtext}>Daily Reminder Time</Text>
             <Button
               title={getDate()}
+              titleStyle={buttonText}
               type="outline"
               buttonStyle={timeButton}
-              onPress={() => navigation.navigate("TimePicker", settings)}
+              onPress={() => setTimePickerOpen(true)}
             />
+            <TimePicker open = {timePickerOpen} setOpen = {setTimePickerOpen} route={{ params: settings }} />
           </View>
         )}
       </View>
       <View style={section}>
-        <TouchableOpacity
-          style={touchableRow}
-          onPress={() => navigation.navigate("StreakLength", settings)}
-        >
-          <View style={rowInfo}>
-            <Icon size={30} style={icon} name="calendar-today" />
-            <Text style={text}>Streak Length</Text>
-          </View>
-          <Icon size={42} style={icon} name="chevron-right" />
-        </TouchableOpacity>
-      </View>
-      <View style={section}>
-        <TouchableOpacity
-          style={touchableRow}
-          onPress={() => navigation.navigate("FontSize", settings)}
-        >
-          <View style={rowInfo}>
-            <Icon size={30} style={icon} name="format-size" />
-            <Text style={text}>Font Size</Text>
-          </View>
-          <Icon size={42} style={icon} name="chevron-right" />
-        </TouchableOpacity>
+        <View style={rowInfo}>
+          <Text style={text}>Font Size</Text>
+        </View>
+        <View style={rowInfo}>
+          <Text style={minSize}>Aa</Text>
+          <Slider
+            style={slider}
+            thumbStyle={thumbStyle}
+            trackStyle={trackStyle}
+            allowTouchTrack={true}
+            minimumValue={16}
+            maximumValue={32}
+            step={1}
+            onValueChange={(v) => setFontSize(v)}
+            value={fontSize}
+          />
+          <Text style={maxSize}>Aa</Text>
+        </View>
       </View>
+      
       <View style={section}>
-        <TouchableOpacity
-          style={touchableRow}
-          onPress={() => navigation.navigate("SoundScreen", settings)}
-        >
-          <View style={rowInfo}>
-            <Icon size={30} style={icon} name="volume-up" />
-            <Text style={text}>Sound</Text>
-          </View>
-          <Icon size={42} style={icon} name="chevron-right" />
-        </TouchableOpacity>
+        <View style={notifications}>
+        <Text style={text}>Sound</Text>
+        </View>
+          <View style={notificationChildren}>
+          <Text style={subtext}>Sound Effects</Text>
+          <Switch
+            trackColor={{ false: "#ffffff", true: "#05cd99" }}
+            onValueChange={setSoundEffectsToggleOnWrapper}
+            value={soundEffectsToggleOn}
+            accessibilityRole="switch"
+          />
+        </View>
+        <View style={notificationChildren}>
+          <Text style={subtext}>Voice Over</Text>
+          <Switch
+            trackColor={{ false: "#ffffff", true: "#05cd99" }}
+            onValueChange={setVoiceOverToggleOn}
+            value={voiceOverToggleOn}
+            accessibilityRole="switch"
+          />
+          
+        </View>
       </View>
       <View style={section}>
-        <View style={animationRow}>
-          <View style={rowInfo}>
-            <Icon size={30} style={icon} name="play-arrow" />
-            <Text style={text}>Animation</Text>
-          </View>
+        <View style={notifications}>
+        <Text style={text}>Animation</Text>
+        </View>
+          <View style={notificationChildren}>
+          <Text style={subtext}>Enable In-App Animation</Text>
           <Switch
-            trackColor={{ false: "#ffffff", true: "#2a652c" }}
-            onValueChange={() => toggleAnimations()}
+            trackColor={{ false: "#ffffff", true: "#05cd99" }}
+            onValueChange={toggleAnimations}
             value={animationToggleOn}
             accessibilityRole="switch"
           />
+          
         </View>
       </View>
-      <View style={section}>
-        <TouchableOpacity
-          style={touchableRow}
-          onPress={() => Linking.openURL(termsURL)}
-        >
-          <View style={rowInfo}>
-            <Icon size={30} style={icon} name="content-copy" />
-            <Text style={text}>Terms and Conditions</Text>
-          </View>
-          <Icon size={42} style={icon} name="chevron-right" />
-        </TouchableOpacity>
-      </View>
-      <View style={section}>
-        <TouchableOpacity
-          style={touchableRow}
-          onPress={() => Linking.openURL(privacyURL)}
-        >
-          <View style={rowInfo}>
-            <Icon size={30} style={icon} name="lock" />
-            <Text style={text}>Privacy Policy</Text>
-          </View>
-          <Icon size={42} style={icon} name="chevron-right" />
-        </TouchableOpacity>
-      </View>
     </View>
   );
 }
@@ -218,4 +251,4 @@ SettingsScreen.propTypes = {
   navigation: PropTypes.object,
 };
 
-export default SettingsScreen;
+export default SettingsScreen;
\ No newline at end of file
diff --git a/src/screens/Settings/TimePicker.jsx b/src/screens/Settings/TimePicker.jsx
index 072f860d..8d2001fe 100644
--- a/src/screens/Settings/TimePicker.jsx
+++ b/src/screens/Settings/TimePicker.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, Modal } from "react-native";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import PropTypes from "prop-types";
@@ -22,13 +22,57 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginBottom: 20,
   },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(156, 165, 194, 0.5)', // semi-transparent background
+  },
+  modalView: {
+    width: 300,
+    padding: 20,
+    backgroundColor: 'white',
+    borderRadius: 10,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 5,
+  },
+  modalText: {
+    fontSize: 24, 
+    fontFamily: "Poppins",
+    color: "#2b3674",
+    marginBottom: 15,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  button: {
+    color: '#008AFC',
+    margin: 10,
+    borderRadius: 12,
+    padding: 10,
+  },
+  buttonText: {
+    color: 'white',
+  },
 });
 
-function TimePicker({ navigation, route }) {
+function TimePicker({ open, setOpen, navigation, route }) {
   const [date, setDate] = useState(
     route.params.scheduledTime || defaultSettings.scheduledTime,
   ); // this always needs to be string
 
+  //const [visible, setVisible] = useState(true);
   const storeSettings = async () => {
     const settingsObj = route.params;
     settingsObj.scheduledTime = date;
@@ -48,28 +92,40 @@ function TimePicker({ navigation, route }) {
     console.log(date);
     scheduleNotifications(new Date(date));
     storeSettings();
-    navigation.goBack();
+    setOpen(false);
   }
 
+
   return (
-    <View style={styles.root}>
-      <Text style={styles.text}>
-        You will receive a notification at this time on Monday through Friday
+    <Modal animationType="slide"
+    transparent={true}
+    visible={open}
+    onRequestClose={confirmTime}>
+      <View style={styles.modalContainer}>
+        <View style={styles.modalView}>
+      <Text style={styles.modalText}>
+        Adjust Time
       </Text>
       <DateTimePicker
         testID="dateTimePicker"
         value={new Date(date)}
         mode="time"
         is24Hour={false}
-        display="default"
+        textColor="#2b3674"
+        display="spinner"
         onChange={onChange}
       />
-      <Button title="Confirm Time" type="solid" onPress={confirmTime} />
-    </View>
+      <Button style={styles.button} titleStyle={[fontSize=24, fontWeight="bold"]} title="Confirm Time" onPress={confirmTime} />
+      </View>
+      </View>
+    </Modal>
   );
 }
 
+
 TimePicker.propTypes = {
+  open: PropTypes.bool,
+  setOpen: PropTypes.func,
   navigation: PropTypes.object,
   route: PropTypes.object,
 };
diff --git a/src/styles/settings.js b/src/styles/settings.js
index 7847fa75..e4aa2d97 100644
--- a/src/styles/settings.js
+++ b/src/styles/settings.js
@@ -1,4 +1,5 @@
 import { StyleSheet } from "react-native";
+import '@fontsource/poppins';
 
 const SettingsStyle = StyleSheet.create({
   root: {
@@ -6,6 +7,8 @@ const SettingsStyle = StyleSheet.create({
     alignContent: "center",
     padding: 20,
     backgroundColor: "white",
+    fontFamily: "Poppins",
+    color: "#2b3674",
   },
   notifications: {
     flexDirection: "row",
@@ -16,15 +19,18 @@ const SettingsStyle = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginLeft: 20,
   },
   text: {
-    fontSize: 16,
+    color: "#2b3674",
+    fontFamily: "Poppins",
+    fontSize: 20,
     fontWeight: "bold",
     textAlign: "left",
     marginVertical: 15,
   },
   subtext: {
+    color: "#2b3674",
+    fontFamily: "Poppins",
     fontSize: 16,
     fontWeight: "normal",
     textAlign: "left",
@@ -38,7 +44,18 @@ const SettingsStyle = StyleSheet.create({
     marginVertical: 10,
   },
   timeButton: {
-    borderRadius: 10,
+    backgroundColor: "#e3eafc",
+    borderRadius: "100%",
+    width: 150,
+    height: 30,
+    padding: 0,
+    borderColor: "transparent"
+  },
+  buttonText: {
+    fontFamily: "Poppins",
+    fontWeight: "bold",
+    fontSize: 20,
+    color: "#2b3674",
   },
   touchableRow: {
     flexDirection: "row",
@@ -63,5 +80,27 @@ const SettingsStyle = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
   },
+  thumbStyle: {
+    backgroundColor: "white",
+    shadowColor: "black",
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
+    shadowOffset: { width: 0, height: 2 },
+  },
+  trackStyle: {
+    backgroundColor: "787880",
+  },
+  slider: {
+    marginBottom: 10,
+    width: "75%",
+  },
+  minSize: {
+    fontSize: 16,
+    marginBottom: 10,
+  },
+  maxSize: {
+    fontSize: 32,
+    marginBottom: 10,
+  },
 });
-export default SettingsStyle;
+export default SettingsStyle;
\ No newline at end of file