wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: standardisasi borderRadius component — cards 10→12, icon circles 20/22→100, chip 5→20, guideCard 16→12

Browse Source
This commit is contained in:
amaliadwiy
2026-05-21 13:55:49 +08:00
parent 79c9c9046c
commit e4e8b44c45
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
constants/styles/component.styles.ts
View File

@@ -5,14 +5,14 @@ const ComponentStyles = StyleSheet.create({
userProfileExtraSmall: { width: 35, height: 35, borderRadius: 100 }, userProfileExtraSmall: { width: 35, height: 35, borderRadius: 100 },
userProfileSmall: { width: 48, height: 48, borderRadius: 100 }, userProfileSmall: { width: 48, height: 48, borderRadius: 100 },
userProfileBig: { width: 100, height: 100, borderRadius: 100 }, userProfileBig: { width: 100, height: 100, borderRadius: 100 },
imgListBanner: { width: 100, height: 50, borderRadius: 5 }, imgListBanner: { width: 100, height: 50, borderRadius: 8 },
iconContent: { padding: 10, borderRadius: 100, backgroundColor: '#E5E7EB' }, iconContent: { padding: 10, borderRadius: 100, backgroundColor: '#E5E7EB' },
// chip // chip
chip: { chip: {
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 15, paddingHorizontal: 15,
borderRadius: 5, borderRadius: 20,
borderWidth: 1, borderWidth: 1,
borderColor: "transparent", borderColor: "transparent",
marginRight: 10, marginRight: 10,
@@ -26,14 +26,14 @@ const ComponentStyles = StyleSheet.create({
top: -6, top: -6,
left: -6, left: -6,
backgroundColor: "#384288", backgroundColor: "#384288",
borderRadius: 10, borderRadius: 8,
padding: 2, padding: 2,
}, },
// badge & progress // badge & progress
badgeCol: { alignItems: 'center', gap: 6 }, badgeCol: { alignItems: 'center', gap: 6 },
progressBadge: { borderRadius: 10, paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, alignItems: 'center' }, progressBadge: { borderRadius: 12, paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, alignItems: 'center' },
taskCountBadge: { borderRadius: 6, paddingHorizontal: 7, paddingVertical: 2 }, taskCountBadge: { borderRadius: 8, paddingHorizontal: 7, paddingVertical: 2 },
positionBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 }, positionBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 },
textProgressPercent: { fontSize: 22, fontWeight: 'bold', lineHeight: 28 }, textProgressPercent: { fontSize: 22, fontWeight: 'bold', lineHeight: 28 },
progressTrack: { height: 8, borderRadius: 4, overflow: 'hidden' }, progressTrack: { height: 8, borderRadius: 4, overflow: 'hidden' },
@@ -41,11 +41,11 @@ const ComponentStyles = StyleSheet.create({
reportContent: { borderLeftWidth: 3, paddingLeft: 12 }, reportContent: { borderLeftWidth: 3, paddingLeft: 12 },
expandBtn: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', marginTop: 8, gap: 4 }, expandBtn: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', marginTop: 8, gap: 4 },
fileGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 }, fileGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
fileCard: { width: '48%', borderRadius: 10, borderWidth: 1, padding: 12, flexDirection: 'row', alignItems: 'center', gap: 10 }, fileCard: { width: '48%', borderRadius: 12, borderWidth: 1, padding: 12, flexDirection: 'row', alignItems: 'center', gap: 10 },
// calendar // calendar
signDate: { width: 20, height: 2, borderRadius: 3, marginTop: 3 }, signDate: { width: 20, height: 2, borderRadius: 4, marginTop: 3 },
selectedDate: { backgroundColor: '#238be6', borderRadius: 5 }, selectedDate: { backgroundColor: '#238be6', borderRadius: 4 },
selectRangeDate: { backgroundColor: '#228be61f' }, selectRangeDate: { backgroundColor: '#228be61f' },
calendarDotRow: { flexDirection: 'row', gap: 2, height: 6, marginTop: 1 }, calendarDotRow: { flexDirection: 'row', gap: 2, height: 6, marginTop: 1 },
calendarDot: { width: 5, height: 5, borderRadius: 3 }, calendarDot: { width: 5, height: 5, borderRadius: 3 },
@@ -55,7 +55,7 @@ const ComponentStyles = StyleSheet.create({
villageEventBadge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, marginRight: 6 }, villageEventBadge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, marginRight: 6 },
// event item // event item
itemEvent: { padding: 10, borderRadius: 10, flexDirection: 'row', alignContent: 'stretch', marginBottom: 10 }, itemEvent: { padding: 10, borderRadius: 12, flexDirection: 'row', alignContent: 'stretch', marginBottom: 10 },
dividerEvent: { width: 7, borderRadius: 5, marginRight: 10 }, dividerEvent: { width: 7, borderRadius: 5, marginRight: 10 },
// member // member
@@ -75,16 +75,16 @@ const ComponentStyles = StyleSheet.create({
memberInfoContent: { flex: 1, marginLeft: 10 }, memberInfoContent: { flex: 1, marginLeft: 10 },
// discussion // discussion
discussionCard: { borderRadius: 10, borderWidth: 1, padding: 14 }, discussionCard: { borderRadius: 12, borderWidth: 1, padding: 14 },
discussionIconCircle: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }, discussionIconCircle: { width: 40, height: 40, borderRadius: 100, alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
discussionIconCircleLg: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' }, discussionIconCircleLg: { width: 44, height: 44, borderRadius: 100, alignItems: 'center', justifyContent: 'center' },
discussionStatusPill: { alignSelf: 'flex-start', marginTop: 3, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 20, borderWidth: 1 }, discussionStatusPill: { alignSelf: 'flex-start', marginTop: 3, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 20, borderWidth: 1 },
discussionStatusText: { fontSize: 11, fontWeight: '600' }, discussionStatusText: { fontSize: 11, fontWeight: '600' },
discussionCardIndent: { marginLeft: 50 }, discussionCardIndent: { marginLeft: 50 },
discussionSeparator: { height: 8 }, discussionSeparator: { height: 8 },
discussionCommentText: { fontSize: 12, marginLeft: 5 }, discussionCommentText: { fontSize: 12, marginLeft: 5 },
discussionDateText: { fontSize: 11 }, discussionDateText: { fontSize: 11 },
discussionCommentCard: { borderRadius: 10, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' }, discussionCommentCard: { borderRadius: 12, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' },
discussionEditedText: { fontSize: 10, fontStyle: 'italic' }, discussionEditedText: { fontSize: 10, fontStyle: 'italic' },
discussionHeaderPadding: { paddingTop: 12 }, discussionHeaderPadding: { paddingTop: 12 },
discussionListPadding: { paddingTop: 8 }, discussionListPadding: { paddingTop: 8 },
@@ -98,7 +98,7 @@ const ComponentStyles = StyleSheet.create({
position: 'absolute', position: 'absolute',
left: 24, left: 24,
right: 24, right: 24,
borderRadius: 16, borderRadius: 12,
padding: 20, padding: 20,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { width: 0, height: 4 }, shadowOffset: { width: 0, height: 4 },