diff --git a/src/components/Dropdown/styles.ts b/src/components/Dropdown/styles.ts index 1f528e9..15576f7 100644 --- a/src/components/Dropdown/styles.ts +++ b/src/components/Dropdown/styles.ts @@ -1,16 +1,20 @@ import { StyleSheet } from 'react-native'; import colors from '@/styles/colors'; +import typography from '@/styles/typography'; export default StyleSheet.create({ gray4: { color: colors.gray4, }, + black3: { color: colors.gray3, }, + textContainer: { paddingHorizontal: 20, }, + selectedBar: { borderLeftWidth: 8, borderColor: colors.primary, @@ -18,20 +22,23 @@ export default StyleSheet.create({ paddingHorizontal: 20 - 8, margin: 0, }, + text: { - fontFamily: 'DM Sans', + ...typography.normalRegular, color: colors.gray3, - fontSize: 16, textTransform: 'capitalize', textAlign: 'left', }, + outer: { position: 'relative', zIndex: 1, }, + label: { marginBottom: 8, }, + dropdown: { height: 47, borderWidth: 1, @@ -42,19 +49,23 @@ export default StyleSheet.create({ alignItems: 'center', borderColor: colors.gray5, }, + dropdownContainer: { borderRadius: 5, borderWidth: 1, borderColor: colors.gray5, position: 'relative', }, + itemContainer: { paddingHorizontal: 20, paddingVertical: 14, }, + icon: { marginRight: 5, }, + iconStyle: { width: 20, height: 20, diff --git a/src/components/QRCodeScanner/styles.ts b/src/components/QRCodeScanner/styles.ts index 9351d2c..621c6d3 100644 --- a/src/components/QRCodeScanner/styles.ts +++ b/src/components/QRCodeScanner/styles.ts @@ -90,6 +90,7 @@ export default StyleSheet.create({ scanButtonDisabled: { backgroundColor: colors.gray4, }, + scanButtonEnabled: { backgroundColor: colors.tertiary, }, diff --git a/src/components/SpeciesDisplay/styles.ts b/src/components/SpeciesDisplay/styles.ts index aa76676..2c40997 100644 --- a/src/components/SpeciesDisplay/styles.ts +++ b/src/components/SpeciesDisplay/styles.ts @@ -1,5 +1,6 @@ import { StyleSheet } from 'react-native'; import colors from '@/styles/colors'; +import typography from '@/styles/typography'; export default StyleSheet.create({ main: { @@ -8,26 +9,29 @@ export default StyleSheet.create({ gap: 25, paddingBottom: 25, }, + text: { - fontSize: 14, - fontFamily: 'DM Sans', + ...typography.smallRegular, color: colors.gray3, }, + funFact: { + ...typography.mediumBold, color: colors.primary, - fontSize: 18, - fontFamily: 'DM Sans Bold', }, + separator: { borderBottomWidth: 1, borderBottomColor: colors.gray5, }, + header: { - fontSize: 18, - fontFamily: 'DM Sans', + ...typography.mediumRegular, color: colors.gray1, }, + textInput: { + ...typography.smallRegular, flex: 1, color: colors.gray3, borderWidth: 1, @@ -35,34 +39,35 @@ export default StyleSheet.create({ borderColor: colors.gray5, paddingVertical: 11, paddingHorizontal: 20, - fontSize: 14, - fontFamily: 'DM Sans', }, + locations: { flexDirection: 'column', }, + locationEntry: { padding: 10, flexDirection: 'row', alignItems: 'center', gap: 9, }, + properties: { flexWrap: 'wrap', alignItems: 'center', flexDirection: 'row', }, + property: { - fontFamily: 'DM Sans', marginTop: 15, width: '50%', flexDirection: 'row', gap: 10, alignItems: 'center', }, + propertyText: { - fontSize: 16, - fontFamily: 'DM Sans', + ...typography.normalRegular, color: colors.gray3, }, diff --git a/src/components/ToggleSwitch/styles.ts b/src/components/ToggleSwitch/styles.ts index d3e7500..c2acee3 100644 --- a/src/components/ToggleSwitch/styles.ts +++ b/src/components/ToggleSwitch/styles.ts @@ -1,5 +1,6 @@ import { StyleSheet } from 'react-native'; import colors from '@/styles/colors'; +import typography from '@/styles/typography'; export default StyleSheet.create({ outer: { @@ -9,6 +10,7 @@ export default StyleSheet.create({ alignSelf: 'center', padding: 2, }, + main: { flexDirection: 'row', borderRadius: 30, @@ -16,17 +18,18 @@ export default StyleSheet.create({ alignSelf: 'center', overflow: 'hidden', }, + switch: { - fontSize: 14, + ...typography.smallRegular, margin: 2, padding: 8, borderRadius: 30, zIndex: 2, color: colors.primary, - fontFamily: 'DM Sans', }, + selected: { + ...typography.smallBold, color: colors.white, - fontFamily: 'DM Sans Bold', }, }); diff --git a/src/components/TreeDisplay/styles.ts b/src/components/TreeDisplay/styles.ts index aa76676..5275cff 100644 --- a/src/components/TreeDisplay/styles.ts +++ b/src/components/TreeDisplay/styles.ts @@ -1,5 +1,6 @@ import { StyleSheet } from 'react-native'; import colors from '@/styles/colors'; +import typography from '@/styles/typography'; export default StyleSheet.create({ main: { @@ -9,25 +10,23 @@ export default StyleSheet.create({ paddingBottom: 25, }, text: { - fontSize: 14, - fontFamily: 'DM Sans', + ...typography.smallRegular, color: colors.gray3, }, funFact: { + ...typography.mediumBold, color: colors.primary, - fontSize: 18, - fontFamily: 'DM Sans Bold', }, separator: { borderBottomWidth: 1, borderBottomColor: colors.gray5, }, header: { - fontSize: 18, - fontFamily: 'DM Sans', + ...typography.mediumRegular, color: colors.gray1, }, textInput: { + ...typography.smallRegular, flex: 1, color: colors.gray3, borderWidth: 1, @@ -35,8 +34,6 @@ export default StyleSheet.create({ borderColor: colors.gray5, paddingVertical: 11, paddingHorizontal: 20, - fontSize: 14, - fontFamily: 'DM Sans', }, locations: { flexDirection: 'column', @@ -53,7 +50,6 @@ export default StyleSheet.create({ flexDirection: 'row', }, property: { - fontFamily: 'DM Sans', marginTop: 15, width: '50%', flexDirection: 'row', @@ -61,8 +57,7 @@ export default StyleSheet.create({ alignItems: 'center', }, propertyText: { - fontSize: 16, - fontFamily: 'DM Sans', + ...typography.normalRegular, color: colors.gray3, }, diff --git a/src/components/TreeEdit/styles.ts b/src/components/TreeEdit/styles.ts index 431e017..a69a04c 100644 --- a/src/components/TreeEdit/styles.ts +++ b/src/components/TreeEdit/styles.ts @@ -1,5 +1,6 @@ import { StyleSheet } from 'react-native'; import colors from '@/styles/colors'; +import typography from '@/styles/typography'; export default StyleSheet.create({ headerFlex: { @@ -10,21 +11,23 @@ export default StyleSheet.create({ marginBottom: 21 + 16, gap: 5, }, + idPill: { flex: 0, alignSelf: 'center', backgroundColor: colors.primary, borderRadius: 30, }, + idText: { + ...typography.normalRegular, flex: 0, textAlign: 'left', color: colors.white, - fontSize: 16, - fontFamily: 'DM Sans', padding: 10, paddingVertical: 6, }, + idPillFlex: { flex: 0, flexDirection: 'row', @@ -33,14 +36,13 @@ export default StyleSheet.create({ }, header: { - fontSize: 24, - fontFamily: 'DM Sans Bold', + ...typography.heading5, color: colors.gray1, paddingBottom: 10, }, + scientificName: { - fontSize: 18, - fontFamily: 'DM Sans', + ...typography.mediumRegular, color: colors.gray1, }, @@ -63,12 +65,13 @@ export default StyleSheet.create({ propertiesHeader: { marginVertical: 30, }, + label: { - fontFamily: 'DM Sans', - fontSize: 16, + ...typography.normalRegular, color: colors.gray2, marginBottom: 10, }, + propertiesFlex: { flex: 1, gap: 26, @@ -81,6 +84,7 @@ export default StyleSheet.create({ justifyContent: 'space-between', width: '100%', }, + editButton: { alignSelf: 'center', backgroundColor: colors.primary, @@ -90,9 +94,9 @@ export default StyleSheet.create({ alignItems: 'center', borderRadius: 10, }, + doneEditingText: { - fontSize: 18, - fontFamily: 'DM Sans Bold', + ...typography.mediumBold, color: colors.white, }, @@ -103,24 +107,26 @@ export default StyleSheet.create({ flexGrow: 1, gap: 15, }, + iconTextView: { + ...typography.normalRegular, flex: 1, flexDirection: 'row', alignItems: 'center', - fontSize: 16, - fontFamily: 'DM Sans', gap: 9, }, + displayText: { - fontSize: 16, - fontFamily: 'DM Sans', + ...typography.normalRegular, color: colors.gray3, }, + greenText: { color: colors.primary, }, textInput: { + ...typography.normalRegular, flex: 1, color: colors.gray3, borderWidth: 1, @@ -128,14 +134,14 @@ export default StyleSheet.create({ borderColor: colors.gray5, paddingVertical: 11, paddingHorizontal: 20, - fontSize: 16, - fontFamily: 'DM Sans', }, + textArea: { minHeight: 170, paddingVertical: 20, color: colors.gray3, }, + ownershipTextArea: { marginTop: 14, minHeight: 90, diff --git a/src/screens/SpeciesInfo/styles.ts b/src/screens/SpeciesInfo/styles.ts index 33012a9..61aef2e 100644 --- a/src/screens/SpeciesInfo/styles.ts +++ b/src/screens/SpeciesInfo/styles.ts @@ -1,11 +1,13 @@ import { StyleSheet } from 'react-native'; import colors from '@/styles/colors'; +import typography from '@/styles/typography'; export default StyleSheet.create({ container: { paddingBottom: 40, backgroundColor: colors.white, }, + topBar: { flex: 1, flexDirection: 'row', @@ -13,10 +15,12 @@ export default StyleSheet.create({ marginHorizontal: 27, justifyContent: 'space-between', }, + imageBg: { flex: 1, height: 292, }, + switch: { paddingBottom: 32 }, headerFlex: { @@ -27,6 +31,7 @@ export default StyleSheet.create({ marginBottom: 21 + 16, gap: 5, }, + imageEmbed: { marginTop: 'auto', marginHorizontal: 30, @@ -34,21 +39,23 @@ export default StyleSheet.create({ alignSelf: 'flex-start', }, + countPill: { flex: 0, alignSelf: 'center', backgroundColor: colors.primary, borderRadius: 30, }, + idText: { + ...typography.normalBold, flex: 0, textAlign: 'left', color: colors.white, - fontSize: 16, - fontFamily: 'DM Sans Bold', padding: 10, paddingVertical: 6, }, + idPillFlex: { flex: 0, flexDirection: 'row', @@ -57,17 +64,17 @@ export default StyleSheet.create({ }, header: { - fontSize: 24, - fontFamily: 'DM Sans Bold', + ...typography.heading5, color: colors.gray1, paddingBottom: 10, }, + additionalNotes: { paddingBottom: 4, }, + scientificName: { - fontSize: 18, - fontFamily: 'DM Sans', + ...typography.mediumRegular, color: colors.gray1, }, @@ -91,12 +98,13 @@ export default StyleSheet.create({ propertiesHeader: { marginVertical: 30, }, + label: { - fontSize: 16, - fontFamily: 'DM Sans', + ...typography.normalRegular, color: colors.gray2, marginBottom: 7, }, + propertiesFlex: { flex: 1, gap: 26, @@ -108,6 +116,7 @@ export default StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', }, + editButton: { alignSelf: 'center', backgroundColor: colors.primary, @@ -115,9 +124,9 @@ export default StyleSheet.create({ paddingHorizontal: 10, borderRadius: 10, }, + doneEditingText: { - fontSize: 18, - fontFamily: 'DM Sans', + ...typography.mediumRegular, color: colors.white, }, @@ -128,7 +137,9 @@ export default StyleSheet.create({ flexGrow: 1, gap: 15, }, + textInput: { + ...typography.normalRegular, flex: 1, color: colors.gray3, borderWidth: 1, @@ -136,14 +147,14 @@ export default StyleSheet.create({ borderColor: colors.gray5, paddingVertical: 11, paddingHorizontal: 20, - fontSize: 16, - fontFamily: 'DM Sans', }, + textArea: { minHeight: 170, paddingVertical: 20, color: colors.gray3, }, + ownershipTextArea: { marginTop: 14, minHeight: 90, diff --git a/src/screens/TreeInfo/TreeInfo.tsx b/src/screens/TreeInfo/TreeInfo.tsx index 0f77158..47c8fa7 100644 --- a/src/screens/TreeInfo/TreeInfo.tsx +++ b/src/screens/TreeInfo/TreeInfo.tsx @@ -25,7 +25,7 @@ type TreeInfoScreenProps = NativeStackScreenProps< export default function TreeInfoPage({ route }: TreeInfoScreenProps) { const treeId = route.params?.treeId ?? '9ce20e23-a66f-4df8-8696-421202f3d616'; - const [isSpecies, setIsSpecies] = useState(false); + const [isSpecies, setIsSpecies] = useState(true); const [treeData, setTreeData] = useState({ tree_id: treeId, }); diff --git a/src/screens/TreeInfo/styles.ts b/src/screens/TreeInfo/styles.ts index 8ba4aaf..d49be50 100644 --- a/src/screens/TreeInfo/styles.ts +++ b/src/screens/TreeInfo/styles.ts @@ -1,15 +1,18 @@ import { StyleSheet } from 'react-native'; import colors from '@/styles/colors'; +import typography from '@/styles/typography'; export default StyleSheet.create({ container: { paddingBottom: 40, backgroundColor: colors.white, }, + imageBg: { flex: 1, height: 292, }, + switch: { paddingBottom: 32 }, headerFlex: { @@ -20,21 +23,23 @@ export default StyleSheet.create({ marginBottom: 21 + 16, gap: 5, }, + idPill: { flex: 0, alignSelf: 'center', backgroundColor: colors.primary, borderRadius: 30, }, + idText: { + ...typography.normalRegular, flex: 0, textAlign: 'left', color: colors.white, - fontSize: 16, - fontFamily: 'DM Sans', padding: 10, paddingVertical: 6, }, + idPillFlex: { flex: 0, flexDirection: 'row', @@ -43,17 +48,17 @@ export default StyleSheet.create({ }, header: { - fontSize: 24, - fontFamily: 'DM Sans Bold', + ...typography.heading5, color: colors.gray1, paddingBottom: 10, }, + additionalNotes: { paddingBottom: 4, }, + scientificName: { - fontSize: 18, - fontFamily: 'DM Sans', + ...typography.mediumRegular, color: colors.gray1, }, @@ -77,12 +82,13 @@ export default StyleSheet.create({ propertiesHeader: { marginVertical: 30, }, + label: { - fontSize: 16, - fontFamily: 'DM Sans', + ...typography.normalRegular, color: colors.gray2, marginBottom: 7, }, + propertiesFlex: { flex: 1, gap: 26, @@ -94,6 +100,7 @@ export default StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', }, + editButton: { alignSelf: 'center', backgroundColor: colors.primary, @@ -101,9 +108,9 @@ export default StyleSheet.create({ paddingHorizontal: 10, borderRadius: 10, }, + doneEditingText: { - fontSize: 18, - fontFamily: 'DM Sans', + ...typography.mediumRegular, color: colors.white, }, @@ -114,7 +121,9 @@ export default StyleSheet.create({ flexGrow: 1, gap: 15, }, + textInput: { + ...typography.normalRegular, flex: 1, color: colors.gray3, borderWidth: 1, @@ -122,14 +131,14 @@ export default StyleSheet.create({ borderColor: colors.gray5, paddingVertical: 11, paddingHorizontal: 20, - fontSize: 16, - fontFamily: 'DM Sans', }, + textArea: { minHeight: 170, paddingVertical: 20, color: colors.gray3, }, + ownershipTextArea: { marginTop: 14, minHeight: 90,