Merge pull request #272 from JaneliaSciComp/fix-dark-styles-in-file-selector

fix: dark styles in file selector and convert file dialog

Author: allison-truhlar

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}

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 ? (

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() }}
                     >

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'
           )}

frontend/src/components/ui/widgets/Loaders.tsx

@@ -2,18 +2,20 @@ 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">
       <div
         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={textClasses}>{text}</Typography>
     </div>
   );
 }