From a3ee9138ece5b4b9a6858073e0499d6c7f08fc8c Mon Sep 17 00:00:00 2001 From: Javiera Munita Date: Wed, 18 Jun 2025 11:41:54 -0400 Subject: [PATCH 1/2] fix(PDYE-1297): cambio classnames --- src/molecules/NavBarButtons/NavBarButton.tsx | 23 +++++++++---------- .../Components/GoToCalendar.tsx | 8 +++---- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/molecules/NavBarButtons/NavBarButton.tsx b/src/molecules/NavBarButtons/NavBarButton.tsx index a4400f72..6d4da0fc 100644 --- a/src/molecules/NavBarButtons/NavBarButton.tsx +++ b/src/molecules/NavBarButtons/NavBarButton.tsx @@ -62,31 +62,32 @@ export const NavBarButton = ({ id={isAccessibility ? 'UserWayButton' : ''} onClick={isAccessibility ? triggerWidget : onClick} sx={{ + cursor: 'pointer', display: 'flex', gap: '8px', h: '30px', maxH: '30px', _hover: { - '.icon': { + '.nav-bar-icon': { bg: hoverBg, }, - '.text': { + '.nav-bar-text': { color: vars('colors-neutral-white'), }, }, _active: { - '.icon': { + '.nav-bar-icon': { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing bg: onlyLink || isAccessibility ? hoverBg : activeBg, }, - '.text': { + '.nav-bar-text': { color: vars('colors-neutral-white'), }, }, - '.icon': { + '.nav-bar-icon': { alignItems: 'center', bg: vars('colors-main-blueGrey'), borderRadius: '100%', @@ -99,19 +100,17 @@ export const NavBarButton = ({ width: '30px', }, - '.text': { + '.nav-bar-text': { alignContent: 'center', + color: vars('colors-neutral-silverSand'), fontSize: '12px', fontWeight: '500', - forntFamily: 'Roboto', - color: vars('colors-neutral-silverSand'), + fontFamily: 'Roboto', }, }} > - {buttonType[type].icon} - - {buttonType[type].text} - + {buttonType[type].icon} + {buttonType[type].text} ) } diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx index 203ce207..4cae2820 100644 --- a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx +++ b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx @@ -19,19 +19,19 @@ export const GoToCalendar = ({ text, onlyToCalendar, onClick }: IGoToCalendar): position="relative" sx={{ _hover: { - '.icon': { + '.nav-bar-icon': { bg: hoverBg, }, - '.text': { + '.nav-bar-text': { color: vars('colors-neutral-white'), }, }, _active: { - '.icon': { + '.nav-bar-icon': { bg: onlyToCalendar ? hoverBg : activeBg, }, - '.text': { + '.nav-bar-text': { color: vars('colors-neutral-white'), }, }, From 7bcc8299f56621ad40369f62b8177e3a95314e32 Mon Sep 17 00:00:00 2001 From: Javiera Munita Date: Thu, 19 Jun 2025 09:28:57 -0400 Subject: [PATCH 2/2] fix(PDYE-1297): reajuste fondo, borde y posicion boton --- src/molecules/NavBarButtons/NavBarButton.tsx | 9 +++++++-- .../CalendarDropdown/CalendarDropdownContainer.tsx | 6 +++--- .../CalendarDropdown/Components/GoToCalendar.tsx | 2 ++ 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/molecules/NavBarButtons/NavBarButton.tsx b/src/molecules/NavBarButtons/NavBarButton.tsx index 6d4da0fc..648e1c88 100644 --- a/src/molecules/NavBarButtons/NavBarButton.tsx +++ b/src/molecules/NavBarButtons/NavBarButton.tsx @@ -1,4 +1,4 @@ -import { Box } from '@chakra-ui/react' +import { Box, useMediaQuery } from '@chakra-ui/react' import { vars } from '@theme' import { HelpIcon } from '@/molecules/NavBarButtons/Icons/HelpIcon' @@ -29,6 +29,8 @@ export const NavBarButton = ({ onClick, type, }: ButtonProps): JSX.Element => { + const [isMobile] = useMediaQuery('(max-width: 640px)') + const buttonType = { accessibility: { icon: , @@ -62,11 +64,14 @@ export const NavBarButton = ({ id={isAccessibility ? 'UserWayButton' : ''} onClick={isAccessibility ? triggerWidget : onClick} sx={{ + background: 'none !important', + border: '1px transparent !important', cursor: 'pointer', display: 'flex', gap: '8px', h: '30px', maxH: '30px', + p: '0', _hover: { '.nav-bar-icon': { @@ -110,7 +115,7 @@ export const NavBarButton = ({ }} > {buttonType[type].icon} - {buttonType[type].text} + {!isMobile && {buttonType[type].text}} ) } diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx index 1d86a495..01383032 100644 --- a/src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx +++ b/src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx @@ -77,7 +77,7 @@ export const CalendarDropdownContainer = ({ content: '""', display: isMenuOpen ? 'block' : 'none', height: '0', - left: '14%', + left: '11%', position: 'absolute', top: '30px', transform: 'translateX(-50%)', @@ -109,13 +109,13 @@ export const CalendarDropdownContainer = ({ border: 'none', borderRadius: isMobile ? '0' : '10px', boxShadow: isMobile ? 'none' : 'rgba(47, 47, 47, 0.2) -1px 6px 40px 0px', - left: isMobile ? 'auto' : '-30px', + left: isMobile ? 'auto' : '34pxpx', maxHeight: isMobile ? 'calc(100vh - 62px)' : 'auto', opacity: '1 !important', overflowY: isMobile ? 'auto' : 'hidden', padding: '0', position: 'absolute', - top: isMobile ? '-6px !important' : 'auto', + top: isMobile ? '-6px !important' : '1px', transform: 'none !important', transition: 'none !important', width: isMobile ? '100vw' : '500px', diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx index 4cae2820..452c9734 100644 --- a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx +++ b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx @@ -18,6 +18,8 @@ export const GoToCalendar = ({ text, onlyToCalendar, onClick }: IGoToCalendar): onClick={() => onlyToCalendar && onClick && onClick()} position="relative" sx={{ + background: 'none', + border: '1px transparent', _hover: { '.nav-bar-icon': { bg: hoverBg,