From 9aecc7890e48a0448e36fb4b2c159be9fb912a0d Mon Sep 17 00:00:00 2001 From: Gerard Date: Mon, 30 Dec 2024 18:19:19 +0100 Subject: [PATCH 1/2] fixed dashboard menu styles --- src/components/Dashboard/Menu/Item.tsx | 5 ++++- src/components/Dashboard/Menu/Options.tsx | 6 +++--- src/theme/components/button.ts | 19 ++++++++++++------- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/components/Dashboard/Menu/Item.tsx b/src/components/Dashboard/Menu/Item.tsx index 5674b585..99637ad1 100644 --- a/src/components/Dashboard/Menu/Item.tsx +++ b/src/components/Dashboard/Menu/Item.tsx @@ -23,12 +23,15 @@ 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' w='full' + colorScheme='gray' leftIcon={icon ? : undefined} rightIcon={hasChildren ? isOpen ? : : undefined} + textDecoration={isActive && !hasChildren ? 'underline' : 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..b2e21838 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`, }, } }) From 86087f578153f782844c12de5f45ab6454f54552 Mon Sep 17 00:00:00 2001 From: Gerard Date: Tue, 7 Jan 2025 09:37:00 +0100 Subject: [PATCH 2/2] changed the button menu variant on the dashboard based on whether it is active and whether it has children --- src/components/Dashboard/Menu/Item.tsx | 3 +-- src/theme/components/button.ts | 34 ++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/components/Dashboard/Menu/Item.tsx b/src/components/Dashboard/Menu/Item.tsx index 99637ad1..00097c8e 100644 --- a/src/components/Dashboard/Menu/Item.tsx +++ b/src/components/Dashboard/Menu/Item.tsx @@ -25,12 +25,11 @@ export const DashboardMenuItem = ({ onClick={hasChildren ? onToggle : undefined} 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} - textDecoration={isActive && !hasChildren ? 'underline' : undefined} mb={hasChildren && 1} > {label} diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts index b2e21838..5605e1a6 100644 --- a/src/theme/components/button.ts +++ b/src/theme/components/button.ts @@ -155,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', @@ -200,6 +233,7 @@ export const Button = defineStyleConfig({ outline, transparent, link, + underline, }, sizes, defaultProps: {