Activity page + popup

frontend/declarations.d.ts

@@ -6,3 +6,22 @@ declare module "*.svg" {
 
   export default content;
 }
+
+declare module "*.png" {
+  import { ImageRequireSource } from "react-native";
+  const src: ImageRequireSource;
+  export default src;
+}
+
+declare module "*.jpg" {
+  import { ImageRequireSource } from "react-native";
+  const src: ImageRequireSource;
+  export default src;
+}
+
+// If you use .jpeg too:
+declare module "*.jpeg" {
+  import { ImageRequireSource } from "react-native";
+  const src: ImageRequireSource;
+  export default src;
+}

frontend/src/app/(auth)/forgot-password.tsx

@@ -106,6 +106,6 @@ const styles = StyleSheet.create({
   loginLink: {
     fontSize: 16,
     textDecorationLine: "underline",
-    color: lightModeColors.primary,
+    color: lightModeColors.primaryRed,
   },
 });

frontend/src/app/(tabs)/index.tsx

@@ -1,5 +1,24 @@
-import InternetError from "@/pages/internetError";
+import { StatusBar, StyleSheet, View } from "react-native";
+
+import ActivitiesPage from "../../pages/activityPage";
+
+import { lightModeColors } from "@/constants/colors";
 
 export default function Home() {
-  return <InternetError />;
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: lightModeColors.background,
+    },
+    text: {
+      color: lightModeColors.darkFont,
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <ActivitiesPage />
+      <StatusBar />
+    </View>
+  );
 }

frontend/src/app/(tabs)/profile.tsx

@@ -1,21 +1,5 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { StatusBar, StyleSheet, Text, View } from "react-native";
-
-import { lightModeColors } from "@/constants/colors";
 import ProfilePage from "@/pages/profilePage";
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: lightModeColors.background,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  text: {
-    color: lightModeColors.darkFont,
-  },
-});
-
 export default function Profile() {
   return <ProfilePage />;
 }

frontend/src/components/ActivityPopup.tsx

@@ -0,0 +1,131 @@
+import { Ionicons } from "@expo/vector-icons";
+import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+import { lightModeColors } from "@/constants/colors";
+
+type ActivityPopupProps = {
+  title: string;
+  description?: string;
+  isOpen: boolean;
+  onStart?: () => void;
+  color: "red" | "green" | "yellow";
+  onClose: () => void;
+};
+
+/**
+ * ActivityPopup component
+ *
+ * @param props.title - The title of the activity
+ * @param props.description - The description of the activity
+ * @param props.isOpen - Whether the popup is open or not
+ * @param props.onStart - Function to call when the start button is clicked
+ * @param props.color - The color of the start button
+ * @param props.onClose - Function to call when the close button is clicked
+ * @returns
+ */
+const ActivityPopup = ({
+  title,
+  description,
+  onStart,
+  color,
+  isOpen,
+  onClose,
+}: ActivityPopupProps) => {
+  return (
+    <>
+      {/* Backdrop adjacent makes the Modal's sliding animation slightly laggy, but putting backdrop inside the Modal makes it also slide up with the modal which is even more ugly */}
+      {isOpen && <View style={styles.backdrop} />}
+      <Modal visible={isOpen} transparent={true} animationType="slide" onRequestClose={onClose}>
+        <View style={styles.container}>
+          <View style={styles.content}>
+            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+              <Ionicons name="close" size={25} />
+            </TouchableOpacity>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.subtitle}>{description}</Text>
+            <TouchableOpacity
+              style={[
+                styles.button,
+                {
+                  backgroundColor:
+                    color === "red"
+                      ? lightModeColors.primaryRed
+                      : color === "green"
+                        ? lightModeColors.primaryGreen
+                        : lightModeColors.primaryYellow,
+                },
+              ]}
+              onPress={() => {
+                onClose();
+
+                if (onStart) {
+                  onStart();
+                }
+              }}
+            >
+              <Text style={styles.buttonText}>START</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    zIndex: 1, // Ensure it appears behind the modal content
+  },
+  container: {
+    flex: 1,
+    justifyContent: "flex-end",
+    zIndex: 2, // Ensure modal content is above the backdrop
+  },
+  content: {
+    backgroundColor: "white",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 40,
+    position: "relative",
+  },
+  closeButton: {
+    position: "absolute",
+    top: 18,
+    right: 18,
+  },
+  title: {
+    fontSize: 20,
+    marginBottom: 10,
+    fontFamily: "Figtree",
+    fontWeight: 600,
+    textTransform: "uppercase",
+  },
+  subtitle: {
+    fontSize: 18,
+    color: lightModeColors.secondaryLightFont,
+    marginBottom: 20,
+    fontFamily: "Figtree",
+    fontWeight: 400,
+  },
+  button: {
+    backgroundColor: lightModeColors.primaryGreen,
+    paddingVertical: 15,
+    borderRadius: 100,
+  },
+  buttonText: {
+    fontFamily: "SG-DemiBold",
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+});
+
+export default ActivityPopup;

frontend/src/components/activityButton.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { Image, StyleProp, StyleSheet, TouchableOpacity, ViewStyle } from "react-native";
+
+import GreenCompletedClicked from "@/assets/green-completed-clicked.png";
+import GreenCompleted from "@/assets/green-completed.png";
+import GreenInProgressClicked from "@/assets/green-in-progress-clicked.png";
+import GreenInProgress from "@/assets/green-in-progress.png";
+import Incomplete from "@/assets/incomplete.png";
+import RedCompletedClicked from "@/assets/red-completed-clicked.png";
+import RedCompleted from "@/assets/red-completed.png";
+import RedInProgressClicked from "@/assets/red-in-progress-clicked.png";
+import RedInProgress from "@/assets/red-in-progress.png";
+import YellowCompletedClicked from "@/assets/yellow-completed-clicked.png";
+import YellowCompleted from "@/assets/yellow-completed.png";
+import YellowInProgressClicked from "@/assets/yellow-in-progress-clicked.png";
+import YellowInProgress from "@/assets/yellow-in-progress.png";
+
+// Function to decide which image to show based on the color, status, and clicked state
+// Clicked state doesn't work for red and yellow buttons because don't have those images yet
+const decideImage = (
+  color: "red" | "green" | "yellow",
+  status: "completed" | "incomplete" | "inProgress",
+  clicked: boolean,
+) => {
+  const images = {
+    red: {
+      completed: clicked ? RedCompletedClicked : RedCompleted,
+      incomplete: Incomplete,
+      inProgress: clicked ? RedInProgressClicked : RedInProgress,
+    },
+    green: {
+      completed: clicked ? GreenCompletedClicked : GreenCompleted,
+      incomplete: Incomplete,
+      inProgress: clicked ? GreenInProgressClicked : GreenInProgress,
+    },
+    yellow: {
+      completed: clicked ? YellowCompletedClicked : YellowCompleted,
+      incomplete: Incomplete,
+      inProgress: clicked ? YellowInProgressClicked : YellowInProgress,
+    },
+  };
+
+  return images[color][status];
+};
+
+type ActivityButtonBaseProps = {
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+type ActivityButtonIncompleteProps = {
+  status: "incomplete";
+  color?: never;
+};
+
+type ActivityButtonNormalProps = {
+  status: "completed" | "inProgress";
+  color: "red" | "green" | "yellow";
+};
+
+type ActivityButtonProps = ActivityButtonBaseProps &
+  (ActivityButtonIncompleteProps | ActivityButtonNormalProps);
+
+const ActivityButton = ({ color = "red", status, onPress, style }: ActivityButtonProps) => {
+  const [clicked, setClicked] = useState(false);
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      style={[styles.container, style]}
+      onPressIn={() => {
+        setClicked(true);
+      }}
+      onPressOut={() => {
+        setClicked(false);
+      }}
+      onPress={onPress}
+    >
+      <Image source={decideImage(color, status, clicked)} style={styles.image} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 98,
+    height: 98,
+    marginVertical: 10,
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "contain",
+  },
+});
+
+export default ActivityButton;