Onboarding Clean-up

frontend/App.tsx

@@ -4,6 +4,7 @@ import { configureStore } from '@reduxjs/toolkit';
 import onboardingReducer from './reducers/onboarding/onboardingReducer';
 import LayoutWrapper from './components/LayoutWrapper';
 import { ClerkProvider } from '@clerk/clerk-expo';
+//import 'react-native-gesture-handler';
 import * as SecureStore from 'expo-secure-store';
 
 const store = configureStore({

frontend/app.json

@@ -9,6 +9,7 @@
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
+      "padding": 12,
       "backgroundColor": "#ffffff"
     },
     "assetBundlePatterns": [

frontend/babel.config.js

@@ -3,12 +3,15 @@ module.exports = function(api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-    plugins: ["nativewind/babel", 
+    plugins: [
+      "nativewind/babel", 
       ["module:react-native-dotenv", {
         "moduleName": "@env",
         "path": "../.env",
         }
-      ]
+      ],
+      '@babel/plugin-proposal-export-namespace-from',
+      'react-native-reanimated/plugin',
     ],
   };
 }

frontend/components/ETradeAuth.tsx

@@ -1,4 +1,4 @@
-import {Text, View, Linking, TouchableOpacity, TextInput, Alert} from 'react-native'
+import {Text, View, Linking, TouchableOpacity, TextInput, Alert, StyleSheet} from 'react-native'
 import React, {useState} from 'react'
 import { Button } from 'react-native-paper'
 import {getCallbackUrl, verifyToken} from '../services/users'
@@ -26,6 +26,7 @@ const AuthPage = (props: { successCallback: () => void }) => {
   }
 
   const onVerifyPress = async () => {
+    console.log("Verifying")
     if (!isSignedIn) {
       Alert.alert("Something went wrong - not signed in");
       return;
@@ -34,7 +35,9 @@ const AuthPage = (props: { successCallback: () => void }) => {
     const id = user.id;
 
     const verifierStatus: HttpStatusCode = await verifyToken(id, verifierToken);
+    console.log(verifierStatus)
     if (verifierStatus === HttpStatusCode.Ok) {
+      console.log("succesful")
       props.successCallback()
     } else {
       console.log("Error verifying token!")
@@ -45,30 +48,77 @@ const AuthPage = (props: { successCallback: () => void }) => {
       <View>
         {redirectUrl === "" ? (
           /* If the access token is inactive, and we don't have a redirect URL */
-          <Button onPress={etradeRedirect}>Authenticate with E-Trade</Button>
+          <Button style={styles.activateButton} onPress={etradeRedirect} textColor='#FFFFFF'>Authenticate with E-Trade</Button>
         ) : (
           /* Redirect token retrieved, verification token form */
-          <View>
-            <View className="flex justify-center items-center flex-grow">
+          <View className='flex-column justify-start'>
+            <View className="rounded w-full">
               <TextInput
                 autoCapitalize="none"
                 value={verifierToken}
                 placeholder="Verifier token..."
                 onChangeText={verifier => setVerifierToken(verifier)}
-                className="w-52 border-2 border-gray-400 rounded-lg mb-4 pl-2"
+                style={styles.input}
               />
-              <TouchableOpacity
+            </View>
+            <View style={styles.bottomCont}>
+              <TouchableOpacity style={styles.button} onPress={onVerifyPress}>
+                <Text style={styles.buttonText}>Verify</Text>
+              </TouchableOpacity>
+            </View>
+              {/* <TouchableOpacity
                 onPress={onVerifyPress}
                 className="w-40 h-10 border border-gray-400 p-2 rounded mb-4 bg-gray-400 flex justify-center items-center">
                 <Text>Verify</Text>
-              </TouchableOpacity>
-            </View>
+              </TouchableOpacity> */}
 
-            <Button onPress={etradeRedirect}>Retry Authentication</Button>
+            <Button onPress={etradeRedirect} style={{marginTop: 15}} textColor={'#7C7C7C'}>Retry Authentication</Button>
           </View>
         )}
       </View>
   );
 }
+const styles = StyleSheet.create({
+  activateButton: {
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    borderRadius: 30,
+    marginTop: "5%",
+    color: "#FFFFFF",
+    backgroundColor: '#333333', // Darker grey color for active state
+  },
+  bottomCont: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    width: "100%",
+  },
+  button: {
+    padding: 15,
+    borderRadius: 20,
+    width: '100%',
+    height: 60,
+    backgroundColor: '#02AD98',
+    alignItems: 'center',
+    marginTop: 20,
+    justifyContent: 'center'
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+  },
+  input: {
+    height: 60,
+    width: '100%', // Adjust width as per your layout
+    backgroundColor: '#F1F1F1', // Background color for the input
+    borderWidth: 1,
+    borderColor: '#F1F1F1', // Border color for the input
+    borderRadius: 18,
+    padding: 14,
+    marginBottom: 15,
+    fontSize: 16,
+  },
+})
 
 export default AuthPage

frontend/components/FinancialGoal.tsx

@@ -23,32 +23,36 @@ const FinancialGoal: React.FC<FinancialGoalProps> = ({ goal, isSelected, onSelec
 // Define the styles for the component
 const styles = StyleSheet.create({
   goal: {
-    padding: 10,
+    paddingHorizontal: 14,
     borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 20,
-    marginBottom: 10,
+    borderRadius: 18,
+    //marginBottom: 10,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#fff',
     marginVertical: 4,
+    height: 65,
+    width: '100%', // Adjust width as per your layout
+    backgroundColor: '#F1F1F1', // Background color for the input
+    borderColor: '#F1F1F1', // Border color for the input
+    fontSize: 16,
   },
   goalSelected: {
-    padding: 10,
-    borderWidth: 1,
-    borderColor: '#6F6F6F',
-    borderRadius: 20,
-    marginBottom: 10,
+    paddingHorizontal: 14,
+    borderRadius: 18,
+    //marginBottom: 10,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#6F6F6F', 
-    marginHorizontal: 5, // Keep the horizontal margin consistent
+    marginVertical: 4,
+    height: 65,
+    width: '100%', // Adjust width as per your layout
+    backgroundColor:'rgba(2, 173, 152, 0.08)', // Background color for the input
+    fontSize: 16,
   },
   goalText: {
     color: '#000',
   },
   goalTextSelected: {
-    color: '#6F6F6F',
+    color: '#02AD98',
   },
 });
 

frontend/components/LayoutWrapper.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSession } from '@clerk/clerk-expo';
 import { NavigationContainer } from '@react-navigation/native';
 import BottomNavBar from '../router/BottomNavBar';
 import AuthNavigator from '../router/AuthNavigation';
@@ -17,19 +16,26 @@ export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 
 export default function LayoutWrapper() {
-  const { session } = useSession();
+  //const { session } = useSession();
 
   const onboarding = useSelector((state: RootState) => {
     return state.onboarding;
   });
 
   return (
     <NavigationContainer>
-      {session?.user !== undefined && !onboarding.isOnboarding ? (
+      {
+        {
+          onboarding: <AuthNavigator/>,
+          normal: <BottomNavBar/>,
+          makingPost: (null),
+        }[onboarding.isOnboarding]
+      }
+      {/* {session?.user !== undefined && !onboarding.isOnboarding  ? (
         <BottomNavBar />
       ) : (
         <AuthNavigator />
-      )}
+      )} */}
     </NavigationContainer>
   );
 }

frontend/components/SignOutButton.tsx

@@ -1,8 +1,11 @@
 import { useAuth } from '@clerk/clerk-expo';
 import { Button, View } from 'react-native';
+import { useDispatch} from 'react-redux';
+import { signOutUser } from '../reducers/onboarding/onboardingReducer';
 
 const SignOut = () => {
   const { isLoaded, signOut, sessionId } = useAuth();
+  const dispatch = useDispatch();
   if (!isLoaded) {
     return null;
   }
@@ -14,6 +17,7 @@ const SignOut = () => {
         onPress={async () => {
           console.log('Sign Out Pressed | sessionID: ', JSON.stringify(sessionId));
           await signOut();
+          await dispatch(signOutUser())
           console.log('Signed out | sessionID: ', JSON.stringify(sessionId));
         }}
       />

frontend/components/WizardStep.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+type WizardStepProps = {
+    step: number
+}
+const steps = [1, 2, 3, 4, 5]
+const WizardStep: React.FC<WizardStepProps> = ({ step }) => {
+    return (
+        <View style={styles.container}>
+            {
+                steps.map((num: number) => (
+                    <View 
+                        key={num} 
+                        style={styles.section} className={`rounded ${step >= num ? 'bg-[#02AD98]' : 'bg-[#D6D6D6]'}`}>
+                    </View>
+                ))
+            }
+        </View>
+    )
+}
+
+export default WizardStep;
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "100%",
+        gap: 10
+    },
+    section: {
+        height: 10,
+        //width: '100%',
+        flex: 1
+    }
+})

frontend/package.json

@@ -3,14 +3,15 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
+    "start": "expo start -c",
     "tunnel": "expo start",
     "lint": "npx eslint .",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"
   },
   "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/preset-env": "^7.1.6",
     "@babel/runtime": "^7.20.6",
     "@clerk/clerk-expo": "^0.20.5",
@@ -41,6 +42,7 @@
     "react-native": "0.73.4",
     "react-native-gesture-handler": "2.14.0",
     "react-native-paper": "^5.11.6",
+    "react-native-reanimated": "3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "3.29.0",
     "react-native-svg": "^15.0.0",

frontend/pages/AuthPage.tsx

@@ -1,13 +1,11 @@
 import {Text, View, Alert} from 'react-native'
 import React, {useEffect, useState} from 'react'
-//import { useNavigation } from '@react-navigation/native'
 import {RefreshControl, ScrollView} from "nativewind/dist/preflight";
 import ETradeAuth from "../components/ETradeAuth";
 import {TokenStatus} from "../types/types";
 import {getTokenStatus} from "../services/users";
 
 const AuthPage = () => {
-  //const navigation = useNavigation();
   const [authenticated, setAuthenticated] = useState(false)
   const [refreshing, setRefreshing] = useState(false);
 

frontend/pages/FeedPage.tsx

@@ -1,8 +1,5 @@
 import { StyleSheet, Text, View } from 'react-native';
 import React from 'react';
-// import { User } from '../types/types';
-// import { getAllUsers } from '../services/users';
-// import Logo from '../assets/test.svg';
 import { SvgXml } from 'react-native-svg';
 import Post from '../components/Post';