diff --git a/src/components/Dashboard/Menu/Item.tsx b/src/components/Dashboard/Menu/Item.tsx index 5674b585..00097c8e 100644 --- a/src/components/Dashboard/Menu/Item.tsx +++ b/src/components/Dashboard/Menu/Item.tsx @@ -23,12 +23,14 @@ export const DashboardMenuItem = ({ as={route ? ReactRouterLink : undefined} to={route ? generatePath(route) : undefined} onClick={hasChildren ? onToggle : undefined} - isActive={isActive} // Set active state + isActive={hasChildren ? (isOpen ? true : false) : false} // Set active state justifyContent='start' - variant='transparent' + variant={isActive && !hasChildren ? 'underline' : 'transparent'} w='full' + colorScheme='gray' leftIcon={icon ? : undefined} rightIcon={hasChildren ? isOpen ? : : undefined} + mb={hasChildren && 1} > {label} diff --git a/src/components/Dashboard/Menu/Options.tsx b/src/components/Dashboard/Menu/Options.tsx index 6575085d..62ea3670 100644 --- a/src/components/Dashboard/Menu/Options.tsx +++ b/src/components/Dashboard/Menu/Options.tsx @@ -1,4 +1,4 @@ -import { Box, Collapse, useDisclosure } from '@chakra-ui/react' +import { Box, Collapse } from '@chakra-ui/react' import { OrganizationName } from '@vocdoni/chakra-components' import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -19,7 +19,6 @@ export const DashboardMenuOptions = () => { const { t } = useTranslation() const location = useLocation() const [openSection, setOpenSection] = useState(null) - const { isOpen, onOpen, onClose } = useDisclosure() const menuItems: MenuItem[] = [ // { @@ -83,7 +82,8 @@ export const DashboardMenuOptions = () => { return ( - + + {menuItems.map((item, index) => ( {item.children ? ( diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts index 9d53f18f..5605e1a6 100644 --- a/src/theme/components/button.ts +++ b/src/theme/components/button.ts @@ -83,12 +83,18 @@ const outline = defineStyle((props) => { const transparent = defineStyle((props) => { const { colorScheme } = props return { - color: colorScheme === 'gray' ? 'button.variant.common.color.light' : `${colorScheme}.700`, + color: colorScheme === 'gray' ? 'black' : `${colorScheme}.700`, - _hover: { - bgColor: colorScheme === 'gray' ? 'button.variant.common.hover.bg.light' : `${colorScheme}.50`, + _active: { + bgColor: colorScheme === 'gray' ? 'gray.200' : `${colorScheme}.50`, - color: colorScheme === 'gray' ? 'button.variant.common.color.light' : `${colorScheme}.800`, + _dark: { + bgColor: colorScheme === 'gray' ? 'gray.700' : `${colorScheme}.50`, + }, + }, + + _hover: { + bgColor: colorScheme === 'gray' ? 'gray.200' : `${colorScheme}.50`, _disabled: { color: 'button.variant.common.disabled.color.light', @@ -98,8 +104,7 @@ const transparent = defineStyle((props) => { }, _dark: { - bgColor: colorScheme === 'gray' ? 'button.variant.common.hover.bg.dark' : `${colorScheme}.50`, - color: colorScheme === 'gray' ? 'button.variant.common.color.dark' : `${colorScheme}.800`, + bgColor: colorScheme === 'gray' ? 'gray.700' : `${colorScheme}.50`, }, }, _disabled: { @@ -110,7 +115,7 @@ const transparent = defineStyle((props) => { }, _dark: { - color: colorScheme === 'gray' ? 'button.variant.common.color_gray_dark' : `${colorScheme}.700`, + color: colorScheme === 'gray' ? 'white' : `${colorScheme}.700`, }, } }) @@ -150,6 +155,39 @@ const link = defineStyle((props) => { } }) +const underline = defineStyle((props) => { + const { colorScheme } = props + return { + color: colorScheme === 'gray' ? 'black' : `${colorScheme}.700`, + textDecoration: 'underline', + + _hover: { + bgColor: colorScheme === 'gray' ? 'gray.200' : `${colorScheme}.50`, + + _disabled: { + color: 'button.variant.common.disabled.color.light', + _dark: { + color: 'button.variant.common.disabled.color.dark', + }, + }, + + _dark: { + bgColor: colorScheme === 'gray' ? 'gray.700' : `${colorScheme}.50`, + }, + }, + _disabled: { + color: 'button.variant.common.disabled.color.light', + _dark: { + color: 'button.variant.common.disabled.color.dark', + }, + }, + + _dark: { + color: colorScheme === 'gray' ? 'white' : `${colorScheme}.700`, + }, + } +}) + const sizes = { xl2: defineStyle({ px: '22px', @@ -195,6 +233,7 @@ export const Button = defineStyleConfig({ outline, transparent, link, + underline, }, sizes, defaultProps: {