From da9975253643e1c44116869c62f9967a8d14559a Mon Sep 17 00:00:00 2001
From: Sophie Labyt <labytsophie@gmail.com>
Date: Thu, 10 Oct 2024 15:30:10 +0200
Subject: [PATCH] style components

---
 src/admin/users/oauth/OauthTable.tsx |  2 +-
 src/admin/users/roles/Roles.tsx      | 30 +++++++++++++---------------
 src/content/ContentRoot.tsx          |  2 +-
 src/import/create/CreateRoot.tsx     | 15 +++++++-------
 src/import/create/TagTable.tsx       |  6 ++++--
 src/query/QueryRoot.tsx              | 16 ++++++++-------
 src/query/ResultsTable.tsx           | 24 ++++++++++++++++------
 src/query/SeriesTable.tsx            |  2 +-
 8 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/src/admin/users/oauth/OauthTable.tsx b/src/admin/users/oauth/OauthTable.tsx
index 455b81e7..d67ab361 100644
--- a/src/admin/users/oauth/OauthTable.tsx
+++ b/src/admin/users/oauth/OauthTable.tsx
@@ -41,7 +41,7 @@ const OauthTable = ({ data = [], onDelete }: Oauth2TableProps) => {
         }
     ]
     return (
-        <div className="pb-6 mx-5 mt-4">
+        <div className="pb-6 mx-5">
             <Table
                 data={data}
                 columns={columns}
diff --git a/src/admin/users/roles/Roles.tsx b/src/admin/users/roles/Roles.tsx
index 4e908fe2..e0960b75 100644
--- a/src/admin/users/roles/Roles.tsx
+++ b/src/admin/users/roles/Roles.tsx
@@ -11,7 +11,7 @@ const Roles = () => {
     const { toastSuccess, toastError } = useCustomToast();
     const { confirm } = useConfirm();
 
-    const [showRoleForm, setShowRoleForm] = useState<'create' | 'edit' | null>(null);
+    const [showCreateRoleForm, setShowCreateRoleForm] = useState(false);
     const [roleToEdit, setRoleToEdit] = useState<Role | null>(null);
 
     const { data: roles, isPending: isLoadingRoles } = useCustomQuery<Role[]>(
@@ -43,7 +43,6 @@ const Roles = () => {
     const handleEditRole = (roleName: string) => {
         const role = findRole(roleName);
         setRoleToEdit(role);
-        setShowRoleForm('edit');
     };
 
     const deleteRoleHandler = async (roleName: string) => {
@@ -68,32 +67,31 @@ const Roles = () => {
                 onDelete={deleteRoleHandler}
             />
 
-            {showRoleForm === 'edit' && (
+            {roleToEdit && (
                 <EditRole
                     key={roleToEdit?.name}
                     title={"Edit Role"}
-                    className="bg-gray-200"
-                    onClose={() => { setShowRoleForm(null); setRoleToEdit(null); }}
+                    className="px-4 mb-4 bg-gray-200"                    onClose={() => setRoleToEdit(null)}
                     role={roleToEdit || undefined}
                 />
             )}
 
-            <CardFooter className="p-0 border-t rounded-b-lg bg-light">
-                <div className="flex justify-center w-full">
-                    {!showRoleForm ? (
+<CardFooter className="p-0 mt-4 border-t rounded-b-lg bg-light"> {/* Added mt-4 for extra spacing */}                <div className="flex justify-center w-full">
+                    {showCreateRoleForm && (
+                        <CreateRole
+                            title={"Create Role"}
+                            className="w-full p-4"
+                            onClose={() => setShowCreateRoleForm(false)}
+                        />
+                    )}
+                    {!showCreateRoleForm && (
                         <Button
                             color={Colors.success}
-                            onClick={() => setShowRoleForm('create')}
+                            onClick={() => setShowCreateRoleForm(true)}
                             className="flex justify-center gap-4 mt-4 mb-4 w-52 hover:successHover"
                         >
                             Create Role
                         </Button>
-                    ) : (
-                        <CreateRole
-                            title={"Create Role"}
-                            className="w-full p-4"
-                            onClose={() => setShowRoleForm(null)}
-                        />
                     )}
                 </div>
             </CardFooter>
@@ -101,4 +99,4 @@ const Roles = () => {
     );
 };
 
-export default Roles;
+export default Roles;
\ No newline at end of file
diff --git a/src/content/ContentRoot.tsx b/src/content/ContentRoot.tsx
index c3385de8..b9b8673c 100644
--- a/src/content/ContentRoot.tsx
+++ b/src/content/ContentRoot.tsx
@@ -164,7 +164,7 @@ const ContentRoot: React.FC = () => {
 
                 <div className="flex flex-wrap gap-2 mb-4">
                     <Button
-                        color={Colors.primary}
+                        color={Colors.blueCustom}
                         className="flex items-center text-sm transition-transform duration-200 bg-blue-700 hover:scale-105"
                         onClick={handleSendAnonymizeList}
                     >
diff --git a/src/import/create/CreateRoot.tsx b/src/import/create/CreateRoot.tsx
index 8081609d..9817ee06 100644
--- a/src/import/create/CreateRoot.tsx
+++ b/src/import/create/CreateRoot.tsx
@@ -61,21 +61,22 @@ const CreateRoot: React.FC = () => {
 
     return (
         <>
-            <div className="w-full space-y-3 md:flex md:space-x-3 p-6">
+            <div className="w-full p-6 space-y-3 md:flex md:space-x-3">
                 <CreateDrop files={files} onDrop={handleFilesUploaded} />
             </div>
 
-            <div className="flex flex-col justify-center border-indigo-100 shadow-inner p-3 bg-light">
+            <div className="flex flex-col justify-center p-3 border-indigo-100 shadow-inner bg-light">
+            <CreateForm
+                    title="Define DICOM Tags"
+                    onAddTag={handleAddTag}
+                />
                 <TagTable
                     data={tags}
                     onDeleteTag={handleTagDelete}
                 />
-                <CreateForm
-                    title="Define DICOM Tags"
-                    onAddTag={handleAddTag}
-                />
+                
             </div>
-            <div className="flex bg-white justify-center p-3">
+            <div className="flex justify-center p-3 bg-white">
                 <Button
                     color={tags.length > 0 ? Colors.primary : Colors.almond}
                     onClick={handleCreateDicoms}
diff --git a/src/import/create/TagTable.tsx b/src/import/create/TagTable.tsx
index 6a819f9c..f6f1ed86 100644
--- a/src/import/create/TagTable.tsx
+++ b/src/import/create/TagTable.tsx
@@ -23,7 +23,7 @@ const TagTable: React.FC<TagTableProps> = ({ data, onDeleteTag }) => {
             id: 'delete',
             header: 'Actions',
             cell: ({ row }) => (
-                <div className='w-full flex justify-center'>
+                <div className='flex justify-center w-full'>
                     <DeleteButton
                         onClick={() => onDeleteTag(row.original.name)}
                     />
@@ -36,11 +36,13 @@ const TagTable: React.FC<TagTableProps> = ({ data, onDeleteTag }) => {
     return (
         <div className="w-full mt-4">
             <Table
-                headerColor={Colors.warning}
+                headerColor={Colors.light}
                 columns={columns}
                 data={data}
                 className="bg-gray-100"
                 enableSorting
+            
+            
             />
         </div>
     );
diff --git a/src/query/QueryRoot.tsx b/src/query/QueryRoot.tsx
index d6543a10..6f5ca362 100644
--- a/src/query/QueryRoot.tsx
+++ b/src/query/QueryRoot.tsx
@@ -89,7 +89,7 @@ const QueryRoot = ({ className }: QueryFormProps) => {
         />
       </FormCard>
 
-      {/* Section for results */}
+      {/* Section for results and series tables */}
       <div className="flex flex-col w-full p-4 bg-white shadow-md rounded-3xl">
         <div className="flex items-center justify-between mb-4">
           <div className="text-2xl font-bold text-primary">Results</div>
@@ -97,13 +97,15 @@ const QueryRoot = ({ className }: QueryFormProps) => {
             {studies.length} {studies.length === 1 ? "study" : "studies"} found
           </div>
         </div>
-
-      </div>
-      <div className="2xl:col-span-7">
-        <ResultsTable results={studies} onRowClick={handleRowClick} />
       </div>
-      <div className="2xl:col-span-5">
-        <SeriesTable series={series} />
+
+      <div className="grid grid-cols-1 gap-4 2xl:grid-cols-2">
+        <div className="2xl:col-span-1">
+          <ResultsTable results={studies} onRowClick={handleRowClick} />
+        </div>
+        <div className="2xl:col-span-1">
+          <SeriesTable series={series} />
+        </div>
       </div>
     </div>
   );
diff --git a/src/query/ResultsTable.tsx b/src/query/ResultsTable.tsx
index 5ee1d3fe..869d67bd 100644
--- a/src/query/ResultsTable.tsx
+++ b/src/query/ResultsTable.tsx
@@ -3,7 +3,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { QueryResponse } from "../utils/types";
 import { Colors } from "../utils";
 import RetrieveButton from './RetrieveButton';
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 type ResultsTableProps = {
     results: QueryResponse[] | null;
@@ -11,6 +11,7 @@ type ResultsTableProps = {
 };
 
 const ResultsTable = ({ results, onRowClick }: ResultsTableProps) => {
+    const [selectedRows, setSelectedRows] = useState<Record<string, boolean>>({});
     const rows = useMemo(() => results, [results]);
     
     const columns: ColumnDef<QueryResponse>[] = useMemo(() => [
@@ -38,9 +39,7 @@ const ResultsTable = ({ results, onRowClick }: ResultsTableProps) => {
             header: "Retrieve",
             cell: ({ row }: { row: any }) => {
                 return (
-                    <div
-                        className="flex justify-center"
-                    >
+                    <div className="flex justify-center">
                         <RetrieveButton
                             answerId={row.original.answerId}
                             answerNumber={row.original.answerNumber}
@@ -50,16 +49,29 @@ const ResultsTable = ({ results, onRowClick }: ResultsTableProps) => {
             }
         },
     ], []);
-    
-    const handleRowClick = (row: any) => {
+
+    const handleRowClick = (row: QueryResponse) => {
         onRowClick(row.studyInstanceUID, row.originAET);
+        setSelectedRows(prev => ({
+            ...prev,
+            [row.studyInstanceUID]: !prev[row.studyInstanceUID] // Toggle selection
+        }));
     };
+
+    const getRowClasses = (row: QueryResponse) => {
+        if (selectedRows[row.studyInstanceUID]) {
+            return 'bg-primary hover:cursor-pointer';
+        }
+        return 'hover:bg-indigo-100 hover:cursor-pointer';
+    };
+
     return (
         <Table
             columns={columns}
             data={rows ?? []}
             enableColumnFilters={true}
             onRowClick={handleRowClick}
+            getRowClasses={getRowClasses}
             headerTextSize="xs"
             headerColor={Colors.white} 
             className="bg-gray-100"
diff --git a/src/query/SeriesTable.tsx b/src/query/SeriesTable.tsx
index 8fd9ce75..649a76e7 100644
--- a/src/query/SeriesTable.tsx
+++ b/src/query/SeriesTable.tsx
@@ -46,7 +46,7 @@ const SeriesTable = ({ series }: SeriesTableProps) => {
             columns={columns}
             data={rows ?? []}
             headerTextSize="xs"
-            headerColor={Colors.almond} 
+            headerColor={Colors.light} 
             className="text-xs bg-gray-100"