fix(INJI-550):rendering issues

Signed-off-by: Sri Kanth Kola <[email protected]>
tw-mosip · Nov 24, 2023 · 1d84941 · 1d84941
1 parent 9f5e78e
commit 1d84941
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 27 deletions.
diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
@@ -25,7 +25,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({content}) => {
         style={{marginRight: 2}}
         size={19}
       />
-      <Text style={{...Theme.TextStyles.semibold, paddingTop: 3}}>
+      <Text style={{...Theme.TextStyles.semibold, paddingTop: 3, maxWidth: 75}}>
         {buttonText}
       </Text>
     </Pressable>

diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
@@ -418,7 +418,7 @@ export const DefaultTheme = {
       backgroundColor: Colors.LightOrange,
     },
     receiveCardsContainer: {
-      height: Dimensions.get('window').height * 0.12,
+      minHeight: Dimensions.get('window').height * 0.17,
       width: Dimensions.get('window').width * 0.47,
       alignItems: 'center',
       borderBottomRightRadius: 0,
@@ -471,7 +471,7 @@ export const DefaultTheme = {
     },
     iconContainer: {
       flexDirection: 'row',
-      alignItems: 'flex-end',
+      alignItems: 'center',
     },
     scannerContainer: {
       borderRadius: 24,

diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
@@ -422,7 +422,7 @@ export const PurpleTheme = {
       backgroundColor: Colors.LightPurple,
     },
     receiveCardsContainer: {
-      height: Dimensions.get('window').height * 0.12,
+      height: Dimensions.get('window').height * 0.17,
       width: Dimensions.get('window').width * 0.47,
       alignItems: 'center',
       borderBottomRightRadius: 0,
@@ -475,7 +475,7 @@ export const PurpleTheme = {
     },
     iconContainer: {
       flexDirection: 'row',
-      alignItems: 'flex-end',
+      alignItems: 'center',
     },
     scannerContainer: {
       borderRadius: 24,
@@ -806,7 +806,6 @@ export const PurpleTheme = {
       borderRadius: 9,
       width: Dimensions.get('window').width * 0.72,
       alignSelf: 'center',
-      margin: 3,
       height: 54,
     },
     float: {

diff --git a/routes/index.ts b/routes/index.ts
@@ -3,21 +3,24 @@ import {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
-import { AuthScreen } from '../screens/AuthScreen';
-import { BiometricScreen } from '../screens/BiometricScreen';
-import { WelcomeScreen } from '../screens/WelcomeScreen';
-import { PasscodeScreen } from '../screens/PasscodeScreen';
-import { MainLayout } from '../screens/MainLayout';
-import { NotificationsScreen } from '../screens/NotificationsScreen';
-import { SetupLanguageScreen } from '../screens/SetupLanguageScreen';
-import { IntroSlidersScreen } from '../screens/Home/IntroSlidersScreen';
-import { RequestLayout } from '../screens/Request/RequestLayout';
-import { RequestStackParamList } from '../screens/Request/RequestLayoutController';
+import {AuthScreen} from '../screens/AuthScreen';
+import {BiometricScreen} from '../screens/BiometricScreen';
+import {WelcomeScreen} from '../screens/WelcomeScreen';
+import {PasscodeScreen} from '../screens/PasscodeScreen';
+import {MainLayout} from '../screens/MainLayout';
+import {NotificationsScreen} from '../screens/NotificationsScreen';
+import {SetupLanguageScreen} from '../screens/SetupLanguageScreen';
+import {IntroSlidersScreen} from '../screens/Home/IntroSlidersScreen';
+import {RequestLayout} from '../screens/Request/RequestLayout';
+import {RequestStackParamList} from './routesConstants';
 
 export const baseRoutes: Screen[] = [
   {
     name: 'Language',
     component: SetupLanguageScreen,
+    options: {
+      headerShown: false,
+    },
   },
   {
     name: 'IntroSliders',

diff --git a/screens/Home/MyVcs/IdInputModal.tsx b/screens/Home/MyVcs/IdInputModal.tsx
@@ -92,7 +92,7 @@ export const IdInputModal: React.FC<IdInputModalProps> = props => {
               type="gradient"
               title={t('generateVc')}
               disabled={!controller.id}
-              margin="24 0 6 0"
+              margin="5 0"
               onPress={controller.VALIDATE_INPUT}
               loading={controller.isRequestingOtp}
             />
@@ -110,7 +110,8 @@ export const IdInputModal: React.FC<IdInputModalProps> = props => {
                     color={Theme.Colors.AddIdBtnBg}
                     weight="bold"
                     size="small"
-                    margin="0 0 0 5">
+                    margin="0 0 0 5"
+                    style={{maxWidth: 250}}>
                     {t('getItHere')}
                   </Text>
                 </TouchableOpacity>

diff --git a/screens/Settings/AboutInji.tsx b/screens/Settings/AboutInji.tsx
@@ -1,13 +1,12 @@
 import React, {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 
-import {Linking, Pressable, TouchableOpacity} from 'react-native';
+import {Dimensions, Linking, Pressable, TouchableOpacity} from 'react-native';
 import {Modal} from '../../components/ui/Modal';
 import {Column, Row, Text} from '../../components/ui';
 import {Theme} from '../../components/ui/styleUtils';
 import {Icon, ListItem} from 'react-native-elements';
 import getAllConfigurations from '../../shared/commonprops/commonProps';
-import {getVersion} from 'react-native-device-info';
 import {CopyButton} from '../../components/CopyButton';
 import testIDProps from '../../shared/commonUtil';
 import {__InjiVersion, __TuvaliVersion} from '../../shared/GlobalVariables';
@@ -57,20 +56,45 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
           setShowAboutInji(!showAboutInji);
         }}>
         <Row testID="appID" style={Theme.Styles.primaryRow}>
-          <Text style={{...Theme.TextStyles.semibold, paddingTop: 3}}>
-            {t('appID')} : {appId}
-          </Text>
+          <Row>
+            <Text
+              style={{
+                ...Theme.TextStyles.semibold,
+                paddingTop: 3,
+                maxWidth: 110,
+              }}>
+              {t('appID')}
+            </Text>
+            <Text
+              style={{
+                ...Theme.TextStyles.semibold,
+                paddingTop: 3,
+              }}>
+              : {appId}
+            </Text>
+          </Row>
           <CopyButton content={appId} />
         </Row>
-        <Column fill padding="12" align="space-between">
+        <Column padding="12" align="space-between">
           <Column>
             <Text
               testID="aboutDetails"
               style={{...Theme.TextStyles.aboutDetailes, paddingTop: 5}}>
               {t('aboutDetailes')}
             </Text>
-            <Row crossAlign="center">
-              <Text style={{...Theme.TextStyles.aboutDetailes, paddingTop: 7}}>
+            <Row
+              align="space-between"
+              crossAlign="center"
+              style={{
+                maxWidth: Dimensions.get('window').width * 0.94,
+                minHeight: Dimensions.get('window').height * 0.1,
+              }}>
+              <Text
+                style={{
+                  ...Theme.TextStyles.aboutDetailes,
+                  paddingTop: 7,
+                  maxWidth: 150,
+                }}>
                 {t('forMoreDetailes')}
               </Text>
               <TouchableOpacity
@@ -80,7 +104,7 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
                 }}>
                 <Text
                   color={Theme.Colors.AddIdBtnBg}
-                  style={{paddingTop: 3}}
+                  style={{paddingTop: 3, maxWidth: 150}}
                   weight="bold">
                   {t('clickHere')}
                 </Text>

diff --git a/shared/telemetry/TelemetryConstants.js b/shared/telemetry/TelemetryConstants.js
@@ -30,6 +30,7 @@ export const TelemetryConstants = {
     hardwareKeyStore:
       'Some security features will be unavailable as hardware key store is not available',
     activationCancelled: 'Activation Cancelled',
+    appWasReset: 'App Was Reset',
   }),
 
   ErrorId: Object.freeze({
@@ -40,6 +41,7 @@ export const TelemetryConstants = {
     activationFailed: 'ACTIVATION_FAILED',
     tampered: 'TAMPERED',
     dataRetrieval: 'DATA_RETRIEVAL',
+    appWasReset: 'APP_WAS_RESET',
   }),
 
   Screens: Object.freeze({