[refactor] idk what I'm doing at this point.

calblueprint · Apr 24, 2024 · 8cf68f1 · 8cf68f1
1 parent 9388b68
commit 8cf68f1
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 99 deletions.
diff --git a/src/Components/InputScreenStyles/InputScreenStyles.ts b/src/Components/InputScreenStyles/InputScreenStyles.ts
@@ -28,6 +28,10 @@ export const ErrorMessageContainer = styled.View({
   paddingTop: 10,
 });
 
+export const InputScreenGap = styled.View({
+  height: 40,
+});
+
 export const GroupButtonContent = styled.View({
   flexDirection: 'row',
   alignItems: 'center',

diff --git a/src/app/(Authentication)/SignUp/Address/index.tsx b/src/app/(Authentication)/SignUp/Address/index.tsx
@@ -9,14 +9,16 @@ import {
   ButtonTextWhite,
 } from '../../../../Components/AuthButton/AuthButton';
 import AuthInput from '../../../../Components/AuthInput/AuthInput';
-import { useSession } from '../../../../context/AuthContext';
-import { SafeArea, ContentContainer } from '../../../../styles/global';
 import {
+  GroupButtonContent,
   InlineInputContainer,
   InputBoxContainer,
+  InputScreenGap,
   InstructionContainer,
   TitleText,
 } from '../../../../Components/InputScreenStyles/InputScreenStyles';
+import { useSession } from '../../../../context/AuthContext';
+import { SafeArea, ContentContainer } from '../../../../styles/global';
 
 export default function SignUpScreen() {
   const { name } = useLocalSearchParams() as unknown as { name: string };
@@ -130,6 +132,8 @@ export default function SignUpScreen() {
           </InlineInputContainer>
         </InputBoxContainer>
 
+        <InputScreenGap />
+
         <ButtonBlack
           disabled={
             streetAddress.trim() === '' ||
@@ -138,11 +142,12 @@ export default function SignUpScreen() {
             zipcode.trim() === ''
           }
           onPress={() => handleSubmit()}
+          style={{ justifyContent: 'center' }}
         >
-          <View style={{ flexDirection: 'row', columnGap: 15 }}>
+          <GroupButtonContent>
             <ButtonTextWhite>Sign Up</ButtonTextWhite>
             <Check />
-          </View>
+          </GroupButtonContent>
         </ButtonBlack>
       </ContentContainer>
     </SafeArea>

diff --git a/src/app/(Authentication)/SignUp/Password/index.tsx b/src/app/(Authentication)/SignUp/Password/index.tsx
@@ -7,17 +7,18 @@ import Arrow from '../../../../../assets/right-arrow-white.svg';
 import {
   ButtonBlack,
   ButtonTextBlack,
+  ButtonTextWhite,
 } from '../../../../Components/AuthButton/AuthButton';
 import AuthInput from '../../../../Components/AuthInput/AuthInput';
-import { SafeArea, ContentContainer } from '../../../../styles/global';
-import supabase from '../../../../supabase/createClient';
 import {
   ErrorMessageContainer,
   ErrorMessageText,
   InputBoxContainer,
   InstructionContainer,
   TitleText,
 } from '../../../../Components/InputScreenStyles/InputScreenStyles';
+import { SafeArea, ContentContainer } from '../../../../styles/global';
+import supabase from '../../../../supabase/createClient';
 
 export default function SignUpScreen() {
   const { name } = useLocalSearchParams() as unknown as { name: string };
@@ -122,8 +123,8 @@ export default function SignUpScreen() {
           disabled={password === '' || confirmPassword === '' || disableButton}
           onPress={handleSubmit}
         >
-          <ButtonTextBlack>Continue</ButtonTextBlack>
-          <Arrow style={{ marginRight: 15 }} />
+          <ButtonTextWhite>Continue</ButtonTextWhite>
+          <Arrow />
         </ButtonBlack>
       </ContentContainer>
     </SafeArea>

diff --git a/src/app/(BottomTabNavigation)/Profile/DeleteAccount/index.tsx b/src/app/(BottomTabNavigation)/Profile/DeleteAccount/index.tsx
@@ -12,6 +12,10 @@ import {
   ButtonWhite,
 } from '../../../../Components/AuthButton/AuthButton';
 import CasesHeader from '../../../../Components/CasesHeader/CasesHeader';
+import {
+  GroupButtonContent,
+  InlineInputContainer,
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 import { useSession } from '../../../../context/AuthContext';
 import { SafeArea } from '../../../../styles/global';
 
@@ -40,23 +44,21 @@ function DeleteAccountScreen() {
           </View>
         </View>
 
-        <View style={styles.buttonContainer}>
+        <InlineInputContainer>
           <ButtonWhite onPress={() => router.back()} style={styles.buttonView}>
-            <View style={styles.buttonContent}>
+            <GroupButtonContent>
               <X />
-              <ButtonTextBlack style={styles.cancelText}>
-                Cancel
-              </ButtonTextBlack>
-            </View>
+              <ButtonTextBlack>Cancel</ButtonTextBlack>
+            </GroupButtonContent>
           </ButtonWhite>
 
           <ButtonBlack onPress={deleteAccount} style={styles.buttonView}>
-            <View style={styles.buttonContent}>
+            <GroupButtonContent>
               <WhiteTrash />
               <ButtonTextWhite>Confirm</ButtonTextWhite>
-            </View>
+            </GroupButtonContent>
           </ButtonBlack>
-        </View>
+        </InlineInputContainer>
       </View>
     </SafeArea>
   );

diff --git a/src/app/(BottomTabNavigation)/Profile/EditAddress/index.tsx b/src/app/(BottomTabNavigation)/Profile/EditAddress/index.tsx
@@ -5,9 +5,21 @@ 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 {
+  GroupButtonContent,
+  InlineInputContainer,
+  InputBoxContainer,
+  InputScreenGap,
+  InstructionContainer,
+  TitleText,
+} from '../../../../Components/InputScreenStyles/InputScreenStyles';
 import { useSession } from '../../../../context/AuthContext';
+import { ContentContainer, SafeArea } from '../../../../styles/global';
 
 function EditNameScreen() {
   const { updateUser, session } = useSession();
@@ -62,17 +74,17 @@ function EditNameScreen() {
   }, []);
 
   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={streetAddress}
             onChangeInput={onChangeStreetAddress}
@@ -82,8 +94,7 @@ function EditNameScreen() {
             keyboard="default"
             autoCapitalization
           />
-        </View>
-        <View style={styles.inputBox}>
+
           <AuthInput
             input={city}
             onChangeInput={onChangeCity}
@@ -93,9 +104,7 @@ function EditNameScreen() {
             keyboard="default"
             autoCapitalization
           />
-        </View>
-        <View style={styles.stateLine}>
-          <View style={styles.smallInput}>
+          <InlineInputContainer>
             <AuthInput
               input={usState}
               onChangeInput={onChangeState}
@@ -104,10 +113,7 @@ function EditNameScreen() {
               isPassword={false}
               keyboard="default"
               autoCapitalization
-              isHalfWidth
             />
-          </View>
-          <View style={styles.smallInput}>
             <AuthInput
               input={zipcode}
               onChangeInput={onChangeZipcode}
@@ -116,23 +122,24 @@ function EditNameScreen() {
               isPassword={false}
               keyboard="default"
               autoCapitalization
-              isHalfWidth
             />
-          </View>
-        </View>
+          </InlineInputContainer>
+        </InputBoxContainer>
+
+        <InputScreenGap />
 
         <ButtonBlack
           disabled={!streetAddress || !city || !usState || !zipcode}
-          style={styles.submitButton}
+          style={{ justifyContent: 'center' }}
           onPress={handleSubmit}
         >
-          <Text style={styles.submitText}>
-            Submit
-            <Submit style={styles.submitIcon} />
-          </Text>
+          <GroupButtonContent>
+            <ButtonTextWhite>Submit</ButtonTextWhite>
+            <Submit />
+          </GroupButtonContent>
         </ButtonBlack>
-      </View>
-    </View>
+      </ContentContainer>
+    </SafeArea>
   );
 }
 export default EditNameScreen;
diff --git a/src/app/(BottomTabNavigation)/Profile/EditAddress/styles.ts b/src/app/(BottomTabNavigation)/Profile/EditAddress/styles.ts
@@ -2,55 +2,4 @@ import { StyleSheet } from 'react-native';
 
 import { colors } from '../../../../styles/colors';
 
-export default StyleSheet.create({
-  container: {
-    backgroundColor: colors.white,
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    height: '100%',
-    width: '100%',
-  },
-  contentContainer: {
-    width: '81%',
-  },
-  backButton: {
-    marginTop: 70,
-    marginBottom: 35,
-    alignSelf: 'flex-start',
-  },
-  instructionText: {
-    color: colors.black,
-    fontSize: 24,
-    fontWeight: '800',
-    alignSelf: 'flex-start',
-    marginBottom: 27,
-  },
-  inputBox: {
-    marginBottom: 15,
-  },
-  smallInput: {
-    width: '48%',
-  },
-  stateLine: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
-  submitText: {
-    fontSize: 17,
-    color: colors.white,
-    fontWeight: '600',
-  },
-  submitIcon: {
-    marginLeft: 20,
-  },
-  submitButton: {
-    backgroundColor: colors.black,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 5,
-    marginTop: 39,
-    height: 50,
-  },
-});
+export default StyleSheet.create({});
diff --git a/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx b/src/app/(BottomTabNavigation)/Profile/EditName/index.tsx
@@ -14,6 +14,7 @@ import {
   ErrorMessageContainer,
   GroupButtonContent,
   InputBoxContainer,
+  InputScreenGap,
   InstructionContainer,
   TitleText,
 } from '../../../../Components/InputScreenStyles/InputScreenStyles';
@@ -60,7 +61,7 @@ function EditNameScreen() {
           />
         </InputBoxContainer>
 
-        <ErrorMessageContainer />
+        <InputScreenGap />
 
         <ButtonBlack
           disabled={!fullName || fullName.trim() === ''}

diff --git a/src/app/(BottomTabNavigation)/Profile/LogOut/styles.ts b/src/app/(BottomTabNavigation)/Profile/LogOut/styles.ts
@@ -14,7 +14,7 @@ export default StyleSheet.create({
     paddingVertical: 32,
     paddingHorizontal: 29,
     borderColor: colors.midGrey,
-    borderWidth: 0.5,
+    borderTopWidth: 0.5,
     justifyContent: 'space-between',
     rowGap: 25,
   },

diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -8,7 +8,7 @@ export const SafeArea = styled(SafeAreaView)`
   width: 100%;
   min-height: 100%;
   flex-direction: column;
-  justify-content: start;
+  justify-content: space-between;
   align-items: center;
   flex: 1;
 `;