refactor: pecah lib/api.ts dan constants/Styles.ts per domain
- 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
This commit is contained in:
1277
constants/Styles.ts
1277
constants/Styles.ts
File diff suppressed because it is too large
Load Diff
17
constants/styles/border.styles.ts
Normal file
17
constants/styles/border.styles.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const BorderStyles = StyleSheet.create({
|
||||
round05: { borderRadius: 5 },
|
||||
round08: { borderRadius: 8 },
|
||||
round10: { borderRadius: 10 },
|
||||
round15: { borderRadius: 15 },
|
||||
round20: { borderRadius: 20 },
|
||||
round30: { borderRadius: 30 },
|
||||
borderRight: { borderRightWidth: 1, borderRightColor: '#d6d8f6' },
|
||||
borderLeft: { borderLeftWidth: 1, borderLeftColor: '#d6d8f6' },
|
||||
borderBottom: { borderBottomWidth: 1, borderBottomColor: '#d6d8f6' },
|
||||
borderTop: { borderTopWidth: 1, borderTopColor: '#d6d8f6' },
|
||||
borderAll: { borderWidth: 1, borderColor: '#d6d8f6' },
|
||||
});
|
||||
|
||||
export default BorderStyles;
|
||||
44
constants/styles/button.styles.ts
Normal file
44
constants/styles/button.styles.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const ButtonStyles = StyleSheet.create({
|
||||
btnIconHeader: { padding: 3 },
|
||||
btnFiturMenu: { padding: 13, borderRadius: 15, borderWidth: 1 },
|
||||
btnRound: {
|
||||
backgroundColor: '#1F3C88',
|
||||
borderWidth: 0,
|
||||
borderColor: '#1F3C88',
|
||||
alignItems: 'center',
|
||||
borderRadius: 30,
|
||||
marginTop: 15,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
btnTab: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 15,
|
||||
borderRadius: 20,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
btnLainnya: {
|
||||
alignSelf: 'flex-start',
|
||||
backgroundColor: '#1F3C88',
|
||||
paddingVertical: 5,
|
||||
marginVertical: 5,
|
||||
},
|
||||
btnDisabled: { backgroundColor: '#d6d8f6' },
|
||||
btnMenuRow: { width: '33%', alignItems: 'center' },
|
||||
btnMenuRowMany: { alignItems: 'center', marginHorizontal: 10 },
|
||||
wrapBtnTab: {
|
||||
justifyContent: 'space-between',
|
||||
flexDirection: 'row',
|
||||
marginBottom: 10,
|
||||
borderRadius: 20,
|
||||
padding: 5,
|
||||
borderWidth: 1,
|
||||
},
|
||||
labelStatus: { paddingHorizontal: 15, borderRadius: 10 },
|
||||
labelStatusSmall: { paddingHorizontal: 10, borderRadius: 10 },
|
||||
});
|
||||
|
||||
export default ButtonStyles;
|
||||
159
constants/styles/card.styles.ts
Normal file
159
constants/styles/card.styles.ts
Normal file
@@ -0,0 +1,159 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const CardStyles = StyleSheet.create({
|
||||
wrapPaper: {
|
||||
padding: 10,
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 5,
|
||||
shadowColor: '#171717',
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
elevation: 2,
|
||||
},
|
||||
shadowBox: {
|
||||
shadowColor: '#171717',
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
elevation: 2,
|
||||
},
|
||||
noShadow: {
|
||||
shadowColor: 'transparent',
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0,
|
||||
shadowRadius: 0,
|
||||
elevation: 0,
|
||||
},
|
||||
wrapGridContent: {
|
||||
shadowColor: '#171717',
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
elevation: 2,
|
||||
borderRadius: 5,
|
||||
marginBottom: 15,
|
||||
},
|
||||
wrapGridCaraousel: {
|
||||
width: '95%',
|
||||
height: 200,
|
||||
shadowColor: '#171717',
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
elevation: 2,
|
||||
borderRadius: 5,
|
||||
marginLeft: 5,
|
||||
display: 'flex',
|
||||
},
|
||||
wrapHomeCarousel: {
|
||||
shadowColor: '#171717',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 8,
|
||||
elevation: 5,
|
||||
},
|
||||
headerPaperGrid: {
|
||||
paddingVertical: 25,
|
||||
paddingHorizontal: 20,
|
||||
alignItems: 'center',
|
||||
borderTopStartRadius: 5,
|
||||
borderTopEndRadius: 5,
|
||||
},
|
||||
contentPaperGrid: {
|
||||
height: 125,
|
||||
borderBottomEndRadius: 5,
|
||||
borderBottomStartRadius: 5,
|
||||
paddingHorizontal: 20,
|
||||
justifyContent: 'space-evenly',
|
||||
},
|
||||
contentPaperGrid2: {
|
||||
height: 100,
|
||||
borderBottomEndRadius: 5,
|
||||
borderBottomStartRadius: 5,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 15,
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
wrapGridItem: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
width: '48.5%',
|
||||
marginBottom: 10,
|
||||
},
|
||||
listItemCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
gap: 12,
|
||||
},
|
||||
sectionCard: { borderRadius: 12, padding: 16, borderWidth: 1 },
|
||||
sectionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
|
||||
sectionHeaderRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
sectionIconBox: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
sectionActionRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
|
||||
sectionBadge: { borderRadius: 10, paddingHorizontal: 8, paddingVertical: 2 },
|
||||
wrapBar: { height: 20, backgroundColor: '#ccc', borderRadius: 10, margin: 0, width: '100%' },
|
||||
contentBar: { height: 20, backgroundColor: '#3B82F6', borderRadius: 10 },
|
||||
toastContainer: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
width: '90%',
|
||||
borderWidth: 1,
|
||||
borderColor: '#d6d8f6',
|
||||
},
|
||||
loadingCenter: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 999,
|
||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||
},
|
||||
loadingBox: {
|
||||
paddingVertical: 15,
|
||||
paddingHorizontal: 40,
|
||||
borderRadius: 5,
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
caraoselContent: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
marginHorizontal: 15,
|
||||
borderRadius: 15,
|
||||
backgroundColor: '#19345E',
|
||||
display: 'flex',
|
||||
width: '92%',
|
||||
resizeMode: 'stretch',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
wrapItemDiscussion: { padding: 15, borderRadius: 5, borderBottomWidth: 1 },
|
||||
wrapItemBorderBottom: { padding: 10, borderBottomWidth: 1 },
|
||||
wrapItemBorderAll: { padding: 10, borderWidth: 1, borderRadius: 5, marginBottom: 5 },
|
||||
wrapItemBorderNone: { padding: 10, marginBottom: 5 },
|
||||
});
|
||||
|
||||
export default CardStyles;
|
||||
135
constants/styles/component.styles.ts
Normal file
135
constants/styles/component.styles.ts
Normal file
@@ -0,0 +1,135 @@
|
||||
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;
|
||||
23
constants/styles/header.styles.ts
Normal file
23
constants/styles/header.styles.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const HeaderStyles = StyleSheet.create({
|
||||
headerContainer: { backgroundColor: '#19345E' },
|
||||
headerApp: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
headerTitle: { color: '#fff', fontSize: 18, fontWeight: '600' },
|
||||
headerSide: { width: 40, alignItems: 'center' },
|
||||
wrapHeadViewMember: {
|
||||
backgroundColor: '#19345E',
|
||||
paddingVertical: 30,
|
||||
paddingHorizontal: 15,
|
||||
alignItems: 'center',
|
||||
borderBottomLeftRadius: 25,
|
||||
borderBottomRightRadius: 25,
|
||||
},
|
||||
});
|
||||
|
||||
export default HeaderStyles;
|
||||
26
constants/styles/index.ts
Normal file
26
constants/styles/index.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
import SpacingStyles from './spacing.styles';
|
||||
import TypographyStyles from './typography.styles';
|
||||
import LayoutStyles from './layout.styles';
|
||||
import BorderStyles from './border.styles';
|
||||
import ButtonStyles from './button.styles';
|
||||
import InputStyles from './input.styles';
|
||||
import CardStyles from './card.styles';
|
||||
import ModalStyles from './modal.styles';
|
||||
import HeaderStyles from './header.styles';
|
||||
import ComponentStyles from './component.styles';
|
||||
|
||||
const Styles = StyleSheet.create({
|
||||
...SpacingStyles,
|
||||
...TypographyStyles,
|
||||
...LayoutStyles,
|
||||
...BorderStyles,
|
||||
...ButtonStyles,
|
||||
...InputStyles,
|
||||
...CardStyles,
|
||||
...ModalStyles,
|
||||
...HeaderStyles,
|
||||
...ComponentStyles,
|
||||
});
|
||||
|
||||
export default Styles;
|
||||
35
constants/styles/input.styles.ts
Normal file
35
constants/styles/input.styles.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const InputStyles = StyleSheet.create({
|
||||
inputRoundForm: {
|
||||
borderRadius: 5,
|
||||
borderColor: '#d6d8f6',
|
||||
borderWidth: 1,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 15,
|
||||
},
|
||||
inputRoundFormLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 0,
|
||||
},
|
||||
inputRoundFormRight: {
|
||||
flexDirection: 'row-reverse',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 0,
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
verificationCell: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
lineHeight: 45,
|
||||
fontSize: 24,
|
||||
borderWidth: 1,
|
||||
borderRadius: 15,
|
||||
borderColor: 'gray',
|
||||
textAlign: 'center',
|
||||
},
|
||||
verificationFocusCell: { borderColor: '#19345E' },
|
||||
});
|
||||
|
||||
export default InputStyles;
|
||||
52
constants/styles/layout.styles.ts
Normal file
52
constants/styles/layout.styles.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const LayoutStyles = StyleSheet.create({
|
||||
wrapLogin: { flex: 1, justifyContent: "flex-start", alignItems: "stretch", padding: 20 },
|
||||
flex1: { flex: 1 },
|
||||
flex2: { flex: 2 },
|
||||
flexColumn: { flexDirection: 'column' },
|
||||
rowOnly: { flexDirection: 'row' },
|
||||
rowSpaceBetween: { justifyContent: 'space-between', flexDirection: 'row' },
|
||||
rowSpaceBetweenReverse: { justifyContent: 'space-between', flexDirection: 'row-reverse' },
|
||||
rowItemsCenter: { flexDirection: 'row', alignItems: 'center' },
|
||||
justifySpaceBetween: { justifyContent: 'space-between' },
|
||||
justifyCenter: { justifyContent: 'center' },
|
||||
alignCenter: { alignItems: 'center' },
|
||||
itemsCenter: { alignItems: 'center' },
|
||||
alignStart: { alignItems: 'flex-start' },
|
||||
contentItemCenter: { justifyContent: 'center', alignItems: 'center' },
|
||||
h100: { height: '100%' },
|
||||
w30: { width: '30%' },
|
||||
w40: { width: '40%' },
|
||||
w45: { width: '45%' },
|
||||
w48: { width: '48%' },
|
||||
w50: { width: '50%' },
|
||||
w60: { width: '60%' },
|
||||
w70: { width: '70%' },
|
||||
w80: { width: '80%' },
|
||||
w90: { width: '90%' },
|
||||
w95: { width: '95%' },
|
||||
w100: { width: '100%' },
|
||||
posAbsolute: { position: 'absolute' },
|
||||
absolute0: { position: 'absolute', bottom: 0 },
|
||||
absoluteIcon: { top: 18, left: 20, position: 'absolute' },
|
||||
absoluteIconPicker: {
|
||||
backgroundColor: '#384288',
|
||||
padding: 5,
|
||||
borderRadius: 100,
|
||||
bottom: 5,
|
||||
right: 5,
|
||||
position: 'absolute',
|
||||
},
|
||||
hidden: { position: 'absolute', opacity: 0, zIndex: -1 },
|
||||
zIndex1: { zIndex: 1 },
|
||||
zIndexMinus1: { zIndex: -1 },
|
||||
resizeContain: { resizeMode: 'contain' },
|
||||
resizeCover: { resizeMode: 'cover' },
|
||||
resizeStretch: { resizeMode: 'stretch' },
|
||||
animatedView: { width: '100%', overflow: 'hidden' },
|
||||
wrapperAccordion: { width: '100%', position: 'absolute', display: 'flex', alignItems: 'center' },
|
||||
bottomMenuSelectDocument: { paddingVertical: 10, position: 'absolute', width: '100%', bottom: 0 },
|
||||
});
|
||||
|
||||
export default LayoutStyles;
|
||||
140
constants/styles/modal.styles.ts
Normal file
140
constants/styles/modal.styles.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const ModalStyles = StyleSheet.create({
|
||||
modalBgTransparant: { backgroundColor: 'rgba(0, 0, 0, 0.3)', flex: 1 },
|
||||
modalContent: {
|
||||
width: '100%',
|
||||
paddingBottom: 20,
|
||||
backgroundColor: 'white',
|
||||
borderTopRightRadius: 18,
|
||||
borderTopLeftRadius: 18,
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
},
|
||||
modalContentNew: {
|
||||
width: '100%',
|
||||
backgroundColor: 'white',
|
||||
borderTopRightRadius: 18,
|
||||
borderTopLeftRadius: 18,
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
modalFloatContent: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 18,
|
||||
paddingTop: 5,
|
||||
paddingBottom: 10,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
titleContainer: {
|
||||
backgroundColor: 'white',
|
||||
borderTopRightRadius: 10,
|
||||
borderTopLeftRadius: 10,
|
||||
paddingHorizontal: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 10,
|
||||
},
|
||||
titleContainerNew: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 10,
|
||||
},
|
||||
titleContainerModalFloat: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 10,
|
||||
},
|
||||
contentContainer: { height: '90%' },
|
||||
itemSelectModal: {
|
||||
padding: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
borderBottomWidth: 1,
|
||||
alignItems: 'center',
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.6)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
modalConfirmContainer: {
|
||||
width: '80%',
|
||||
borderRadius: 14,
|
||||
overflow: 'hidden',
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 3.84,
|
||||
},
|
||||
modalConfirmContent: { padding: 20, alignItems: 'center' },
|
||||
modalConfirmTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 8, textAlign: 'center' },
|
||||
modalConfirmMessage: { fontSize: 14, textAlign: 'center', lineHeight: 20 },
|
||||
modalConfirmDivider: { height: 1, width: '100%' },
|
||||
modalConfirmFooter: { flexDirection: 'row', height: 50 },
|
||||
modalConfirmButton: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
modalConfirmButtonText: { fontSize: 16 },
|
||||
modalConfirmVerticalDivider: { width: 1, height: '100%' },
|
||||
modalUpdateContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 30,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
modalUpdateDecorativeCircle1: {
|
||||
position: 'absolute',
|
||||
width: 300,
|
||||
height: 300,
|
||||
borderRadius: 150,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
top: -50,
|
||||
right: -50,
|
||||
},
|
||||
modalUpdateDecorativeCircle2: {
|
||||
position: 'absolute',
|
||||
width: 200,
|
||||
height: 200,
|
||||
borderRadius: 100,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.03)',
|
||||
bottom: -30,
|
||||
left: -30,
|
||||
},
|
||||
modalUpdateContent: { width: '100%', alignItems: 'flex-start', zIndex: 1 },
|
||||
modalUpdateLogo: { width: 200, height: 100, marginBottom: 40, alignSelf: 'center' },
|
||||
modalUpdateTextContainer: { marginBottom: 40 },
|
||||
modalUpdateTitle: { fontSize: 32, fontWeight: 'bold', color: 'white', marginBottom: 20, lineHeight: 38 },
|
||||
modalUpdateDescription: { fontSize: 16, color: 'white', lineHeight: 24 },
|
||||
modalUpdateButtonContainer: { width: '100%', alignItems: 'center' },
|
||||
modalUpdatePrimaryButton: {
|
||||
width: '100%',
|
||||
paddingVertical: 15,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 15,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
modalUpdatePrimaryButtonText: { fontSize: 16, fontWeight: 'bold' },
|
||||
modalUpdateSecondaryButton: { paddingVertical: 10 },
|
||||
modalUpdateSecondaryButtonText: { fontSize: 16, color: 'white', fontWeight: '500' },
|
||||
headerModalViewImg: {
|
||||
paddingTop: 50,
|
||||
paddingHorizontal: 16,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default ModalStyles;
|
||||
60
constants/styles/spacing.styles.ts
Normal file
60
constants/styles/spacing.styles.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const SpacingStyles = StyleSheet.create({
|
||||
mb05: { marginBottom: 5 },
|
||||
mb08: { marginBottom: 8 },
|
||||
mb10: { marginBottom: 10 },
|
||||
mb12: { marginBottom: 12 },
|
||||
mb13: { marginBottom: 13 },
|
||||
mb15: { marginBottom: 15 },
|
||||
mb20: { marginBottom: 20 },
|
||||
mb30: { marginBottom: 30 },
|
||||
mb50: { marginBottom: 50 },
|
||||
mb100: { marginBottom: 100 },
|
||||
mt02: { marginTop: 2 },
|
||||
mt05: { marginTop: 5 },
|
||||
mt10: { marginTop: 10 },
|
||||
mt15: { marginTop: 15 },
|
||||
mt30: { marginTop: 30 },
|
||||
mr05: { marginRight: 5 },
|
||||
mr10: { marginRight: 10 },
|
||||
ml05: { marginLeft: 5 },
|
||||
ml10: { marginLeft: 10 },
|
||||
ml15: { marginLeft: 15 },
|
||||
ml20: { marginLeft: 20 },
|
||||
ml25: { marginLeft: 25 },
|
||||
mv05: { marginVertical: 5 },
|
||||
mv10: { marginVertical: 10 },
|
||||
mv15: { marginVertical: 15 },
|
||||
mv50: { marginVertical: 50 },
|
||||
mh03: { marginHorizontal: 3 },
|
||||
mh05: { marginHorizontal: 5 },
|
||||
mh10: { marginHorizontal: 10 },
|
||||
mh15: { marginHorizontal: 15 },
|
||||
p0: { padding: 0 },
|
||||
p05: { padding: 5 },
|
||||
p10: { padding: 10 },
|
||||
p15: { padding: 15 },
|
||||
p20: { padding: 20 },
|
||||
pb05: { paddingBottom: 5 },
|
||||
pb07: { paddingBottom: 7 },
|
||||
pb10: { paddingBottom: 10 },
|
||||
pb13: { paddingBottom: 13 },
|
||||
pb15: { paddingBottom: 15 },
|
||||
pb20: { paddingBottom: 20 },
|
||||
pb50: { paddingBottom: 50 },
|
||||
pb100: { paddingBottom: 100 },
|
||||
ph05: { paddingHorizontal: 5 },
|
||||
ph10: { paddingHorizontal: 10 },
|
||||
ph15: { paddingHorizontal: 15 },
|
||||
ph16: { paddingHorizontal: 16 },
|
||||
ph20: { paddingHorizontal: 20 },
|
||||
pv03: { paddingVertical: 3 },
|
||||
pv05: { paddingVertical: 5 },
|
||||
pv10: { paddingVertical: 10 },
|
||||
pv14: { paddingVertical: 14 },
|
||||
pv15: { paddingVertical: 15 },
|
||||
pv20: { paddingVertical: 20 },
|
||||
});
|
||||
|
||||
export default SpacingStyles;
|
||||
28
constants/styles/typography.styles.ts
Normal file
28
constants/styles/typography.styles.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const TypographyStyles = StyleSheet.create({
|
||||
textTitle: { fontSize: 32, fontWeight: 'bold', lineHeight: 32 },
|
||||
textSubtitle: { fontSize: 20, fontWeight: 'bold' },
|
||||
textSubtitle2: { fontSize: 20 },
|
||||
textHeaderHome: { fontSize: 18, fontWeight: 'bold', flex: 1, color: 'white' },
|
||||
textDefault: { fontSize: 15, lineHeight: 24 },
|
||||
textDefaultSemiBold: { fontSize: 15, lineHeight: 24, fontWeight: '600' },
|
||||
textMediumNormal: { fontSize: 13, lineHeight: 24 },
|
||||
textMediumSemiBold: { fontSize: 13, lineHeight: 24, fontWeight: '600' },
|
||||
textSmallSemiBold: { fontSize: 10, fontWeight: '600' },
|
||||
textInformation: { fontSize: 12, fontWeight: 'light' },
|
||||
textLink: { fontSize: 14, color: '#0a7ea4' },
|
||||
textCenter: { textAlign: 'center' },
|
||||
textWhite: { color: 'white' },
|
||||
font16: { fontSize: 16 },
|
||||
font26: { fontSize: 26 },
|
||||
cError: { color: '#DB1514' },
|
||||
cGray: { color: 'gray' },
|
||||
cWhite: { color: 'white' },
|
||||
cWhiteDimmed: { color: 'rgba(255,255,255,0.7)' },
|
||||
cBlack: { color: 'black' },
|
||||
cDefault: { color: '#19345E' },
|
||||
cFolder: { color: '#f9cc40' },
|
||||
});
|
||||
|
||||
export default TypographyStyles;
|
||||
Reference in New Issue
Block a user