style darkmode : table,general,content,import,query,queue,peers

Pixilib · Nov 25, 2024 · 6684253 · 6684253
1 parent 2ed4b8b
commit 6684253
Show file tree

Hide file tree

Showing 40 changed files with 141 additions and 160 deletions.
diff --git a/src/admin/general/General.tsx b/src/admin/general/General.tsx
@@ -22,7 +22,7 @@ const General = () => {
 
   return (
     <div
-      className="mx-4 mt-4 mb-4 shadow-md bg-almond dark:bg-neutral-500 rounded-xl"
+      className="mx-4 mt-4 mb-4 shadow-md bg-almond dark:bg-gray-500 rounded-xl"
       data-gaelo-flow="general-root"
     >
       <Tabs className="bg-primary rounded-t-xl">

diff --git a/src/admin/general/OrthancCard.tsx b/src/admin/general/OrthancCard.tsx
@@ -125,7 +125,7 @@ const OrthancSettingsCard = ({ orthancData }: OrthancCardProps) => {
                     headerColor={Colors.white}
                     headerclassName='text-center'
                 />            </div>
-            <CardFooter className="flex justify-center gap-3 py-2 border-t-2 shadow-inner border-slate-200 bg-light dark:bg-slate-950">
+            <CardFooter className="flex justify-center gap-3 py-2 border-t-2 shadow-inner border-slate-200 dark:border-neutral-700 bg-light dark:bg-slate-950">
                 <Button
                     color={Colors.warning}
                     onClick={reset}

diff --git a/src/admin/jobs/JobTable.tsx b/src/admin/jobs/JobTable.tsx
@@ -79,10 +79,10 @@ const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
       columns={columns}
       headerColor={Colors.white}
       headerTextSize="sm"
-      className="bg-gray-100"
+      className="bg-gray-100 dark:bg-slate-950 dark:text-white"
       enableColumnFilters
       enableSorting
-      getRowClasses={() => "hover:bg-indigo-100 cursor-pointer"}
+      getRowClasses={() => "hover:bg-indigo-100 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-700 hover:cursor-pointer"}
     />
   );
 };

diff --git a/src/admin/labels/LabelTable.tsx b/src/admin/labels/LabelTable.tsx
@@ -70,9 +70,11 @@ const LabelsTable: React.FC<LabelsTableProps> = ({
       data={rows}
       headerColor={Colors.white}
       headerTextSize="xs"
-      className="bg-gray-100"
+      className="bg-gray-100 dark:bg-slate-950 dark:text-white"
       enableColumnFilters
       enableSorting
+      getRowClasses={() => "hover:bg-indigo-100 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-700 hover:cursor-pointer"}
+
     />
   );
 };

diff --git a/src/admin/modalities/ModalitiesRoot.tsx b/src/admin/modalities/ModalitiesRoot.tsx
@@ -83,7 +83,7 @@ const ModalitiesRoot: React.FC = () => {
         color={Colors.primary}
         title={"Manage Modalities"}
       />
-      <CardBody color={Colors.almond} className="space-x-2 dark:bg-neutral-500">
+      <CardBody color={Colors.almond} className="space-x-2 dark:bg-gray-500">
         <div className="w-full mt-2 mb-2">
           <ModalitiesTable
             aetData={aets}

diff --git a/src/admin/modalities/ModalitiesTable.tsx b/src/admin/modalities/ModalitiesTable.tsx
@@ -58,16 +58,15 @@ const ModalitiesTable: React.FC<ModalitiesTableProps> = ({
   ];
 
   const getRowClasses = () => {
-    return "hover:bg-indigo-100 hover:cursor-pointer";
-  };
+    return "hover:bg-indigo-100 dark:hover:bg-indigo-700 hover:cursor-pointer";  };
 
   return (
     <Table
       columns={columns}
       data={aetData}
       headerColor={Colors.white}
       headerTextSize="xs"
-      className="bg-gray-100"
+      className="bg-gray-100 dark:bg-slate-950 dark:text-white"
       enableColumnFilters
       enableSorting
       getRowClasses={getRowClasses}

diff --git a/src/admin/modalities/NewModalityCard.tsx b/src/admin/modalities/NewModalityCard.tsx
@@ -83,7 +83,7 @@ const NewModalityCard: React.FC<NewModalityCardProps> = ({
 
   return (
     <FormCard
-    className="w-full bg-light-gray dark:bg-neutral-500"
+    className="w-full bg-light-gray dark:bg-gray-500"
     title="Create New Modality"
     onClose={onClose}
     onSubmit={handleSubmit}

diff --git a/src/admin/peers/NewPeerCard.tsx b/src/admin/peers/NewPeerCard.tsx
@@ -23,7 +23,7 @@ const NewPeerCard: React.FC<NewPeerCardProps> = ({ onClose, onCreatePeer }) => {
 
     return (
         <FormCard
-            className="w-full bg-light-gray dark:bg-neutral-500"
+            className="w-full bg-light-gray dark:bg-gray-500"
             title="Create New Peer"
             onClose={onClose}
             onSubmit={handleSubmit}

diff --git a/src/admin/peers/PeersRoot.tsx b/src/admin/peers/PeersRoot.tsx
@@ -68,7 +68,7 @@ const PeersRoot: React.FC = () => {
         color={Colors.primary}
         title={"Manage Peers"}
       />
-      <CardBody className="space-x-4 bg-almond dark:bg-neutral-500">
+      <CardBody className="space-x-4 bg-almond dark:bg-gray-500">
         <div className="flex flex-col items-center">
           <div className="w-full mt-2 mb-2">
             <PeersTable

diff --git a/src/admin/queues/QueuesRoot.tsx b/src/admin/queues/QueuesRoot.tsx
@@ -44,7 +44,7 @@ const QueuesRoot = () => {
         roundedTopRight={false}
         roundedBottomLeft
         roundedBottomRight
-        className="dark:bg-neutral-500"
+        className="dark:bg-gray-500"
       >
         <Routes>
           <Route

diff --git a/src/admin/queues/Retrieve.tsx b/src/admin/queues/Retrieve.tsx
@@ -98,8 +98,11 @@ const Retrieve = ({ data }: RetrieveProps) => {
       className="w-full rounded-br-xl rounded-bl-xl"
     >
       <Card bordered>
-        <CardHeader centerTitle title="Retrieve Schedule Time : " color={Colors.success} />
-        <CardBody color={Colors.light} roundedBottomLeft roundedBottomRight>
+        <CardHeader centerTitle 
+        title="Retrieve Schedule Time : " color={Colors.success} />
+        <CardBody 
+        color={Colors.light} roundedBottomLeft roundedBottomRight
+        className="dark:bg-neutral-800 dark:text-white">
           <div className="flex flex-col items-center justify-between gap-4 mt-1 sm:flex-row sm:gap-12">
             <Input
               type="time"

diff --git a/src/admin/users/user/UsersTable.tsx b/src/admin/users/user/UsersTable.tsx
@@ -51,11 +51,11 @@ const UsersTable = ({ data = [], onEdit, onDelete }: UsersProps) => {
         columns={columns}
         headerColor={Colors.white}
         headerTextSize="xs"
-        className="bg-gray-100"
+        className="bg-gray-100 dark:bg-slate-950 dark:text-white"
         enableColumnFilters
         enableSorting
-        getRowClasses={() => "hover:bg-blue-100 cursor-pointer"}
-      />
+        getRowClasses={() => "hover:bg-indigo-100 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-700 hover:cursor-pointer"}
+        />
     </div>
   );
 };

diff --git a/src/anonymize/AnonymizeRoot.tsx b/src/anonymize/AnonymizeRoot.tsx
@@ -89,7 +89,8 @@ const AnonymizeRoot = () => {
 
     return (
         <>
-            <CardHeader color={Colors.primary}>
+            <CardHeader 
+            color={Colors.primary}>
                 <div className="flex flex-col items-center w-full sm:flex-row">
                     <div className="w-full mb-2 text-lg font-bold text-center sm:w-4/5 sm:mb-0">
                         Anonymize resources
@@ -99,8 +100,8 @@ const AnonymizeRoot = () => {
                             options={[]}
                             buttonText={
                                 <div className="flex items-center justify-center">
-                                    <AutoFill className="text-2xl text-primary" />
-                                    <span className="ml-2">Auto Fill</span>
+                                    <AutoFill className="text-2xl text-primary group-hover:text-white dark:text-white" />
+                                    <span className="ml-2 dark:text-white">Auto Fill</span>
                                 </div>
                             }
                             className="mr-4"
@@ -111,15 +112,17 @@ const AnonymizeRoot = () => {
                         <Button
                             onClick={() => dispatch(flushAnonymizeList())}
                             color={Colors.light}
-                            className="rounded-lg hover:bg-secondary"
+                            className="rounded-lg hover:bg-secondary dark:bg-slate-700"
                             aria-label="Clear all anonymized data"
                         >
-                            <Empty className="text-xl text-primary" />
+                            <Empty className="text-xl text-primary dark:text-white" />
                         </Button>
                     </div>
                 </div>
             </CardHeader>
-            <CardBody color={Colors.almond}>
+            <CardBody 
+            color={Colors.almond}
+            className="dark:bg-gray-500">
                 <div className="flex flex-col w-full gap-4">
                     <div className="flex-1 overflow-auto break-words">
                         <PatientTable
@@ -138,7 +141,7 @@ const AnonymizeRoot = () => {
                     </div>
                 </div>
             </CardBody>
-            <CardFooter color={Colors.light} className="flex flex-col items-center gap-3 border-t-2 shadow-inner border-slate-200 bg-light">
+            <CardFooter color={Colors.light} className="flex flex-col items-center gap-3 border-t-2 shadow-inner border-slate-200 dark:border-slate-700 bg-light dark:bg-slate-950">
                 <div className="flex flex-col gap-3 mt-2 mb-2 sm:flex-row">
                     <Button
                         className="flex items-center w-full h-10 gap-2 sm:w-auto"

diff --git a/src/anonymize/PatientTable.tsx b/src/anonymize/PatientTable.tsx
@@ -8,7 +8,7 @@ import { Trash } from "../icons";
 type PatientTableProps = {
     patients: AnonPatient[];
     selectedRows?: Record<string, boolean>;
-    onClickRow: (patientId :string) => void;
+    onClickRow: (patientId: string) => void;
     onRemovePatient: (patientId: string) => void;
     onChangePatient: (patientId: string | number, columnId: any, value: any) => void;
     onRowSelectionChange?: (selectedRow: Record<string, boolean>) => void;
@@ -22,7 +22,7 @@ const PatientTable = ({
     onChangePatient,
     onRowSelectionChange,
 }: PatientTableProps) => {
-    
+
     const columns: ColumnDef<AnonPatient>[] = [
         {
             id: "id",
@@ -64,7 +64,7 @@ const PatientTable = ({
         if (selectedRows?.[row.originalPatient.id]) {
             return 'bg-primary hover:cursor-pointer';
         } else {
-            return 'hover:bg-indigo-100 hover:cursor-pointer';
+            return 'hover:bg-indigo-100 hover:cursor-pointer dark:hover:bg-indigo-700';
         }
     };
 
@@ -74,7 +74,7 @@ const PatientTable = ({
             columns={columns}
             data={patients}
             headerTextSize="xs"
-            className="text-sm break-words bg-gray-100"
+            className="text-sm break-words bg-gray-100 dark:bg-slate-950 dark:text-white"
             columnVisibility={{ id: false }}
             onRowClick={(row) => onClickRow(row.originalPatient.id)}
             onCellEdit={onChangePatient}

diff --git a/src/anonymize/StudyTable.tsx b/src/anonymize/StudyTable.tsx
@@ -50,7 +50,7 @@ const StudyTable = ({ studies, onChangeStudy, onRemoveStudy, selectedRows }: Stu
         if (selectedRows?.[row.originalStudy.id]) {
             return 'bg-primary hover:cursor-pointer';
         } else {
-            return 'hover:bg-indigo-100 hover:cursor-pointer';
+            return 'hover:bg-indigo-100 hover:cursor-pointer dark:hover:bg-indigo-700';
         }
     };
 
@@ -60,7 +60,7 @@ const StudyTable = ({ studies, onChangeStudy, onRemoveStudy, selectedRows }: Stu
             data={studies}
             columnVisibility={{ id: false }}
             headerTextSize="xs"
-            className="text-xs bg-gray-100"
+            className="text-xs bg-gray-100 dark:bg-slate-950 dark:text-white"
             onCellEdit={onChangeStudy}
             getRowId={(row) => row.originalStudy.id}
             getRowClasses={getRowClasses}

diff --git a/src/content/ContentRoot.tsx b/src/content/ContentRoot.tsx
@@ -152,14 +152,14 @@ const ContentRoot: React.FC = () => {
                 onClose={closeEditModal}
                 show={!!editingPatient}
             />
-            <FormCard className="bg-white dark:bg-neutral-500" title="Search" collapsible>
+            <FormCard className="bg-white dark:bg-gray-500" title="Search" collapsible>
                 <SearchForm onSubmit={handleSubmit} existingLabels={labelsData} withAets={false} />
             </FormCard>
 
-            <div className="flex flex-col w-full p-4 bg-white shadow-md dark:bg-neutral-500 rounded-3xl">
+            <div className="flex flex-col w-full p-4 bg-white shadow-md dark:bg-neutral-800 rounded-3xl">
                 <div className="flex items-center justify-between mb-4">
                     <div className="text-2xl font-bold text-primary dark:text-white">Results</div>
-                    <div className="text-lg text-gray-600">
+                    <div className="text-lg text-gray-600 dark:text-white">
                         {patients.length} {patients.length === 1 ? "patient" : "patients"} found
                     </div>
                 </div>
@@ -169,7 +169,7 @@ const ContentRoot: React.FC = () => {
                 <div className="flex flex-wrap gap-2 mb-4">
                     <Button
                         color={Colors.blueCustom}
-                        className="flex items-center text-sm transition-transform duration-200 bg-blue-700 hover:scale-105"
+                        className="flex items-center text-sm transition-transform duration-200 hover:scale-105"
                         onClick={handleSendAnonymizeList}
                     >
                         <Anon className="text-xl" />

diff --git a/src/content/patients/AccordionPatient.tsx b/src/content/patients/AccordionPatient.tsx
@@ -76,7 +76,7 @@ const AccordionPatient = ({
                         checked={selectedPatient}
                     />
                     <div className="grid items-center justify-between w-full grid-cols-4 ml-5 lg:gap-x-10 ">
-                        <span className="text-sm font-medium text-gray-600 group-hover:text-white">
+                        <span className="text-sm font-medium text-gray-600 group-hover:text-white dark:text-white">
                             Patient ID: {patient.patientId}
                         </span>
                         <span className="text-sm font-medium group-hover:text-white ">

diff --git a/src/content/series/SeriesTable.tsx b/src/content/series/SeriesTable.tsx
@@ -53,7 +53,7 @@ const SeriesTable: React.FC<SeriesTableProps> = ({
         if (selectedRows?.[row.id]) {
             return 'bg-primary hover:cursor-pointer';
         } else {
-            return 'hover:bg-indigo-100 hover:cursor-pointer';
+            return 'hover:bg-indigo-100 hover:cursor-pointer dark:hover:bg-indigo-700';
         }
     };
 
@@ -63,7 +63,7 @@ const SeriesTable: React.FC<SeriesTableProps> = ({
             data={rows ?? []}
             headerColor={Colors.light}
             headerTextSize="xs"
-            className="text-xs"
+            className="text-xs bg-gray-100 dark:bg-slate-950 dark:text-white"
             getRowClasses={getRowClasses}
             onRowClick={(row) => onRowClick && onRowClick(row.id)}
         />

diff --git a/src/content/studies/StudyTable.tsx b/src/content/studies/StudyTable.tsx
@@ -46,9 +46,9 @@ const StudyTable: React.FC<StudyTableProps> = ({
 
     const getRowClasses = (row: StudyWithId) => {
         if (selectedRows?.[row.id]) {
-            return 'bg-indigo-200 hover:cursor-pointer';
+            return 'bg-primary hover:cursor-pointer';
         } else {
-            return 'hover:bg-indigo-100 hover:cursor-pointer';
+            return 'hover:bg-indigo-100 hover:cursor-pointer dark:hover:bg-indigo-700';
         }
     };
 
@@ -58,7 +58,7 @@ const StudyTable: React.FC<StudyTableProps> = ({
             data={studies}
             headerColor={Colors.light}
             headerTextSize="xs"
-            className="text-xs"
+            className="bg-gray-100 dark:bg-slate-950 dark:text-white"
             getRowClasses={getRowClasses}
             onRowClick={(row) => onRowClick && onRowClick(row.id)}
             enableSorting={true}

diff --git a/src/datasets/DatasetRoot.tsx b/src/datasets/DatasetRoot.tsx
@@ -86,7 +86,7 @@ const DatasetRoot = () => {
                 color={Colors.primary}
                 title="Dataset"
             />
-            <CardBody className="bg-almond dark:bg-neutral-500">
+            <CardBody className="bg-almond dark:bg-gray-500">
                 <div className="space-y-2">
                     <span className="text-base font-semibold text-gray-700 dark:text-white">Labels</span>
                     <SelectRoleLabels values={selectedLabels} onChange={(labels) => setSelectedLabels(labels)} />

diff --git a/src/delete/DeleteRoot.tsx b/src/delete/DeleteRoot.tsx
@@ -48,18 +48,22 @@ const DeleteRoot = () => {
                         <Button
                             onClick={handleClearList}
                             color={Colors.light}
-                            className="rounded-lg hover:bg-secondary group"
+                            className="rounded-lg hover:bg-secondary dark:bg-slate-700"
                         >
-                            <Empty className="text-xl text-bold text-primary group-hover:text-white" />
+                            <Empty className="text-xl text-bold text-primary dark:text-white group-hover:text-white" />
                         </Button>
                     </div>
                 </div>
             </CardHeader>
-            <CardBody color={Colors.almond}>
+            <CardBody 
+            color={Colors.almond}
+            className="dark:bg-gray-500">
                 <DeleteStudyTable
                     studies={Object.values(deleteList)} />
             </CardBody>
-            <CardFooter color={Colors.light}>
+            <CardFooter 
+            color={Colors.light}
+            className="dark:bg-slate-950">
                 <div className="flex items-center justify-center gap-3">
                     <div>
                         <Button