From 12855b1002ebf200f0f6cd4831fb4c69aaa26519 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Wed, 20 Aug 2025 16:46:55 +0100
Subject: [PATCH] Tooltip colours

---
 .../components/fileManager/DesktopLayout.tsx  | 46 ++++++------
 .../components/fileManager/FileActions.tsx    | 75 +++++++++----------
 .../components/fileManager/FileListItem.tsx   |  2 +-
 frontend/src/theme/mantineTheme.ts            | 13 ++++
 4 files changed, 72 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/fileManager/DesktopLayout.tsx b/frontend/src/components/fileManager/DesktopLayout.tsx
index d2b87de70..8d1e32ffc 100644
--- a/frontend/src/components/fileManager/DesktopLayout.tsx
+++ b/frontend/src/components/fileManager/DesktopLayout.tsx
@@ -18,27 +18,27 @@ const DesktopLayout: React.FC = () => {
   return (
     <Grid gutter="xs" h="100%" grow={false} style={{ flexWrap: 'nowrap', minWidth: 0 }}>
       {/* Column 1: File Sources */}
-      <Grid.Col span="content" p="lg" style={{ 
-        minWidth: '13.625rem', 
-        width: '13.625rem', 
-        flexShrink: 0, 
+      <Grid.Col span="content" p="lg" style={{
+        minWidth: '13.625rem',
+        width: '13.625rem',
+        flexShrink: 0,
         height: '100%',
       }}>
         <FileSourceButtons />
       </Grid.Col>
-      
+
       {/* Column 2: File List */}
-      <Grid.Col span="auto" style={{ 
-        display: 'flex', 
-        flexDirection: 'column', 
-        height: '100%', 
+      <Grid.Col span="auto" style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
         minHeight: 0,
         minWidth: 0,
         flex: '1 1 0px'
       }}>
-        <div style={{ 
-          flex: 1, 
-          display: 'flex', 
+        <div style={{
+          flex: 1,
+          display: 'flex',
           flexDirection: 'column',
           backgroundColor: 'var(--bg-file-list)',
           border: '1px solid var(--mantine-color-gray-2)',
@@ -47,13 +47,13 @@ const DesktopLayout: React.FC = () => {
         }}>
           {activeSource === 'recent' && (
             <>
-              <div style={{ 
+              <div style={{
                 flexShrink: 0,
                 borderBottom: '1px solid var(--mantine-color-gray-3)'
               }}>
                 <SearchInput />
               </div>
-              <div style={{ 
+              <div style={{
                 flexShrink: 0,
                 borderBottom: '1px solid var(--mantine-color-gray-3)'
               }}>
@@ -61,11 +61,11 @@ const DesktopLayout: React.FC = () => {
               </div>
             </>
           )}
-          
+
           <div style={{ flex: 1, minHeight: 0 }}>
             <FileListArea
               scrollAreaHeight={`calc(${modalHeight} )`}
-              scrollAreaStyle={{ 
+              scrollAreaStyle={{
                 height: activeSource === 'recent' && recentFiles.length > 0 ? modalHeight : '100%',
                 backgroundColor: 'transparent',
                 border: 'none',
@@ -75,12 +75,12 @@ const DesktopLayout: React.FC = () => {
           </div>
         </div>
       </Grid.Col>
-      
+
       {/* Column 3: File Details */}
-      <Grid.Col p="xl" span="content" style={{ 
-        minWidth: '25rem', 
-        width: '25rem', 
-        flexShrink: 0, 
+      <Grid.Col p="xl" span="content" style={{
+        minWidth: '25rem',
+        width: '25rem',
+        flexShrink: 0,
         height: '100%',
         maxWidth: '18rem'
       }}>
@@ -88,11 +88,11 @@ const DesktopLayout: React.FC = () => {
           <FileDetails />
         </div>
       </Grid.Col>
-      
+
       {/* Hidden file input for local file selection */}
       <HiddenFileInput />
     </Grid>
   );
 };
 
-export default DesktopLayout;
\ No newline at end of file
+export default DesktopLayout;
diff --git a/frontend/src/components/fileManager/FileActions.tsx b/frontend/src/components/fileManager/FileActions.tsx
index ec065fa08..7bc8d27bc 100644
--- a/frontend/src/components/fileManager/FileActions.tsx
+++ b/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>
diff --git a/frontend/src/components/fileManager/FileListItem.tsx b/frontend/src/components/fileManager/FileListItem.tsx
index cb050d686..4b0e408d1 100644
--- a/frontend/src/components/fileManager/FileListItem.tsx
+++ b/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',
diff --git a/frontend/src/theme/mantineTheme.ts b/frontend/src/theme/mantineTheme.ts
index 27e70d461..a8552b2bb 100644
--- a/frontend/src/theme/mantineTheme.ts
+++ b/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: {