[feat] apply headers to every screen in the auth flow.

calblueprint · Apr 24, 2024 · 0e7057c · 0e7057c
1 parent dc4c3bf
commit 0e7057c
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 49 deletions.
diff --git a/src/app/(Authentication)/Login/Email/index.tsx b/src/app/(Authentication)/Login/Email/index.tsx
@@ -31,9 +31,6 @@ export default function LoginScreen() {
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
-        <Text style={styles.backText}>Back</Text>
-      </TouchableOpacity>
       <Text style={styles.instructionText}>
         Please enter your email address.
       </Text>

diff --git a/src/app/(Authentication)/Login/Password/index.tsx b/src/app/(Authentication)/Login/Password/index.tsx
@@ -35,9 +35,6 @@ export default function LoginScreen() {
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
-        <Text style={styles.backText}>Back</Text>
-      </TouchableOpacity>
       <Text style={styles.instructionText}>Please enter your password.</Text>
 
       <View style={styles.inputBox}>

diff --git a/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx b/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx
@@ -45,12 +45,6 @@ export default function OTPEmailInput() {
   return (
     <View style={styles.container}>
       <View style={styles.innerContainer}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
         <View>
           <Text style={styles.instructionText}>
             Please enter the email you used to create your account.

diff --git a/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx b/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx
@@ -64,14 +64,6 @@ export default function SignUpScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
-      </View>
       <Text style={styles.instructionText}>Create a new password.</Text>
 
       <View style={styles.inputBox}>

diff --git a/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx b/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx
@@ -50,11 +50,6 @@ export default function OTPFlow() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity onPress={() => router.back()}>
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
-      </View>
       <View style={styles.contentContainer}>
         <View style={styles.instructionContainer}>
           <Text style={styles.headerText}>Enter verification code.</Text>

diff --git a/src/app/(Authentication)/SignUp/Address/index.tsx b/src/app/(Authentication)/SignUp/Address/index.tsx
@@ -66,7 +66,6 @@ export default function SignUpScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header} />
       <Text style={styles.instructionText}>Last, enter your address.</Text>
 
       <View style={styles.inputBox}>

diff --git a/src/app/(Authentication)/SignUp/Email/index.tsx b/src/app/(Authentication)/SignUp/Email/index.tsx
@@ -58,14 +58,6 @@ export default function SignUpScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
-      </View>
       <Text style={styles.instructionText}>Create your account.</Text>
       <View style={styles.inputBox}>
         <AuthInput

diff --git a/src/app/(Authentication)/SignUp/Password/index.tsx b/src/app/(Authentication)/SignUp/Password/index.tsx
@@ -69,14 +69,6 @@ export default function SignUpScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
-      </View>
       <Text style={styles.instructionText}>Next, make a password.</Text>
 
       <View style={styles.inputBox}>

diff --git a/src/app/(Authentication)/Welcome/index.tsx b/src/app/(Authentication)/Welcome/index.tsx
@@ -9,11 +9,6 @@ function WelcomeScreen() {
   return (
     <View style={styles.container}>
       <View style={styles.contentContainer}>
-        <Image
-          style={styles.image}
-          source={require('../../../../assets/inline-logo.jpeg')}
-        />
-
         <View style={styles.textContainer}>
           <Text style={styles.welcomeText}>Welcome to the Impact Fund!</Text>
         </View>

diff --git a/src/app/(Authentication)/_layout.tsx b/src/app/(Authentication)/_layout.tsx
@@ -1,6 +1,88 @@
 import { Stack } from 'expo-router';
 import React from 'react';
 
-export default function AuthLayout() {
-  return <Stack screenOptions={{ headerShown: false }} />;
+import {
+  BackButtonNoText,
+  BackButtonText,
+} from '../../Components/BackButtons/BackButtons';
+import {
+  LeftAlignedHeader,
+  HeaderImage,
+  EmptyHeader,
+} from '../../Components/HeaderComponents/HeaderComponents';
+import { CaseContextProvider } from '../../context/CaseContext';
+
+export default function CasesLayout() {
+  return (
+    <CaseContextProvider>
+      <Stack
+        screenOptions={{
+          headerShown: true,
+          headerBackTitleVisible: false,
+          headerShadowVisible: false,
+        }}
+      >
+        <Stack.Screen
+          name="Welcome/index"
+          options={{
+            headerTitle: () => <LeftAlignedHeader />,
+          }}
+        />
+        <Stack.Screen
+          name="Login/Email/index"
+          options={{
+            headerLeft: () => <BackButtonNoText />,
+            headerTitle: () => <EmptyHeader />,
+          }}
+        />
+        <Stack.Screen
+          name="Login/Password/index"
+          options={{
+            headerLeft: () => <BackButtonNoText />,
+            headerTitle: () => <EmptyHeader />,
+          }}
+        />
+        <Stack.Screen
+          name="SignUp/Email/index"
+          options={{
+            headerLeft: () => <BackButtonNoText />,
+            headerTitle: () => <EmptyHeader />,
+          }}
+        />
+        <Stack.Screen
+          name="SignUp/Password/index"
+          options={{
+            headerLeft: () => <BackButtonNoText />,
+            headerTitle: () => <EmptyHeader />,
+          }}
+        />
+        <Stack.Screen
+          name="SignUp/Address/index"
+          options={{
+            headerTitle: () => <EmptyHeader />,
+          }}
+        />
+        <Stack.Screen
+          name="OTPFlow/OTPEmailInput/index"
+          options={{
+            headerLeft: () => <BackButtonNoText />,
+            headerTitle: () => <EmptyHeader />,
+          }}
+        />
+        <Stack.Screen
+          name="OTPFlow/OTPVerify/index"
+          options={{
+            headerLeft: () => <BackButtonNoText />,
+            headerTitle: () => <EmptyHeader />,
+          }}
+        />
+        <Stack.Screen
+          name="OTPFlow/OTPNewPassword/index"
+          options={{
+            headerTitle: () => <EmptyHeader />,
+          }}
+        />
+      </Stack>
+    </CaseContextProvider>
+  );
 }