From ef8beb432127374e8a73172cad5f21fe3179c0a0 Mon Sep 17 00:00:00 2001 From: pietrogll Date: Wed, 11 Sep 2024 18:49:51 +0200 Subject: [PATCH 1/3] =?UTF-8?q?A=C3=B1adido=20color=202024?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/colors.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styles/colors.js b/src/styles/colors.js index add6a15..8559a69 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -11,3 +11,6 @@ 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; + +// 2024 +// export const BUTTON_COLOR = '#E0FA4E'; From c9db007b0c106e0ab951e4c3e92b38b6cec23ffd Mon Sep 17 00:00:00 2001 From: pietrogll Date: Wed, 11 Sep 2024 20:28:11 +0200 Subject: [PATCH 2/3] Implementada identidad 2024 --- src/components/filter-grid.js | 18 +++++++++------- src/components/navigation-bar.js | 34 +++++++++++++++++++++++-------- src/components/program-buttons.js | 18 +++++++++++----- src/components/space-item.js | 10 ++++++--- src/containers/map-container.js | 8 ++++---- src/containers/page-layout.js | 5 ++++- src/containers/show-container.js | 11 +++++----- src/styles/colors.js | 33 +++++++++++++++++++++--------- 8 files changed, 94 insertions(+), 43 deletions(-) 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 8559a69..ce3beef 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -1,16 +1,29 @@ -export const PRIMARY_COLOR = '#EB148B'; -export const SECONDARY_COLOR = 'black'; -export const CREAM_COLOR = '#FFF4E2'; -export const LIGHT_GREY = '#DDDDDD'; -export const BLUE_LINK = '#3366BB'; +const IDENTITY_COLOR = '#E0FA4E'; // 2024 +const IDENTITY_COLOR_2 = '#b62682' +const LIGHT_GREY = '#DDDDDD'; +// 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; -// 2024 -// export const BUTTON_COLOR = '#E0FA4E'; +export const FAVORITE_BUTTON_COLOR = IDENTITY_COLOR_2; From 870e9a2fbc6d6ff8740ebef3e1f1b7b8e89f438c Mon Sep 17 00:00:00 2001 From: pietrogll Date: Wed, 11 Sep 2024 20:30:11 +0200 Subject: [PATCH 3/3] Mejorardo linter --- src/styles/colors.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/styles/colors.js b/src/styles/colors.js index ce3beef..167745f 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -1,13 +1,11 @@ - const IDENTITY_COLOR = '#E0FA4E'; // 2024 -const IDENTITY_COLOR_2 = '#b62682' +const IDENTITY_COLOR_2 = '#b62682'; const LIGHT_GREY = '#DDDDDD'; // 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 LAYOUT_COLOR = 'transparent';