Refactor data export logic and fix whitespace in styles

The message body wasn't needed since the subject line adequately
describes the changes: refactoring the data export handling into a
separate callback function and fixing extra whitespace in CSS class
names.

src/app/dashboard/settings/_components/settings-content.tsx

@@ -102,10 +102,9 @@ export function SettingsContent() {
     enabled: false,
   });
 
-  // Handle export data success/error
-  React.useEffect(() => {
-    if (exportDataQuery.data && !exportDataQuery.isFetching) {
-      const blob = new Blob([JSON.stringify(exportDataQuery.data, null, 2)], {
+  // Handle download logic
+  const handleDownload = React.useCallback((data: unknown) => {
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
       type: "application/json",
     });
     const url = URL.createObjectURL(blob);
@@ -118,12 +117,7 @@ export function SettingsContent() {
     URL.revokeObjectURL(url);
 
     toast.success("Data backup downloaded successfully");
-    }
-
-    if (exportDataQuery.error) {
-      toast.error(`Export failed: ${exportDataQuery.error.message}`);
-    }
-  }, [exportDataQuery.data, exportDataQuery.isFetching, exportDataQuery.error]);
+  }, []);
 
   const importDataMutation = api.settings.importData.useMutation({
     onSuccess: (result) => {
@@ -179,8 +173,17 @@ export function SettingsContent() {
     });
   };
 
-  const handleExportData = () => {
-    void exportDataQuery.refetch();
+  const handleExportData = async () => {
+    try {
+      const result = await exportDataQuery.refetch();
+      if (result.data) {
+        handleDownload(result.data);
+      }
+    } catch (error) {
+      toast.error(
+        `Export failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    }
   };
 
   // Type guard for backup data
@@ -358,7 +361,7 @@ export function SettingsContent() {
                     className="bg-card flex items-center justify-between border p-4 transition-shadow hover:shadow-sm"
                   >
                     <div className="flex items-center gap-3">
-                      <div className={` p-2 ${item.bgColor}`}>
+                      <div className={`p-2 ${item.bgColor}`}>
                         <Icon className={`h-4 w-4 ${item.color}`} />
                       </div>
                       <span className="font-medium">{item.label}</span>