Homepage and subjects page improvements

src/routes/Home/Home.tsx

@@ -1,11 +1,12 @@
-import styles, { Viewport } from "../../styles";
+import styles, { Viewport, colors } from "../../styles";
 import { View, Text } from "react-native";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import { useState, useEffect } from "react";
-import MapView, { UrlTile } from "react-native-maps";
+import MapView, { Callout, Marker, UrlTile } from "react-native-maps";
 import * as Location from "expo-location";
 import GetDistance from "../../components/GetDistance/GetDistance";
 import Button from "../../components/Button/Button";
+import { AnimatedMapView } from "react-native-maps/lib/MapView";
 type LocationType = Location.LocationObject;
 export default function Home() {
   const [location, setLocation] = useState<LocationType | null>(null);
@@ -47,6 +48,11 @@ export default function Home() {
     return () => clearInterval(interval);
   });
 
+  // Refresh when user moves location
+  useEffect(() => {
+    requestLocation();
+  }, [location]);
+
   // Run when screen loads
   useEffect(() => {
     requestLocation();
@@ -67,16 +73,16 @@ export default function Home() {
       if (dist <= 1.5) {
         // Just switch this condition for map debugging
         return (
-          <MapView
+          <AnimatedMapView
             style={styles.map}
             mapType="none"
             initialRegion={ustpCoords}
-            showsUserLocation={true}
             scrollEnabled={false}
             zoomEnabled={false}
             rotateEnabled={false}
             followsUserLocation={true}
             minZoomLevel={18}
+            toolbarEnabled={false}
             customMapStyle={[
               {
                 featureType: "poi",
@@ -95,7 +101,13 @@ export default function Home() {
               flipY={false}
               zIndex={1}
             />
-          </MapView>
+            <Marker
+              coordinate={{
+                latitude: location.coords.latitude,
+                longitude: location.coords.longitude,
+              }}
+            />
+          </AnimatedMapView>
         );
       } else {
         return (
@@ -104,7 +116,7 @@ export default function Home() {
               You are too far from USTP {"\n"}
               Get closer to use Stud-E
             </Text>
-            <MapView
+            <AnimatedMapView
               style={{
                 height: Viewport.height * 0.5,
                 width: Viewport.width * 0.8,
@@ -121,9 +133,9 @@ export default function Home() {
                 },
               ]}
               mapType="none"
-              showsUserLocation={true}
               scrollEnabled={false}
               zoomEnabled={false}
+              toolbarEnabled={false}
               rotateEnabled={false}
               followsUserLocation={true}
               minZoomLevel={18}
@@ -141,7 +153,22 @@ export default function Home() {
                 flipY={false}
                 zIndex={1}
               />
-            </MapView>
+              <Marker
+                coordinate={{
+                  latitude: location.coords.latitude,
+                  longitude: location.coords.longitude,
+                }}
+                onPress={() => console.log(location)}
+                pinColor={colors.primary_1}
+              >
+                <Callout>
+                  <Text style={styles.text_black_tiny}>
+                    X: {Math.round(location.coords.longitude) + "\n"}
+                    Z: {Math.round(location.coords.latitude)}
+                  </Text>
+                </Callout>
+              </Marker>
+            </AnimatedMapView>
             <Text style={styles.text_white_small}>
               {dist}km away from USTP {"\n"}
             </Text>

src/routes/SubjectsPage/SubjectsPage.tsx

@@ -225,20 +225,14 @@ export default function SubjectsPage() {
           <View style={styles.padding} />
           <Button
             onPress={() => {
-              if (subjectsOpen) {
-                setSelectedSubjects([]);
-                setSubjectsOpen(false);
-                mutation.mutate({
-                  subjects: selected_subjects,
-                });
-              } else {
-                setSubjectsOpen(true);
-              }
+              setSelectedSubjects([]);
+              setSubjectsOpen(!subjectsOpen);
+              mutation.mutate({
+                subjects: selected_subjects,
+              });
             }}
           >
-            <Text style={styles.text_white_small}>
-              {subjectsOpen && StudentInfo.isSuccess ? "Save" : "Edit Subjects"}
-            </Text>
+            <Text style={styles.text_white_small}>Save Change</Text>
           </Button>
         </View>
       </AnimatedContainerNoScroll>

src/styles.tsx

@@ -16,6 +16,7 @@ export const colors = {
   secondary_4: "#FFE9CE",
   secondary_5: "#FFF5E9",
   text_default: "#FFFF",
+  text_dark: "black",
   text_error: "#e32d1e",
   text_success: "#2ecc71",
   icon_color: "#FFFF",
@@ -105,6 +106,42 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     textAlign: "center",
   },
+  text_black_tiny: {
+    color: colors.text_dark,
+    fontSize: font_sizes.tiny,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_black_small: {
+    color: colors.text_dark,
+    fontSize: font_sizes.small,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_black_medium: {
+    color: colors.text_dark,
+    fontSize: font_sizes.medium,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_black_medium_large: {
+    color: colors.text_dark,
+    fontSize: font_sizes.medium_large,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_black_large: {
+    color: colors.text_dark,
+    fontSize: font_sizes.large,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_black_xl: {
+    color: colors.text_dark,
+    fontSize: font_sizes.xl,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
   button_template: {
     justifyContent: "center",
     alignSelf: "center",
@@ -158,5 +195,10 @@ const styles = StyleSheet.create({
   padding: {
     paddingVertical: 8,
   },
+  calloutContainer: {
+    backgroundColor: colors.secondary_1,
+    padding: 0,
+    border: 0,
+  },
 });
 export default styles;