Fixed Errors and Routing Screens

source/frontend/app/AuthStackNavigator.tsx

@@ -5,18 +5,20 @@ import { Login } from "@/pages/login";
 import { NavigationContainer } from "@react-navigation/native";
 import MyTabs from "./MainNavigator";
 import StartPage from "@/pages/startpage";
+import { AuthStackParamList } from "../app/StackParamList";
+
+const AuthStack = createStackNavigator<AuthStackParamList>();
 
-const AuthStack = createStackNavigator();
 function AuthStackNavigator() {
   return (
     <AuthStack.Navigator
-      initialRouteName="StartPage"
+      initialRouteName="Start"
       screenOptions={{ headerShown: false }}
     >
-      <AuthStack.Screen name="StartPage" component={StartPage} />
-      <AuthStack.Screen name="SignUp" component={SignUp} />
-      <AuthStack.Screen name="Login" component={Login} />
-      <AuthStack.Screen name="Main" component={MyTabs} />
+      <AuthStack.Screen name="Start" component={StartPage}/>
+      <AuthStack.Screen name="SignUp" component={SignUp}/>
+      <AuthStack.Screen name="Login" component={Login} options={{headerShown: true, headerTitle: "", headerBackTitleVisible: false}}/>
+      <AuthStack.Screen name="Main" component={MyTabs}/>
     </AuthStack.Navigator>
   );
 }

source/frontend/app/MainNavigator.tsx

@@ -13,7 +13,8 @@ import Summary from "@/pages/summary";
 import PriceWatch from "@/pages/pricewatch";
 import UserValid from "@/pages/uservalid";
 import History from "@/pages/history";
-import { Account } from "@/pages/account";
+import {Account} from "@/pages/account";
+import {EditProfile} from "@/pages/editprofile";
 import DetailedHistory from "@/pages/detailedhistory";
 import {
   SummaryStackParamList,
@@ -30,6 +31,16 @@ const HistoryStack = createStackNavigator<HistoryStackParamList>();
 const AccountStack = createStackNavigator<AccountStackParamList>();
 
 // Create stack navigators for each tab
+
+/**
+ * Errors: The error below can be fixed through having both navigation and route in the props
+  * Type 'typeof Account' is not assignable to type 'ScreenComponentType<AccountStackParamList, "Account"> | undefined'.
+    Type 'typeof Account' is not assignable to type 'ComponentClass<{}, any>'.
+      Types of parameters 'props' and 'props' are incompatible.
+        Property 'onClicked' is missing in type '{}' but required in type 'AccountProps'.ts(2322)
+  account.tsx(7, 3): 'onClicked' is declared here.
+  types.d.ts(318, 5): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & RouteConfig<AccountStackParamList,
+ */
 function SummaryStackNavigator() {
   return (
     <SummaryStack.Navigator>
@@ -68,6 +79,7 @@ function AccountStackNavigator() {
   return (
     <AccountStack.Navigator>
       <AccountStack.Screen name="Account" component={Account} />
+      <AccountStack.Screen name="EditProfile" component={EditProfile}/>
     </AccountStack.Navigator>
   );
 }

source/frontend/app/StackParamList.tsx

@@ -1,4 +1,10 @@
 // Define param lists for each stack if they have unique parameters
+export type AuthStackParamList = {
+  Start: undefined;
+  SignUp: undefined;
+  Login: undefined;
+  Main: undefined;
+};
 
 // Param list for the Summary stack
 export type SummaryStackParamList = {
@@ -28,5 +34,6 @@ export type HistoryStackParamList = {
 // Param list for the Account stack
 export type AccountStackParamList = {
   Account: undefined;
+  EditProfile: { view: "email" | "password"}
   // Add other screens and their params in Account Stack if necessary
 };

source/frontend/components/style.tsx

@@ -40,19 +40,6 @@ export const Container = styled.View`
   background-color: ${Colors.primary};
 `;
 
-// Change color of the background and border and update the text color(Edit Profile)
-export const TopBar = styled.View`
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  paddinghorizontal: 20px;
-  paddingtop: 30px;
-  height: 100px;
-  background-color: #ffffff;
-  border-bottom-width: 1px;
-  border-bottom-color: #ddd;
-`;
-
 export const PageTitle = styled.Text`
   font-size: 30px;
   text-align: center;
@@ -120,3 +107,30 @@ export const Line = styled.View`
   background-color: ${darkLight};
   margin-vertical: 10px;
 `;
+
+export const CenteredView = styled.View`
+  flex: 1;
+  justifyContent: center;
+  alignItems: center;
+  marginTop: 22px;
+`;
+
+export const ModalView = styled.View`
+  margin: 20px;
+  backgroundColor: lightgreen;
+  borderRadius: 20px;
+  padding: 35px;
+  alignItems: center;
+  shadowColor: #000;
+  shadowOpacity: 0.25;
+  shadowRadius: 4px;
+  elevation: 5;
+`;
+
+/**
+ * 
+  shadowOffset: {
+    width: 0px,
+    height: 2px,
+  };
+ */