mirror of
https://github.com/selfxyz/self.git
synced 2026-04-27 03:01:15 -04:00
fix padding
This commit is contained in:
@@ -39,80 +39,78 @@ const NextScreen: React.FC = () => {
|
||||
|
||||
return (
|
||||
<YStack p="$3" f={1}>
|
||||
<YStack flex={1} mx="$2" gap="$2" mt="$2">
|
||||
<YStack alignSelf='center' my="$3">
|
||||
{hideData
|
||||
? <Image
|
||||
w={height > 750 ? 150 : 100}
|
||||
h={height > 750 ? 190 : 80}
|
||||
borderRadius={height > 800 ? "$7" : "$6"}
|
||||
source={{
|
||||
uri: USER_PROFILE,
|
||||
}}
|
||||
/>
|
||||
: <Image
|
||||
w={height > 750 ? 150 : 110}
|
||||
h={height > 750 ? 190 : 130}
|
||||
borderRadius={height > 750 ? "$7" : "$6"}
|
||||
source={{
|
||||
uri: passportData.mockUser ? USER_PROFILE : passportData.photoBase64 ?? USER_PROFILE,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</YStack>
|
||||
<Text color={textBlack} fontSize="$8" mt="$8" >
|
||||
Hi{" "}
|
||||
<Text color={textBlack} fontSize="$8" style={{
|
||||
textDecorationLine: "underline", textDecorationColor: bgGreen
|
||||
}}>{
|
||||
passportData.mockUser
|
||||
? "Anon"
|
||||
: hideData
|
||||
? maskString(getFirstName(passportData.mrz))
|
||||
: getFirstName(passportData.mrz)
|
||||
}</Text>
|
||||
{" "}👋
|
||||
</Text>
|
||||
<YStack alignSelf='center' my="$3">
|
||||
{hideData
|
||||
? <Image
|
||||
w={height > 750 ? 150 : 100}
|
||||
h={height > 750 ? 190 : 80}
|
||||
borderRadius={height > 800 ? "$7" : "$6"}
|
||||
source={{
|
||||
uri: USER_PROFILE,
|
||||
}}
|
||||
/>
|
||||
: <Image
|
||||
w={height > 750 ? 150 : 110}
|
||||
h={height > 750 ? 190 : 130}
|
||||
borderRadius={height > 750 ? "$7" : "$6"}
|
||||
source={{
|
||||
uri: passportData.mockUser ? USER_PROFILE : passportData.photoBase64 ?? USER_PROFILE,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</YStack>
|
||||
<Text color={textBlack} fontSize="$8" mt="$8" ml="$2">
|
||||
Hi{" "}
|
||||
<Text color={textBlack} fontSize="$8" style={{
|
||||
textDecorationLine: "underline", textDecorationColor: bgGreen
|
||||
}}>{
|
||||
passportData.mockUser
|
||||
? "Anon"
|
||||
: hideData
|
||||
? maskString(getFirstName(passportData.mrz))
|
||||
: getFirstName(passportData.mrz)
|
||||
}</Text>
|
||||
{" "}👋
|
||||
</Text>
|
||||
|
||||
<YStack gap="$2" mt="$4" >
|
||||
{Object.keys(disclosureOptions).map((key) => {
|
||||
const key_ = key;
|
||||
const indexes = attributeToPosition[key_ as keyof typeof attributeToPosition];
|
||||
const keyFormatted = key_.replace(/_/g, ' ').split(' ').map((word: string) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
|
||||
const mrzAttribute = passportData.mrz.slice(indexes[0], indexes[1] + 1);
|
||||
const mrzAttributeFormatted = formatAttribute(key_, mrzAttribute);
|
||||
<YStack gap="$2" mt="$4" mx="$3">
|
||||
{Object.keys(disclosureOptions).map((key) => {
|
||||
const key_ = key;
|
||||
const indexes = attributeToPosition[key_ as keyof typeof attributeToPosition];
|
||||
const keyFormatted = key_.replace(/_/g, ' ').split(' ').map((word: string) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
|
||||
const mrzAttribute = passportData.mrz.slice(indexes[0], indexes[1] + 1);
|
||||
const mrzAttributeFormatted = formatAttribute(key_, mrzAttribute);
|
||||
|
||||
return (
|
||||
<Fieldset horizontal key={key} gap="$3" alignItems='center'>
|
||||
<Text color={textBlack} w="$10" justifyContent="flex-end" fontSize="$5" style={{
|
||||
opacity: 0.7
|
||||
}}>
|
||||
{keyFormatted}:
|
||||
</Text>
|
||||
<Text
|
||||
color={textBlack}
|
||||
fontSize="$5"
|
||||
return (
|
||||
<Fieldset horizontal key={key} gap="$3" alignItems='center'>
|
||||
<Text color={textBlack} w="$10" justifyContent="flex-end" fontSize="$5" style={{
|
||||
opacity: 0.7
|
||||
}}>
|
||||
{keyFormatted}:
|
||||
</Text>
|
||||
<Text
|
||||
color={textBlack}
|
||||
fontSize="$5"
|
||||
|
||||
>
|
||||
{hideData ? maskString(mrzAttributeFormatted) : mrzAttributeFormatted}
|
||||
</Text>
|
||||
>
|
||||
{hideData ? maskString(mrzAttributeFormatted) : mrzAttributeFormatted}
|
||||
</Text>
|
||||
|
||||
</Fieldset>
|
||||
);
|
||||
})}
|
||||
</YStack>
|
||||
</Fieldset>
|
||||
);
|
||||
})}
|
||||
</YStack>
|
||||
|
||||
<YStack f={1} />
|
||||
<YStack f={1} />
|
||||
|
||||
<XStack bg="#ffff" borderRadius={100} py="$2.5" px="$3.5" gap="$2">
|
||||
<Info alignSelf='center' size={24} color={textBlack} />
|
||||
<Text pr="$6" fontSize="$2" color={textBlack}>Your information will remain confidential and will not be used or shared without your explicit consent.</Text>
|
||||
</XStack>
|
||||
<XStack bg="#ffff" borderRadius={100} py="$2.5" px="$3.5" gap="$2" mx="$3">
|
||||
<Info alignSelf='center' size={24} color={textBlack} />
|
||||
<Text pr="$6" fontSize="$2" color={textBlack}>Your information will remain confidential and will not be used or shared without your explicit consent.</Text>
|
||||
</XStack >
|
||||
|
||||
<YStack f={1} />
|
||||
<YStack f={1} />
|
||||
|
||||
<CustomButton onPress={handleNext} text="Next" Icon={<ArrowRight color={textBlack} />} />
|
||||
</YStack >
|
||||
<CustomButton onPress={handleNext} text="Next" Icon={<ArrowRight color={textBlack} />} />
|
||||
</YStack >
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user