From 0e7057cb02283df5e2841583aeef42880929aa54 Mon Sep 17 00:00:00 2001
From: Ronnie Beggs <rbeggs@berkeley.edu>
Date: Wed, 24 Apr 2024 14:36:49 -0700
Subject: [PATCH] [feat] apply headers to every screen in the auth flow.

---
 .../(Authentication)/Login/Email/index.tsx    |  3 -
 .../(Authentication)/Login/Password/index.tsx |  3 -
 .../OTPFlow/OTPEmailInput/index.tsx           |  6 --
 .../OTPFlow/OTPNewPassword/index.tsx          |  8 --
 .../OTPFlow/OTPVerify/index.tsx               |  5 --
 .../(Authentication)/SignUp/Address/index.tsx |  1 -
 .../(Authentication)/SignUp/Email/index.tsx   |  8 --
 .../SignUp/Password/index.tsx                 |  8 --
 src/app/(Authentication)/Welcome/index.tsx    |  5 --
 src/app/(Authentication)/_layout.tsx          | 86 ++++++++++++++++++-
 10 files changed, 84 insertions(+), 49 deletions(-)

diff --git a/src/app/(Authentication)/Login/Email/index.tsx b/src/app/(Authentication)/Login/Email/index.tsx
index 0901cc2a..7530da2c 100644
--- 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
index 2f1258b9..77e61d90 100644
--- 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
index 62a53d3a..325d29ac 100644
--- 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
index 6383c5cc..125f09af 100644
--- 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
index 9d7745b2..572418e4 100644
--- 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
index 68097129..823d402c 100644
--- 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
index e100976f..80748571 100644
--- 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
index 40813090..f95f1b46 100644
--- 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
index 73d6c787..7fc6829c 100644
--- 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
index 54f10f4f..6f6649c1 100644
--- 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>
+  );
 }