From e3d2752a4c2e4061168f6c9cabf41f5bc23ffd14 Mon Sep 17 00:00:00 2001 From: amaliadwiy Date: Thu, 21 May 2026 14:04:25 +0800 Subject: [PATCH] style: kurangi borderRadius card dari 12 ke 8 agar tampilan lebih tegas --- constants/styles/announcement.styles.ts | 4 +-- constants/styles/approval.styles.ts | 2 +- constants/styles/card.styles.ts | 34 ++++++++++++------------- constants/styles/component.styles.ts | 12 ++++----- constants/styles/modal.styles.ts | 2 +- constants/styles/notification.styles.ts | 2 +- 6 files changed, 28 insertions(+), 28 deletions(-) diff --git a/constants/styles/announcement.styles.ts b/constants/styles/announcement.styles.ts index cf408aa..89f1d40 100644 --- a/constants/styles/announcement.styles.ts +++ b/constants/styles/announcement.styles.ts @@ -4,7 +4,7 @@ const AnnouncementStyles = StyleSheet.create({ // list (index.tsx) announcementListContainer: { padding: 15, paddingBottom: 0 }, announcementListInner: { marginTop: 10 }, - announcementListCard: { borderRadius: 12, borderWidth: 1, padding: 12 }, + announcementListCard: { borderRadius: 8, borderWidth: 1, padding: 12 }, announcementListCardHeader: { marginBottom: 6 }, announcementListTitleRow: { flex: 1, gap: 8, marginRight: 8, flexDirection: 'row', alignItems: 'center' }, announcementListIconBox: { width: 28, height: 28, borderRadius: 8, alignItems: 'center', justifyContent: 'center' }, @@ -18,7 +18,7 @@ const AnnouncementStyles = StyleSheet.create({ // detail ([id].tsx) announcementDetailContainer: { padding: 15, paddingBottom: 50, gap: 12 }, - announcementDetailCard: { borderRadius: 12 }, + announcementDetailCard: { borderRadius: 8 }, announcementDetailSkeletonGap: { gap: 8 }, announcementDetailSkeletonIconRow: { gap: 10, marginBottom: 2 }, announcementDetailTitleRow: { gap: 10, marginBottom: 10 }, diff --git a/constants/styles/approval.styles.ts b/constants/styles/approval.styles.ts index 48fb927..252b29a 100644 --- a/constants/styles/approval.styles.ts +++ b/constants/styles/approval.styles.ts @@ -2,7 +2,7 @@ import { StyleSheet } from "react-native"; const ApprovalStyles = StyleSheet.create({ 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 }, approvalIconMr: { marginRight: 6 }, approvalNoteBox: { borderRadius: 8, padding: 8, marginTop: 4 }, diff --git a/constants/styles/card.styles.ts b/constants/styles/card.styles.ts index 385dd91..36cab6f 100644 --- a/constants/styles/card.styles.ts +++ b/constants/styles/card.styles.ts @@ -4,7 +4,7 @@ const CardStyles = StyleSheet.create({ wrapPaper: { padding: 10, backgroundColor: 'white', - borderRadius: 12, + borderRadius: 8, shadowColor: '#171717', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.1, @@ -31,7 +31,7 @@ const CardStyles = StyleSheet.create({ shadowOpacity: 0.1, shadowRadius: 5, elevation: 2, - borderRadius: 12, + borderRadius: 8, marginBottom: 15, }, wrapGridCaraousel: { @@ -42,7 +42,7 @@ const CardStyles = StyleSheet.create({ shadowOpacity: 0.1, shadowRadius: 5, elevation: 2, - borderRadius: 12, + borderRadius: 8, marginLeft: 5, display: 'flex', }, @@ -57,27 +57,27 @@ const CardStyles = StyleSheet.create({ paddingVertical: 25, paddingHorizontal: 20, alignItems: 'center', - borderTopStartRadius: 12, - borderTopEndRadius: 12, + borderTopStartRadius: 8, + borderTopEndRadius: 8, }, contentPaperGrid: { height: 125, - borderBottomEndRadius: 12, - borderBottomStartRadius: 12, + borderBottomEndRadius: 8, + borderBottomStartRadius: 8, paddingHorizontal: 20, justifyContent: 'space-evenly', }, contentPaperGrid2: { height: 100, - borderBottomEndRadius: 12, - borderBottomStartRadius: 12, + borderBottomEndRadius: 8, + borderBottomStartRadius: 8, paddingHorizontal: 20, paddingVertical: 15, justifyContent: 'flex-start', }, wrapGridItem: { borderWidth: 1, - borderRadius: 12, + borderRadius: 8, padding: 10, flexDirection: 'row', alignItems: 'center', @@ -88,13 +88,13 @@ const CardStyles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', backgroundColor: 'transparent', - borderRadius: 12, + borderRadius: 8, borderWidth: 1, paddingHorizontal: 12, paddingVertical: 10, gap: 12, }, - sectionCard: { borderRadius: 12, padding: 16, borderWidth: 1 }, + sectionCard: { borderRadius: 8, padding: 16, borderWidth: 1 }, sectionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 }, sectionHeaderRow: { flexDirection: 'row', @@ -115,7 +115,7 @@ const CardStyles = StyleSheet.create({ contentBar: { height: 20, backgroundColor: '#3B82F6', borderRadius: 10 }, toastContainer: { backgroundColor: 'white', - borderRadius: 12, + borderRadius: 8, padding: 10, width: '90%', borderWidth: 1, @@ -135,7 +135,7 @@ const CardStyles = StyleSheet.create({ loadingBox: { paddingVertical: 15, paddingHorizontal: 40, - borderRadius: 12, + borderRadius: 8, alignItems: 'center', gap: 10, }, @@ -143,16 +143,16 @@ const CardStyles = StyleSheet.create({ flex: 1, justifyContent: "center", marginHorizontal: 15, - borderRadius: 12, + borderRadius: 8, backgroundColor: '#19345E', display: 'flex', width: '92%', resizeMode: 'stretch', overflow: 'hidden', }, - wrapItemDiscussion: { padding: 15, borderRadius: 12, borderBottomWidth: 1 }, + wrapItemDiscussion: { padding: 15, borderRadius: 8, 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 }, }); diff --git a/constants/styles/component.styles.ts b/constants/styles/component.styles.ts index 7c346af..c5a3424 100644 --- a/constants/styles/component.styles.ts +++ b/constants/styles/component.styles.ts @@ -32,7 +32,7 @@ const ComponentStyles = StyleSheet.create({ // badge & progress 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 }, positionBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 }, textProgressPercent: { fontSize: 22, fontWeight: 'bold', lineHeight: 28 }, @@ -41,7 +41,7 @@ const ComponentStyles = StyleSheet.create({ 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: 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 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 }, // 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 }, // member @@ -75,7 +75,7 @@ const ComponentStyles = StyleSheet.create({ memberInfoContent: { flex: 1, marginLeft: 10 }, // 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 }, 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 }, @@ -84,7 +84,7 @@ const ComponentStyles = StyleSheet.create({ discussionSeparator: { height: 8 }, discussionCommentText: { fontSize: 12, marginLeft: 5 }, 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' }, discussionHeaderPadding: { paddingTop: 12 }, discussionListPadding: { paddingTop: 8 }, @@ -98,7 +98,7 @@ const ComponentStyles = StyleSheet.create({ position: 'absolute', left: 24, right: 24, - borderRadius: 12, + borderRadius: 8, padding: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, diff --git a/constants/styles/modal.styles.ts b/constants/styles/modal.styles.ts index 221d326..28f3474 100644 --- a/constants/styles/modal.styles.ts +++ b/constants/styles/modal.styles.ts @@ -65,7 +65,7 @@ const ModalStyles = StyleSheet.create({ }, modalConfirmContainer: { width: '80%', - borderRadius: 12, + borderRadius: 8, overflow: 'hidden', elevation: 2, shadowColor: '#000', diff --git a/constants/styles/notification.styles.ts b/constants/styles/notification.styles.ts index 81b320a..7bf10c6 100644 --- a/constants/styles/notification.styles.ts +++ b/constants/styles/notification.styles.ts @@ -8,7 +8,7 @@ const NotificationStyles = StyleSheet.create({ notifItemRow: { flexDirection: 'row', alignItems: 'center', - borderRadius: 12, + borderRadius: 8, borderWidth: 1, paddingHorizontal: 12, paddingVertical: 10,