amaliadwiy
d299484a98
- lib/api.ts (879 baris) → 13 file di lib/api/ per domain - constants/Styles.ts (1.275 baris) → 10 file di constants/styles/ per domain - tambah docs/FILE-HEALTH.md dan referensinya ke CLAUDE.md - kedua file lama tetap sebagai re-export — zero breaking changes
136 lines
5.6 KiB
TypeScript
136 lines
5.6 KiB
TypeScript
import { StyleSheet } from "react-native";
|
|
|
|
const ComponentStyles = StyleSheet.create({
|
|
// avatar
|
|
userProfileExtraSmall: { width: 35, height: 35, borderRadius: 100 },
|
|
userProfileSmall: { width: 48, height: 48, borderRadius: 100 },
|
|
userProfileBig: { width: 100, height: 100, borderRadius: 100 },
|
|
imgListBanner: { width: 100, height: 50, borderRadius: 5 },
|
|
iconContent: { padding: 10, borderRadius: 100, backgroundColor: '#E5E7EB' },
|
|
|
|
// chip
|
|
chip: {
|
|
paddingVertical: 5,
|
|
paddingHorizontal: 15,
|
|
borderRadius: 5,
|
|
borderWidth: 1,
|
|
borderColor: "transparent",
|
|
marginRight: 10,
|
|
marginBottom: 10,
|
|
},
|
|
chipSelected: { backgroundColor: "#f2f6ffff", borderColor: "#384288", borderWidth: 1 },
|
|
chipText: { fontSize: 16, color: "#222" },
|
|
chipTextSelected: { color: "white" },
|
|
checkIcon: {
|
|
position: "absolute",
|
|
top: -6,
|
|
left: -6,
|
|
backgroundColor: "#384288",
|
|
borderRadius: 10,
|
|
padding: 2,
|
|
},
|
|
|
|
// badge & progress
|
|
badgeCol: { alignItems: 'center', gap: 6 },
|
|
progressBadge: { borderRadius: 10, paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, alignItems: 'center' },
|
|
taskCountBadge: { borderRadius: 6, paddingHorizontal: 7, paddingVertical: 2 },
|
|
positionBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 },
|
|
textProgressPercent: { fontSize: 22, fontWeight: 'bold', lineHeight: 28 },
|
|
progressTrack: { height: 8, borderRadius: 4, overflow: 'hidden' },
|
|
progressFill: { height: '100%', borderRadius: 4 },
|
|
reportContent: { borderLeftWidth: 3, paddingLeft: 12 },
|
|
expandBtn: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', marginTop: 8, gap: 4 },
|
|
fileGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
|
|
fileCard: { width: '48%', borderRadius: 10, borderWidth: 1, padding: 12, flexDirection: 'row', alignItems: 'center', gap: 10 },
|
|
|
|
// calendar
|
|
signDate: { width: 20, height: 2, borderRadius: 3, marginTop: 3 },
|
|
selectedDate: { backgroundColor: '#238be6', borderRadius: 5 },
|
|
selectRangeDate: { backgroundColor: '#228be61f' },
|
|
calendarDotRow: { flexDirection: 'row', gap: 2, height: 6, marginTop: 1 },
|
|
calendarDot: { width: 5, height: 5, borderRadius: 3 },
|
|
villageEventLegendRow: { marginTop: 10, marginBottom: 4, gap: 16 },
|
|
villageEventLegendItem: { gap: 6 },
|
|
villageEventLegendDot: { width: 10, height: 10, borderRadius: 5 },
|
|
villageEventBadge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, marginRight: 6 },
|
|
|
|
// event item
|
|
itemEvent: { padding: 10, borderRadius: 10, flexDirection: 'row', alignContent: 'stretch', marginBottom: 10 },
|
|
dividerEvent: { width: 7, borderRadius: 5, marginRight: 10 },
|
|
|
|
// member
|
|
memberAvatarRing: { borderWidth: 3, borderColor: 'rgba(255,255,255,0.4)', borderRadius: 100 },
|
|
memberBadgeRow: { flexDirection: 'row', gap: 8, marginTop: 12 },
|
|
memberBadgeApprover: {
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: 20,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255,255,255,0.6)',
|
|
backgroundColor: 'rgba(255,255,255,0.15)',
|
|
},
|
|
memberBadgePill: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 20 },
|
|
memberInfoRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 14 },
|
|
memberInfoIcon: { width: 36, alignItems: 'center' },
|
|
memberInfoContent: { flex: 1, marginLeft: 10 },
|
|
|
|
// discussion
|
|
discussionCard: { borderRadius: 10, borderWidth: 1, padding: 14 },
|
|
discussionIconCircle: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
|
|
discussionIconCircleLg: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' },
|
|
discussionStatusPill: { alignSelf: 'flex-start', marginTop: 3, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 20, borderWidth: 1 },
|
|
discussionStatusText: { fontSize: 11, fontWeight: '600' },
|
|
discussionCardIndent: { marginLeft: 50 },
|
|
discussionSeparator: { height: 8 },
|
|
discussionCommentText: { fontSize: 12, marginLeft: 5 },
|
|
discussionDateText: { fontSize: 11 },
|
|
discussionCommentCard: { borderRadius: 10, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' },
|
|
discussionEditedText: { fontSize: 10, fontStyle: 'italic' },
|
|
|
|
// guide overlay
|
|
guideOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' },
|
|
guideCard: {
|
|
position: 'absolute',
|
|
left: 24,
|
|
right: 24,
|
|
borderRadius: 16,
|
|
padding: 20,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 12,
|
|
elevation: 8,
|
|
},
|
|
guideBadge: { paddingHorizontal: 8, paddingVertical: 3, borderRadius: 20 },
|
|
guideDotRow: { marginTop: 16, gap: 6, justifyContent: 'center' },
|
|
guideDot: { width: 6, height: 6, borderRadius: 3 },
|
|
guideButtonPrimary: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20 },
|
|
guideButtonSecondary: { paddingHorizontal: 4, paddingVertical: 8 },
|
|
guideArrowUp: {
|
|
position: 'absolute',
|
|
top: -10,
|
|
marginLeft: -8,
|
|
width: 0,
|
|
height: 0,
|
|
borderLeftWidth: 8,
|
|
borderRightWidth: 8,
|
|
borderBottomWidth: 10,
|
|
borderLeftColor: 'transparent',
|
|
borderRightColor: 'transparent',
|
|
},
|
|
guideArrowDown: {
|
|
position: 'absolute',
|
|
bottom: -10,
|
|
marginLeft: -8,
|
|
width: 0,
|
|
height: 0,
|
|
borderLeftWidth: 8,
|
|
borderRightWidth: 8,
|
|
borderTopWidth: 10,
|
|
borderLeftColor: 'transparent',
|
|
borderRightColor: 'transparent',
|
|
},
|
|
});
|
|
|
|
export default ComponentStyles;
|