From 3c6e0822bc6be502d03ae7648282d3c9b0897f2b Mon Sep 17 00:00:00 2001
From: allison-truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 17 Dec 2025 10:39:18 -0500
Subject: [PATCH 1/2] fix: dark styles in file selector

- the main file table test inherited some styles from a parent div that I did not previously apply in the file selector table
---
 frontend/src/components/ui/BrowsePage/BreadcrumbSegment.tsx | 6 ++----
 .../ui/BrowsePage/FileSelector/FileSelectorTable.tsx        | 4 ++--
 frontend/src/components/ui/widgets/Loaders.tsx              | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ui/BrowsePage/BreadcrumbSegment.tsx b/frontend/src/components/ui/BrowsePage/BreadcrumbSegment.tsx
index 87aa8ac8..72d79f95 100644
--- a/frontend/src/components/ui/BrowsePage/BreadcrumbSegment.tsx
+++ b/frontend/src/components/ui/BrowsePage/BreadcrumbSegment.tsx
@@ -32,9 +32,7 @@ export default function BreadcrumbSegment({
     // Last segment is always non-clickable text
     return (
       <Typography
-        className={`font-medium ${
-          isFile ? 'text-primary-default italic' : 'text-primary-default'
-        }`}
+        className={`font-medium text-foreground ${isFile ? 'italic' : ''}`}
       >
         {label}
       </Typography>
@@ -58,7 +56,7 @@ export default function BreadcrumbSegment({
         // Callback-based navigation (for dialogs)
         <BreadcrumbLink as="button" onClick={onClick}>
           <Typography
-            className="font-medium text-primary-light hover:text-primary-default"
+            className="font-medium text-primary-light hover:underline focus:underline"
             variant="small"
           >
             {label}
diff --git a/frontend/src/components/ui/BrowsePage/FileSelector/FileSelectorTable.tsx b/frontend/src/components/ui/BrowsePage/FileSelector/FileSelectorTable.tsx
index 07917744..6a85e42e 100644
--- a/frontend/src/components/ui/BrowsePage/FileSelector/FileSelectorTable.tsx
+++ b/frontend/src/components/ui/BrowsePage/FileSelector/FileSelectorTable.tsx
@@ -143,7 +143,7 @@ export default function FileSelectorTable({
             <tr className="border-b border-surface" key={headerGroup.id}>
               {headerGroup.headers.map(header => (
                 <th
-                  className="text-left p-3 font-bold text-sm"
+                  className="text-left p-3 font-bold text-sm text-foreground"
                   key={header.id}
                   style={{ width: header.getSize() }}
                 >
@@ -189,7 +189,7 @@ export default function FileSelectorTable({
                 >
                   {row.getVisibleCells().map(cell => (
                     <td
-                      className="p-3 text-grey-700"
+                      className="p-3 text-grey-700 text-primary-light"
                       key={cell.id}
                       style={{ width: cell.column.getSize() }}
                     >
diff --git a/frontend/src/components/ui/widgets/Loaders.tsx b/frontend/src/components/ui/widgets/Loaders.tsx
index 18bf082d..d115eba2 100644
--- a/frontend/src/components/ui/widgets/Loaders.tsx
+++ b/frontend/src/components/ui/widgets/Loaders.tsx
@@ -13,7 +13,7 @@ function Spinner({
         className={`w-5 h-5 border-4 border-surface-foreground border-t-transparent rounded-full animate-spin ${customClasses}`}
         title="Loading spinner"
       />
-      <Typography>{text}</Typography>
+      <Typography className="text-foreground">{text}</Typography>
     </div>
   );
 }

From cb0bf13662e7f2c933813d86ab470b190a8a8d74 Mon Sep 17 00:00:00 2001
From: allison-truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 17 Dec 2025 10:58:01 -0500
Subject: [PATCH 2/2] fix: dark styles

---
 .../ui/BrowsePage/FileSelector/FileSelectorButton.tsx  | 10 ++++++++--
 frontend/src/components/ui/Dialogs/ConvertFile.tsx     | 10 +++++++---
 frontend/src/components/ui/widgets/Loaders.tsx         |  6 ++++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ui/BrowsePage/FileSelector/FileSelectorButton.tsx b/frontend/src/components/ui/BrowsePage/FileSelector/FileSelectorButton.tsx
index 7c339585..f1cc548f 100644
--- a/frontend/src/components/ui/BrowsePage/FileSelector/FileSelectorButton.tsx
+++ b/frontend/src/components/ui/BrowsePage/FileSelector/FileSelectorButton.tsx
@@ -106,7 +106,10 @@ export default function FileSelectorButton({
           <div className="my-4 h-96">
             {zonesQuery.isPending ? (
               <div className="flex items-center justify-center h-full">
-                <Spinner text="Loading zones..." />
+                <Spinner
+                  text="Loading zones..."
+                  textClasses="text-foreground"
+                />
               </div>
             ) : zonesQuery.isError ? (
               <div className="flex items-center justify-center h-full">
@@ -117,7 +120,10 @@ export default function FileSelectorButton({
             ) : state.currentLocation.type === 'filesystem' &&
               fileQuery.isPending ? (
               <div className="flex items-center justify-center h-full">
-                <Spinner text="Loading files..." />
+                <Spinner
+                  text="Loading files..."
+                  textClasses="text-foreground"
+                />
               </div>
             ) : state.currentLocation.type === 'filesystem' &&
               fileQuery.isError ? (
diff --git a/frontend/src/components/ui/Dialogs/ConvertFile.tsx b/frontend/src/components/ui/Dialogs/ConvertFile.tsx
index 853a5afd..c6e2072e 100644
--- a/frontend/src/components/ui/Dialogs/ConvertFile.tsx
+++ b/frontend/src/components/ui/Dialogs/ConvertFile.tsx
@@ -103,7 +103,7 @@ export default function ConvertFileDialog({
           <div className="flex gap-2 items-center">
             <input
               autoFocus
-              className="flex-1 p-2 text-foreground text-lg border border-primary-light rounded-sm focus:outline-none focus:border-primary bg-background disabled:cursor-not-allowed disabled:opacity-50"
+              className="flex-1 p-2 text-foreground dark:placeholder:text-surface-light text-lg border border-primary-light rounded-sm focus:outline-none focus:border-primary bg-background disabled:cursor-not-allowed disabled:opacity-50"
               disabled={!tasksEnabled}
               id="destination_folder"
               onChange={(event: ChangeEvent<HTMLInputElement>) => {
@@ -143,7 +143,7 @@ export default function ConvertFileDialog({
             Output File or Folder Name
           </Typography>
           <input
-            className="p-2 text-foreground text-lg border border-primary-light rounded-sm focus:outline-none focus:border-primary bg-background disabled:cursor-not-allowed disabled:opacity-50"
+            className="p-2 text-foreground dark:placeholder:text-surface-light text-lg border border-primary-light rounded-sm focus:outline-none focus:border-primary bg-background disabled:cursor-not-allowed disabled:opacity-50"
             disabled={!tasksEnabled}
             id="output_filename"
             onChange={(event: ChangeEvent<HTMLInputElement>) => {
@@ -178,7 +178,11 @@ export default function ConvertFileDialog({
           type="submit"
         >
           {createTicketMutation.isPending || allTicketsQuery.isFetching ? (
-            <Spinner customClasses="border-white" text="Processing..." />
+            <Spinner
+              customClasses="border-white"
+              text="Processing..."
+              textClasses="text-white"
+            />
           ) : (
             'Submit'
           )}
diff --git a/frontend/src/components/ui/widgets/Loaders.tsx b/frontend/src/components/ui/widgets/Loaders.tsx
index d115eba2..8f22f1af 100644
--- a/frontend/src/components/ui/widgets/Loaders.tsx
+++ b/frontend/src/components/ui/widgets/Loaders.tsx
@@ -2,10 +2,12 @@ import { Typography } from '@material-tailwind/react';
 
 function Spinner({
   customClasses,
-  text
+  text,
+  textClasses
 }: {
   readonly customClasses?: string;
   readonly text?: string;
+  readonly textClasses?: string;
 }) {
   return (
     <div className="flex items-center gap-2">
@@ -13,7 +15,7 @@ function Spinner({
         className={`w-5 h-5 border-4 border-surface-foreground border-t-transparent rounded-full animate-spin ${customClasses}`}
         title="Loading spinner"
       />
-      <Typography className="text-foreground">{text}</Typography>
+      <Typography className={textClasses}>{text}</Typography>
     </div>
   );
 }