[issue-915] UI bugs on the NFT list screen (Android device)

Koniverse · Aug 10, 2023 · f93a031 · f93a031
1 parent 4f5d235
commit f93a031
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 27 deletions.
diff --git a/src/screens/Home/NFT/Collection/NftCollectionItem.tsx b/src/screens/Home/NFT/Collection/NftCollectionItem.tsx
@@ -3,7 +3,7 @@ import ImagePreview from 'components/ImagePreview';
 import React from 'react';
 import { StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { ColorMap } from 'styles/color';
-import { FontMedium, FontSemiBold, sharedStyles } from 'styles/sharedStyles';
+import { FontMedium, FontSemiBold } from 'styles/sharedStyles';
 
 interface Props {
   nftCollection: NftCollection;
@@ -12,15 +12,14 @@ interface Props {
 
 const WrapperStyle: StyleProp<ViewStyle> = {
   width: '50%',
+  height: 220,
   paddingHorizontal: 8,
 };
 
 const ContainerStyle: StyleProp<ViewStyle> = {
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
+  flex: 1,
+  justifyContent: 'space-between',
   borderRadius: 8,
-  overflow: 'hidden',
   backgroundColor: ColorMap.dark2,
 };
 
@@ -30,31 +29,28 @@ const LogoStyle: StyleProp<ViewStyle> = {
 };
 
 const InfoStyle: StyleProp<ViewStyle> = {
-  display: 'flex',
   justifyContent: 'space-between',
-  position: 'relative',
   flexDirection: 'row',
-  alignItems: 'center',
+  alignItems: 'flex-end',
   width: '100%',
-  flex: 1,
-  marginTop: 10,
-  marginBottom: 16,
+  marginTop: 5,
+  paddingBottom: 16,
   paddingHorizontal: 12,
 };
 
 const NameStyle: StyleProp<TextStyle> = {
-  ...sharedStyles.mediumText,
   ...FontSemiBold,
-  fontSize: 18,
-  width: '80%',
+  fontSize: 14,
+  lineHeight: 22,
+  flex: 1,
+  marginRight: 2,
   color: ColorMap.light,
 };
 
 const CountStyle: StyleProp<any> = {
-  ...sharedStyles.mainText,
   ...FontMedium,
   textAlign: 'right',
-  width: '20%',
+  paddingLeft: 2,
   color: ColorMap.disabled,
 };
 

diff --git a/src/screens/Home/NFT/Item/NftItem.tsx b/src/screens/Home/NFT/Item/NftItem.tsx
@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { StyleProp, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 import ImagePreview from 'components/ImagePreview';
 import { ColorMap } from 'styles/color';
-import { FontSemiBold, sharedStyles } from 'styles/sharedStyles';
+import { FontSemiBold } from 'styles/sharedStyles';
 
 interface Props {
   nftItem: _NftItem;
@@ -13,15 +13,14 @@ interface Props {
 
 const WrapperStyle: StyleProp<ViewStyle> = {
   width: '50%',
+  height: 220,
   paddingHorizontal: 8,
 };
 
 const ContainerStyle: StyleProp<ViewStyle> = {
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
+  flex: 1,
+  justifyContent: 'space-between',
   borderRadius: 8,
-  overflow: 'hidden',
   backgroundColor: ColorMap.dark2,
 };
 
@@ -31,21 +30,19 @@ const LogoStyle: StyleProp<any> = {
 };
 
 const InfoStyle: StyleProp<any> = {
-  display: 'flex',
   justifyContent: 'space-between',
-  position: 'relative',
   flexDirection: 'row',
   alignItems: 'center',
   width: '100%',
-  flex: 1,
-  marginTop: 10,
-  marginBottom: 16,
+  marginTop: 5,
+  paddingBottom: 16,
   paddingHorizontal: 12,
 };
 
 const NameStyle: StyleProp<any> = {
-  ...sharedStyles.mediumText,
   ...FontSemiBold,
+  fontSize: 14,
+  lineHeight: 22,
   width: '100%',
   color: ColorMap.light,
 };