diff --git a/components/Card/PendingContactsCard.js b/components/Card/PendingContactsCard.js index 7b2d7b38..887f55a0 100644 --- a/components/Card/PendingContactsCard.js +++ b/components/Card/PendingContactsCard.js @@ -6,6 +6,7 @@ import { useNavigation } from "@react-navigation/native"; import Card from "components/Card/Card"; import ExpandableCard from "components/Card/ExpandableCard"; import Placeholder from "components/Placeholder"; +import { DeclineIcon, AcceptIcon } from "components/Icon"; import useAPI from "hooks/use-api"; import useI18N from "hooks/use-i18n"; @@ -68,8 +69,7 @@ const PendingContactsCard = ({ filters, refreshing, onRefresh }) => { handleAccept({ contact, accept: true })} - //TODO adjust color to be dynamic - style={[styles.buttonContainer, { backgroundColor: "green" }]} + style={[styles.buttonContainer, styles.buttonAccept]} > {i18n.t("global.accept", { locale })} @@ -77,7 +77,7 @@ const PendingContactsCard = ({ filters, refreshing, onRefresh }) => { handleAccept({ contact, accept: false })} - style={[styles.buttonContainer, { backgroundColor: "red" }]} + style={[styles.buttonContainer, styles.buttonDecline]} > {i18n.t("global.decline", { locale })} diff --git a/components/Card/PendingContactsCard.styles.js b/components/Card/PendingContactsCard.styles.js index 55761447..9bbf221a 100644 --- a/components/Card/PendingContactsCard.styles.js +++ b/components/Card/PendingContactsCard.styles.js @@ -30,4 +30,10 @@ export const localStyles = ({ theme, isRTL, isIOS }) => ({ color: theme.offLight, fontWeight: "bold", }, + buttonAccept: { + backgroundColor: theme.success, + }, + buttonDecline: { + backgroundColor: theme.error, + } }); \ No newline at end of file diff --git a/components/Field/Field.js b/components/Field/Field.js index bc53c314..46e26152 100644 --- a/components/Field/Field.js +++ b/components/Field/Field.js @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { Text, View } from "react-native"; import { AddIcon, - ClearIcon, + CancelIcon, EditIcon, SaveIcon } from "components/Icon"; @@ -150,7 +150,7 @@ const Field = ({ grouped=false, editing=false, field, post, onChange, mutate }) const hasChanged = _value !== value; // && !(value === null && (_value === null || _value === '')); return( - + { hasChanged && ( _onSave(_value)} /> )} diff --git a/components/Field/FieldIcon.js b/components/Field/FieldIcon.js index 9f4c4c72..b37a66b2 100644 --- a/components/Field/FieldIcon.js +++ b/components/Field/FieldIcon.js @@ -26,6 +26,9 @@ const FieldIcon = ({ field, hide }) => { if (name.includes("list")) { iconType = "MaterialCommunityIcons"; iconName = "notification-clear-all"; + } else if (name.includes("description")) { + iconType = "MaterialCommunityIcons"; + iconName = "text"; } else { iconType = "MaterialCommunityIcons"; iconName = "text-long"; @@ -70,7 +73,7 @@ const FieldIcon = ({ field, hide }) => { iconName = "briefcase-account-outline"; } else if (name.includes("parent")) { iconType = "MaterialCommunityIcons"; - iconName = "triangle"; + iconName = "gamepad-circle-up"; } else if (name.includes("peer")) { iconType = "MaterialCommunityIcons"; iconName = "ray-start-end"; @@ -80,9 +83,13 @@ const FieldIcon = ({ field, hide }) => { } else if (name.includes("relation")) { iconType = "MaterialCommunityIcons"; iconName = "account-switch"; - } else if (name.includes("people_groups")) { + } else if ((name.includes("people_groups") || name.includes("peoplegroups")) ) { iconType = "MaterialCommunityIcons"; iconName = "earth"; + } else if (name.includes("reporter")) { + iconType = "MaterialCommunityIcons"; + iconName = "teach"; + iconStyle = { transform: [{ scaleX: -1 }] } } else if (name.includes("coaching")) { iconType = "MaterialCommunityIcons"; iconName = "teach"; @@ -99,12 +106,15 @@ const FieldIcon = ({ field, hide }) => { } else if (name.includes("baptized")) { iconType = "MaterialCommunityIcons"; iconName = "water-outline"; + } else if (name.includes("trainings")) { + iconType = "MaterialCommunityIcons"; + iconName = "school"; } else if (name.includes("group_leader")) { iconType = "MaterialCommunityIcons"; iconName = "foot-print"; } else if (name.includes("group")) { iconType = "MaterialCommunityIcons"; - iconName = "account-group"; + iconName = "gamepad-circle"; } else if (name.includes("train")) { iconType = "MaterialCommunityIcons"; iconName = "teach"; @@ -113,10 +123,25 @@ const FieldIcon = ({ field, hide }) => { iconName = "format-list-bulleted"; } else if (name.includes("leaders")) { iconType = "MaterialCommunityIcons"; - iconName = "shoe-print"; - } else { + iconName = "foot-print"; + } else if (name.includes("contacts")) { + iconType = "MaterialCommunityIcons"; + iconName = "human"; + } else if (name.includes("disciples")) { + iconType = "MaterialCommunityIcons"; + iconName = "foot-print"; + iconStyle = { transform: [{ scaleX: -1 }] } + } else if (name.includes("meetings")) { + iconType = "MaterialCommunityIcons"; + iconName = "calendar-text"; + iconStyle = { transform: [{ scaleX: -1 }] } + } else if (name.includes("streams")) { iconType = "MaterialCommunityIcons"; iconName = "axis-arrow"; + iconStyle = { transform: [{ scaleX: -1 }] } + } else { + iconType = "MaterialCommunityIcons"; + iconName = "axis"; } break; case FieldTypes.MULTI_SELECT: @@ -228,6 +253,9 @@ const FieldIcon = ({ field, hide }) => { } else if (name.includes("name")) { iconType = "MaterialCommunityIcons"; iconName = "sign-text"; + } else if (name.includes("notes")) { + iconType = "MaterialCommunityIcons"; + iconName = "note-text"; } else if (name.includes("four_fields_unbelievers")) { iconType = "MaterialCommunityIcons"; iconName = "crosshairs-off"; @@ -245,7 +273,10 @@ const FieldIcon = ({ field, hide }) => { iconName = "shield-cross-outline"; } else if (name.includes("four_fields")) { iconType = "MaterialCommunityIcons"; - iconName = "crosshairs"; + iconName = "crosshairs"; + } else if (name.includes("video_link")) { + iconType = "MaterialCommunityIcons"; + iconName = "satellite-uplink"; } else { iconType = "MaterialCommunityIcons"; iconName = "text"; diff --git a/components/Field/Text/TextField.js b/components/Field/Text/TextField.js index b4dfbe4e..c0955227 100644 --- a/components/Field/Text/TextField.js +++ b/components/Field/Text/TextField.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import { Text, TextInput, View } from "react-native"; -import { ClearIcon, SaveIcon } from "components/Icon"; +import { CancelIcon, SaveIcon } from "components/Icon"; import useDebounce from "hooks/use-debounce"; import useStyles from "hooks/use-styles"; @@ -54,7 +54,7 @@ const TextField = ({ grouped=false, editing, value, onChange }) => { /> { showSave && ( - _onClear()} /> + _onClear()} /> _onChange()} /> )} diff --git a/components/Icon.js b/components/Icon.js index 1dd51721..5a8b0e5b 100644 --- a/components/Icon.js +++ b/components/Icon.js @@ -70,6 +70,9 @@ export const ArrowForwardIcon = ({ onPress, style }) => ( export const BellIcon = ({ onPress, style }) => ( ); +export const CancelIcon = ({ onPress, style }) => ( + +); export const CaretIcon = ({ onPress, style }) => ( ); @@ -95,6 +98,9 @@ export const ClearFiltersIcon = ({ onPress, style }) => ( style={style} /> ); +export const CloseIcon = ({ onPress, style }) => ( + +); export const CircleIcon = ({ onPress, style }) => ( ); @@ -124,6 +130,12 @@ export const DarkModeIcon = ({ onPress, style }) => ( export const DeleteIcon = ({ onPress, style }) => ( ); +export const AcceptIcon = ({ onPress, style }) => ( + +); +export const DeclineIcon = ({ onPress, style }) => ( + +); export const EditIcon = ({ onPress, style }) => ( ); @@ -170,10 +182,6 @@ export const MapIcon = ({ onPress, style }) => ( export const OnePasswordIcon = ({ onPress, style }) => ( ); -//TODO icon for more post Types -export const PostIcon = ({ onPress, style }) => ( - -); export const RemoveIcon = ({ onPress, style }) => ( ); @@ -265,9 +273,26 @@ export const MoreIcon = ({ onPress, style }) => ( style={style} /> ); +//TODO icon for more post Types +export const PostIcon = ({ onPress, style }) => ( + +); +export const TrainingsIcon = ({ onPress, style }) => ( + +); +export const MeetingsIcon = ({ onPress, style }) => ( + +); +export const CampaignsIcon = ({ onPress, style }) => ( + +); +export const StreamsIcon = ({ onPress, style }) => ( + +); +// Login screen export const UserIcon = ({ onPress, style }) => ( diff --git a/components/Sheet/SheetFooter.js b/components/Sheet/SheetFooter.js index a026fb45..55a550a0 100644 --- a/components/Sheet/SheetFooter.js +++ b/components/Sheet/SheetFooter.js @@ -2,7 +2,7 @@ import React from "react"; import { Pressable, View, Text } from "react-native"; import { useBottomSheet } from "@gorhom/bottom-sheet"; -import { CheckIcon, ClearIcon } from "components/Icon"; +import { AcceptIcon, DeclineIcon } from "components/Icon"; import useI18N from "hooks/use-i18n"; import useStyles from "hooks/use-styles"; @@ -37,7 +37,7 @@ export const SheetFooterCancel = ({ onDismiss }) => { } + renderIcon={} /> ); }; @@ -58,7 +58,7 @@ export const SheetFooterDone = ({ onDone }) => { } + renderIcon={} /> ); }; diff --git a/components/Sheet/SheetHeader.js b/components/Sheet/SheetHeader.js index fb26a708..7df91359 100644 --- a/components/Sheet/SheetHeader.js +++ b/components/Sheet/SheetHeader.js @@ -35,14 +35,14 @@ const SheetHeader = ({ expandable, dismissable, title, onDismiss }) => { globalStyles.rowContainer, styles.controls ]}> - {expandable && ( + {/* {expandable && ( onPressExpand()} style={[ globalStyles.icon, ]} /> - )} + )} */} {dismissable && ( onPressDismiss()} diff --git a/constants/colors.js b/constants/colors.js index e59225d8..82996ce3 100644 --- a/constants/colors.js +++ b/constants/colors.js @@ -18,6 +18,18 @@ export const whatsapp = "#075E54"; // DARK MODE //////////////////////////// +// D.T Brand - Dark Mode +export const primaryDark = "#365D86"; +export const secondaryDark = "#a0ce4e"; +export const tertiaryDark = "#00897b"; +export const backgroundDark = "#F3F3F3"; +export const errorDark = "#C70039"; +export const warningDark = "#FFC300"; +export const infoDark = "#29b6f6"; +export const successDark = "#66bb6a"; +export const cellDark = "#ecf5fc;"; +export const borderDark = "#c2e0ff"; + // System Grays - Dark Mode export const systemGray2Dark = "rgb(99, 99, 102)"; export const systemGray3Dark = "rgb(72, 72, 74)"; @@ -46,12 +58,14 @@ export const systemBrownDark = "rgb(172, 142, 104)"; // D.T Brand - Light Mode export const primaryLight = "#365D86"; export const secondaryLight = "#a0ce4e"; +export const tertiaryLight = "#00897b"; export const backgroundLight = "#F3F3F3"; export const errorLight = "#C70039"; -//export const warningLight = "#FFC300"; -//export const infoLight = "#29b6f6"; -//export const successLight = "#66bb6a"; -export const successLight = "#000"; +export const warningLight = "#FFC300"; +export const infoLight = "#29b6f6"; +export const successLight = "#66bb6a"; +export const cellLight = "#ecf5fc;"; +export const borderLight = "#c2e0ff"; // System Grays - Light Mode export const systemGray2Light = "rgb(174, 174, 178)"; diff --git a/constants/index.js b/constants/index.js index e2422f98..4e87d950 100644 --- a/constants/index.js +++ b/constants/index.js @@ -28,8 +28,21 @@ import { systemBlueDark, facebook, whatsapp, + primaryDark, + primaryLight, + secondaryDark, + secondaryLight, + tertiaryDark, + tertiaryLight, + errorDark, + errorLight, + warningDark, + warningLight, + infoDark, + infoLight, + successLight, + successDark, } from "constants/colors"; -// TODO: rename export const defaultFaithMilestones = [ "milestone_has_bible", @@ -129,18 +142,18 @@ export const ThemeConstants = Object.freeze({ export const defaultThemeLight = Object.freeze({ mode: ThemeConstants.LIGHT, brand: { - primary: primaryBrand, - secondary: secondaryBrand, - tertiary: tertiaryBrand, + primary: primaryLight, + secondary: secondaryLight, + tertiary: tertiaryLight, }, offLight, offDark, systemGray, systemGreen: systemGreenLight, - error: systemRedLight, - warning: systemYellowLight, - info: systemCyanLight, - success: systemGray6Dark, + error: errorLight, + warning: warningLight, + info: infoLight, + success: successLight, text: { primary: offDark, secondary: "rgba(0, 0, 0, 0.6)", @@ -172,9 +185,9 @@ export const defaultThemeLight = Object.freeze({ export const defaultThemeDark = Object.freeze({ mode: ThemeConstants.DARK, brand: { - primary: primaryBrand, - secondary: secondaryBrand, - tertiary: tertiaryBrand, + primary: primaryDark, + secondary: secondaryDark, + tertiary: tertiaryDark, }, primaryBrand, secondaryBrand, @@ -182,10 +195,10 @@ export const defaultThemeDark = Object.freeze({ offDark, systemGray, systemGreen: systemGreenDark, - error: systemRedDark, - warning: systemYellowDark, - info: systemCyanDark, - success: systemGray6Light, + error: errorDark, + warning: warningDark, + info: infoDark, + success: successDark, text: { primary: offLight, secondary: "rgba(255, 255, 255, 0.7)",