diff --git a/src/components/filter-grid.js b/src/components/filter-grid.js
index 1606c07..6851a97 100644
--- 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
index 899d72f..1b7403b 100644
--- 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 (
{
: styles.bottomButtonContainer}
>
- {iconsMap.get(iconName, iconProps)}
+ {iconsMap.get(
+ iconName,
+ {
+ ...iconProps,
+ color: route.name === routeName ? BUTTON_ACTIVE_TEXT_COLOR : BUTTON_TEXT_COLOR
+ }
+ )}
-
+
{buttonTitle}
@@ -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
index 1dc7af7..35de57b 100644
--- 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 (
{
backgroundColor: isFilterSelected ? BUTTON_ACTIVE_COLOR : BUTTON_COLOR
}}
>
-
- {iconsMap.get('filter', iconProps)} Filtro
+
+ {iconsMap.get(
+ 'filter',
+ { ...iconProps, color: textColorFilterActive }
+ )} Filtro
{
);
};
-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
index 951395a..7949782 100644
--- 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
index faa040a..3df8526 100644
--- 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
index a71d5b1..708e0a8 100644
--- 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 (
-
+
{children}
diff --git a/src/containers/show-container.js b/src/containers/show-container.js
index 58aa5f4..f048058 100644
--- 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 })}
@@ -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
index add6a15..167745f 100644
--- 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;