From 566deae5af37d4865014023be2bb31976f915901 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Sun, 11 Jan 2026 20:23:56 -0600
Subject: [PATCH] fix: match import button style to export button (refs #26)

Desktop changes:
- Replace ImportButton component with MUI Button matching Export style
- Use hidden file input with validation
- Dark red/maroon button with consistent styling

Mobile changes:
- Update both Import and Export buttons to use primary-500 style
- Consistent dark primary button appearance
- Maintains 44px touch target requirement

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../settings/components/ImportButton.tsx      |  2 +-
 .../settings/mobile/MobileSettingsScreen.tsx  |  2 +-
 frontend/src/pages/SettingsPage.tsx           | 51 +++++++++++++++++--
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/settings/components/ImportButton.tsx b/frontend/src/features/settings/components/ImportButton.tsx
index c1b20e3..1ca2473 100644
--- a/frontend/src/features/settings/components/ImportButton.tsx
+++ b/frontend/src/features/settings/components/ImportButton.tsx
@@ -57,7 +57,7 @@ export const ImportButton: React.FC<ImportButtonProps> = ({
       <button
         onClick={handleButtonClick}
         disabled={disabled}
-        className="w-full text-left p-3 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors disabled:opacity-50 dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
+        className="w-full text-left p-3 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors disabled:opacity-50 dark:bg-primary-600 dark:hover:bg-primary-700"
         style={{ minHeight: '44px' }}
       >
         Import My Data
diff --git a/frontend/src/features/settings/mobile/MobileSettingsScreen.tsx b/frontend/src/features/settings/mobile/MobileSettingsScreen.tsx
index 17a0384..8fe6ed8 100644
--- a/frontend/src/features/settings/mobile/MobileSettingsScreen.tsx
+++ b/frontend/src/features/settings/mobile/MobileSettingsScreen.tsx
@@ -459,7 +459,7 @@ export const MobileSettingsScreen: React.FC = () => {
               </p>
               <button
                 onClick={() => setShowDataExport(true)}
-                className="w-full text-left p-3 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
+                className="w-full text-left p-3 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors disabled:opacity-50 dark:bg-primary-600 dark:hover:bg-primary-700"
                 style={{ minHeight: '44px' }}
               >
                 Export My Data
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index c91addb..c724e20 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -14,8 +14,8 @@ import { useVehicles } from '../features/vehicles/hooks/useVehicles';
 import { useTheme } from '../shared-minimal/theme/ThemeContext';
 import { DeleteAccountDialog } from '../features/settings/components/DeleteAccountDialog';
 import { PendingDeletionBanner } from '../features/settings/components/PendingDeletionBanner';
-import { ImportButton } from '../features/settings/components/ImportButton';
 import { ImportDialog } from '../features/settings/components/ImportDialog';
+import toast from 'react-hot-toast';
 import {
   Box,
   Typography,
@@ -68,6 +68,7 @@ export const SettingsPage: React.FC = () => {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [importDialogOpen, setImportDialogOpen] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
   const exportMutation = useExportUserData();
 
   // Initialize edit form when profile loads or edit mode starts
@@ -116,9 +117,32 @@ export const SettingsPage: React.FC = () => {
     }
   };
 
-  const handleImportFileSelected = (file: File) => {
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Validate file extension
+    if (!file.name.endsWith('.tar.gz')) {
+      toast.error('Please select a .tar.gz file');
+      return;
+    }
+
+    // Validate file size (max 500MB)
+    const maxSize = 500 * 1024 * 1024;
+    if (file.size > maxSize) {
+      toast.error('File size exceeds 500MB limit');
+      return;
+    }
+
     setSelectedFile(file);
     setImportDialogOpen(true);
+
+    // Reset input so same file can be selected again
+    event.target.value = '';
   };
 
   const handleImportClose = () => {
@@ -463,7 +487,28 @@ export const SettingsPage: React.FC = () => {
                 secondary="Upload and restore your vehicle data from a backup"
               />
               <ListItemSecondaryAction>
-                <ImportButton onFileSelected={handleImportFileSelected} />
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".tar.gz"
+                  onChange={handleFileChange}
+                  style={{ display: 'none' }}
+                  aria-label="Select import file"
+                />
+                <MuiButton
+                  variant="contained"
+                  size="small"
+                  onClick={handleImportClick}
+                  sx={{
+                    backgroundColor: 'primary.main',
+                    color: 'primary.contrastText',
+                    '&:hover': {
+                      backgroundColor: 'primary.dark'
+                    }
+                  }}
+                >
+                  Import
+                </MuiButton>
               </ListItemSecondaryAction>
             </ListItem>
             <Divider />