diff --git a/src/molecules/NavBarButtons/NavBarButton.tsx b/src/molecules/NavBarButtons/NavBarButton.tsx index 6d4da0fc..b0b8532f 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,16 @@ 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 +117,8 @@ 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,