confusiontech · pietrogll · Sep 11, 2024 · Sep 11, 2024 · Sep 11, 2024 · Sep 11, 2024
diff --git a/src/components/filter-grid.js b/src/components/filter-grid.js
@@ -4,8 +4,10 @@ import { iconsMap } from '../helpers/icon-helpers';
 
 import {
   TOUCHABLE_UNDERLAY_COLOR,
-  BUTTON_ACTIVE_COLOR,
-  BUTTON_TEXT_COLOR
+  GRID_BUTTON_COLOR,
+  GRID_SELECTED_BUTTON_COLOR,
+  GRID_TEXT_COLOR,
+  GRID_SELECTED_TEXT_COLOR
 } from '../styles/colors';
 
 const BUTTONS_PER_ROW = 3;
@@ -15,11 +17,12 @@ const renderItem = ({ item, textStyle, onClick, buttonsPerRow, withIcon }) => {
   const buttonHeight = Dimensions.get('window').height * 0.11;
   const itemTextStyle = {
     textAlign: 'center',
-    ...textStyle
+    ...textStyle,
+    color: GRID_TEXT_COLOR
   };
 
   if (withIcon) {
-    const color = item.selected ? BUTTON_TEXT_COLOR : 'black';
+    const color = item.selected ? GRID_SELECTED_TEXT_COLOR : GRID_TEXT_COLOR;
     const iconStyle = { size: 16, color, styleClass: styles.icon };
 
     if (item.value === 'fusion') {
@@ -46,7 +49,7 @@ const renderItem = ({ item, textStyle, onClick, buttonsPerRow, withIcon }) => {
     }
   }
 
-  const finalTextStyle = item.selected ? { ...itemTextStyle, color: BUTTON_TEXT_COLOR } : itemTextStyle;
+  const finalTextStyle = item.selected ? { ...itemTextStyle, color: GRID_SELECTED_TEXT_COLOR } : itemTextStyle;
 
   const itemStyle = styles[`itemStyle${item.value}`] || {};
 
@@ -146,10 +149,11 @@ const styles = StyleSheet.create({
   },
   selected: {
     ...generalBoxStyle,
-    backgroundColor: BUTTON_ACTIVE_COLOR
+    backgroundColor: GRID_SELECTED_BUTTON_COLOR
   },
   normal: {
-    ...generalBoxStyle
+    ...generalBoxStyle,
+    backgroundColor: GRID_BUTTON_COLOR
   },
   filterButton: {
     height: '100%',

diff --git a/src/components/navigation-bar.js b/src/components/navigation-bar.js
@@ -3,13 +3,20 @@ import { View, Text, StyleSheet } from 'react-native';
 import StandardButton from '../components/standard-button';
 import { iconsMap } from '../helpers/icon-helpers';
 
-import { BUTTON_TEXT_COLOR, SECONDARY_COLOR } from '../styles/colors';
+import {
+  BUTTON_TEXT_COLOR,
+  BUTTON_ACTIVE_TEXT_COLOR,
+  BUTTON_COLOR,
+  BUTTON_ACTIVE_COLOR
+} from '../styles/colors';
 
 import { useRoute } from '@react-navigation/native';
 
 const NavigationBar = ({ navigation }) => {
   const route = useRoute();
 
+  const iconProps = { color: BUTTON_TEXT_COLOR, size: 18 };
+
   const NavButton = ({ routeName, buttonTitle, iconName }) => {
     return (
       <StandardButton
@@ -19,9 +26,19 @@ const NavigationBar = ({ navigation }) => {
           : styles.bottomButtonContainer}
       >
         <Text style={styles.buttonIcon}>
-          {iconsMap.get(iconName, iconProps)}
+          {iconsMap.get(
+            iconName,
+            {
+              ...iconProps,
+              color: route.name === routeName ? BUTTON_ACTIVE_TEXT_COLOR : BUTTON_TEXT_COLOR
+            }
+          )}
         </Text>
-        <Text style={styles.buttonText}>
+        <Text style={{
+          ...styles.buttonText,
+          color: route.name === routeName ? BUTTON_ACTIVE_TEXT_COLOR : BUTTON_TEXT_COLOR
+        }}
+        >
           {buttonTitle}
         </Text>
       </StandardButton>
@@ -39,8 +56,6 @@ const NavigationBar = ({ navigation }) => {
   );
 };
 
-const iconProps = { color: BUTTON_TEXT_COLOR, size: 18 };
-
 const NAV_BUTTON_WITH = '20%';
 
 const styles = StyleSheet.create({
@@ -49,11 +64,14 @@ const styles = StyleSheet.create({
     width: '100%'
   },
   bottomButtonContainer: {
-    width: NAV_BUTTON_WITH
+    width: NAV_BUTTON_WITH,
+    backgroundColor: BUTTON_COLOR,
+    color: BUTTON_TEXT_COLOR
   },
   selectedButtonContainer: {
-    backgroundColor: SECONDARY_COLOR,
-    width: NAV_BUTTON_WITH
+    backgroundColor: BUTTON_ACTIVE_COLOR,
+    width: NAV_BUTTON_WITH,
+    color: BUTTON_ACTIVE_TEXT_COLOR
   },
   buttonText: {
     color: BUTTON_TEXT_COLOR,

diff --git a/src/components/program-buttons.js b/src/components/program-buttons.js
@@ -3,7 +3,7 @@ import { View, StyleSheet, Text } from 'react-native';
 
 import StandardButton from './standard-button';
 import { ProgramContext } from '../services/program-context';
-import { BUTTON_COLOR, BUTTON_ACTIVE_COLOR, BUTTON_TEXT_COLOR } from '../styles/colors';
+import { BUTTON_COLOR, BUTTON_ACTIVE_COLOR, BUTTON_TEXT_COLOR, BUTTON_ACTIVE_TEXT_COLOR } from '../styles/colors';
 
 import { iconsMap } from '../helpers/icon-helpers';
 
@@ -24,6 +24,9 @@ const ProgramButtons = ({ navigation, goToNowEvent }) => {
 
   const navigateToFilter = () => navigation.navigate('Filtro');
 
+  const iconProps = { color: BUTTON_TEXT_COLOR, size: 16 };
+  const textColorFilterActive = isFilterSelected ? BUTTON_ACTIVE_TEXT_COLOR : BUTTON_TEXT_COLOR;
+
   return (
     <View style={styles.buttonsContainer}>
       <StandardButton
@@ -33,8 +36,15 @@ const ProgramButtons = ({ navigation, goToNowEvent }) => {
           backgroundColor: isFilterSelected ? BUTTON_ACTIVE_COLOR : BUTTON_COLOR
         }}
       >
-        <Text style={styles.buttonText}>
-          {iconsMap.get('filter', iconProps)} Filtro
+        <Text style={{
+          ...styles.buttonText,
+          color: textColorFilterActive
+        }}
+        >
+          {iconsMap.get(
+            'filter',
+            { ...iconProps, color: textColorFilterActive }
+          )} Filtro
         </Text>
       </StandardButton>
       <StandardButton
@@ -49,8 +59,6 @@ const ProgramButtons = ({ navigation, goToNowEvent }) => {
   );
 };
 
-const iconProps = { color: BUTTON_TEXT_COLOR, size: 16 };
-
 const styles = StyleSheet.create({
   buttonsContainer: {
     flexDirection: 'row'

diff --git a/src/components/space-item.js b/src/components/space-item.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import { TouchableHighlight, Text, View, StyleSheet } from 'react-native';
-import { TOUCHABLE_UNDERLAY_COLOR, LINK_COLOR, BUTTON_TEXT_COLOR } from '../styles/colors';
+import {
+  TOUCHABLE_UNDERLAY_COLOR,
+  SPACE_NUMBER_CIRCLE_COLOR,
+  SPACE_NUMBER_TEXT_COLOR
+} from '../styles/colors';
 
 const SpaceItem = React.memo(({ navigation, space }) => {
   const openSpaceProgram = () => navigation.navigate('ProgramaEspacio', { space });
@@ -58,14 +62,14 @@ const styles = StyleSheet.create({
     width: 34,
     height: 34,
     borderRadius: 17,
-    backgroundColor: LINK_COLOR,
+    backgroundColor: SPACE_NUMBER_CIRCLE_COLOR,
     justifyContent: 'center',
     marginLeft: 8
   },
   spaceNumber: {
     textAlign: 'center',
     fontSize: 20,
-    color: BUTTON_TEXT_COLOR
+    color: SPACE_NUMBER_TEXT_COLOR
   },
   spaceNameAndAddressContainer: {
     width: '85%',

diff --git a/src/containers/map-container.js b/src/containers/map-container.js
@@ -5,8 +5,8 @@ import { getSpaceList } from '../helpers/program-helpers';
 
 import { ProgramContext } from '../services/program-context';
 import {
-  BUTTON_ACTIVE_COLOR,
-  BUTTON_TEXT_COLOR
+  SPACE_NUMBER_CIRCLE_COLOR,
+  SPACE_NUMBER_TEXT_COLOR
 } from '../styles/colors';
 
 import PageLayout from './page-layout';
@@ -80,12 +80,12 @@ const MapMarker = ({ navigation, space }) => {
 const spaceNumberContainer = {
   justifyContent: 'center',
   alignItems: 'center',
-  backgroundColor: BUTTON_ACTIVE_COLOR
+  backgroundColor: SPACE_NUMBER_CIRCLE_COLOR
 };
 
 const spaceNumber = {
   textAlign: 'center',
-  color: BUTTON_TEXT_COLOR
+  color: SPACE_NUMBER_TEXT_COLOR
 };
 
 const styles = StyleSheet.create({

diff --git a/src/containers/page-layout.js b/src/containers/page-layout.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
 import NavigationBar from '../components/navigation-bar';
+import {
+  LAYOUT_COLOR
+} from '../styles/colors';
 
 const PageLayout = ({ children, navigation, showBackArrow }) => {
   React.useLayoutEffect(() => {
@@ -13,7 +16,7 @@ const PageLayout = ({ children, navigation, showBackArrow }) => {
 
   return (
     <View style={{ flex: 1 }}>
-      <View style={{ flex: 1 }}>
+      <View style={{ flex: 1, backgroundColor: LAYOUT_COLOR }}>
         {children}
       </View>
       <NavigationBar navigation={navigation} />

diff --git a/src/containers/show-container.js b/src/containers/show-container.js
@@ -12,8 +12,9 @@ import { Storage, FAVORITES_STORAGE_KEY } from '../helpers/with-async-storage';
 import {
   LINK_COLOR,
   TOUCHABLE_UNDERLAY_COLOR,
-  BUTTON_TEXT_COLOR,
-  PRIMARY_COLOR
+  SPACE_NUMBER_CIRCLE_COLOR,
+  SPACE_NUMBER_TEXT_COLOR,
+  FAVORITE_BUTTON_COLOR
 } from '../styles/colors';
 
 import PageLayout from './page-layout';
@@ -69,7 +70,7 @@ const ShowContainer = ({ route, navigation }) => {
               activeOpacity={0.9}
               underlayColor={TOUCHABLE_UNDERLAY_COLOR}
             >
-              {iconsMap.get(favoriteIconId, { size: 30, color: PRIMARY_COLOR })}
+              {iconsMap.get(favoriteIconId, { size: 30, color: FAVORITE_BUTTON_COLOR })}
             </TouchableHighlight>
           </View>
         </View>
@@ -162,12 +163,12 @@ const textStyleBase = {
 const spaceNumberContainer = {
   justifyContent: 'center',
   alignItems: 'center',
-  backgroundColor: LINK_COLOR
+  backgroundColor: SPACE_NUMBER_CIRCLE_COLOR
 };
 
 const spaceNumber = {
   textAlign: 'center',
-  color: BUTTON_TEXT_COLOR
+  color: SPACE_NUMBER_TEXT_COLOR
 };
 
 const grid = {

diff --git a/src/styles/colors.js b/src/styles/colors.js
@@ -1,13 +1,27 @@
-export const PRIMARY_COLOR = '#EB148B';
-export const SECONDARY_COLOR = 'black';
+const IDENTITY_COLOR = '#E0FA4E'; // 2024
+const IDENTITY_COLOR_2 = '#b62682';
+const LIGHT_GREY = '#DDDDDD';
+// const BLUE_LINK = '#3366BB';
 
-export const CREAM_COLOR = '#FFF4E2';
-export const LIGHT_GREY = '#DDDDDD';
-export const BLUE_LINK = '#3366BB';
+export const PRIMARY_COLOR = IDENTITY_COLOR;
+export const SECONDARY_COLOR = IDENTITY_COLOR_2;
 
 export const TOUCHABLE_UNDERLAY_COLOR = LIGHT_GREY;
-export const LINK_COLOR = PRIMARY_COLOR;
+export const LAYOUT_COLOR = 'transparent';
+
+export const LINK_COLOR = IDENTITY_COLOR_2;
+
 export const BUTTON_COLOR = PRIMARY_COLOR;
-export const BUTTON_TEXT_COLOR = 'white';
 export const BUTTON_ACTIVE_COLOR = SECONDARY_COLOR;
-export const LAYOUT_COLOR = CREAM_COLOR;
+export const BUTTON_TEXT_COLOR = SECONDARY_COLOR;
+export const BUTTON_ACTIVE_TEXT_COLOR = PRIMARY_COLOR;
+
+export const GRID_BUTTON_COLOR = 'transparent';
+export const GRID_SELECTED_BUTTON_COLOR = PRIMARY_COLOR;
+export const GRID_TEXT_COLOR = SECONDARY_COLOR;
+export const GRID_SELECTED_TEXT_COLOR = SECONDARY_COLOR;
+
+export const SPACE_NUMBER_CIRCLE_COLOR = PRIMARY_COLOR;
+export const SPACE_NUMBER_TEXT_COLOR = SECONDARY_COLOR;
+
+export const FAVORITE_BUTTON_COLOR = IDENTITY_COLOR_2;