change loader ui for login/signup

apps/mobile/src/components/Loading/index.js

@@ -10,12 +10,13 @@ export const Loading = ({
   done = false,
   doneText = 'Action completed successfully!',
   onDone = () => {},
+  customStyle ={}
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, tags, premiumUser} = state;
 
   return (
-    <View style={[{height: height}, styles.activityContainer]}>
+    <View style={[{height: height}, styles.activityContainer,  customStyle]}>
       {done ? (
         <>
           <Text

apps/mobile/src/components/LoginDialog/index.js

@@ -13,7 +13,8 @@ import {useTracked} from '../../provider/index';
 import {
   eSendEvent,
   eSubscribeEvent,
-    eUnSubscribeEvent, ToastEvent,
+  eUnSubscribeEvent,
+  ToastEvent,
 } from '../../services/EventManager';
 import {
   eCloseLoginDialog,
@@ -29,9 +30,9 @@ import {
 import {getElevation} from '../../utils';
 import {ActionIcon} from '../ActionIcon';
 import {Loading} from '../Loading';
-import {opacity, ph, pv, SIZE, WEIGHT} from "../../utils/SizeUtils";
-import {db} from "../../utils/DB";
-import {DDS} from "../../services/DeviceDetection";
+import {opacity, ph, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {db} from '../../utils/DB';
+import {DDS} from '../../services/DeviceDetection';
 
 const LoginDialog = () => {
   const [state, dispatch] = useTracked();
@@ -172,7 +173,7 @@ const LoginDialog = () => {
   };
 
   const signupUser = async () => {
-    if (!validateInfo) return;
+    if (!validateInfo()) return;
 
     setSigningIn(true);
     setStatus('Creating your account');
@@ -220,6 +221,7 @@ const LoginDialog = () => {
           alignSelf: 'center',
           justifyContent: 'center',
           alignItems: 'center',
+          overflow:"hidden"
         }}>
         {DDS.isTab ? (
           <TouchableOpacity
@@ -234,7 +236,8 @@ const LoginDialog = () => {
         ) : null}
         <View
           style={{
-            height: DDS.isTab && !DDS.isSmallTab
+            height:
+              DDS.isTab && !DDS.isSmallTab
                 ? login
                   ? '70%'
                   : '80%'
@@ -252,7 +255,33 @@ const LoginDialog = () => {
           }}>
           <Toast context="local" />
           {loggingIn || signingIn ? (
-            modalVisible ? (
+            <View
+              style={{
+                backgroundColor: !colors.night
+                  ? 'rgba(0,0,0,0.2)'
+                  : 'rgba(255,255,255,0.2)',
+                zIndex: 10,
+                position: 'absolute',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '100%',
+                height: '100%',
+              }}>
+              <Loading
+                tagline={status}
+                customStyle={{
+                  alignSelf: 'center',
+                  backgroundColor: colors.bg,
+                  ...getElevation(5),
+                  borderRadius: 5,
+                  width: '80%',
+                  height: 100,
+                }}
+              />
+            </View>
+          ) : null}
+
+          {modalVisible ? (
             <View
               style={{
                 paddingHorizontal: 12,
@@ -274,9 +303,9 @@ const LoginDialog = () => {
                   color: colors.icon,
                   textAlign: 'center',
                 }}>
-                  We cannot recover your data if you forget your password. You
-                  can use this recovery key to get your data back if you lose
-                  your password.
+                We cannot recover your data if you forget your password. You can
+                use this recovery key to get your data back if you lose your
+                password.
               </Text>
 
               <Text
@@ -290,12 +319,7 @@ const LoginDialog = () => {
                 }}>
                 Take a Sceenshot of this screen
               </Text>
-                <QRCode
-                  value={key}
-                  size={200}
-                  bgColor="black"
-                  fgColor="white"
-                />
+              <QRCode value={key} size={200} bgColor="black" fgColor="white" />
               <TouchableOpacity
                 activeOpacity={0.6}
                 onPress={() => {
@@ -362,9 +386,6 @@ const LoginDialog = () => {
                 </Text>
               </TouchableOpacity>
             </View>
-            ) : (
-              <Loading tagline={status} />
-            )
           ) : (
             <>
               {DDS.isTab ? null : (
@@ -382,7 +403,7 @@ const LoginDialog = () => {
                     top: 0,
                     marginBottom: 15,
                     zIndex: 10,
-                    left:0
+                    left: 0,
                   }}
                   color={colors.heading}
                 />
@@ -797,7 +818,6 @@ const LoginDialog = () => {
                     style={{
                       flexDirection: 'row',
                       width: '100%',
-                      alignItems: 'center',
                     }}>
                     <CheckBox
                       onValueChange={(value) => {
@@ -809,10 +829,11 @@ const LoginDialog = () => {
                     />
                     <Text
                       style={{
-                        fontSize: SIZE.xs + 1,
+                        fontSize: SIZE.xs,
                         fontFamily: WEIGHT.regular,
                         color: colors.pri,
                         maxWidth: '90%',
+                        marginTop: 5,
                       }}>
                       By signing up you agree to our{' '}
                       <Text
@@ -847,8 +868,6 @@ const LoginDialog = () => {
 
                 <TouchableOpacity
                   onPress={() => {
-                    ToastEvent.show('hello world', 'error', 'local');
-
                     setLogin(!login);
                   }}
                   activeOpacity={opacity}

apps/mobile/src/components/SimpleList/index.js

@@ -199,8 +199,8 @@ const SimpleList = ({
             ? 130
             : 130 - 60
           : listData[0] && !selectionMode
-          ? 150 - initialWindowMetrics.insets.top
-          : (150 - initialWindowMetrics.insets.top) - 60,
+          ? 155 - initialWindowMetrics.insets.top
+          : (155 - initialWindowMetrics.insets.top) - 60,
     };
   }, [selectionMode, listData, colors]);