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

style: kurangi borderRadius card dari 12 ke 8 agar tampilan lebih tegas

Browse Source
This commit is contained in:
amaliadwiy
2026-05-21 14:04:25 +08:00
parent 4dcfcbb7a7
commit e3d2752a4c
6 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
constants/styles/announcement.styles.ts
View File

@@ -4,7 +4,7 @@ const AnnouncementStyles = StyleSheet.create({
// list (index.tsx) // list (index.tsx)
announcementListContainer: { padding: 15, paddingBottom: 0 }, announcementListContainer: { padding: 15, paddingBottom: 0 },
announcementListInner: { marginTop: 10 }, announcementListInner: { marginTop: 10 },
announcementListCard: { borderRadius: 12, borderWidth: 1, padding: 12 }, announcementListCard: { borderRadius: 8, borderWidth: 1, padding: 12 },
announcementListCardHeader: { marginBottom: 6 }, announcementListCardHeader: { marginBottom: 6 },
announcementListTitleRow: { flex: 1, gap: 8, marginRight: 8, flexDirection: 'row', alignItems: 'center' }, announcementListTitleRow: { flex: 1, gap: 8, marginRight: 8, flexDirection: 'row', alignItems: 'center' },
announcementListIconBox: { width: 28, height: 28, borderRadius: 8, alignItems: 'center', justifyContent: 'center' }, announcementListIconBox: { width: 28, height: 28, borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
@@ -18,7 +18,7 @@ const AnnouncementStyles = StyleSheet.create({
// detail ([id].tsx) // detail ([id].tsx)
announcementDetailContainer: { padding: 15, paddingBottom: 50, gap: 12 }, announcementDetailContainer: { padding: 15, paddingBottom: 50, gap: 12 },
announcementDetailCard: { borderRadius: 12 }, announcementDetailCard: { borderRadius: 8 },
announcementDetailSkeletonGap: { gap: 8 }, announcementDetailSkeletonGap: { gap: 8 },
announcementDetailSkeletonIconRow: { gap: 10, marginBottom: 2 }, announcementDetailSkeletonIconRow: { gap: 10, marginBottom: 2 },
announcementDetailTitleRow: { gap: 10, marginBottom: 10 }, announcementDetailTitleRow: { gap: 10, marginBottom: 10 },

2
constants/styles/approval.styles.ts
View File

@@ -2,7 +2,7 @@ import { StyleSheet } from "react-native";
const ApprovalStyles = StyleSheet.create({ const ApprovalStyles = StyleSheet.create({
approvalBadge: { borderRadius: 20, paddingHorizontal: 10, paddingVertical: 3, alignSelf: 'flex-start' }, approvalBadge: { borderRadius: 20, paddingHorizontal: 10, paddingVertical: 3, alignSelf: 'flex-start' },
approvalItem: { borderWidth: 1, borderRadius: 12, padding: 12, marginBottom: 10 }, approvalItem: { borderWidth: 1, borderRadius: 8, padding: 12, marginBottom: 10 },
approvalItemHeader: { justifyContent: 'space-between', marginBottom: 8 }, approvalItemHeader: { justifyContent: 'space-between', marginBottom: 8 },
approvalIconMr: { marginRight: 6 }, approvalIconMr: { marginRight: 6 },
approvalNoteBox: { borderRadius: 8, padding: 8, marginTop: 4 }, approvalNoteBox: { borderRadius: 8, padding: 8, marginTop: 4 },

34
constants/styles/card.styles.ts
View File

@@ -4,7 +4,7 @@ const CardStyles = StyleSheet.create({
wrapPaper: { wrapPaper: {
padding: 10, padding: 10,
backgroundColor: 'white', backgroundColor: 'white',
borderRadius: 12, borderRadius: 8,
shadowColor: '#171717', shadowColor: '#171717',
shadowOffset: { width: 0, height: 0 }, shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.1, shadowOpacity: 0.1,
@@ -31,7 +31,7 @@ const CardStyles = StyleSheet.create({
shadowOpacity: 0.1, shadowOpacity: 0.1,
shadowRadius: 5, shadowRadius: 5,
elevation: 2, elevation: 2,
borderRadius: 12, borderRadius: 8,
marginBottom: 15, marginBottom: 15,
}, },
wrapGridCaraousel: { wrapGridCaraousel: {
@@ -42,7 +42,7 @@ const CardStyles = StyleSheet.create({
shadowOpacity: 0.1, shadowOpacity: 0.1,
shadowRadius: 5, shadowRadius: 5,
elevation: 2, elevation: 2,
borderRadius: 12, borderRadius: 8,
marginLeft: 5, marginLeft: 5,
display: 'flex', display: 'flex',
}, },
@@ -57,27 +57,27 @@ const CardStyles = StyleSheet.create({
paddingVertical: 25, paddingVertical: 25,
paddingHorizontal: 20, paddingHorizontal: 20,
alignItems: 'center', alignItems: 'center',
borderTopStartRadius: 12, borderTopStartRadius: 8,
borderTopEndRadius: 12, borderTopEndRadius: 8,
}, },
contentPaperGrid: { contentPaperGrid: {
height: 125, height: 125,
borderBottomEndRadius: 12, borderBottomEndRadius: 8,
borderBottomStartRadius: 12, borderBottomStartRadius: 8,
paddingHorizontal: 20, paddingHorizontal: 20,
justifyContent: 'space-evenly', justifyContent: 'space-evenly',
}, },
contentPaperGrid2: { contentPaperGrid2: {
height: 100, height: 100,
borderBottomEndRadius: 12, borderBottomEndRadius: 8,
borderBottomStartRadius: 12, borderBottomStartRadius: 8,
paddingHorizontal: 20, paddingHorizontal: 20,
paddingVertical: 15, paddingVertical: 15,
justifyContent: 'flex-start', justifyContent: 'flex-start',
}, },
wrapGridItem: { wrapGridItem: {
borderWidth: 1, borderWidth: 1,
borderRadius: 12, borderRadius: 8,
padding: 10, padding: 10,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
@@ -88,13 +88,13 @@ const CardStyles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderRadius: 12, borderRadius: 8,
borderWidth: 1, borderWidth: 1,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 10,
gap: 12, gap: 12,
}, },
sectionCard: { borderRadius: 12, padding: 16, borderWidth: 1 }, sectionCard: { borderRadius: 8, padding: 16, borderWidth: 1 },
sectionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 }, sectionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
sectionHeaderRow: { sectionHeaderRow: {
flexDirection: 'row', flexDirection: 'row',
@@ -115,7 +115,7 @@ const CardStyles = StyleSheet.create({
contentBar: { height: 20, backgroundColor: '#3B82F6', borderRadius: 10 }, contentBar: { height: 20, backgroundColor: '#3B82F6', borderRadius: 10 },
toastContainer: { toastContainer: {
backgroundColor: 'white', backgroundColor: 'white',
borderRadius: 12, borderRadius: 8,
padding: 10, padding: 10,
width: '90%', width: '90%',
borderWidth: 1, borderWidth: 1,
@@ -135,7 +135,7 @@ const CardStyles = StyleSheet.create({
loadingBox: { loadingBox: {
paddingVertical: 15, paddingVertical: 15,
paddingHorizontal: 40, paddingHorizontal: 40,
borderRadius: 12, borderRadius: 8,
alignItems: 'center', alignItems: 'center',
gap: 10, gap: 10,
}, },
@@ -143,16 +143,16 @@ const CardStyles = StyleSheet.create({
flex: 1, flex: 1,
justifyContent: "center", justifyContent: "center",
marginHorizontal: 15, marginHorizontal: 15,
borderRadius: 12, borderRadius: 8,
backgroundColor: '#19345E', backgroundColor: '#19345E',
display: 'flex', display: 'flex',
width: '92%', width: '92%',
resizeMode: 'stretch', resizeMode: 'stretch',
overflow: 'hidden', overflow: 'hidden',
}, },
wrapItemDiscussion: { padding: 15, borderRadius: 12, borderBottomWidth: 1 }, wrapItemDiscussion: { padding: 15, borderRadius: 8, borderBottomWidth: 1 },
wrapItemBorderBottom: { padding: 10, borderBottomWidth: 1 }, wrapItemBorderBottom: { padding: 10, borderBottomWidth: 1 },
wrapItemBorderAll: { padding: 10, borderWidth: 1, borderRadius: 12, marginBottom: 5 }, wrapItemBorderAll: { padding: 10, borderWidth: 1, borderRadius: 8, marginBottom: 5 },
wrapItemBorderNone: { padding: 10, marginBottom: 5 }, wrapItemBorderNone: { padding: 10, marginBottom: 5 },
}); });

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

@@ -32,7 +32,7 @@ const ComponentStyles = StyleSheet.create({
// badge & progress // badge & progress
badgeCol: { alignItems: 'center', gap: 6 }, badgeCol: { alignItems: 'center', gap: 6 },
progressBadge: { borderRadius: 12, paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, alignItems: 'center' }, progressBadge: { borderRadius: 8, paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, alignItems: 'center' },
taskCountBadge: { borderRadius: 8, 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 },
@@ -41,7 +41,7 @@ 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: 12, borderWidth: 1, padding: 12, flexDirection: 'row', alignItems: 'center', gap: 10 }, fileCard: { width: '48%', borderRadius: 8, borderWidth: 1, padding: 12, flexDirection: 'row', alignItems: 'center', gap: 10 },
// calendar // calendar
signDate: { width: 20, height: 2, borderRadius: 4, marginTop: 3 }, signDate: { width: 20, height: 2, borderRadius: 4, marginTop: 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: 12, flexDirection: 'row', alignContent: 'stretch', marginBottom: 10 }, itemEvent: { padding: 10, borderRadius: 8, flexDirection: 'row', alignContent: 'stretch', marginBottom: 10 },
dividerEvent: { width: 7, borderRadius: 5, marginRight: 10 }, dividerEvent: { width: 7, borderRadius: 5, marginRight: 10 },
// member // member
@@ -75,7 +75,7 @@ const ComponentStyles = StyleSheet.create({
memberInfoContent: { flex: 1, marginLeft: 10 }, memberInfoContent: { flex: 1, marginLeft: 10 },
// discussion // discussion
discussionCard: { borderRadius: 12, borderWidth: 1, padding: 14 }, discussionCard: { borderRadius: 8, borderWidth: 1, padding: 14 },
discussionIconCircle: { width: 40, height: 40, borderRadius: 100, 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: 100, 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 },
@@ -84,7 +84,7 @@ const ComponentStyles = StyleSheet.create({
discussionSeparator: { height: 8 }, discussionSeparator: { height: 8 },
discussionCommentText: { fontSize: 12, marginLeft: 5 }, discussionCommentText: { fontSize: 12, marginLeft: 5 },
discussionDateText: { fontSize: 11 }, discussionDateText: { fontSize: 11 },
discussionCommentCard: { borderRadius: 12, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' }, discussionCommentCard: { borderRadius: 8, 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: 12, borderRadius: 8,
padding: 20, padding: 20,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { width: 0, height: 4 }, shadowOffset: { width: 0, height: 4 },

2
constants/styles/modal.styles.ts
View File

@@ -65,7 +65,7 @@ const ModalStyles = StyleSheet.create({
}, },
modalConfirmContainer: { modalConfirmContainer: {
width: '80%', width: '80%',
borderRadius: 12, borderRadius: 8,
overflow: 'hidden', overflow: 'hidden',
elevation: 2, elevation: 2,
shadowColor: '#000', shadowColor: '#000',

2
constants/styles/notification.styles.ts
View File

@@ -8,7 +8,7 @@ const NotificationStyles = StyleSheet.create({
notifItemRow: { notifItemRow: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderRadius: 12, borderRadius: 8,
borderWidth: 1, borderWidth: 1,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 10,