[refactor] refactor delete account screen with styled components.

calblueprint · Apr 24, 2024 · 9e5e916 · 9e5e916
1 parent e685beb
commit 9e5e916
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 93 deletions.
diff --git a/src/Components/AuthButton/AuthButton.tsx b/src/Components/AuthButton/AuthButton.tsx
@@ -9,7 +9,7 @@ const ButtonBase = styled.TouchableOpacity`
   border-radius: 5px;
   min-height: 41px;
   width: 100%;
-  padding-horizontal: 15px;
+  padding-horizontal: 20px;
   opacity: ${({ disabled }) => (disabled ? 0.3 : 1)};
 `;
 
@@ -25,7 +25,7 @@ export const ButtonWhite = styled(ButtonBase)`
 
 export const ButtonTextBase = styled.Text({
   color: colors.white,
-  fontSize: 14,
+  fontSize: 16,
   opacity: 1,
   fontWeight: '600',
 });

diff --git a/src/app/(Authentication)/styles.ts b/src/app/(Authentication)/styles.ts
@@ -1,23 +1,7 @@
-import { SafeAreaView } from 'react-native';
 import styled from 'styled-components/native';
 
 import { colors } from '../../styles/colors';
 
-export const SafeArea = styled(SafeAreaView)`
-  background-color: ${colors.white};
-  width: 100%;
-  min-height: 100%;
-  flex-direction: column;
-  justify-content: start;
-  align-items: center;
-  flex: 1;
-`;
-
-export const ContentContainer = styled.View({
-  paddingTop: 20,
-  width: '84%',
-});
-
 export const InstructionContainer = styled.View({
   flexDirection: 'column',
   marginTop: 35,

diff --git a/src/app/(BottomTabNavigation)/Profile/DeleteAccount/index.tsx b/src/app/(BottomTabNavigation)/Profile/DeleteAccount/index.tsx
@@ -7,10 +7,13 @@ import WhiteTrash from '../../../../../assets/white-trash.svg';
 import X from '../../../../../assets/x.svg';
 import {
   ButtonBlack,
+  ButtonTextBlack,
+  ButtonTextWhite,
   ButtonWhite,
 } from '../../../../Components/AuthButton/AuthButton';
 import CasesHeader from '../../../../Components/CasesHeader/CasesHeader';
 import { useSession } from '../../../../context/AuthContext';
+import { SafeArea } from '../../../../styles/global';
 
 function DeleteAccountScreen() {
   const { signOut, deleteCurrentUser, session } = useSession();
@@ -23,44 +26,39 @@ function DeleteAccountScreen() {
   };
 
   return (
-    <View style={styles.container}>
+    <SafeArea>
       <View style={styles.screenContainer}>
-        <View style={styles.headerContainer}>
+        <View>
           <CasesHeader />
-        </View>
 
-        <View style={styles.textContainer}>
-          <Text style={styles.topText}>Delete account?</Text>
-          <Text style={styles.blurb}>
-            Deleting your account will also permanently delete any data
-            associated with it. This action cannot be undone.
-          </Text>
+          <View style={styles.textContainer}>
+            <Text style={styles.topText}>Delete account?</Text>
+            <Text style={styles.blurb}>
+              Deleting your account will also permanently delete any data
+              associated with it. This action cannot be undone.
+            </Text>
+          </View>
         </View>
 
         <View style={styles.buttonContainer}>
-          <View style={styles.buttonView}>
-            <ButtonWhite
-              onPress={() => router.back()}
-              style={styles.cancelButton}
-            >
-              <View style={styles.buttonContent}>
-                <X />
-                <Text style={styles.cancelText}>Cancel</Text>
-              </View>
-            </ButtonWhite>
-          </View>
+          <ButtonWhite onPress={() => router.back()} style={styles.buttonView}>
+            <View style={styles.buttonContent}>
+              <X />
+              <ButtonTextBlack style={styles.cancelText}>
+                Cancel
+              </ButtonTextBlack>
+            </View>
+          </ButtonWhite>
 
-          <View style={styles.buttonView}>
-            <ButtonBlack onPress={deleteAccount} style={styles.confirmButton}>
-              <View style={styles.buttonContent}>
-                <WhiteTrash />
-                <Text style={styles.confirmText}>Confirm</Text>
-              </View>
-            </ButtonBlack>
-          </View>
+          <ButtonBlack onPress={deleteAccount} style={styles.buttonView}>
+            <View style={styles.buttonContent}>
+              <WhiteTrash />
+              <ButtonTextWhite>Confirm</ButtonTextWhite>
+            </View>
+          </ButtonBlack>
         </View>
       </View>
-    </View>
+    </SafeArea>
   );
 }
 export default DeleteAccountScreen;
diff --git a/src/app/(BottomTabNavigation)/Profile/DeleteAccount/styles.ts b/src/app/(BottomTabNavigation)/Profile/DeleteAccount/styles.ts
@@ -12,16 +12,15 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   screenContainer: {
-    width: '81%',
-    height: '93%', // 100% results in buttons touching bottom tab nav rn but i assume we can use 100% after we remove bottom tab from this page
+    flexDirection: 'column',
     justifyContent: 'space-between',
-  },
-  headerContainer: {
-    marginTop: 63, // copied this value from profile screen
+    height: '100%',
+    width: '84%',
+    paddingVertical: 40,
   },
   textContainer: {
     rowGap: 20,
-    height: '60%', // this is a bit of a guess
+    marginTop: 85,
   },
   topText: {
     fontSize: 38,
@@ -42,38 +41,12 @@ export default StyleSheet.create({
   },
   buttonView: {
     width: '48%',
+    justifyContent: 'center',
   },
   buttonContent: {
-    flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',
-    width: '60%',
-  },
-  cancelButton: {
-    flex: 1,
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: colors.black,
-    alignItems: 'center',
-  },
-  cancelText: {
-    color: colors.black,
-    fontSize: 17,
-    fontStyle: 'normal',
-    fontWeight: '500',
-  },
-  confirmButton: {
-    flex: 1,
-    backgroundColor: colors.black,
-    borderRadius: 5,
-    alignItems: 'center',
-  },
-  confirmText: {
-    color: colors.white,
-    fontSize: 17,
-    fontStyle: 'normal',
-    fontWeight: '500',
-    marginLeft: 14,
+    columnGap: 15,
   },
 });
diff --git a/src/app/(BottomTabNavigation)/Profile/LogOut/index.tsx b/src/app/(BottomTabNavigation)/Profile/LogOut/index.tsx
@@ -25,16 +25,14 @@ function LogOutConfirmation() {
           <ButtonWhite onPress={() => router.back()} style={styles.halfButton}>
             <View style={styles.buttonContent}>
               <X />
-              <ButtonTextBlack style={styles.cancelText}>
-                Cancel
-              </ButtonTextBlack>
+              <ButtonTextBlack>Cancel</ButtonTextBlack>
             </View>
           </ButtonWhite>
 
           <ButtonBlack onPress={() => signOut()} style={styles.halfButton}>
             <View style={styles.buttonContent}>
               <SignOut />
-              <Text style={styles.confirmText}>Confirm</Text>
+              <ButtonTextWhite>Confirm</ButtonTextWhite>
             </View>
           </ButtonBlack>
         </View>

diff --git a/src/app/(BottomTabNavigation)/Profile/ResetConfirm/styles.tsx b/src/app/(BottomTabNavigation)/Profile/ResetConfirm/styles.tsx
@@ -3,11 +3,6 @@ import { StyleSheet } from 'react-native';
 import { colors } from '../../../../styles/colors';
 
 export default StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.white,
-    alignItems: 'center',
-  },
   contentContainer: {
     flexDirection: 'column',
     justifyContent: 'space-between',
@@ -16,9 +11,6 @@ export default StyleSheet.create({
     paddingTop: 40,
     paddingBottom: 60,
   },
-  backContainer: {
-    marginBottom: 40,
-  },
   instructionContainer: {
     marginTop: 34,
     width: '100%',