From 9388b6844dc276a68fb8285bbc6d633061f69da5 Mon Sep 17 00:00:00 2001
From: Ronnie Beggs <rbeggs@berkeley.edu>
Date: Tue, 23 Apr 2024 19:18:08 -0700
Subject: [PATCH] [refactor] moving stuff around.

---
 .../InputScreenStyles/InputScreenStyles.ts}   |  6 ++
 .../(Authentication)/Login/Email/index.tsx    |  2 +-
 .../(Authentication)/Login/Password/index.tsx |  2 +-
 .../OTPFlow/OTPEmailInput/index.tsx           |  2 +-
 .../OTPFlow/OTPNewPassword/index.tsx          |  2 +-
 .../OTPFlow/OTPVerify/index.tsx               |  2 +-
 .../(Authentication)/SignUp/Address/index.tsx |  2 +-
 .../(Authentication)/SignUp/Email/index.tsx   |  2 +-
 .../SignUp/Password/index.tsx                 |  2 +-
 .../Profile/EditName/index.tsx                | 70 +++++++++++--------
 10 files changed, 55 insertions(+), 37 deletions(-)
 rename src/{app/(Authentication)/styles.ts => Components/InputScreenStyles/InputScreenStyles.ts} (88%)

diff --git a/src/app/(Authentication)/styles.ts b/src/Components/InputScreenStyles/InputScreenStyles.ts
similarity index 88%
rename from src/app/(Authentication)/styles.ts
rename to src/Components/InputScreenStyles/InputScreenStyles.ts
index d7c16e9f..b969a848 100644
--- a/src/app/(Authentication)/styles.ts
+++ b/src/Components/InputScreenStyles/InputScreenStyles.ts
@@ -28,6 +28,12 @@ export const ErrorMessageContainer = styled.View({
   paddingTop: 10,
 });
 
+export const GroupButtonContent = styled.View({
+  flexDirection: 'row',
+  alignItems: 'center',
+  columnGap: 15,
+});
+
 export const TitleText = styled.Text({
   color: colors.black,
   fontSize: 24,
diff --git a/src/app/(Authentication)/Login/Email/index.tsx b/src/app/(Authentication)/Login/Email/index.tsx
index 81acf627..485084c9 100644
--- a/src/app/(Authentication)/Login/Email/index.tsx
+++ b/src/app/(Authentication)/Login/Email/index.tsx
@@ -19,7 +19,7 @@ import {
   InstructionContainer,
   InstructionText,
   TitleText,
-} from '../../styles';
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 
 export default function LoginScreen() {
   const [email, setEmail] = useState<string>('');
diff --git a/src/app/(Authentication)/Login/Password/index.tsx b/src/app/(Authentication)/Login/Password/index.tsx
index 47f83493..0c106192 100644
--- a/src/app/(Authentication)/Login/Password/index.tsx
+++ b/src/app/(Authentication)/Login/Password/index.tsx
@@ -19,7 +19,7 @@ import {
   InstructionContainer,
   InstructionText,
   TitleText,
-} from '../../styles';
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 
 export default function LoginScreen() {
   const { email } = useLocalSearchParams() as unknown as { email: string };
diff --git a/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx b/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx
index 53c2f79e..155d0232 100644
--- a/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx
+++ b/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx
@@ -18,7 +18,7 @@ import {
   InputBoxContainer,
   InstructionContainer,
   TitleText,
-} from '../../styles';
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 
 export default function OTPEmailInput() {
   const [email, setEmail] = useState<string>('');
diff --git a/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx b/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx
index 13c2f2d6..4089a0fe 100644
--- a/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx
+++ b/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx
@@ -17,7 +17,7 @@ import {
   InputBoxContainer,
   InstructionContainer,
   TitleText,
-} from '../../styles';
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 
 export default function OTPNewPassword() {
   const [password, setPassword] = useState<string>('');
diff --git a/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx b/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx
index 0bd09e15..1a884890 100644
--- a/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx
+++ b/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx
@@ -21,7 +21,7 @@ import {
   InstructionContainer,
   InstructionText,
   TitleText,
-} from '../../styles';
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 
 export default function OTPFlow() {
   const { changePassword } = useLocalSearchParams() as unknown as {
diff --git a/src/app/(Authentication)/SignUp/Address/index.tsx b/src/app/(Authentication)/SignUp/Address/index.tsx
index f47ff8db..12fdb91a 100644
--- a/src/app/(Authentication)/SignUp/Address/index.tsx
+++ b/src/app/(Authentication)/SignUp/Address/index.tsx
@@ -16,7 +16,7 @@ import {
   InputBoxContainer,
   InstructionContainer,
   TitleText,
-} from '../../styles';
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 
 export default function SignUpScreen() {
   const { name } = useLocalSearchParams() as unknown as { name: string };
diff --git a/src/app/(Authentication)/SignUp/Email/index.tsx b/src/app/(Authentication)/SignUp/Email/index.tsx
index 6a8893d4..60d502b7 100644
--- a/src/app/(Authentication)/SignUp/Email/index.tsx
+++ b/src/app/(Authentication)/SignUp/Email/index.tsx
@@ -18,7 +18,7 @@ import {
   InputBoxContainer,
   InstructionContainer,
   TitleText,
-} from '../../styles';
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 
 export default function SignUpScreen() {
   const [name, setName] = useState<string>('');
diff --git a/src/app/(Authentication)/SignUp/Password/index.tsx b/src/app/(Authentication)/SignUp/Password/index.tsx
index d5dc9ee9..181838d0 100644
--- a/src/app/(Authentication)/SignUp/Password/index.tsx
+++ b/src/app/(Authentication)/SignUp/Password/index.tsx
@@ -17,7 +17,7 @@ import {
   InputBoxContainer,
   InstructionContainer,
   TitleText,
-} from '../../styles';
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 
 export default function SignUpScreen() {
   const { name } = useLocalSearchParams() as unknown as { name: string };
diff --git a/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx b/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx
index 88964094..a8b91d3a 100644
--- a/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx
+++ b/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx
@@ -5,30 +5,50 @@ import { Text, View, TouchableOpacity } from 'react-native';
 import styles from './styles';
 import BackButton from '../../../../../assets/back-button.svg';
 import Submit from '../../../../../assets/submit.svg';
-import { ButtonBlack } from '../../../../Components/AuthButton/AuthButton';
+import {
+  ButtonBlack,
+  ButtonTextWhite,
+} from '../../../../Components/AuthButton/AuthButton';
 import AuthInput from '../../../../Components/AuthInput/AuthInput';
+import {
+  ErrorMessageContainer,
+  GroupButtonContent,
+  InputBoxContainer,
+  InstructionContainer,
+  TitleText,
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 import { useSession } from '../../../../context/AuthContext';
+import { ContentContainer, SafeArea } from '../../../../styles/global';
 
 function EditNameScreen() {
   const { updateUser, session } = useSession();
   const [fullName, setFullName] = useState<string>('');
 
+  function updateName() {
+    updateUser({
+      data: {
+        fullName,
+      },
+    });
+    router.back();
+  }
+
   useEffect(() => {
     setFullName(session?.user?.user_metadata.fullName);
   }, []);
 
   return (
-    <View style={styles.container}>
-      <View style={styles.contentContainer}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => router.push('/Profile/')}
-        >
+    <SafeArea>
+      <ContentContainer>
+        <TouchableOpacity onPress={() => router.back()}>
           <BackButton />
         </TouchableOpacity>
-        <Text style={styles.instructionText}>Edit account details</Text>
 
-        <View style={styles.inputBox}>
+        <InstructionContainer>
+          <TitleText>Edit account details</TitleText>
+        </InstructionContainer>
+
+        <InputBoxContainer>
           <AuthInput
             input={fullName}
             onChangeInput={setFullName}
@@ -38,30 +58,22 @@ function EditNameScreen() {
             keyboard="default"
             autoCapitalization
           />
-        </View>
+        </InputBoxContainer>
+
+        <ErrorMessageContainer />
+
         <ButtonBlack
-          style={styles.submitButton}
           disabled={!fullName || fullName.trim() === ''}
-          onPress={() => {
-            if (fullName) {
-              updateUser({
-                data: {
-                  fullName,
-                },
-              });
-              router.push('/Profile/');
-            } else {
-              //ask josh about what should appear in invalid name event
-            }
-          }}
+          onPress={updateName}
+          style={{ justifyContent: 'center' }}
         >
-          <Text style={styles.submitText}>
-            Submit
-            <Submit style={styles.submitIcon} />
-          </Text>
+          <GroupButtonContent>
+            <ButtonTextWhite>Submit</ButtonTextWhite>
+            <Submit />
+          </GroupButtonContent>
         </ButtonBlack>
-      </View>
-    </View>
+      </ContentContainer>
+    </SafeArea>
   );
 }
 export default EditNameScreen;