changed sizes of buttons/inputs so it scales w screen size

calblueprint · Apr 21, 2024 · 2d91537 · 2d91537
1 parent 1d1b0e5
commit 2d91537
Show file tree

Hide file tree

Showing 18 changed files with 164 additions and 164 deletions.
diff --git a/src/Components/AuthInput/styles.ts b/src/Components/AuthInput/styles.ts
@@ -10,12 +10,12 @@ export default StyleSheet.create({
   },
   inputBox: {
     height: 40,
-    width: 310,
+    width: '100%',
     borderBottomWidth: 0.75,
     borderColor: colors.darkGrey,
   },
   halfWidth: {
-    width: 140,
+    width: '100%',
   },
   inputFocused: {
     borderBottomWidth: 2,

diff --git a/src/app/(Authentication)/Login/Email/styles.ts b/src/app/(Authentication)/Login/Email/styles.ts
@@ -46,7 +46,6 @@ export default StyleSheet.create({
   errorMessageBox: {
     marginTop: 13,
     height: 50,
-    width: 310,
   },
   errorMessageText: {
     color: colors.darkRed,
@@ -57,7 +56,6 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    width: 310,
     marginTop: 70,
   },
   ButtonLine: {

diff --git a/src/app/(Authentication)/Login/Password/index.tsx b/src/app/(Authentication)/Login/Password/index.tsx
@@ -38,44 +38,51 @@ export default function LoginScreen() {
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
-        <BackButton />
-      </TouchableOpacity>
-      <Text style={styles.instructionText}>Please enter your password.</Text>
-
-      <View style={styles.inputBox}>
-        <AuthInput
-          input={password}
-          onChangeInput={onChangePassword}
-          labelText="Password"
-          placeholderText="Password"
-          isPassword
-          keyboard="default"
-          autoCapitalization={false}
-        />
-      </View>
+      <View style={styles.contentContainer}>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={() => router.back()}
+        >
+          <BackButton />
+        </TouchableOpacity>
+        <Text style={styles.instructionText}>Please enter your password.</Text>
 
-      <View style={styles.errorMessageBox}>
-        <Text style={styles.errorMessageText}>
-          {errorExists ? errorMessage : ' '}
-        </Text>
-      </View>
+        <View style={styles.inputBox}>
+          <AuthInput
+            input={password}
+            onChangeInput={onChangePassword}
+            labelText="Password"
+            placeholderText="Password"
+            isPassword
+            keyboard="default"
+            autoCapitalization={false}
+          />
+        </View>
 
-      <View style={styles.nextLine}>
-        <TouchableOpacity onPress={() => router.push('/OTPFlow/OTPEmailInput')}>
-          <Text style={styles.forgotPasswordText}>Forgot password?</Text>
-        </TouchableOpacity>
+        <View style={styles.errorMessageBox}>
+          <Text style={styles.errorMessageText}>
+            {errorExists ? errorMessage : ' '}
+          </Text>
+        </View>
 
-        <View style={styles.buttonContainer}>
-          <ButtonBlack
-            onPress={() => signIn()}
-            disabled={password === '' || errorExists}
+        <View style={styles.nextLine}>
+          <TouchableOpacity
+            onPress={() => router.push('/OTPFlow/OTPEmailInput')}
           >
-            <View style={styles.ButtonLine}>
-              <Text style={styles.nextText}>Next</Text>
-              <Arrow style={{ marginLeft: 18 }} />
-            </View>
-          </ButtonBlack>
+            <Text style={styles.forgotPasswordText}>Forgot password?</Text>
+          </TouchableOpacity>
+
+          <View style={styles.buttonContainer}>
+            <ButtonBlack
+              onPress={() => signIn()}
+              disabled={password === '' || errorExists}
+            >
+              <View style={styles.ButtonLine}>
+                <Text style={styles.nextText}>Next</Text>
+                <Arrow style={{ marginLeft: 18 }} />
+              </View>
+            </ButtonBlack>
+          </View>
         </View>
       </View>
     </View>

diff --git a/src/app/(Authentication)/Login/Password/styles.ts b/src/app/(Authentication)/Login/Password/styles.ts
@@ -11,6 +11,9 @@ export default StyleSheet.create({
     height: '100%',
     width: '100%',
   },
+  contentContainer: {
+    width: '81%',
+  },
   backText: {
     color: colors.midGrey,
     fontSize: 16,
@@ -37,7 +40,6 @@ export default StyleSheet.create({
   errorMessageBox: {
     marginTop: 13,
     height: 50,
-    width: 310,
   },
   errorMessageText: {
     color: colors.darkRed,
@@ -51,7 +53,6 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    width: 310,
     marginTop: 70,
   },
   forgotPasswordText: {

diff --git a/src/app/(Authentication)/OTPFlow/OTPEmailInput/styles.tsx b/src/app/(Authentication)/OTPFlow/OTPEmailInput/styles.tsx
@@ -56,7 +56,6 @@ export default StyleSheet.create({
   errorMessageBox: {
     marginTop: 13,
     height: 50,
-    width: 310,
   },
   errorMessageText: {
     color: colors.darkRed,
@@ -70,7 +69,6 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    width: 310,
     marginTop: 70,
   },
   forgotPasswordText: {

diff --git a/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx b/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx
@@ -69,54 +69,56 @@ 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.contentContainer}>
+        <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}>
-        <AuthInput
-          input={password}
-          onChangeInput={onChangePassword}
-          labelText="Password"
-          placeholderText="Password"
-          isPassword
-          keyboard="default"
-          autoCapitalization={false}
-        />
-      </View>
+        <View style={styles.inputBox}>
+          <AuthInput
+            input={password}
+            onChangeInput={onChangePassword}
+            labelText="Password"
+            placeholderText="Password"
+            isPassword
+            keyboard="default"
+            autoCapitalization={false}
+          />
+        </View>
 
-      <View style={styles.inputBox}>
-        <AuthInput
-          input={confirmPassword}
-          onChangeInput={onChangeConfirmPassword}
-          labelText="Confirm password"
-          placeholderText="Confirm password"
-          isPassword
-          keyboard="default"
-          autoCapitalization={false}
-        />
-      </View>
+        <View style={styles.inputBox}>
+          <AuthInput
+            input={confirmPassword}
+            onChangeInput={onChangeConfirmPassword}
+            labelText="Confirm password"
+            placeholderText="Confirm password"
+            isPassword
+            keyboard="default"
+            autoCapitalization={false}
+          />
+        </View>
 
-      <View>
-        <Text style={styles.errorMessage}>
-          {disableButton ? errorMessage : ' '}
-        </Text>
-      </View>
+        <View>
+          <Text style={styles.errorMessage}>
+            {disableButton ? errorMessage : ' '}
+          </Text>
+        </View>
 
-      <ButtonBlack
-        disabled={password === '' || confirmPassword === '' || disableButton}
-        style={styles.nextButton}
-        onPress={handleSubmit}
-      >
-        <Text style={styles.nextText}>Continue</Text>
-        <Arrow />
-      </ButtonBlack>
+        <ButtonBlack
+          disabled={password === '' || confirmPassword === '' || disableButton}
+          style={styles.nextButton}
+          onPress={handleSubmit}
+        >
+          <Text style={styles.nextText}>Continue</Text>
+          <Arrow style={{ marginRight: 15 }} />
+        </ButtonBlack>
+      </View>
     </View>
   );
 }
diff --git a/src/app/(Authentication)/OTPFlow/OTPNewPassword/styles.tsx b/src/app/(Authentication)/OTPFlow/OTPNewPassword/styles.tsx
@@ -10,6 +10,9 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'flex-start',
   },
+  contentContainer: {
+    width: '81%',
+  },
   header: {
     justifyContent: 'flex-start',
     flexDirection: 'row',
@@ -47,17 +50,14 @@ export default StyleSheet.create({
     fontSize: 14,
     opacity: 1,
     fontWeight: '600',
+    marginLeft: 15,
   },
   nextButton: {
-    backgroundColor: colors.black,
-    alignItems: 'center',
     borderRadius: 3,
-    borderColor: colors.black,
     borderWidth: 1,
-    width: 310,
     height: 50,
-    padding: 15,
     flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   errorMessage: {
     color: colors.darkRed,
@@ -66,11 +66,9 @@ export default StyleSheet.create({
     marginTop: 10,
     marginBottom: 65,
     justifyContent: 'flex-start',
-    width: 310,
   },
   inputBox: {
     marginTop: 11,
     width: '100%',
-    alignItems: 'center',
   },
 });
diff --git a/src/app/(Authentication)/SignUp/Address/index.tsx b/src/app/(Authentication)/SignUp/Address/index.tsx
@@ -99,7 +99,7 @@ export default function SignUpScreen() {
         </View>
 
         <View style={styles.stateLine}>
-          <View>
+          <View style={styles.smallInput}>
             <AuthInput
               input={state}
               onChangeInput={onChangeState}
@@ -112,7 +112,7 @@ export default function SignUpScreen() {
             />
           </View>
 
-          <View>
+          <View style={styles.smallInput}>
             <AuthInput
               input={zipcode}
               onChangeInput={onChangeZipcode}

diff --git a/src/app/(Authentication)/SignUp/Address/styles.ts b/src/app/(Authentication)/SignUp/Address/styles.ts
@@ -26,18 +26,16 @@ export default StyleSheet.create({
   inputBox: {
     marginTop: 11,
     width: '100%',
-    alignItems: 'center',
   },
   inputWrap: {
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   stateLine: {
     flexDirection: 'row',
-    alignSelf: 'flex-start',
     justifyContent: 'space-between',
-    width: 310,
     marginTop: 11,
+    width: '100%',
   },
   nextText: {
     color: colors.white,
@@ -48,7 +46,6 @@ export default StyleSheet.create({
   nextButton: {
     marginTop: 40,
     borderRadius: 3,
-    width: 310,
     height: 50,
     flexDirection: 'row',
     justifyContent: 'center',
@@ -65,4 +62,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     columnGap: 1,
   },
+  smallInput: {
+    width: '48%',
+  },
 });
diff --git a/src/app/(Authentication)/SignUp/Email/index.tsx b/src/app/(Authentication)/SignUp/Email/index.tsx
@@ -60,7 +60,7 @@ export default function SignUpScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
+      <View style={styles.contentContainer}>
         <TouchableOpacity
           style={styles.backButton}
           onPress={() => router.back()}

diff --git a/src/app/(Authentication)/SignUp/Email/styles.ts b/src/app/(Authentication)/SignUp/Email/styles.ts
@@ -13,14 +13,12 @@ export default StyleSheet.create({
     flexDirection: 'column',
   },
   contentContainer: {
-    marginTop: 100,
+    marginTop: 30,
     width: '81%',
-    alignItems: 'center',
   },
   backButton: {
     marginTop: 80,
     marginBottom: 40,
-    marginRight: 180,
   },
   displayText: {
     marginRight: 253,
@@ -46,7 +44,6 @@ export default StyleSheet.create({
   },
   nextButton: {
     borderWidth: 1,
-    width: 310,
     height: 50,
     padding: 15,
     flexDirection: 'row',