From dff29b959959825c9a5363dcf95dd28b3b60ac90 Mon Sep 17 00:00:00 2001
From: Pooja Babusingh <68894211+PoojaBabusingh@users.noreply.github.com>
Date: Thu, 19 Oct 2023 15:25:08 +0530
Subject: [PATCH 1/2] feat(INJI-486): add correct kannada language labels

Signed-off-by: Pooja Babusingh <68894211+PoojaBabusingh@users.noreply.github.com>
---
 locales/kan.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/locales/kan.json b/locales/kan.json
index e7ba9b2020..e3a2650bae 100644
--- a/locales/kan.json
+++ b/locales/kan.json
@@ -340,8 +340,8 @@
     }
   },
   "MainLayout": {
-    "home": "ಲೇಔಟ್",
-    "scan": "ಮನೆ",
+    "home": "ಮನೆ",
+    "scan": "ಸ್ಕ್ಯಾನ್",
     "history": "ಇತಿಹಾಸ",
     "request": "ವಿನಂತಿ",
     "settings": "ಸೆಟ್ಟಿಂಗ್‌ಗಳು"

From 1846274aa614071fe5649d8060b188dc1924e6c0 Mon Sep 17 00:00:00 2001
From: Pooja Babusingh <68894211+PoojaBabusingh@users.noreply.github.com>
Date: Fri, 20 Oct 2023 14:59:47 +0530
Subject: [PATCH 2/2] feat(INJI-486): add padding to prevent kan lang text
 getting truncated

Signed-off-by: Pooja Babusingh <68894211+PoojaBabusingh@users.noreply.github.com>
---
 components/CopyButton.tsx               | 22 ++++++++++---------
 components/EditableListItem.tsx         |  2 +-
 components/MessageOverlay.tsx           |  1 +
 components/ui/Button.tsx                |  3 ++-
 components/ui/SetupPicker.tsx           |  2 +-
 components/ui/themes/DefaultTheme.ts    |  4 ++--
 components/ui/themes/PurpleTheme.ts     |  4 ++--
 screens/AuthScreen.tsx                  |  2 ++
 screens/History/HistoryScreen.tsx       | 28 ++++++++++++++-----------
 screens/Home/IntroSlidersScreen.tsx     |  9 +++++++-
 screens/Home/MyVcs/HistoryTab.tsx       |  1 +
 screens/Home/MyVcsTab.tsx               |  6 +++++-
 screens/PasscodeScreen.tsx              |  7 +++++--
 screens/Scan/ScanScreen.tsx             |  6 +++++-
 screens/Settings/AboutInji.tsx          | 18 ++++++++++------
 screens/Settings/ReceivedCards.tsx      |  2 +-
 screens/Settings/ReceivedCardsModal.tsx |  2 ++
 screens/Settings/SettingScreen.tsx      | 14 ++++++++-----
 screens/SetupLanguageScreen.tsx         | 12 +++++++++--
 19 files changed, 97 insertions(+), 48 deletions(-)

diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index 1d4f97a915..5427aaa8ed 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
-import { Pressable } from 'react-native';
-import { Theme } from './ui/styleUtils';
+import React, {useState} from 'react';
+import {Pressable} from 'react-native';
+import {Theme} from './ui/styleUtils';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { Icon } from 'react-native-elements';
-import { Text } from './ui';
-import { useTranslation } from 'react-i18next';
+import {Icon} from 'react-native-elements';
+import {Text} from './ui';
+import {useTranslation} from 'react-i18next';
 
-export const CopyButton: React.FC<CopyButtonProps> = ({ content }) => {
-  const { t } = useTranslation('common');
+export const CopyButton: React.FC<CopyButtonProps> = ({content}) => {
+  const {t} = useTranslation('common');
   const [buttonText, setButtonText] = useState(t('clipboard.copy'));
 
   return (
@@ -22,10 +22,12 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ content }) => {
         type={'material'}
         name={'file-copy'}
         color={Theme.Colors.Icon}
-        style={{ marginRight: 2 }}
+        style={{marginRight: 2}}
         size={19}
       />
-      <Text style={Theme.TextStyles.semibold}>{buttonText}</Text>
+      <Text style={{...Theme.TextStyles.semibold, paddingTop: 3}}>
+        {buttonText}
+      </Text>
     </Pressable>
   );
 };
diff --git a/components/EditableListItem.tsx b/components/EditableListItem.tsx
index 847b8a30e8..ee1a5f553a 100644
--- a/components/EditableListItem.tsx
+++ b/components/EditableListItem.tsx
@@ -37,7 +37,7 @@ export const EditableListItem: React.FC<EditableListItemProps> = props => {
         color={Theme.Colors.Icon}
       />
       <ListItem.Content>
-        <ListItem.Title>
+        <ListItem.Title style={{paddingTop: 3}}>
           <Text weight="semibold" color={Theme.Colors.profileLabel}>
             {props.title}
           </Text>
diff --git a/components/MessageOverlay.tsx b/components/MessageOverlay.tsx
index 92d375bae4..2f91480c2a 100644
--- a/components/MessageOverlay.tsx
+++ b/components/MessageOverlay.tsx
@@ -29,6 +29,7 @@ export const MessageOverlay: React.FC<MessageOverlayProps> = props => {
         <Column padding="21" crossAlign="center">
           {props.title && (
             <Text
+              style={{paddingTop: 3}}
               align="center"
               weight="bold"
               margin="0 0 10 0"
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index d98dfb82bd..7cb39897e2 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -45,6 +45,7 @@ export const Button: React.FC<ButtonProps> = props => {
       raised={props.raised}
       title={
         <Text
+          style={{paddingTop: 3}}
           weight="semibold"
           align="center"
           color={
@@ -77,7 +78,7 @@ export const Button: React.FC<ButtonProps> = props => {
       raised={props.raised}
       title={
         <Text
-          style={Theme.TextStyles.bold}
+          style={{...Theme.TextStyles.bold, paddingTop: 3}}
           color={
             type === 'solid' || type === 'gradient' || type === 'radius'
               ? Theme.Colors.whiteText
diff --git a/components/ui/SetupPicker.tsx b/components/ui/SetupPicker.tsx
index 171a2fea2f..57ec85e452 100644
--- a/components/ui/SetupPicker.tsx
+++ b/components/ui/SetupPicker.tsx
@@ -40,7 +40,7 @@ export const SetupPicker: Picker = (props: PickerProps<unknown>) => {
           onPress={() => selectItem(index)}
           key={index}>
           <ListItem.Content>
-            <ListItem.Title>
+            <ListItem.Title style={{paddingTop: 3}}>
               <Text
                 color={selectedIndex === index ? Theme.Colors.Icon : null}
                 weight={selectedIndex === index ? 'semibold' : 'regular'}>
diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts
index 3ad8d6a86f..ef1fdd1d2c 100644
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -613,14 +613,14 @@ export const DefaultTheme = {
       fontFamily: 'Inter_700Bold',
       fontSize: 18,
       lineHeight: 19,
-      paddingTop: 4,
+      paddingTop: 5,
     },
     subHeader: {
       color: Colors.mediumLightGrayText,
       fontFamily: 'Inter_600SemiBold',
       lineHeight: 19,
       fontSize: 13,
-      paddingTop: 3,
+      paddingTop: 4,
     },
     semiBoldHeader: {
       color: Colors.Black,
diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts
index e25ab9f439..7142b9e167 100644
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -615,14 +615,14 @@ export const PurpleTheme = {
       fontFamily: 'Inter_700Bold',
       fontSize: 18,
       lineHeight: 19,
-      paddingTop: 4,
+      paddingTop: 5,
     },
     subHeader: {
       color: Colors.mediumLightGrayText,
       fontFamily: 'Inter_600SemiBold',
       lineHeight: 19,
       fontSize: 13,
-      paddingTop: 3,
+      paddingTop: 4,
     },
     semiBoldHeader: {
       color: Colors.Black,
diff --git a/screens/AuthScreen.tsx b/screens/AuthScreen.tsx
index 1a30a9efb5..3630661a28 100644
--- a/screens/AuthScreen.tsx
+++ b/screens/AuthScreen.tsx
@@ -40,12 +40,14 @@ export const AuthScreen: React.FC<RootRouteProps> = props => {
         <Column margin="30 0 0 0">
           <Text
             testID="selectAppUnlockMethod"
+            style={{paddingTop: 3}}
             align="center"
             style={Theme.TextStyles.header}>
             {t('header')}
           </Text>
           <Text
             align="center"
+            style={{paddingTop: 3}}
             weight="semibold"
             color={Theme.Colors.GrayText}
             margin="6 0">
diff --git a/screens/History/HistoryScreen.tsx b/screens/History/HistoryScreen.tsx
index c00642d72a..c696d21e0b 100644
--- a/screens/History/HistoryScreen.tsx
+++ b/screens/History/HistoryScreen.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { RefreshControl } from 'react-native';
-import { Icon } from 'react-native-elements';
-import { useTranslation } from 'react-i18next';
-import { Centered, Column, Text } from '../../components/ui';
-import { useHistoryTab } from './HistoryScreenController';
-import { ActivityLogText } from '../../components/ActivityLogText';
-import { MainRouteProps } from '../../routes/main';
-import { Theme } from '../../components/ui/styleUtils';
+import {RefreshControl} from 'react-native';
+import {Icon} from 'react-native-elements';
+import {useTranslation} from 'react-i18next';
+import {Centered, Column, Text} from '../../components/ui';
+import {useHistoryTab} from './HistoryScreenController';
+import {ActivityLogText} from '../../components/ActivityLogText';
+import {MainRouteProps} from '../../routes/main';
+import {Theme} from '../../components/ui/styleUtils';
 
 export const HistoryScreen: React.FC<MainRouteProps> = () => {
-  const { t } = useTranslation('HistoryScreen');
+  const {t} = useTranslation('HistoryScreen');
   const controller = useHistoryTab();
 
   return (
@@ -23,7 +23,7 @@ export const HistoryScreen: React.FC<MainRouteProps> = () => {
             onRefresh={controller.REFRESH}
           />
         }>
-        {controller.activities.map((activity) => (
+        {controller.activities.map(activity => (
           <ActivityLogText
             key={`${activity.timestamp}-${activity._vcKey}`}
             activity={activity}
@@ -32,11 +32,15 @@ export const HistoryScreen: React.FC<MainRouteProps> = () => {
         {controller.activities.length === 0 && (
           <Centered fill>
             <Icon
-              style={{ marginBottom: 20 }}
+              style={{marginBottom: 20}}
               size={40}
               name="sentiment-dissatisfied"
             />
-            <Text align="center" weight="semibold" margin="0 0 4 0">
+            <Text
+              align="center"
+              style={{paddingTop: 3}}
+              weight="semibold"
+              margin="0 0 4 0">
               {t('noHistory')}
             </Text>
           </Centered>
diff --git a/screens/Home/IntroSlidersScreen.tsx b/screens/Home/IntroSlidersScreen.tsx
index f09636abbb..78da6b18a2 100644
--- a/screens/Home/IntroSlidersScreen.tsx
+++ b/screens/Home/IntroSlidersScreen.tsx
@@ -91,11 +91,16 @@ export const IntroSlidersScreen: React.FC<RootRouteProps> = props => {
             crossAlign="center"
             backgroundColor={Theme.Colors.whiteText}
             width={Dimensions.get('screen').width}>
-            <Text testID="introTitle" weight="semibold" margin="0 0 18 0">
+            <Text
+              testID="introTitle"
+              style={{paddingTop: 3}}
+              weight="semibold"
+              margin="0 0 18 0">
               {item.title}
             </Text>
             <Text
               testID="introText"
+              style={{paddingTop: 7}}
               margin="0 0 150 0"
               size="large"
               color={Theme.Colors.GrayText}>
@@ -115,6 +120,7 @@ export const IntroSlidersScreen: React.FC<RootRouteProps> = props => {
           style={{borderRadius: 10, height: 50, marginTop: -10}}>
           <Text
             testID="next"
+            style={{paddingTop: 3}}
             weight="semibold"
             align="center"
             color="#FFFFFF"
@@ -133,6 +139,7 @@ export const IntroSlidersScreen: React.FC<RootRouteProps> = props => {
           style={{borderRadius: 10, height: 50, marginTop: -10}}>
           <Text
             testID="getStarted"
+            style={{paddingTop: 3}}
             weight="semibold"
             align="center"
             color="#FFFFFF"
diff --git a/screens/Home/MyVcs/HistoryTab.tsx b/screens/Home/MyVcs/HistoryTab.tsx
index 15ef8e60e5..9ac7182fe1 100644
--- a/screens/Home/MyVcs/HistoryTab.tsx
+++ b/screens/Home/MyVcs/HistoryTab.tsx
@@ -50,6 +50,7 @@ export const HistoryTab: React.FC<HistoryTabProps> = props => {
               />
               <Text
                 testID="noHistory"
+                style={{paddingTop: 3}}
                 align="center"
                 weight="semibold"
                 margin="0 0 4 0">
diff --git a/screens/Home/MyVcsTab.tsx b/screens/Home/MyVcsTab.tsx
index 8bc0dbd579..a3c092101c 100644
--- a/screens/Home/MyVcsTab.tsx
+++ b/screens/Home/MyVcsTab.tsx
@@ -133,6 +133,7 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {
                 <Image source={Theme.DigitalIdentityLogo} />
                 <Text
                   testID="bringYourDigitalID"
+                  style={{paddingTop: 3}}
                   align="center"
                   weight="bold"
                   margin="33 0 6 0"
@@ -140,7 +141,10 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {
                   {t('bringYourDigitalID')}
                 </Text>
                 <Text
-                  style={Theme.TextStyles.bold}
+                  style={{
+                    ...Theme.TextStyles.bold,
+                    paddingTop: 3,
+                  }}
                   color={Theme.Colors.textLabel}
                   align="center"
                   margin="0 12 30 12">
diff --git a/screens/PasscodeScreen.tsx b/screens/PasscodeScreen.tsx
index 3cd62d54e3..985e1d8d12 100644
--- a/screens/PasscodeScreen.tsx
+++ b/screens/PasscodeScreen.tsx
@@ -68,11 +68,12 @@ export const PasscodeScreen: React.FC<PasscodeRouteProps> = props => {
           <Text
             testID="setPasscode"
             align="center"
-            style={Theme.TextStyles.header}>
+            style={{...Theme.TextStyles.header, paddingTop: 7}}>
             {t('header')}
           </Text>
           <Text
             align="center"
+            style={{paddingTop: 3}}
             weight="semibold"
             color={Theme.Colors.GrayText}
             margin="6 0">
@@ -92,11 +93,12 @@ export const PasscodeScreen: React.FC<PasscodeRouteProps> = props => {
           <Text
             testID="confirmPasscode"
             align="center"
-            style={Theme.TextStyles.header}>
+            style={{...Theme.TextStyles.header, paddingTop: 7}}>
             {t('confirmPasscode')}
           </Text>
           <Text
             align="center"
+            style={{paddingTop: 3}}
             weight="semibold"
             color={Theme.Colors.GrayText}
             margin="6 0">
@@ -126,6 +128,7 @@ export const PasscodeScreen: React.FC<PasscodeRouteProps> = props => {
         <Column fill align="space-around" width="100%">
           <Text
             testID="enterPasscode"
+            style={{paddingTop: 3}}
             align="center"
             weight="semibold"
             color={Theme.Colors.GrayText}
diff --git a/screens/Scan/ScanScreen.tsx b/screens/Scan/ScanScreen.tsx
index 4152e3d62a..e8ab20973e 100644
--- a/screens/Scan/ScanScreen.tsx
+++ b/screens/Scan/ScanScreen.tsx
@@ -47,7 +47,11 @@ export const ScanScreen: React.FC = () => {
 
   function noShareableVcText() {
     return (
-      <Text align="center" color={Theme.Colors.errorMessage} margin="0 10">
+      <Text
+        align="center"
+        style={{paddingTop: 3}}
+        color={Theme.Colors.errorMessage}
+        margin="0 10">
         {t('noShareableVcs')}
       </Text>
     );
diff --git a/screens/Settings/AboutInji.tsx b/screens/Settings/AboutInji.tsx
index e8476a54e3..8603204995 100644
--- a/screens/Settings/AboutInji.tsx
+++ b/screens/Settings/AboutInji.tsx
@@ -39,7 +39,7 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
             style={{marginRight: 15}}
           />
           <ListItem.Content>
-            <ListItem.Title>
+            <ListItem.Title style={{paddingTop: 3}}>
               <Text weight="semibold" color={Theme.Colors.profileLabel}>
                 {t('aboutInji')}
               </Text>
@@ -57,18 +57,20 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
           setShowAboutInji(!showAboutInji);
         }}>
         <Row testID="appID" style={Theme.Styles.primaryRow}>
-          <Text style={Theme.TextStyles.semibold}>
+          <Text style={{...Theme.TextStyles.semibold, paddingTop: 3}}>
             {t('appID')} : {appId}
           </Text>
           <CopyButton content={appId} />
         </Row>
         <Column fill padding="12" align="space-between">
           <Column>
-            <Text testID="aboutDetails" style={Theme.TextStyles.aboutDetailes}>
+            <Text
+              testID="aboutDetails"
+              style={{...Theme.TextStyles.aboutDetailes, paddingTop: 5}}>
               {t('aboutDetailes')}
             </Text>
             <Row crossAlign="center">
-              <Text style={Theme.TextStyles.aboutDetailes}>
+              <Text style={{...Theme.TextStyles.aboutDetailes, paddingTop: 7}}>
                 {t('forMoreDetailes')}
               </Text>
               <TouchableOpacity
@@ -76,7 +78,10 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
                 onPress={() => {
                   aboutInjiUrl && Linking.openURL(aboutInjiUrl);
                 }}>
-                <Text color={Theme.Colors.AddIdBtnBg} weight="bold">
+                <Text
+                  color={Theme.Colors.AddIdBtnBg}
+                  style={{paddingTop: 3}}
+                  weight="bold">
                   {t('clickHere')}
                 </Text>
               </TouchableOpacity>
@@ -89,13 +94,14 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
             crossAlign="center"
             style={Theme.Styles.versionContainer}>
             <Text
-              style={Theme.TextStyles.bold}
+              style={{...Theme.TextStyles.bold, paddingTop: 3}}
               color={Theme.Colors.aboutVersion}>
               {t('version')}: {__InjiVersion.getValue()}
             </Text>
             {__TuvaliVersion.getpackageVersion() != 'unknown' && (
               <Text
                 weight="semibold"
+                style={{paddingTop: 3}}
                 margin="32 0 5 0"
                 align="center"
                 size="small"
diff --git a/screens/Settings/ReceivedCards.tsx b/screens/Settings/ReceivedCards.tsx
index 36443fe483..3d589e5589 100644
--- a/screens/Settings/ReceivedCards.tsx
+++ b/screens/Settings/ReceivedCards.tsx
@@ -21,7 +21,7 @@ export const ReceivedCards: React.FC = () => {
             source={Theme.ReceivedCardsIcon}
             style={{marginLeft: 10, marginRight: 9}}
           />
-          <Text margin="6" weight="semibold">
+          <Text margin="6" style={{paddingTop: 3}} weight="semibold">
             {t('receivedCards')}
           </Text>
         </Column>
diff --git a/screens/Settings/ReceivedCardsModal.tsx b/screens/Settings/ReceivedCardsModal.tsx
index 0d1d34ea80..ae9d8be2b8 100644
--- a/screens/Settings/ReceivedCardsModal.tsx
+++ b/screens/Settings/ReceivedCardsModal.tsx
@@ -49,6 +49,7 @@ export const ReceivedCardsModal: React.FC<ReceivedCardsProps> = ({
               />
               <Text
                 testID="noReceivedVcsTitle"
+                style={{paddingTop: 3}}
                 align="center"
                 weight="semibold"
                 margin="0 0 4 0">
@@ -56,6 +57,7 @@ export const ReceivedCardsModal: React.FC<ReceivedCardsProps> = ({
               </Text>
               <Text
                 testID="noReceivedVcsText"
+                style={{paddingTop: 3}}
                 align="center"
                 color={Theme.Colors.textLabel}>
                 {t('noReceivedVcsText')}
diff --git a/screens/Settings/SettingScreen.tsx b/screens/Settings/SettingScreen.tsx
index 26830cd711..50a6cc2719 100644
--- a/screens/Settings/SettingScreen.tsx
+++ b/screens/Settings/SettingScreen.tsx
@@ -32,7 +32,7 @@ const LanguageSetting: React.FC = () => {
             containerStyle={Theme.Styles.settingsIconBg}
           />
           <ListItem.Content>
-            <ListItem.Title>
+            <ListItem.Title style={{paddingTop: 3}}>
               <Text weight="semibold">{t('language')}</Text>
             </ListItem.Title>
           </ListItem.Content>
@@ -75,6 +75,7 @@ export const SettingScreen: React.FC<
             style={{display: Platform.OS !== 'ios' ? 'flex' : 'none'}}
             backgroundColor={Theme.Colors.lightGreyBackgroundColor}>
             <Text
+              style={{paddingTop: 3}}
               testID="injiAsVerifierApp"
               weight="semibold"
               margin="10"
@@ -92,7 +93,7 @@ export const SettingScreen: React.FC<
                     source={Theme.ReceiveCardIcon}
                     style={{alignSelf: 'center'}}
                   />
-                  <Text margin="6" weight="semibold">
+                  <Text margin="6" style={{paddingTop: 3}} weight="semibold">
                     {t('receiveCard')}
                   </Text>
                 </Column>
@@ -103,6 +104,7 @@ export const SettingScreen: React.FC<
 
             <Text
               weight="semibold"
+              style={{paddingTop: 3}}
               margin="10"
               color={Theme.Colors.aboutVersion}>
               {t('basicSettings')}
@@ -129,7 +131,7 @@ export const SettingScreen: React.FC<
                 style={{marginRight: 15}}
               />
               <ListItem.Content>
-                <ListItem.Title>
+                <ListItem.Title style={{paddingTop: 3}}>
                   <Text weight="semibold" color={Theme.Colors.profileLabel}>
                     {t('bioUnlock')}
                   </Text>
@@ -187,7 +189,7 @@ export const SettingScreen: React.FC<
                 style={{marginRight: 15}}
               />
               <ListItem.Content>
-                <ListItem.Title>
+                <ListItem.Title style={{paddingTop: 3}}>
                   <Text weight="semibold" color={Theme.Colors.profileLabel}>
                     {t('injiTourGuide')}
                   </Text>
@@ -204,7 +206,7 @@ export const SettingScreen: React.FC<
                 containerStyle={Theme.Styles.settingsIconBg}
               />
               <ListItem.Content>
-                <ListItem.Title>
+                <ListItem.Title style={{paddingTop: 3}}>
                   <Text weight="semibold" color={Theme.Colors.profileLabel}>
                     {t('logout')}
                   </Text>
@@ -218,6 +220,7 @@ export const SettingScreen: React.FC<
                   weight="semibold"
                   align="center"
                   size="smaller"
+                  style={{paddingTop: 3}}
                   color={Theme.Colors.profileValue}>
                   {controller.backendInfo.application.name}:{' '}
                   {controller.backendInfo.application.version}
@@ -226,6 +229,7 @@ export const SettingScreen: React.FC<
                   weight="semibold"
                   align="center"
                   size="smaller"
+                  style={{paddingTop: 3}}
                   color={Theme.Colors.profileValue}>
                   MOSIP: {controller.backendInfo.config['mosip.host']}
                 </Text>
diff --git a/screens/SetupLanguageScreen.tsx b/screens/SetupLanguageScreen.tsx
index 0a6135c763..9d670bf9fb 100644
--- a/screens/SetupLanguageScreen.tsx
+++ b/screens/SetupLanguageScreen.tsx
@@ -47,10 +47,18 @@ export const SetupLanguageScreen: React.FC<RootRouteProps> = props => {
         size={58}
       />
       <Column crossAlign="center">
-        <Text testID="chooseLanguage" margin="10 0 10 0" weight="semibold">
+        <Text
+          testID="chooseLanguage"
+          style={{paddingTop: 3}}
+          margin="10 0 10 0"
+          weight="semibold">
           {t('header')}
         </Text>
-        <Text weight="semibold" align="center" color={Theme.Colors.GrayText}>
+        <Text
+          weight="semibold"
+          style={{paddingTop: 3}}
+          align="center"
+          color={Theme.Colors.GrayText}>
           {t('description')}
         </Text>
       </Column>