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: {