From 443e355774efd0c4387d0e8eca68ac17eb657be4 Mon Sep 17 00:00:00 2001 From: EthanHealy01 Date: Thu, 14 Aug 2025 09:55:32 +0100 Subject: [PATCH] change the border radius of the nav items to match matts design and remove colored top tool icon --- .../src/components/shared/QuickAccessBar.tsx | 66 +++++------------ .../shared/quickAccessBar/QuickAccessBar.ts | 71 +++++++++++++++++++ .../quickAccessBar/TopToolIndicator.tsx | 23 ++---- 3 files changed, 95 insertions(+), 65 deletions(-) create mode 100644 frontend/src/components/shared/quickAccessBar/QuickAccessBar.ts diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx index 1a55415f6..9abbb9ce5 100644 --- a/frontend/src/components/shared/QuickAccessBar.tsx +++ b/frontend/src/components/shared/QuickAccessBar.tsx @@ -13,6 +13,11 @@ import './quickAccessBar/QuickAccessBar.css'; import AllToolsNavButton from './AllToolsNavButton'; import { Tooltip } from './Tooltip'; import TopToolIndicator from './quickAccessBar/TopToolIndicator'; +import { + isNavButtonActive, + getNavButtonStyle, + getTargetNavButton +} from './quickAccessBar/QuickAccessBar'; const QuickAccessBar = forwardRef(({ }, ref) => { @@ -27,17 +32,16 @@ const QuickAccessBar = forwardRef(({ // Sync left nav highlight with selected tool when appropriate useEffect(() => { if (leftPanelView === 'toolContent' && selectedTool) { - let target: string | null = null; - // Map tool.view to nav button ids - if (selectedTool.view === 'sign') target = 'sign'; - if (selectedTool.view === 'view') target = 'read'; - // Use subcategory to infer Automate group - if (!target && selectedTool.subcategory === 'Automation') target = 'automate'; + const target = getTargetNavButton(selectedTool); if (target && activeButton !== target) { setActiveButton(target); return; } + // If tool doesn't map to a nav button, clear the highlight + if (!target && activeButton !== 'tools') { + setActiveButton('tools'); + } } // Revert highlight when no specific mapping applies if (leftPanelView !== 'toolContent') { @@ -92,7 +96,7 @@ const QuickAccessBar = forwardRef(({ { id: 'files', name: 'Files', - icon: , + icon: , tooltip: 'Manage files', isRound: true, size: 'lg', @@ -125,41 +129,7 @@ const QuickAccessBar = forwardRef(({ } ]; - const CIRCULAR_BORDER_RADIUS = '50%'; - const ROUND_BORDER_RADIUS = '8px'; - const getBorderRadius = (config: ButtonConfig): string => { - return config.isRound ? CIRCULAR_BORDER_RADIUS : ROUND_BORDER_RADIUS; - }; - - const isButtonActive = (config: ButtonConfig): boolean => { - return ( - (config.type === 'navigation' && activeButton === config.id) || - (config.type === 'modal' && config.id === 'files' && isFilesModalOpen) || - (config.type === 'modal' && config.id === 'config' && configModalOpen) - ); - }; - - const getButtonStyle = (config: ButtonConfig) => { - const isActive = isButtonActive(config); - - if (isActive) { - return { - backgroundColor: `var(--icon-${config.id}-bg)`, - color: `var(--icon-${config.id}-color)`, - border: 'none', - borderRadius: getBorderRadius(config), - }; - } - - // Inactive state for all buttons - return { - backgroundColor: 'var(--icon-inactive-bg)', - color: 'var(--icon-inactive-color)', - border: 'none', - borderRadius: getBorderRadius(config), - }; - }; return (
(({
{ config.onClick(); }} - style={getButtonStyle(config)} - className={isButtonActive(config) ? 'activeIconScale' : ''} + style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen)} + className={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen) ? 'activeIconScale' : ''} data-testid={`${config.id}-button`} > {config.icon} - + {config.name}
@@ -245,15 +215,15 @@ const QuickAccessBar = forwardRef(({ size={config.size || 'lg'} variant="subtle" onClick={config.onClick} - style={getButtonStyle(config)} - className={isButtonActive(config) ? 'activeIconScale' : ''} + style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen)} + className={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen) ? 'activeIconScale' : ''} data-testid={`${config.id}-button`} > {config.icon} - + {config.name}
diff --git a/frontend/src/components/shared/quickAccessBar/QuickAccessBar.ts b/frontend/src/components/shared/quickAccessBar/QuickAccessBar.ts new file mode 100644 index 000000000..1c75bc20f --- /dev/null +++ b/frontend/src/components/shared/quickAccessBar/QuickAccessBar.ts @@ -0,0 +1,71 @@ +import { ButtonConfig } from '../../../types/sidebar'; + +// Border radius constants +export const ROUND_BORDER_RADIUS = '0.5rem'; + +/** + * Get border radius for a button based on its configuration + */ +export const getNavButtonBorderRadius = (config: ButtonConfig): string => { + return config.isRound ? ROUND_BORDER_RADIUS : ROUND_BORDER_RADIUS; +}; + +/** + * Check if a navigation button is currently active + */ +export const isNavButtonActive = ( + config: ButtonConfig, + activeButton: string, + isFilesModalOpen: boolean, + configModalOpen: boolean +): boolean => { + return ( + (config.type === 'navigation' && activeButton === config.id) || + (config.type === 'modal' && config.id === 'files' && isFilesModalOpen) || + (config.type === 'modal' && config.id === 'config' && configModalOpen) + ); +}; + +/** + * Get button styles based on active state + */ +export const getNavButtonStyle = ( + config: ButtonConfig, + activeButton: string, + isFilesModalOpen: boolean, + configModalOpen: boolean +) => { + const isActive = isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen); + + if (isActive) { + return { + backgroundColor: `var(--icon-${config.id}-bg)`, + color: `var(--icon-${config.id}-color)`, + border: 'none', + borderRadius: getNavButtonBorderRadius(config), + }; + } + + // Inactive state for all buttons + return { + backgroundColor: 'var(--icon-inactive-bg)', + color: 'var(--icon-inactive-color)', + border: 'none', + borderRadius: getNavButtonBorderRadius(config), + }; +}; + +/** + * Determine which nav button should be highlighted based on selected tool + */ +export const getTargetNavButton = (selectedTool: any): string | null => { + if (!selectedTool) return null; + + // Map tool.view to nav button ids + if (selectedTool.view === 'sign') return 'sign'; + if (selectedTool.view === 'view') return 'read'; + // Use subcategory to infer Automate group + if (selectedTool.subcategory === 'Automation') return 'automate'; + + return null; +}; diff --git a/frontend/src/components/shared/quickAccessBar/TopToolIndicator.tsx b/frontend/src/components/shared/quickAccessBar/TopToolIndicator.tsx index 9b6c2e8ac..84dc14469 100644 --- a/frontend/src/components/shared/quickAccessBar/TopToolIndicator.tsx +++ b/frontend/src/components/shared/quickAccessBar/TopToolIndicator.tsx @@ -1,25 +1,23 @@ -import React, { useEffect, useRef, useState, useMemo } from 'react'; -import { ActionIcon, Divider, useMantineColorScheme } from '@mantine/core'; +import React, { useEffect, useRef, useState } from 'react'; +import { ActionIcon, Divider } from '@mantine/core'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; import { useToolWorkflow } from '../../../contexts/ToolWorkflowContext'; import FitText from '../FitText'; import { Tooltip } from '../Tooltip'; -import { getSubcategoryColor } from '../../../data/toolRegistry'; interface TopToolIndicatorProps { activeButton: string; setActiveButton: (id: string) => void; } -const NAV_IDS = ['read','sign','automate','files','activity','config']; +const NAV_IDS = ['read','sign','automate']; const TopToolIndicator: React.FC = ({ activeButton, setActiveButton }) => { const { selectedTool, selectedToolKey, leftPanelView, handleBackToTools } = useToolWorkflow(); - const { colorScheme } = useMantineColorScheme(); // Determine if the indicator should be visible const indicatorShouldShow = Boolean( - selectedToolKey && selectedTool && activeButton === 'tools' && leftPanelView === 'toolContent' && !NAV_IDS.includes(selectedToolKey) + selectedToolKey && selectedTool && leftPanelView === 'toolContent' && !NAV_IDS.includes(selectedToolKey) ); // Local animation and hover state @@ -64,11 +62,6 @@ const TopToolIndicator: React.FC = ({ activeButton, setAc } }, [indicatorShouldShow, selectedTool, selectedToolKey]); - const lightModeBg = useMemo(() => { - if (!indicatorTool) return undefined; - return getSubcategoryColor(indicatorTool.subcategory || undefined); - }, [indicatorTool]); - return ( <>
@@ -87,12 +80,8 @@ const TopToolIndicator: React.FC = ({ activeButton, setAc }} aria-label={isBackHover ? 'Back to all tools' : indicatorTool.name} style={{ - backgroundColor: isBackHover - ? '#9CA3AF' - : (colorScheme === 'light' ? lightModeBg : 'var(--icon-tools-bg)'), - color: isBackHover - ? '#fff' - : (colorScheme === 'light' ? '#fff' : 'var(--icon-tools-color)'), + backgroundColor: isBackHover ? '#9CA3AF' : 'var(--icon-tools-bg)', + color: isBackHover ? '#fff' : 'var(--icon-tools-color)', border: 'none', borderRadius: '8px', cursor: 'pointer'