Theme and style changes (#626)

DiscipleTools · Apr 5, 2022 · ba0cf19 · ba0cf19
1 parent c3e7b6b
commit ba0cf19
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 42 deletions.
diff --git 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,16 +69,15 @@ const PendingContactsCard = ({ filters, refreshing, onRefresh }) => {
       <View style={[globalStyles.rowContainer, styles.buttonRowContainer]}>
         <Pressable
           onPress={() => handleAccept({ contact, accept: true })}
-          //TODO adjust color to be dynamic
-          style={[styles.buttonContainer, { backgroundColor: "green" }]}
+          style={[styles.buttonContainer, styles.buttonAccept]}
         >
           <Text style={styles.buttonText}>
             {i18n.t("global.accept", { locale })}
           </Text>
         </Pressable>
         <Pressable
           onPress={() => handleAccept({ contact, accept: false })}
-          style={[styles.buttonContainer, { backgroundColor: "red" }]}
+          style={[styles.buttonContainer, styles.buttonDecline]}
         >
           <Text style={styles.buttonText}>
             {i18n.t("global.decline", { locale })}

diff --git 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,
+  }
 });
diff --git 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(
       <View style={globalStyles.rowContainer}>
-        <ClearIcon onPress={_onCancel} />
+        <CancelIcon onPress={_onCancel} />
         { hasChanged && (
           <SaveIcon onPress={() => _onSave(_value)} />
         )}

diff --git 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
@@ -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 && (
           <View style={[globalStyles.rowContainer, styles.controlIcons]}>
-            <ClearIcon onPress={() => _onClear()} />
+            <CancelIcon onPress={() => _onClear()} />
             <SaveIcon onPress={() => _onChange()} />
           </View>
         )}

diff --git a/components/Icon.js b/components/Icon.js
@@ -70,6 +70,9 @@ export const ArrowForwardIcon = ({ onPress, style }) => (
 export const BellIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon name="bell" onPress={onPress} style={style} />
 );
+export const CancelIcon = ({ onPress, style }) => (
+  <MaterialCommunityIcon name="close-thick" onPress={onPress} style={style} />
+);
 export const CaretIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon name="chevron-down" onPress={onPress} style={style} />
 );
@@ -95,6 +98,9 @@ export const ClearFiltersIcon = ({ onPress, style }) => (
     style={style}
   />
 );
+export const CloseIcon = ({ onPress, style }) => (
+  <MaterialCommunityIcon name="close-thick" onPress={onPress} style={style} />
+);
 export const CircleIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon name="circle" onPress={onPress} style={style} />
 );
@@ -124,6 +130,12 @@ export const DarkModeIcon = ({ onPress, style }) => (
 export const DeleteIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon name="delete" onPress={onPress} style={style} />
 );
+export const AcceptIcon = ({ onPress, style }) => (
+  <MaterialCommunityIcon name="check-circle" onPress={onPress} style={style} />
+);
+export const DeclineIcon = ({ onPress, style }) => (
+  <MaterialCommunityIcon name="close-circle" onPress={onPress} style={style} />
+);
 export const EditIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon name="pencil" onPress={onPress} style={style} />
 );
@@ -170,10 +182,6 @@ export const MapIcon = ({ onPress, style }) => (
 export const OnePasswordIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon name="onepassword" onPress={onPress} style={style} />
 );
-//TODO icon for more post Types
-export const PostIcon = ({ onPress, style }) => (
-  <MaterialCommunityIcon name="teach" onPress={onPress} style={style} />
-);
 export const RemoveIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon name="minus" onPress={onPress} style={style} />
 );
@@ -265,9 +273,26 @@ export const MoreIcon = ({ onPress, style }) => (
     style={style}
   />
 );
+//TODO icon for more post Types
+export const PostIcon = ({ onPress, style }) => (
+  <MaterialCommunityIcon name="file-multiple" onPress={onPress} style={style} />
+);
+export const TrainingsIcon = ({ onPress, style }) => (
+  <MaterialCommunityIcon name="teach" onPress={onPress} style={style} />
+);
+export const MeetingsIcon = ({ onPress, style }) => (
+  <MaterialCommunityIcon name="calendar-multiselect" onPress={onPress} style={style} />
+);
+export const CampaignsIcon = ({ onPress, style }) => (
+  <MaterialCommunityIcon name="bullhorn" onPress={onPress} style={style} />
+);
+export const StreamsIcon = ({ onPress, style }) => (
+  <MaterialCommunityIcon name="axis-arrow" onPress={onPress} style={style} />
+);
+// Login screen
 export const UserIcon = ({ onPress, style }) => (
   <MaterialCommunityIcon
-    name="account"
+    name="account-key"
     onPress={onPress}
     style={style}
   />

diff --git 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 }) => {
     <SheetFooter
       onPress={onPress}
       label={label}
-      renderIcon={<ClearIcon style={globalStyles.icon} />}
+      renderIcon={<DeclineIcon style={globalStyles.icon} />}
     />
   );
 };
@@ -58,7 +58,7 @@ export const SheetFooterDone = ({ onDone }) => {
     <SheetFooter
       onPress={onPress}
       label={label}
-      renderIcon={<CheckIcon style={globalStyles.icon} />}
+      renderIcon={<AcceptIcon style={globalStyles.icon} />}
     />
   );
 };

diff --git 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 && (
         <ExpandIcon
           onPress={() => onPressExpand()}
           style={[
             globalStyles.icon,
           ]}
         />
-      )}
+      )} */}
       {dismissable && (
         <ClearIcon
           onPress={() => onPressDismiss()}

diff --git 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)";