darkmode: style : svg login, login, anon,dataset,datasets, dashboard …

…and selecinput
Pixilib · Nov 26, 2024 · 2a53999 · 2a53999
1 parent 6684253
commit 2a53999
Show file tree

Hide file tree

Showing 30 changed files with 943 additions and 310 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-gray-500 rounded-xl"
+      className="mx-4 mt-4 mb-4 shadow-md bg-almond 292929 rounded-xl"
       data-gaelo-flow="general-root"
     >
       <Tabs className="bg-primary rounded-t-xl">

diff --git a/src/admin/jobs/JobTable.tsx b/src/admin/jobs/JobTable.tsx
@@ -61,11 +61,11 @@ const JobTable = ({ data = [], onJobAction }: JobTableProps) => {
           <Popover 
             popover={infoDetails(info.row.original)} 
             placement="left" 
-            className="w-auto"
+            className="w-auto "
             withOnClick={true}
-            backgroundColor="bg-white"
+            backgroundColor="bg-white "
           >
-            <Info size="1.5em" color="gray" className="hover:scale-110" />
+            <Info size="1.5em"  className="hover:scale-110 " />
           </Popover>
         );
       },

diff --git a/src/admin/labels/LabelInputForm.tsx b/src/admin/labels/LabelInputForm.tsx
@@ -25,7 +25,7 @@ const LabelInputForm = function ({ onCreateLabel }: LabelInputFormProps) {
   return (
     <div className="relative flex items-center">
       <Input
-        svgLeft={<Label className="text-2xl text-gray-400" />}
+        svgLeft={<Label className="text-2xl text-gray-400 dark:text-white" />}
         type="text"
         value={label ?? ""}
         onChange={handleInputChange}

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-gray-500">
+      <CardBody color={Colors.almond} className="space-x-2 dark:bg-neutral-500">
         <div className="w-full mt-2 mb-2">
           <ModalitiesTable
             aetData={aets}

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-gray-500"
+    className="w-full bg-light-gray dark:bg-neutral-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-gray-500"
+            className="w-full bg-light-gray dark:bg-neutral-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-gray-500">
+      <CardBody className="space-x-4 bg-almond dark:bg-neutral-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-gray-500"
+        className="dark:bg-neutral-500"
       >
         <Routes>
           <Route

diff --git a/src/anonymize/AnonymizeRoot.tsx b/src/anonymize/AnonymizeRoot.tsx
@@ -122,7 +122,7 @@ const AnonymizeRoot = () => {
             </CardHeader>
             <CardBody 
             color={Colors.almond}
-            className="dark:bg-gray-500">
+            className="dark:bg-neutral-500">
                 <div className="flex flex-col w-full gap-4">
                     <div className="flex-1 overflow-auto break-words">
                         <PatientTable

diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -30,6 +30,8 @@ import Settings from "./settings.svg?react";
 import Shutdown from "./shutdown.svg?react";
 import SignIn from "./sign-in.svg?react";
 import SignUp from "./sign-up.svg?react";
+import SignInUpDark from "./sign-up-dark.svg?react";
+import signIndark from "./sign-in-dark.svg?react";
 import Sun from "./sun.svg?react";
 import UserBanner from "./user-banner.svg?react";
 import User from "./user.svg?react";
@@ -71,6 +73,8 @@ export {
     Shutdown,
     SignIn,
     SignUp,
+    SignInUpDark,
+    signIndark,
     Sun,
     UserBanner,
     User,

diff --git a/src/assets/sign-in-dark.svg b/src/assets/sign-in-dark.svg
diff --git a/src/assets/sign-up-dark.svg b/src/assets/sign-up-dark.svg
diff --git a/src/assets/sign-up.svg b/src/assets/sign-up.svg
diff --git a/src/content/ContentRoot.tsx b/src/content/ContentRoot.tsx
@@ -152,7 +152,7 @@ const ContentRoot: React.FC = () => {
                 onClose={closeEditModal}
                 show={!!editingPatient}
             />
-            <FormCard className="bg-white dark:bg-gray-500" title="Search" collapsible>
+            <FormCard className="bg-white dark:bg-neutral-500" title="Search" collapsible>
                 <SearchForm onSubmit={handleSubmit} existingLabels={labelsData} withAets={false} />
             </FormCard>
 

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-gray-500">
+            <CardBody className="bg-almond dark:bg-neutral-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
@@ -57,7 +57,7 @@ const DeleteRoot = () => {
             </CardHeader>
             <CardBody 
             color={Colors.almond}
-            className="dark:bg-gray-500">
+            className="dark:bg-neutral-500">
                 <DeleteStudyTable
                     studies={Object.values(deleteList)} />
             </CardBody>

diff --git a/src/export/ExportRoot.tsx b/src/export/ExportRoot.tsx
@@ -168,7 +168,7 @@ const ExportRoot = () => {
             </CardHeader>
             <CardBody
                 color={Colors.almond}
-                className="overflow-x-auto dark:bg-gray-500">
+                className="overflow-x-auto dark:bg-neutral-500">
                 <div className="flex flex-col md:flex-row md:space-x-4">
                     <div className="flex-1 min-w-0">
                         <ExportStudyTable

diff --git a/src/icons/Info.tsx b/src/icons/Info.tsx
@@ -2,8 +2,11 @@ import { BsInfoCircle } from "react-icons/bs";
 
 const Info = (props) => {
     return (
-        <BsInfoCircle {...props} />
-    )
+        <BsInfoCircle 
+            {...props} 
+            className="text-white dark:text-white"
+        />
+    );
 }
 
-export default Info
+export default Info;
diff --git a/src/import/ImportCreateRoot.tsx b/src/import/ImportCreateRoot.tsx
@@ -13,7 +13,7 @@ const ImportCreateRoot = () => {
     };
 
     return (
-        <div className="shadow-md bg-almond dark:bg-gray-500 rounded-xl" data-gaelo-flow="import-create-root">
+        <div className="shadow-md bg-almond dark:bg-neutral-500 rounded-xl" data-gaelo-flow="import-create-root">
             <Tabs className="bg-primary rounded-t-xl">
                 <Tab
                     title="Import Dicom"

diff --git a/src/import/create/CreateForm.tsx b/src/import/create/CreateForm.tsx
@@ -30,7 +30,7 @@ const CreateForm = ({ title, className, onAddTag }: TagFormProps) => {
 
   return (
     <FormCard
-      className={`${className} w-full bg-light-gray dark:bg-gray-500`}
+      className={`${className} w-full bg-light-gray dark:bg-neutral-500`}
       title={title}
       onSubmit={handleSubmit}
     >

diff --git a/src/query/QueryRoot.tsx b/src/query/QueryRoot.tsx
@@ -87,7 +87,7 @@ const QueryRoot = ({ className }: QueryFormProps) => {
   return (
     <div className={`${className} space-y-6`}>
       <FormCard
-        className="flex flex-col justify-center bg-white dark:bg-gray-500 gap-y-7"
+        className="flex flex-col justify-center bg-white dark:bg-neutral-500 gap-y-7"
         title={"Search"}
         collapsible={true}
       >
@@ -99,7 +99,7 @@ const QueryRoot = ({ className }: QueryFormProps) => {
       </FormCard>
 
       {/* Section for results and series tables */}
-      <div className="flex flex-col w-full p-4 bg-white shadow-md dark:bg-gray-500 rounded-3xl">
+      <div className="flex flex-col w-full p-4 bg-white shadow-md dark:bg-neutral-500 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-neutral-600">

diff --git a/src/root/Dashboard/CardAnon.tsx b/src/root/Dashboard/CardAnon.tsx
@@ -45,7 +45,7 @@ const CardAnon = () => {
                 <Anon className="mr-3 text-xl text-white" /> 
                 <span className="text-lg font-bold text-white">Anonymisation</span>
             </CardHeader>
-            <CardBody className="flex items-center justify-center p-4" color={Colors.white}>
+            <CardBody className="flex items-center justify-center p-4 dark:bg-neutral-500" color={Colors.white}>
                 {
                     firstQueue ?
                         (<ProgressQueueCircle
@@ -63,8 +63,7 @@ const CardAnon = () => {
                         "None"
                 }
             </CardBody>
-            <CardFooter className="flex justify-center" color={Colors.white}>
-                {/* You can add footer content here if needed */}
+            <CardFooter className="flex justify-center dark:bg-neutral-500" color={Colors.white}>
             </CardFooter>
         </Card>
     );

diff --git a/src/root/Dashboard/CardExport.tsx b/src/root/Dashboard/CardExport.tsx
@@ -7,18 +7,17 @@ const CardExport = () => {
     return (
         <Card className="flex-1 overflow-hidden rounded-lg shadow-lg md:max-w-md">
               <CardHeader centerTitle color={Colors.secondary} className="flex items-center">
-                <Export className="mr-3 text-xl text-white" />  {/* Add margin to the right of the icon */}
-                <span className="text-lg font-bold text-white">{/* Title inside span to ensure proper styling */}Anonymisation</span>
+                <Export className="mr-3 text-xl text-white " /> 
+                <span className="text-lg font-bold text-white">Anonymisation</span>
             </CardHeader>
 
             <CardBody
-                className="flex flex-col items-center justify-center p-6 bg-gray-50"
-                color={Colors.light}
-
+                className="flex flex-col items-center justify-center p-6 dark:bg-neutral-500 bg-gray-50"
+                color={Colors.light} children={""}                
             >
 
             </CardBody>
-            <CardFooter className="flex justify-center" color={Colors.white}>
+            <CardFooter className="flex justify-center dark:bg-neutral-500" color={Colors.white}>
             </CardFooter>
         </Card>
     );

diff --git a/src/root/Dashboard/CardRetrieve.tsx b/src/root/Dashboard/CardRetrieve.tsx
@@ -6,12 +6,18 @@ import { Colors } from "../../utils/enums";
 const CardRetrieve = () => {
     return (
         <Card className="flex-1">
-            <CardHeader centerTitle color={Colors.primary} className="flex items-center">
+            <CardHeader centerTitle color={Colors.primary} className="flex items-center ">
             <AutoRetrieve className="mr-3 text-xl text-white" />
             <span className="text-lg font-bold text-white">Retrieve</span>
             </CardHeader>
-            <CardBody color={Colors.light} children={""}>
+            <CardBody 
+            className="dark:bg-neutral-500"
+            color={Colors.light} 
+            children={""}>
             </CardBody>
+            <CardFooter className="flex justify-center dark:bg-neutral-500" color={Colors.white}>
+
+            </CardFooter>
         </Card>
     );
 };

diff --git a/src/root/ToolItem.tsx b/src/root/ToolItem.tsx
@@ -6,7 +6,7 @@ type ToolItemProps = {
 
 const ToolItem = ({ children, count, onClick }: ToolItemProps) => {
     return (
-        <div className="flex items-center justify-around w-full transition-colors bg-white rounded-md shadow-md dark:bg-neutral-700 h-9 hover:bg-orange-500 group dark:hover:bg-gray-500" onClick={onClick}>
+        <div className="flex items-center justify-around w-full transition-colors bg-white rounded-md shadow-md dark:bg-neutral-700 h-9 hover:bg-orange-500 group dark:hover:bg-neutral-500" onClick={onClick}>
             <span className="text-xl">{children}</span>
             <span className="rounded-full border border-gray-300 text-black bg-white shadow-[0_4px_6px rgba(255,165,0,0.5)] min-w-5 text-center">
                 {count}

diff --git a/src/ui/Input.tsx b/src/ui/Input.tsx
@@ -49,9 +49,9 @@ const Input = ({
     mr-3
     block 
     dark:bg-stone-800 
-    dark:border-gray-500 
+    dark:border-white
     dark:placeholder-gray-200 
-    dark:text-white 
+    dark:text-gray-200 
     dark:focus:ring-indogp-300 
     dark:focus:border-blue-500
     hover:disabled:cursor-not-allowed
@@ -74,7 +74,7 @@ const Input = ({
 
       <div
         className={
-          `flex items-center peer ${borderClasses} text-gray-600 w-full ${roundedRightClass} text-sm ${InputClassName} ${className}`
+          `flex items-center peer ${borderClasses} text-gray-600 dark:text-white w-full ${roundedRightClass} text-sm ${InputClassName} ${className}`
         }>
         {svgLeft && (
           <div className="p-3 pointer-events-none peer-disabled:pointer-events-none peer-disabled:opacity-50">

diff --git a/src/ui/Modal.tsx b/src/ui/Modal.tsx
@@ -18,7 +18,7 @@ const Modal = ({ show, size = "lg", children, ...props }: ModalProps) => {
     <div
       data-gaelo-flow='modal'
       className={
-        "fixed left-0 top-0 z-[1400] w-full h-full overflow-y-auto overflow-x-hidden bg-gray-600 bg-opacity-50 dark:text-white " +
+        "fixed left-0 top-0 z-[1400] w-full h-full overflow-y-auto overflow-x-hidden bg-neutral-500 bg-opacity-50 dark:text-white " +
         (show ? "open" : "hidden")
       }
       {...props}

diff --git a/src/ui/SelectInput.tsx b/src/ui/SelectInput.tsx
@@ -1,4 +1,4 @@
-import Select, { ActionMeta, ClassNamesConfig } from 'react-select';
+import Select, { ActionMeta, StylesConfig } from 'react-select';
 
 interface OptionType {
   value: string;
@@ -19,6 +19,22 @@ interface SelectInputProps {
   formatGroupLabel?: (group: { label: string; options: OptionType[] }) => JSX.Element;
 }
 
+// Styles personnalisés pour React-Select
+const customStyles: StylesConfig<OptionType, boolean> = {
+  placeholder: (base) => ({
+    ...base,
+    color: 'white', // Placeholder en blanc
+  }),
+  input: (base) => ({
+    ...base,
+    color: 'white', // Texte saisi en blanc
+  }),
+  singleValue: (base) => ({
+    ...base,
+    color: 'white', // Valeur sélectionnée en blanc
+  }),
+};
+
 const customClass: ClassNamesConfig<OptionType, boolean> = {
   control: (state) => {
     const borderRadius = state.selectProps.rounded ? 'rounded-3xl' : 'rounded-xl';
@@ -29,7 +45,7 @@ const customClass: ClassNamesConfig<OptionType, boolean> = {
     return `rounded-xl p-2 ${state.isSelected ? 'bg-primary-active text-white' : 'bg-white dark:bg-neutral-800 text-gray-800 dark:text-white'} hover:bg-primary hover:text-white px-2`;
   },
   multiValue: () => 'bg-gray-200 dark:bg-neutral-800 rounded-3xl px-2 py-0.5',
-  multiValueLabel: () => 'text-gray-800 ',
+  multiValueLabel: () => 'text-gray-800',
   multiValueRemove: () => 'text-red-500 hover:bg-red-200 rounded-full p-0.5',
 };
 
@@ -55,6 +71,7 @@ const SelectInput = ({
       options={options}
       onChange={onChange}
       placeholder={placeholder}
+      styles={customStyles}
       classNames={customClass}
       isClearable={isClearable}
       menuPosition={menuPosition}

diff --git a/src/welcome/SignUpForm.tsx b/src/welcome/SignUpForm.tsx
@@ -38,8 +38,8 @@ export const SignUpForm = () => {
 
   return (
     <div className="relative flex items-center justify-center">
-      <div className="absolute h-full w-full bg-gradient-to-r from-indigo-500 to-[#926874] dark:from-blue-950 dark:to-orange-800 shadow-2xl transform rounded-3xl rotate-6 z-0"></div>
-      <div className="relative px-10 bg-white shadow-lg py-14 rounded-3xl dark:bg-neutral-700">                  
+      <div className="absolute h-full w-full bg-gradient-to-r from-indigo-500 to-[#926874] dark:from-blue-950 dark:to-rose-950 shadow-2xl transform rounded-3xl rotate-6 z-0"></div>
+      <div className="relative px-10 bg-white shadow-lg dark:text-white dark:opacity-70 dark:bg-neutral-700 py-14 rounded-3xl">
         <form onSubmit={handleSubmit} className="relative z-10 flex flex-col items-center w-full">
       <h1 className="mb-4 text-2xl font-semibold text-center md:text-3xl lg:text-4xl text-dark dark:text-white">
   Welcome to <span className="text-primary dark:text-white">GaelO Flow</span>