language text getting truncated (#960)

* feat(INJI-486): add correct kannada language labels Signed-off-by: Pooja Babusingh <[email protected]> * feat(INJI-486): add padding to prevent kan lang text getting truncated Signed-off-by: Pooja Babusingh <[email protected]> --------- Signed-off-by: Pooja Babusingh <[email protected]> Signed-off-by: PoojaBabusing <[email protected]> Co-authored-by: Pooja Babusingh <[email protected]>
mosip · Oct 23, 2023 · eb33ec2 · eb33ec2
1 parent b75802f
commit eb33ec2
Show file tree

Hide file tree

Showing 20 changed files with 97 additions and 50 deletions.
diff --git 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
@@ -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={props.titleColor}>
             {props.title}
           </Text>

diff --git 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
@@ -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
@@ -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
@@ -625,14 +625,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
@@ -627,14 +627,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/locales/kan.json b/locales/kan.json
@@ -348,8 +348,8 @@
     }
   },
   "MainLayout": {
-    "home": "ಲೇಔಟ್",
-    "scan": "ಮನೆ",
+    "home": "ಮನೆ",
+    "scan": "ಸ್ಕ್ಯಾನ್",
     "history": "ಇತಿಹಾಸ",
     "request": "ವಿನಂತಿ",
     "settings": "ಸೆಟ್ಟಿಂಗ್‌ಗಳು"

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -128,14 +128,18 @@ 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"
                   lineHeight={1}>
                   {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
@@ -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
@@ -48,7 +48,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
@@ -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.settingsLabel}>
                 {t('aboutInji')}
               </Text>
@@ -57,26 +57,31 @@ 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
                 activeOpacity={1}
                 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
@@ -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
@@ -49,13 +49,15 @@ export const ReceivedCardsModal: React.FC<ReceivedCardsProps> = ({
               />
               <Text
                 testID="noReceivedVcsTitle"
+                style={{paddingTop: 3}}
                 align="center"
                 weight="semibold"
                 margin="0 0 4 0">
                 {t('noReceivedVcsTitle')}
               </Text>
               <Text
                 testID="noReceivedVcsText"
+                style={{paddingTop: 3}}
                 align="center"
                 color={Theme.Colors.textLabel}>
                 {t('noReceivedVcsText')}