feature:基本功能
This commit is contained in:
吕新雨
662
client/components/home/ProfileModal.tsx
Normal file
662
client/components/home/ProfileModal.tsx
Normal file
@@ -0,0 +1,662 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Alert, FlatList, Image, Pressable, StyleSheet, Text, View } from 'react-native';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Switch } from 'react-native';
|
||||
import Animated, {
|
||||
Easing,
|
||||
FadeIn,
|
||||
FadeOut,
|
||||
SlideInLeft,
|
||||
SlideInRight,
|
||||
SlideOutLeft,
|
||||
SlideOutRight,
|
||||
} from 'react-native-reanimated';
|
||||
|
||||
import SheetModal from '@/components/ui/SheetModal';
|
||||
|
||||
import { MOCK_CONTENT } from '@/src/constants/mockContent';
|
||||
import {
|
||||
getDailyReminderSettings,
|
||||
getFavorites,
|
||||
setDailyReminderSettings,
|
||||
type DailyReminderSettings,
|
||||
} from '@/src/storage/appStorage';
|
||||
|
||||
import AvatarIcon from '@/assets/images/home/Profile/Default_avatar.png';
|
||||
import MyLikeIcon from '@/assets/images/home/Profile/mylike.svg';
|
||||
import SmallComponentIcon from '@/assets/images/home/Profile/small_component.svg';
|
||||
import RemindIcon from '@/assets/images/home/Profile/remind.svg';
|
||||
import PrivacyIcon from '@/assets/images/home/Profile/privacy Policy.svg';
|
||||
import TermsIcon from '@/assets/images/home/Profile/terms_of_use.svg';
|
||||
import LanguageIcon from '@/assets/images/home/Profile/language.svg';
|
||||
|
||||
type Props = {
|
||||
visible: boolean;
|
||||
name?: string;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
type Page = 'root' | 'favorites' | 'dailyReminder' | 'widget';
|
||||
type NavDirection = 'forward' | 'back';
|
||||
|
||||
export default function ProfileModal({ visible, name, onClose }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [page, setPage] = useState<Page>('root');
|
||||
const [navDirection, setNavDirection] = useState<NavDirection>('forward');
|
||||
const isRoot = page === 'root';
|
||||
|
||||
// 关闭弹窗时重置为首页，避免下次打开停留在二级页
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
setNavDirection('back');
|
||||
setPage('root');
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
function go(next: Page, direction: NavDirection) {
|
||||
setNavDirection(direction);
|
||||
setPage(next);
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
setNavDirection('back');
|
||||
setPage('root');
|
||||
onClose();
|
||||
}
|
||||
|
||||
function handleSheetClose() {
|
||||
// 需求：二级页点击 X 等同于点击“返回”
|
||||
if (!isRoot) {
|
||||
go('root', 'back');
|
||||
return;
|
||||
}
|
||||
handleClose();
|
||||
}
|
||||
|
||||
const title = useMemo(() => {
|
||||
if (page === 'favorites') return t('profile.favorites');
|
||||
if (page === 'dailyReminder') return t('dailyReminder.title');
|
||||
if (page === 'widget') return t('profile.widget');
|
||||
return t('profile.title');
|
||||
}, [page, t]);
|
||||
|
||||
const transition = useMemo(() => {
|
||||
const duration = 220;
|
||||
const easing = Easing.out(Easing.cubic);
|
||||
|
||||
// 进入二级页：从右侧滑入；返回：从左侧滑入
|
||||
const entering =
|
||||
navDirection === 'forward'
|
||||
? SlideInRight.duration(duration).easing(easing)
|
||||
: SlideInLeft.duration(duration).easing(easing);
|
||||
|
||||
// 离开：进入二级页时旧页面向左滑出；返回时旧页面向右滑出
|
||||
const exiting =
|
||||
navDirection === 'forward'
|
||||
? SlideOutLeft.duration(duration).easing(easing)
|
||||
: SlideOutRight.duration(duration).easing(easing);
|
||||
|
||||
return {
|
||||
entering,
|
||||
exiting,
|
||||
fadeIn: FadeIn.duration(duration).easing(easing),
|
||||
fadeOut: FadeOut.duration(duration).easing(easing),
|
||||
};
|
||||
}, [navDirection]);
|
||||
|
||||
return (
|
||||
<SheetModal visible={visible} title={title} onClose={handleSheetClose}>
|
||||
{!isRoot && (
|
||||
<Pressable
|
||||
onPress={() => go('root', 'back')}
|
||||
hitSlop={8}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={t('common.back')}
|
||||
style={styles.backRow}
|
||||
>
|
||||
<Text style={styles.backText}>‹ {t('common.back')}</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
|
||||
<Animated.View
|
||||
key={page}
|
||||
entering={transition.entering}
|
||||
exiting={transition.exiting}
|
||||
style={styles.pageWrap}
|
||||
>
|
||||
<Animated.View entering={transition.fadeIn} exiting={transition.fadeOut}>
|
||||
{page === 'root' ? (
|
||||
<RootPage
|
||||
name={name}
|
||||
onOpenFavorites={() => go('favorites', 'forward')}
|
||||
onOpenWidget={() => go('widget', 'forward')}
|
||||
onOpenDailyReminder={() => go('dailyReminder', 'forward')}
|
||||
/>
|
||||
) : page === 'favorites' ? (
|
||||
<FavoritesPage visible={visible} />
|
||||
) : page === 'dailyReminder' ? (
|
||||
<DailyReminderPage visible={visible} onDone={() => go('root', 'back')} />
|
||||
) : (
|
||||
<WidgetPage />
|
||||
)}
|
||||
</Animated.View>
|
||||
</Animated.View>
|
||||
</SheetModal>
|
||||
);
|
||||
}
|
||||
|
||||
function toastTodo(t: (key: string) => string) {
|
||||
Alert.alert(t('profile.todoTitle'), t('profile.todoDesc'));
|
||||
}
|
||||
|
||||
function RootPage({
|
||||
name,
|
||||
onOpenFavorites,
|
||||
onOpenWidget,
|
||||
onOpenDailyReminder,
|
||||
}: {
|
||||
name?: string;
|
||||
onOpenFavorites: () => void;
|
||||
onOpenWidget: () => void;
|
||||
onOpenDailyReminder: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<View style={styles.header}>
|
||||
<Image source={AvatarIcon} style={styles.avatarImage} resizeMode="contain" />
|
||||
<Text style={styles.name}>{name || 'Hali'}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.quickRow}>
|
||||
<QuickCard title={t('profile.favorites')} onPress={onOpenFavorites}>
|
||||
<MyLikeIcon width={34} height={34} />
|
||||
</QuickCard>
|
||||
<QuickCard title={t('profile.widget')} onPress={onOpenWidget}>
|
||||
<SmallComponentIcon width={34} height={34} />
|
||||
</QuickCard>
|
||||
</View>
|
||||
|
||||
<View style={styles.list}>
|
||||
<ListItem
|
||||
icon={<RemindIcon width={22} height={22} />}
|
||||
title={t('profile.dailyReminder')}
|
||||
onPress={onOpenDailyReminder}
|
||||
/>
|
||||
<ListItem
|
||||
icon={<PrivacyIcon width={22} height={22} />}
|
||||
title={t('profile.privacy')}
|
||||
onPress={() => toastTodo(t)}
|
||||
/>
|
||||
<ListItem
|
||||
icon={<TermsIcon width={22} height={22} />}
|
||||
title={t('profile.terms')}
|
||||
onPress={() => toastTodo(t)}
|
||||
/>
|
||||
<ListItem
|
||||
icon={<LanguageIcon width={22} height={22} />}
|
||||
title={t('profile.language')}
|
||||
onPress={() => toastTodo(t)}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function FavoritesPage({ visible }: { visible: boolean }) {
|
||||
const { t } = useTranslation();
|
||||
const [ids, setIds] = useState<string[]>([]);
|
||||
|
||||
// 每次进入该页刷新一次，确保展示最新“喜欢”
|
||||
useEffect(() => {
|
||||
if (!visible) return;
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
const list = await getFavorites();
|
||||
if (!cancelled) setIds(list);
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [visible]);
|
||||
|
||||
const items = useMemo(() => {
|
||||
const map = new Map(MOCK_CONTENT.map((c) => [c.id, c]));
|
||||
return ids.map((id) => map.get(id)).filter(Boolean) as { id: string; text: string }[];
|
||||
}, [ids]);
|
||||
|
||||
return (
|
||||
<View style={styles.favContainer}>
|
||||
{items.length === 0 ? (
|
||||
<Text style={styles.favEmpty}>{t('favorites.empty')}</Text>
|
||||
) : (
|
||||
<FlatList
|
||||
data={items}
|
||||
keyExtractor={(it) => it.id}
|
||||
contentContainerStyle={styles.favList}
|
||||
renderItem={({ item }) => (
|
||||
<View style={styles.favRow}>
|
||||
<Text style={styles.favText}>{item.text}</Text>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function DailyReminderPage({ visible, onDone }: { visible: boolean; onDone: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [timesPerDay, setTimesPerDay] = useState(3);
|
||||
const [pushEnabled, setPushEnabled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
if (!visible) return;
|
||||
setLoading(true);
|
||||
(async () => {
|
||||
const s = await getDailyReminderSettings();
|
||||
if (cancelled) return;
|
||||
setTimesPerDay(s.timesPerDay);
|
||||
setPushEnabled(s.pushEnabled);
|
||||
setLoading(false);
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [visible]);
|
||||
|
||||
function clamp(next: number) {
|
||||
return Math.min(10, Math.max(1, next));
|
||||
}
|
||||
|
||||
async function onOk() {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
const next: DailyReminderSettings = { timesPerDay, pushEnabled };
|
||||
await setDailyReminderSettings(next);
|
||||
setLoading(false);
|
||||
onDone();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={styles.counter}>
|
||||
<Pressable
|
||||
onPress={() => setTimesPerDay((v) => clamp(v - 1))}
|
||||
hitSlop={10}
|
||||
style={styles.circleBtn}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={t('dailyReminder.minus')}
|
||||
>
|
||||
<Text style={styles.circleText}>－</Text>
|
||||
</Pressable>
|
||||
|
||||
<View style={styles.countCenter}>
|
||||
<Text style={styles.countNumber}>{timesPerDay}</Text>
|
||||
<Text style={styles.countUnit}>{t('dailyReminder.timesUnit')}</Text>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
onPress={() => setTimesPerDay((v) => clamp(v + 1))}
|
||||
hitSlop={10}
|
||||
style={styles.circleBtn}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={t('dailyReminder.plus')}
|
||||
>
|
||||
<Text style={styles.circleText}>＋</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<View style={styles.remindRow}>
|
||||
<View style={styles.rowLeft}>
|
||||
<View style={styles.rowIcon}>
|
||||
<RemindIcon width={18} height={18} />
|
||||
</View>
|
||||
<Text style={styles.rowText}>{t('dailyReminder.pushLabel')}</Text>
|
||||
</View>
|
||||
<Switch value={pushEnabled} onValueChange={setPushEnabled} />
|
||||
</View>
|
||||
|
||||
<Pressable onPress={onOk} disabled={loading} style={styles.okPressable}>
|
||||
<LinearGradient
|
||||
colors={['#F69F7B', '#F99CC0']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={[styles.okBtn, loading && styles.okBtnDisabled]}
|
||||
>
|
||||
<Text style={styles.okText}>{t('dailyReminder.ok')}</Text>
|
||||
</LinearGradient>
|
||||
</Pressable>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function WidgetPage() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<View style={styles.widgetContent}>
|
||||
<View style={styles.widgetRow}>
|
||||
<View style={styles.widgetCard}>
|
||||
<View style={[styles.widgetPreviewInner, styles.widgetPreviewLock]}>
|
||||
<Text style={styles.widgetPreviewDate} numberOfLines={1}>
|
||||
{t('widget.previewDate')}
|
||||
</Text>
|
||||
<Text style={styles.widgetPreviewTime} numberOfLines={1}>
|
||||
13:45
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.widgetCardLabel}>{t('widget.lockScreen')}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.widgetCard}>
|
||||
<View style={[styles.widgetPreviewInner, styles.widgetPreviewHome]}>
|
||||
<Text style={styles.widgetPreviewQuote} numberOfLines={3}>
|
||||
{t('widget.previewQuote')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.widgetCardLabel}>{t('widget.homeScreen')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.widgetDesc}>{t('settings.widgetDesc')}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function QuickCard({
|
||||
title,
|
||||
onPress,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Pressable onPress={onPress} style={styles.quickCard} hitSlop={6}>
|
||||
<Text style={styles.quickTitle}>{title}</Text>
|
||||
<View style={styles.quickIconWrap}>{children}</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
function ListItem({
|
||||
icon,
|
||||
title,
|
||||
onPress,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable onPress={onPress} style={styles.item} hitSlop={6}>
|
||||
<View style={styles.itemLeft}>
|
||||
<View style={styles.itemIcon}>{icon}</View>
|
||||
<Text style={styles.itemText}>{title}</Text>
|
||||
</View>
|
||||
<Text style={styles.chevron}>›</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
pageWrap: {
|
||||
// 给页面切换动画一个稳定的容器，避免布局抖动
|
||||
},
|
||||
backRow: {
|
||||
alignSelf: 'flex-start',
|
||||
paddingVertical: 4,
|
||||
paddingHorizontal: 2,
|
||||
marginBottom: 6,
|
||||
},
|
||||
backText: {
|
||||
color: 'rgba(94,42,40,0.75)',
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
},
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 6,
|
||||
paddingBottom: 14,
|
||||
},
|
||||
// 头像是默认图片：234x183，没有圆角/边框/背景颜色
|
||||
avatarImage: {
|
||||
width: 234,
|
||||
height: 183,
|
||||
marginBottom: 10,
|
||||
},
|
||||
name: {
|
||||
color: '#5E2A28',
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
},
|
||||
quickRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
paddingBottom: 14,
|
||||
},
|
||||
quickCard: {
|
||||
flex: 1,
|
||||
borderRadius: 16,
|
||||
padding: 14,
|
||||
backgroundColor: 'rgba(244,214,194,0.65)',
|
||||
},
|
||||
quickTitle: {
|
||||
color: '#5E2A28',
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
marginBottom: 10,
|
||||
},
|
||||
quickIconWrap: { alignItems: 'center', justifyContent: 'center', flex: 1 },
|
||||
list: {
|
||||
borderRadius: 16,
|
||||
backgroundColor: 'rgba(255,255,255,0.75)',
|
||||
overflow: 'hidden',
|
||||
marginBottom: 8,
|
||||
},
|
||||
item: {
|
||||
height: 52,
|
||||
paddingHorizontal: 14,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: 'rgba(94,42,40,0.10)',
|
||||
},
|
||||
itemLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
itemIcon: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'rgba(244,214,194,0.55)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
itemText: {
|
||||
color: '#5E2A28',
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
},
|
||||
chevron: {
|
||||
color: 'rgba(94,42,40,0.45)',
|
||||
fontSize: 20,
|
||||
marginTop: -2,
|
||||
},
|
||||
|
||||
favContainer: {
|
||||
borderRadius: 16,
|
||||
backgroundColor: 'rgba(255,255,255,0.75)',
|
||||
overflow: 'hidden',
|
||||
marginBottom: 8,
|
||||
},
|
||||
favEmpty: {
|
||||
color: 'rgba(94,42,40,0.55)',
|
||||
fontSize: 15,
|
||||
textAlign: 'center',
|
||||
paddingVertical: 26,
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
favList: {
|
||||
paddingBottom: 10,
|
||||
},
|
||||
favRow: {
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 14,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: 'rgba(94,42,40,0.10)',
|
||||
backgroundColor: 'rgba(255,255,255,0.15)',
|
||||
},
|
||||
favText: {
|
||||
color: '#5E2A28',
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
fontWeight: '600',
|
||||
},
|
||||
|
||||
counter: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 22,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 22,
|
||||
},
|
||||
circleBtn: {
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 21,
|
||||
backgroundColor: 'rgba(244,214,194,0.75)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
circleText: {
|
||||
color: '#5E2A28',
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
marginTop: -1,
|
||||
},
|
||||
countCenter: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
gap: 6,
|
||||
},
|
||||
countNumber: {
|
||||
color: '#111',
|
||||
fontSize: 54,
|
||||
fontWeight: '800',
|
||||
letterSpacing: -1,
|
||||
},
|
||||
countUnit: {
|
||||
color: '#111',
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
marginBottom: 10,
|
||||
},
|
||||
remindRow: {
|
||||
height: 54,
|
||||
borderRadius: 16,
|
||||
backgroundColor: 'rgba(255,255,255,0.75)',
|
||||
paddingHorizontal: 14,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 18,
|
||||
},
|
||||
rowLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
|
||||
rowIcon: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'rgba(244,214,194,0.55)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
rowText: {
|
||||
color: '#5E2A28',
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
},
|
||||
okPressable: {
|
||||
marginBottom: 6,
|
||||
},
|
||||
okBtn: {
|
||||
height: 52,
|
||||
borderRadius: 26,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
okBtnDisabled: { opacity: 0.7 },
|
||||
okText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
},
|
||||
|
||||
widgetContent: {
|
||||
paddingBottom: 18,
|
||||
gap: 14,
|
||||
},
|
||||
widgetRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
widgetCard: {
|
||||
flex: 1,
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'rgba(255,255,255,0.75)',
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: 'rgba(94,42,40,0.12)',
|
||||
},
|
||||
widgetPreviewInner: {
|
||||
height: 120,
|
||||
padding: 12,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
widgetPreviewLock: {
|
||||
backgroundColor: 'rgba(244,214,194,0.65)',
|
||||
},
|
||||
widgetPreviewHome: {
|
||||
backgroundColor: 'rgba(243,208,225,0.55)',
|
||||
},
|
||||
widgetPreviewDate: {
|
||||
color: 'rgba(94,42,40,0.70)',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginBottom: 6,
|
||||
},
|
||||
widgetPreviewTime: {
|
||||
color: '#ffffff',
|
||||
fontSize: 44,
|
||||
fontWeight: '800',
|
||||
letterSpacing: 1,
|
||||
},
|
||||
widgetPreviewQuote: {
|
||||
color: '#5E2A28',
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
fontWeight: '700',
|
||||
},
|
||||
widgetCardLabel: {
|
||||
paddingVertical: 10,
|
||||
textAlign: 'center',
|
||||
color: '#5E2A28',
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
},
|
||||
widgetDesc: {
|
||||
color: 'rgba(94,42,40,0.75)',
|
||||
fontSize: 13,
|
||||
lineHeight: 18,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user