diff --git a/frontend/src/components/shared/AllToolsNavButton.tsx b/frontend/src/components/shared/AllToolsNavButton.tsx index 75d69fb55..be4f25038 100644 --- a/frontend/src/components/shared/AllToolsNavButton.tsx +++ b/frontend/src/components/shared/AllToolsNavButton.tsx @@ -1,7 +1,6 @@ -import React, { useState } from 'react'; +import React from 'react'; import { ActionIcon, Tooltip } from '@mantine/core'; import AppsIcon from '@mui/icons-material/AppsRounded'; -import ArrowBackIcon from '@mui/icons-material/ArrowBackRounded'; import { useToolWorkflow } from '../../contexts/ToolWorkflowContext'; interface AllToolsNavButtonProps { @@ -10,8 +9,7 @@ interface AllToolsNavButtonProps { } const AllToolsNavButton: React.FC = ({ activeButton, setActiveButton }) => { - const { selectedTool, selectedToolKey, handleReaderToggle, handleBackToTools } = useToolWorkflow(); - const [isHovered, setIsHovered] = useState(false); + const { handleReaderToggle, handleBackToTools } = useToolWorkflow(); const handleClick = () => { setActiveButton('tools'); @@ -22,38 +20,25 @@ const AllToolsNavButton: React.FC = ({ activeButton, set const isActive = activeButton === 'tools'; - const iconNode = (() => { - if (selectedToolKey) { - if (isHovered) return ; - return ( - - {selectedTool?.icon ?? } - - ); - } - return ( - - - - ); - })(); + const iconNode = ( + + + + ); return ( - +
setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} style={{ backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)', color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)', border: 'none', borderRadius: '8px', }} - className={isActive ? 'activeIconScale' : ''} > {iconNode} diff --git a/frontend/src/components/tools/ToolPicker.tsx b/frontend/src/components/tools/ToolPicker.tsx index 301569420..3875d45ca 100644 --- a/frontend/src/components/tools/ToolPicker.tsx +++ b/frontend/src/components/tools/ToolPicker.tsx @@ -45,6 +45,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa const SubcategoryHeader: React.FC<{ label: string; mt?: string | number; mb?: string | number }> = ({ label, mt = "1rem", mb = "0.25rem" }) => (
+
{label}
diff --git a/frontend/src/components/tools/toolPicker/ToolPicker.css b/frontend/src/components/tools/toolPicker/ToolPicker.css index 51566278a..f099167e0 100644 --- a/frontend/src/components/tools/toolPicker/ToolPicker.css +++ b/frontend/src/components/tools/toolPicker/ToolPicker.css @@ -45,14 +45,14 @@ .tool-subcategory-row-title { text-transform: uppercase; font-weight: 600; - font-size: 0.9rem; + font-size: 0.75rem; color: var(--tool-subcategory-text-color); white-space: nowrap; } .tool-subcategory-row-rule { height: 1px; - background-color: var(--tool-subcategory-text-color); + background-color: var(--tool-subcategory-rule-color); flex: 1 1 auto; } diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index b23707efb..bfc308678 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -128,7 +128,8 @@ --tool-header-badge-text: #004E99; /* Subcategory title styling (light mode) */ - --tool-subcategory-text-color: #6B7280; + --tool-subcategory-text-color: #9CA3AF; /* lighter text */ + --tool-subcategory-rule-color: #E5E7EB; /* doubly lighter rule line */ --accent-interactive: #4A90E2; --text-instruction: #4A90E2; --text-brand: var(--color-gray-700); @@ -274,7 +275,8 @@ --tool-header-badge-text: #FFFFFF; /* Subcategory title styling (dark mode) */ - --tool-subcategory-text-color: #6B7280; + --tool-subcategory-text-color: #9CA3AF; /* lighter text in dark mode as well */ + --tool-subcategory-rule-color: #3A4047; /* doubly lighter (relative) line in dark */ } /* Dropzone drop state styling */