Tooltip colours

frontend/src/components/fileManager/FileActions.tsx

@@ -1,21 +1,15 @@
-import React from 'react';
-import { Group, Button, Text, Tooltip, ActionIcon } from '@mantine/core';
-import SelectAllIcon from '@mui/icons-material/SelectAll';
-import DeleteIcon from '@mui/icons-material/Delete';
-import DownloadIcon from '@mui/icons-material/Download';
-import { useTranslation } from 'react-i18next';
-import { useFileManagerContext } from '../../contexts/FileManagerContext';
+import React from "react";
+import { Group, Text, ActionIcon, Tooltip } from "@mantine/core";
+import SelectAllIcon from "@mui/icons-material/SelectAll";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DownloadIcon from "@mui/icons-material/Download";
+import { useTranslation } from "react-i18next";
+import { useFileManagerContext } from "../../contexts/FileManagerContext";
 
 const FileActions: React.FC = () => {
   const { t } = useTranslation();
-  const {
-    recentFiles,
-    selectedFileIds,
-    filteredFiles,
-    onSelectAll,
-    onDeleteSelected,
-    onDownloadSelected,
-  } = useFileManagerContext();
+  const { recentFiles, selectedFileIds, filteredFiles, onSelectAll, onDeleteSelected, onDownloadSelected } =
+    useFileManagerContext();
 
   const handleSelectAll = () => {
     onSelectAll();
@@ -42,52 +36,53 @@ const FileActions: React.FC = () => {
   const hasSelection = selectedFileIds.length > 0;
 
   return (
-    <div style={{
-      padding: '0.75rem 1rem',
-      backgroundColor: 'var(--mantine-color-gray-0)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      minHeight: '3rem',
-      position: 'relative',
-    }}>
+    <div
+      style={{
+        padding: "0.75rem 1rem",
+        backgroundColor: "var(--mantine-color-gray-1)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        minHeight: "3rem",
+        position: "relative",
+      }}
+    >
       {/* Left: Select All */}
       <div>
         <Tooltip
-          label={allFilesSelected
-            ? t('fileManager.deselectAll', 'Deselect All')
-            : t('fileManager.selectAll', 'Select All')
-          }
+          label={allFilesSelected ? t("fileManager.deselectAll", "Deselect All") : t("fileManager.selectAll", "Select All")}
         >
           <ActionIcon
             variant="light"
             size="sm"
-            color='dimmed'
+            color="dimmed"
             onClick={handleSelectAll}
             disabled={filteredFiles.length === 0}
             radius="sm"
           >
-            <SelectAllIcon style={{ fontSize: '1rem' }} />
+            <SelectAllIcon style={{ fontSize: "1rem" }} />
           </ActionIcon>
         </Tooltip>
       </div>
 
       {/* Center: Selected count */}
-      <div style={{
-        position: 'absolute',
-        left: '50%',
-        transform: 'translateX(-50%)',
-      }}>
+      <div
+        style={{
+          position: "absolute",
+          left: "50%",
+          transform: "translateX(-50%)",
+        }}
+      >
         {hasSelection && (
           <Text size="sm" c="dimmed" fw={500}>
-            {t('fileManager.selectedCount', '{{count}} selected', { count: selectedFileIds.length })}
+            {t("fileManager.selectedCount", "{{count}} selected", { count: selectedFileIds.length })}
           </Text>
         )}
       </div>
 
       {/* Right: Delete and Download */}
       <Group gap="xs">
-        <Tooltip label={t('fileManager.deleteSelected', 'Delete Selected')}>
+        <Tooltip label={t("fileManager.deleteSelected", "Delete Selected")}>
           <ActionIcon
             variant="light"
             size="sm"
@@ -96,11 +91,11 @@ const FileActions: React.FC = () => {
             disabled={!hasSelection}
             radius="sm"
           >
-            <DeleteIcon style={{ fontSize: '1rem' }} />
+            <DeleteIcon style={{ fontSize: "1rem" }} />
           </ActionIcon>
         </Tooltip>
 
-        <Tooltip label={t('fileManager.downloadSelected', 'Download Selected')}>
+        <Tooltip label={t("fileManager.downloadSelected", "Download Selected")}>
           <ActionIcon
             variant="light"
             size="sm"
@@ -109,7 +104,7 @@ const FileActions: React.FC = () => {
             disabled={!hasSelection}
             radius="sm"
           >
-            <DownloadIcon style={{ fontSize: '1rem' }} />
+            <DownloadIcon style={{ fontSize: "1rem" }} />
           </ActionIcon>
         </Tooltip>
       </Group>

frontend/src/components/fileManager/FileListItem.tsx

@@ -40,7 +40,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
         p="sm"
         style={{
           cursor: 'pointer',
-          backgroundColor: isSelected ? 'var(--mantine-color-gray-0)' : (shouldShowHovered ? 'var(--mantine-color-gray-0)' : 'var(--bg-file-list)'),
+          backgroundColor: isSelected ? 'var(--mantine-color-gray-1)' : (shouldShowHovered ? 'var(--mantine-color-gray-1)' : 'var(--bg-file-list)'),
           opacity: isSupported ? 1 : 0.5,
           transition: 'background-color 0.15s ease',
           userSelect: 'none',

frontend/src/theme/mantineTheme.ts

@@ -191,6 +191,19 @@ export const mantineTheme = createTheme({
         },
       },
     },
+    Tooltip: {
+      styles: {
+        tooltip: {
+          backgroundColor: 'var( --tooltip-title-bg)',
+          color: 'var( --tooltip-title-color)',
+          border: '1px solid var(--tooltip-borderp)',
+          fontSize: '0.75rem',
+          fontWeight: '500',
+          boxShadow: 'var(--shadow-md)',
+          borderRadius: 'var(--radius-sm)',
+        },
+      },
+    },
 
     Checkbox: {
       styles: {