feat: Enhance CsvViewer hover effects with dynamic background and text colors
This commit is contained in:
parent
b36cbf386b
commit
9dbc0bb866
|
@ -70,6 +70,8 @@ function CsvViewer({ filePath, onClose }) {
|
|||
const cardBg = useColorModeValue('white', 'gray.700')
|
||||
const tableBg = useColorModeValue('gray.50', 'gray.800')
|
||||
const headerBg = useColorModeValue('gray.100', 'gray.600')
|
||||
const hoverBg = useColorModeValue('gray.100', 'gray.600')
|
||||
const hoverTextColor = useColorModeValue('gray.800', 'white')
|
||||
|
||||
// Load CSV data
|
||||
const loadData = async (page = 1, pageSize = DEFAULT_PAGE_SIZE) => {
|
||||
|
@ -429,7 +431,15 @@ function CsvViewer({ filePath, onClose }) {
|
|||
</Thead>
|
||||
<Tbody>
|
||||
{filteredData.map((row, rowIndex) => (
|
||||
<Tr key={rowIndex} _hover={{ bg: 'gray.50' }}>
|
||||
<Tr
|
||||
key={rowIndex}
|
||||
_hover={{
|
||||
bg: hoverBg,
|
||||
'& td': {
|
||||
color: hoverTextColor
|
||||
}
|
||||
}}
|
||||
>
|
||||
{columns.map((column, colIndex) => (
|
||||
<Td
|
||||
key={colIndex}
|
||||
|
|
Loading…
Reference in New Issue