You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
829 lines
22 KiB
829 lines
22 KiB
import React, { useState, useEffect, useCallback } from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
StyleSheet, |
|
ImageBackground, |
|
TouchableOpacity, |
|
ScrollView, |
|
Platform, |
|
StatusBar, |
|
SafeAreaView, |
|
} from "react-native"; |
|
import SettingsIcon from "../components/SettingsIcon"; |
|
import fontSize from "../utils/fontsizeUtils"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
import BookmarkIcon from "../components/BookmarkIcon"; |
|
import LeftArrowIcon from "../components/DownArrowIcon"; |
|
import { flagMap } from "../utils/flagMap"; |
|
import DocumentApprovedIcon from "../components/DocumentApprovedIcon"; |
|
import PdfDocumentIcon from "../components/PdfDocumentIcon"; |
|
import DocumentClockIcon from "../components/DocumentClockIcon"; |
|
import widthUtils from "../utils/widthUtils"; |
|
import { productStatus } from "../constants/productStatus"; |
|
import useUserStore from "../store/user"; |
|
|
|
type RootStackParamList = { |
|
SettingList: undefined; |
|
Home: undefined; |
|
MyAccount: undefined; |
|
Login: undefined; |
|
Status: { status: number | null }; |
|
BrowseHistoryScreen: undefined; |
|
AddressList: undefined; |
|
Collection: undefined; |
|
Balance: undefined; |
|
MemberIntroduction: undefined; |
|
}; |
|
|
|
export const ProfileScreen = () => { |
|
const handleLogin = async () => { |
|
navigation.navigate("Login"); |
|
}; |
|
const { user } = useUserStore(); |
|
|
|
const navigation = |
|
useNavigation<NativeStackNavigationProp<RootStackParamList>>(); |
|
|
|
return ( |
|
<SafeAreaView style={styles.safeArea}> |
|
<StatusBar barStyle="dark-content" backgroundColor="#fff" /> |
|
<View style={styles.safeAreaContent}> |
|
<View style={styles.flexColumnContainer1}> |
|
{user.user_id ? ( |
|
<ImageBackground |
|
source={require("../../assets/img/image_b64646d0.png")} |
|
style={styles.timecardWidget} |
|
resizeMode="stretch" |
|
> |
|
<View style={styles.flexRowWithContent}> |
|
<Image |
|
source={flagMap.get(user?.country_en)} |
|
style={styles.imageContainerWithText} |
|
/> |
|
<View style={styles.financialInfoContainer}> |
|
<Text style={styles.whiteTextHeading}>{user?.currency}</Text> |
|
<TouchableOpacity |
|
onPress={() => navigation.navigate("SettingList")} |
|
> |
|
<View style={styles.svgContainer1}> |
|
<SettingsIcon size={fontSize(24)} color="white" /> |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.flexColumnContainer}> |
|
<View style={styles.flexContainerWithImageAndText}> |
|
<View style={styles.flexRowWithContent1}> |
|
<Image |
|
source={require("../../assets/img/image_94051480.jpeg")} |
|
style={styles.profileImageCircle} |
|
/> |
|
<View style={styles.customerInfoPanel}> |
|
<View> |
|
<Text style={styles.uniqueHeaderTextStyle}> |
|
{user?.username} |
|
</Text> |
|
<Text style={styles.elegantText}>ID: {user?.user_id}</Text> |
|
</View> |
|
<TouchableOpacity |
|
style={styles.transactionSummaryBox} |
|
onPress={() => navigation.navigate("Balance")} |
|
> |
|
<View style={styles.svgContainer}> |
|
<BookmarkIcon size={fontSize(24)} /> |
|
</View> |
|
<Text style={styles.soldeTextDisplayStyle}>余额</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.gradientCardContainer}> |
|
<ImageBackground |
|
source={require("../../assets/img/image_7dbf30dc.png")} |
|
style={styles.promoCardContainer2} |
|
resizeMode="stretch" |
|
> |
|
<View style={styles.promoCardContainerVip}> |
|
<View style={styles.VipCard}> |
|
<View style={styles.Vip}> |
|
<Text style={styles.goldenItalicHeading}>VIP{user?.vip_level}</Text> |
|
<Image |
|
source={require("../../assets/img/折扣VIP1 (1).png")} |
|
style={styles.VipImg} |
|
/> |
|
</View> |
|
<View style={styles.progressBar}> |
|
<View style={styles.progressBarFill}> |
|
<Text style={styles.progressBarText}>40000/50000</Text> |
|
</View> |
|
<View style={styles.progressBarLine}></View> |
|
</View> |
|
</View> |
|
<View style={styles.vipExplanation}> |
|
<View style={styles.vipExplanationText}> |
|
<Text style={styles.vipExplanationText1}> |
|
再消费10,000西非法郎即可成为[会员]，享受[XX]折扣 |
|
</Text> |
|
</View> |
|
<TouchableOpacity |
|
style={styles.vipExplanationButton} |
|
onPress={() => navigation.navigate("MemberIntroduction")} |
|
> |
|
<Text style={styles.vipExplanationButtonText}> |
|
了解更多 |
|
</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</ImageBackground> |
|
</View> |
|
</View> |
|
</ImageBackground> |
|
) : ( |
|
<ImageBackground |
|
source={require("../../assets/img/image_b64646d0.png")} |
|
style={styles.timecardWidget} |
|
resizeMode="stretch" |
|
> |
|
<View style={styles.flexRowWithContent}> |
|
<View style={styles.financialInfoContainer}> |
|
<TouchableOpacity |
|
onPress={() => navigation.navigate("SettingList")} |
|
> |
|
<View style={styles.svgContainer1}> |
|
<SettingsIcon size={fontSize(24)} color="white" /> |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.notLoggedInContainer}> |
|
<View style={styles.profileImageCircle}> |
|
<Image |
|
source={require("../../assets/img/brainnel-0000.jpg")} |
|
style={styles.profileImage} |
|
/> |
|
</View> |
|
<TouchableOpacity style={styles.loginButton} onPress={handleLogin}> |
|
<Text style={styles.loginButtonText}>立即登录</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</ImageBackground> |
|
)} |
|
|
|
<View style={styles.verticalCenterImageGallery}> |
|
<TouchableOpacity onPress={handleLogin}> |
|
<Text>登录</Text> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
<ScrollView |
|
showsVerticalScrollIndicator={false} |
|
style={{ flex: 1 }} |
|
bounces={false} |
|
overScrollMode="never" |
|
> |
|
<View style={styles.groupContainer}> |
|
<View style={styles.groupItemList}> |
|
<View style={styles.groupItemTitle}> |
|
<Text style={styles.groupItemTitleText}>订单标题</Text> |
|
<TouchableOpacity |
|
style={styles.groupItemTitleTextTout} |
|
onPress={() => navigation.navigate("Status", { status: null })} |
|
> |
|
<Text style={styles.groupItemTitleTextTout1}>全部</Text> |
|
<LeftArrowIcon size={fontSize(14)} color="#8f8684" /> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
<View style={styles.groupItem}> |
|
{productStatus.map((item, index) => ( |
|
<TouchableOpacity |
|
key={index} |
|
style={styles.groupItemContent} |
|
onPress={() => |
|
item.status !== null |
|
? navigation.navigate("Status", { status: item.status }) |
|
: null |
|
} |
|
> |
|
<View style={styles.groupItemContentIcon}> |
|
<item.icon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>{item.text}</Text> |
|
</TouchableOpacity> |
|
))} |
|
</View> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.groupContainer}> |
|
<View style={styles.groupItemList}> |
|
<View style={styles.groupItemTitle}> |
|
<Text style={styles.groupItemTitleText}>工具标题</Text> |
|
</View> |
|
|
|
<View style={styles.groupItem}> |
|
<View style={styles.groupItemContent}> |
|
<TouchableOpacity |
|
style={styles.groupItemContentIcon} |
|
onPress={() => navigation.navigate("BrowseHistoryScreen")} |
|
> |
|
<DocumentApprovedIcon size={fontSize(38)} color="#707070" /> |
|
</TouchableOpacity> |
|
<Text style={styles.groupItemContentText}>游览历史</Text> |
|
</View> |
|
|
|
<View style={styles.groupItemContent}> |
|
<TouchableOpacity |
|
style={styles.groupItemContentIcon} |
|
onPress={() => navigation.navigate("Collection")} |
|
> |
|
<PdfDocumentIcon size={fontSize(38)} color="#707070" /> |
|
</TouchableOpacity> |
|
<Text style={styles.groupItemContentText}>收藏</Text> |
|
</View> |
|
|
|
<TouchableOpacity |
|
style={styles.groupItemContent} |
|
onPress={() => navigation.navigate("AddressList")} |
|
> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentClockIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>收件人管理</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
</ScrollView> |
|
</View> |
|
</View> |
|
</SafeAreaView> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
safeArea: { |
|
flex: 1, |
|
backgroundColor: "#fff", |
|
}, |
|
safeAreaContent: { |
|
flex: 1, |
|
paddingTop: Platform.OS === 'android' ? 0 : 0, |
|
}, |
|
flexColumnContainer1: { |
|
flex: 1, |
|
}, |
|
timecardWidget: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
width: "100%", |
|
height: widthUtils(272, 272).height, |
|
overflow: "hidden", |
|
}, |
|
|
|
timeContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
height: widthUtils(43, 43).height, |
|
paddingTop: 21, |
|
}, |
|
timeContainer2: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
alignSelf: "stretch", |
|
justifyContent: "space-between", |
|
}, |
|
timeContainer: { |
|
display: "flex", |
|
flex: 1, |
|
flexDirection: "row", |
|
gap: 10, |
|
alignItems: "center", |
|
justifyContent: "center", |
|
minWidth: 153, |
|
paddingRight: 6, |
|
paddingLeft: 16, |
|
}, |
|
timeDisplayStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(17), |
|
fontWeight: "600", |
|
fontFamily: |
|
"SF Pro, -apple-system, system-ui, BlinkMacSystemFont, sans-serif", |
|
color: "white", |
|
}, |
|
timeDisplayContainer: { |
|
width: widthUtils(10, 124).width, |
|
height: widthUtils(10, 124).height, |
|
}, |
|
timeDisplayContainer1: { |
|
flex: 1, |
|
width: widthUtils(13, 153).width, |
|
height: widthUtils(13, 153).height, |
|
}, |
|
flexColumnContainer: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
paddingVertical: 12, |
|
paddingHorizontal: 20, |
|
paddingBottom: 3.5, |
|
flex: 1, |
|
}, |
|
flexContainerWithImageAndText: { |
|
display: "flex", |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "flex-start", |
|
justifyContent: "space-between", |
|
}, |
|
flexRowWithContent: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-end", |
|
paddingRight: 10, |
|
paddingTop: 10, |
|
}, |
|
flexRowWithContent1: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
}, |
|
profileImageCircle: { |
|
width: widthUtils(100, 100).width, |
|
height: widthUtils(100, 100).height, |
|
borderWidth: 0, |
|
backgroundColor: "#fff", |
|
borderRadius: 50, |
|
padding: 10, |
|
}, |
|
profileImage: { |
|
width: "100%", |
|
height: "100%", |
|
resizeMode: "contain", |
|
}, |
|
customerInfoPanel: { |
|
marginLeft: 20, |
|
}, |
|
uniqueHeaderTextStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(20), |
|
fontWeight: "900", |
|
fontFamily: "Archivo Black, sans-serif", |
|
color: "white", |
|
}, |
|
elegantText: { |
|
padding: 0, |
|
margin: 0, |
|
marginTop: 6.75, |
|
fontSize: fontSize(16), |
|
fontWeight: "900", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 22, |
|
color: "white", |
|
}, |
|
transactionSummaryBox: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: 8, |
|
}, |
|
svgContainer: { |
|
display: "flex", |
|
width: widthUtils(24, 24).width, |
|
height: widthUtils(24, 24).height, |
|
color: "#ffffff", |
|
marginRight: 8, |
|
}, |
|
soldeTextDisplayStyle: { |
|
padding: 0, |
|
margin: 0, |
|
marginLeft: 3, |
|
fontSize: fontSize(16), |
|
fontWeight: "500", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 22, |
|
color: "white", |
|
}, |
|
imageContainerWithText: { |
|
width: widthUtils(16, 24).width, |
|
height: widthUtils(16, 24).height, |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
financialInfoContainer: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginLeft: 3, |
|
}, |
|
whiteTextHeading: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(16), |
|
fontWeight: "500", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 22, |
|
color: "white", |
|
}, |
|
svgContainer1: { |
|
width: widthUtils(24, 24).width, |
|
height: widthUtils(24, 24).height, |
|
marginLeft: 11, |
|
color: "#ffffff", |
|
}, |
|
gradientCardContainer: { |
|
position: "absolute", |
|
bottom: 0, |
|
left: 19, |
|
right: 19, |
|
backgroundColor: "#3A3128", |
|
borderRadius: 10, |
|
marginBottom: Platform.OS === 'ios' ? -18 : -15, |
|
zIndex: 1, |
|
}, |
|
promoCardContainer2: { |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
height: widthUtils(130, 130).height, |
|
paddingRight: 9.5, |
|
paddingBottom: 15, |
|
paddingLeft: 9, |
|
width: "100%", |
|
}, |
|
promoCardContainerVip: { |
|
width: "100%", |
|
paddingTop: 5, |
|
paddingBottom: 5, |
|
paddingLeft: 10, |
|
paddingRight: 10, |
|
height: "100%", |
|
}, |
|
VipCard: { |
|
width: "100%", |
|
height: "50%", |
|
flexDirection: "row", |
|
}, |
|
Vip: { |
|
width: "35%", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
}, |
|
progressBar: { |
|
width: "65%", |
|
marginLeft: 10, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
progressBarFill: { |
|
width: "100%", |
|
height: "50%", |
|
}, |
|
progressBarText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "900", |
|
fontFamily: "Segoe UI", |
|
color: "#fcca80", |
|
}, |
|
progressBarLine: { |
|
width: "100%", |
|
height: 3, |
|
backgroundColor: "#d9d9d9", |
|
}, |
|
vipExplanation: { |
|
width: "100%", |
|
height: "50%", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
vipExplanationText: { |
|
width: "70%", |
|
height: "100%", |
|
}, |
|
vipExplanationText1: { |
|
fontSize: fontSize(14), |
|
padding: 5, |
|
color: "#fff", |
|
}, |
|
vipExplanationButton: { |
|
width: "30%", |
|
height: "100%", |
|
backgroundColor: "#ffd89b", |
|
borderRadius: 60, |
|
alignItems: "center", |
|
justifyContent: "center", |
|
}, |
|
vipExplanationButtonText: { |
|
fontSize: fontSize(14), |
|
}, |
|
VipImg: { |
|
width: widthUtils(28, 28).width, |
|
height: widthUtils(28, 28).height, |
|
marginLeft: 10, |
|
}, |
|
productInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
}, |
|
imageWithTextRatio: { |
|
width: widthUtils(23.5, 56).width, |
|
height: widthUtils(23.5, 56).height, |
|
}, |
|
goldenItalicHeading: { |
|
fontSize: fontSize(34), |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
color: "#f8cb7a", |
|
}, |
|
discountSectionContainer: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
marginLeft: 4, |
|
}, |
|
discountAmountContainer: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
}, |
|
discountPercentageTextStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(12), |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
fontFamily: "Segoe UI", |
|
color: "#4e2000", |
|
}, |
|
negativeMarginTopDiscountPercentage: { |
|
marginTop: -22, |
|
}, |
|
nestedContentContainer: { |
|
marginTop: -25, |
|
}, |
|
negativeMarginTop2: { |
|
marginTop: -36, |
|
}, |
|
imageContainer2: { |
|
width: widthUtils(36, 36).width, |
|
height: widthUtils(36, 36).height, |
|
}, |
|
negativeMarginTop1: { |
|
marginTop: -36, |
|
}, |
|
imgStyleF62: { |
|
width: "100%", |
|
height: widthUtils(36, 36).height, |
|
}, |
|
discountStatusContainer: { |
|
paddingRight: 7, |
|
paddingLeft: 7, |
|
marginTop: -23, |
|
}, |
|
discountStatusLabel: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(10), |
|
fontWeight: "600", |
|
fontStyle: "italic", |
|
fontFamily: "Segoe UI", |
|
color: "#4e2000", |
|
}, |
|
productSummaryBlock: { |
|
paddingTop: 4, |
|
paddingBottom: 6.5, |
|
marginLeft: 16, |
|
}, |
|
goldenTextHeading: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(13), |
|
fontWeight: "600", |
|
fontFamily: "PingFang SC", |
|
color: "#f8cb7a", |
|
}, |
|
negativeMarginTop: { |
|
marginTop: -0.5, |
|
}, |
|
horizontalLineWidget: { |
|
width: widthUtils(4, 235).width, |
|
height: widthUtils(4, 235).height, |
|
}, |
|
promoCardContainer: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
height: widthUtils(34, 34).height, |
|
marginTop: 6, |
|
}, |
|
promoCardContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-end", |
|
}, |
|
pingfangScTextWhite: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(11), |
|
fontWeight: "400", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 17, |
|
color: "white", |
|
textAlign: "left", |
|
letterSpacing: -0.1, |
|
}, |
|
promoDetailsContainer: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: -17, |
|
}, |
|
goldenLabel: { |
|
width: "30%", |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(12), |
|
fontWeight: "900", |
|
fontFamily: "MiSans", |
|
lineHeight: 15, |
|
color: "#f5c164", |
|
}, |
|
goldenText: { |
|
width: "70%", |
|
padding: 0, |
|
paddingRight: 24, |
|
paddingLeft: 37, |
|
margin: 0, |
|
fontSize: fontSize(12), |
|
fontWeight: "900", |
|
fontFamily: "MiSans", |
|
lineHeight: 15, |
|
color: "#f5c164", |
|
}, |
|
goldenGradientBox: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
paddingRight: 6, |
|
paddingLeft: 6, |
|
marginLeft: 11, |
|
backgroundColor: "#F5C164", |
|
borderRadius: 50, |
|
}, |
|
featuredText: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(11), |
|
fontWeight: "700", |
|
fontFamily: "Source Han Sans CN", |
|
color: "#473c30", |
|
}, |
|
verticalCenterImageGallery: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
paddingTop: 21.5, |
|
paddingRight: 20, |
|
paddingLeft: 20, |
|
backgroundColor: "#f0f0f0", |
|
}, |
|
cardContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
paddingTop: 14, |
|
paddingRight: 9, |
|
paddingBottom: 14, |
|
paddingLeft: 10, |
|
backgroundColor: "white", |
|
borderRadius: 10, |
|
}, |
|
imageContainer: { |
|
height: widthUtils(212, 212).height, |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
cardContainer: { |
|
paddingTop: 15, |
|
paddingRight: 11, |
|
paddingBottom: 17, |
|
paddingLeft: 11, |
|
marginTop: 20, |
|
backgroundColor: "white", |
|
borderRadius: 10, |
|
}, |
|
imageContainer1: { |
|
width: "100%", |
|
height: widthUtils(228, 228).height, |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
groupContainer: { |
|
padding: 20, |
|
}, |
|
groupItemList: { |
|
width: "100%", |
|
alignItems: "center", |
|
backgroundColor: "white", |
|
padding: 15, |
|
}, |
|
groupItemTitle: { |
|
flexDirection: "row", |
|
width: "100%", |
|
justifyContent: "space-between", |
|
alignItems: "center", |
|
}, |
|
groupItemTitleText: { |
|
fontSize: fontSize(18), |
|
fontWeight: "600", |
|
color: "#000", |
|
}, |
|
groupItemTitleTextTout: { |
|
fontSize: fontSize(16), |
|
fontWeight: "400", |
|
color: "#8f8684", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
groupItemTitleTextTout1: { |
|
marginRight: 3, |
|
fontSize: fontSize(16), |
|
fontWeight: "400", |
|
color: "#8f8684", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
groupItem: { |
|
flexDirection: "row", |
|
flexWrap: "wrap", |
|
width: "100%", |
|
marginTop: 25, |
|
}, |
|
groupItemContent: { |
|
width: "23%", |
|
borderRadius: 8, |
|
marginLeft: 5, |
|
alignItems: "center", |
|
justifyContent: "center", |
|
flexDirection: "column", |
|
marginBottom: 10, |
|
}, |
|
groupItemContentText: { |
|
fontSize: fontSize(12), |
|
fontWeight: "400", |
|
color: "#8f8684", |
|
width: "100%", |
|
textAlign: "center", |
|
}, |
|
groupItemContentIcon: { |
|
width: widthUtils(35, 40).width, |
|
height: widthUtils(35, 40).height, |
|
}, |
|
notLoggedInContainer: { |
|
flex: 1, |
|
alignItems: "center", |
|
justifyContent: "center", |
|
paddingBottom: 40, |
|
}, |
|
loginButton: { |
|
backgroundColor: "#ff701e", |
|
paddingHorizontal: 30, |
|
paddingVertical: 10, |
|
borderRadius: 20, |
|
marginTop: 20, |
|
}, |
|
loginButtonText: { |
|
color: "#fff", |
|
fontSize: fontSize(16), |
|
fontWeight: "600", |
|
}, |
|
});
|
|
|