Updated layout

easybase · Jun 4, 2021 · 0231c71 · 0231c71
1 parent e8db09a
commit 0231c71
Showing 6 changed files with 17 additions and 11 deletions.
diff --git a/native-example/yarn.lock b/native-example/yarn.lock
@@ -2897,7 +2897,7 @@
   "version" "0.1.2"
 
 "easybase-react@github:easybase/easybase-react#dev":
-  "resolved" "git+ssh://git@github.com/easybase/easybase-react.git#e65c4b5bd3b830199fd2b5a3638b7a88b3569ee8"
+  "resolved" "git+ssh://git@github.com/easybase/easybase-react.git#e8db09a22ce1f144b6fee0c3b4ddcc9aba5beafe"
   "version" "2.1.15"
   dependencies:
     "easybasejs" "4.2.13"

diff --git a/src/ui/NativeAuth/NativeAuth.tsx b/src/ui/NativeAuth/NativeAuth.tsx
@@ -72,7 +72,7 @@ export default function ({ customStyles, children, dictionary, signUpFields }: I
         return (
             <ThemeProvider theme={typeof customStyles === "object" ? customStyles : {}}>
                 <Toast toastMessage={toastMessage} toastOpen={toastOpen} setToastOpen={setToastOpen} />
-                <Container behavior="height" enabled keyboardVerticalOffset={50}>
+                <Container behavior="padding" enabled keyboardVerticalOffset={50}>
                     {getCurrentPage()}
                 </Container>
             </ThemeProvider>

diff --git a/src/ui/NativeAuth/components.tsx b/src/ui/NativeAuth/components.tsx
@@ -5,6 +5,12 @@ export const View = styled.View({
     width: "100%"
 });
 
+export const MainView = styled(View)({
+    width: "100%",
+    marginTop: 60,
+    marginBottom: 60
+});
+
 export const FormRoot = styled.ScrollView((props: any) => ({
     backgroundColor: '#fff',
     paddingTop: '20%',

diff --git a/src/ui/NativeAuth/pages/ForgotPassword.tsx b/src/ui/NativeAuth/pages/ForgotPassword.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { INativePage } from '../../uiTypes';
-import { Form, HeaderText, View, Input, SpacerXL, SubmitButton, SpacerS, SecondaryButton, ErrorText, SecondaryText } from '../components';
+import { Form, HeaderText, View, Input, SpacerXL, SubmitButton, SpacerS, SecondaryButton, ErrorText, SecondaryText, MainView } from '../components';
 
 const { useEasybase } = require('easybase-react');
 
@@ -91,7 +91,7 @@ export default function ({ setCurrentPage, dictionary, toast }: INativePage) {
             <Form>
                 <HeaderText>{dictionary.forgotPasswordHeader}</HeaderText>
 
-                <View>
+                <MainView>
                     <SecondaryText>{dictionary.forgotPasswordSecondaryHeader}</SecondaryText>
                     <SpacerXL />
                     <Controller
@@ -112,7 +112,7 @@ export default function ({ setCurrentPage, dictionary, toast }: INativePage) {
                         name="email"
                         defaultValue=""
                     />
-                </View>
+                </MainView>
 
                 <View>
                     <SubmitButton onPress={handleSubmit(onSubmit)} disabled={isSubmitting} title={dictionary.forgotPasswordSubmitButton} />

diff --git a/src/ui/NativeAuth/pages/SignIn.tsx b/src/ui/NativeAuth/pages/SignIn.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { INativePage } from '../../uiTypes';
-import { Form, HeaderText, View, Input, SubmitButton, SecondaryButton, ForgotPassword, SpacerS, SpacerXL } from '../components';
+import { Form, HeaderText, View, Input, SubmitButton, SecondaryButton, ForgotPassword, SpacerS, SpacerXL, MainView } from '../components';
 
 const { useEasybase } = require('easybase-react');
 
@@ -30,7 +30,7 @@ export default function ({ setCurrentPage, dictionary, toast }: INativePage) {
         <Form>
             <HeaderText>{dictionary.signInHeader}</HeaderText>
 
-            <View>
+            <MainView>
                 <Controller
                     control={control}
                     render={({ field: { onChange, onBlur, value } }) => (
@@ -69,7 +69,7 @@ export default function ({ setCurrentPage, dictionary, toast }: INativePage) {
                     defaultValue=""
                 />
                 <ForgotPassword onPress={(_: any) => setCurrentPage("ForgotPassword")} disabled={isSubmitting} title={dictionary.forgotPasswordButton!} />
-            </View>
+            </MainView>
 
             <View>
                 <SubmitButton onPress={handleSubmit(onSubmit)} disabled={isSubmitting} title={dictionary.signInSubmitButton} />

diff --git a/src/ui/NativeAuth/pages/SignUp.tsx b/src/ui/NativeAuth/pages/SignUp.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { INativePage, ISignUpFields } from '../../uiTypes';
-import { Form, HeaderText, View, Input, SpacerXL, SubmitButton, SpacerS, SecondaryButton, ErrorText, Picker } from '../components';
+import { Form, HeaderText, View, Input, SpacerXL, SubmitButton, SpacerS, SecondaryButton, ErrorText, Picker, MainView } from '../components';
 
 const { useEasybase } = require('easybase-react');
 
@@ -71,7 +71,7 @@ export default function ({ setCurrentPage, dictionary, signUpFields, toast }: IS
         <Form>
             <HeaderText>{dictionary.signUpHeader}</HeaderText>
 
-            <View>
+            <MainView>
                 <Controller
                     control={control}
                     render={({ field: { onChange, onBlur, value } }) => (
@@ -254,7 +254,7 @@ export default function ({ setCurrentPage, dictionary, signUpFields, toast }: IS
                     rules={passwordReqs}
                 />
                 <ErrorText value={errors.passwordConfirm?.message} />
-            </View>
+            </MainView>
 
             <View>
                 <SubmitButton onPress={handleSubmit(onSubmit)} disabled={isSubmitting} title={dictionary.signUpSubmitButton} />