diff --git a/src/App.tsx b/src/App.tsx index 5ffeab80..8acea340 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ import WelcomeRoot from "./welcome/WelcomeRoot"; import RootApp from "./root/RootApp"; import "preline/preline"; import { IStaticMethods } from "preline/preline"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; declare global { interface Window { @@ -15,6 +15,14 @@ declare global { function App() { const isLogged = useSelector((state: RootState) => state.user.isLogged); const location = useLocation(); + const [isDark, setDark] = useState(localStorage.getItem('theme') === 'dark') + + useEffect(() => { + window.onstorage = () => { + const isDark = localStorage.getItem('theme') === 'dark'; + setDark(isDark); + }; + }, []); useEffect(() => { window.HSStaticMethods.autoInit(); @@ -22,7 +30,7 @@ function App() { return ( -
+
{isLogged ? : }
) diff --git a/src/admin/general/General.tsx b/src/admin/general/General.tsx index c59396a2..f59d4bc5 100644 --- a/src/admin/general/General.tsx +++ b/src/admin/general/General.tsx @@ -22,7 +22,7 @@ const General = () => { return (
diff --git a/src/admin/general/OrthancCard.tsx b/src/admin/general/OrthancCard.tsx index 3de0fcd0..a76815c0 100644 --- a/src/admin/general/OrthancCard.tsx +++ b/src/admin/general/OrthancCard.tsx @@ -123,8 +123,9 @@ const OrthancSettingsCard = ({ orthancData }: OrthancCardProps) => { className="justify-center bg-gray-100" headerTextSize='xs' headerColor={Colors.white} + headerclassName='text-center' />
- +
@@ -60,7 +61,7 @@ const LabelsTable: React.FC = ({ }, ]; - + }, []); return ( @@ -69,9 +70,11 @@ const LabelsTable: React.FC = ({ 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/labels/LabelsRoles.tsx b/src/admin/labels/LabelsRoles.tsx index 762496f9..fc71ae64 100644 --- a/src/admin/labels/LabelsRoles.tsx +++ b/src/admin/labels/LabelsRoles.tsx @@ -3,31 +3,30 @@ import { Role, useCustomMutation, useCustomQuery } from "../../utils"; import { getRoles, getRolesByLabelName } from "../../services"; import { Spinner } from "../../ui"; import { addLabelToRole, removeLabelFromRole } from "../../services/roles"; - +import Checkbox from "../../ui/Checkbox"; type LabelsRolesProps = { labelName: string; }; const LabelsRoles = ({ labelName }: LabelsRolesProps) => { - - const { data: roles, isLoading: isLoadingRoles } = useCustomQuery< + const { data: roles, isLoading: isRolesLoading, error: rolesError } = useCustomQuery< Role[], string[] >(["roles"], () => getRoles(), { select: (roles) => roles.map((role) => role.name), }); - - const { data: existingRoles, isLoading: isLoadingExistingRoles } = + + const { data: existingRoles, isLoading: isExistingRolesLoading, error: existingRolesError } = useCustomQuery(["labels", labelName], () => getRolesByLabelName(labelName) ); - const { mutate: addRoleMutation } = useCustomMutation( + const { mutate: addRoleMutation, error: addRoleError } = useCustomMutation( ({ role }) => addLabelToRole(role, labelName), [["labels", labelName]] ); - const { mutate: removeRoleMutation } = useCustomMutation( + const { mutate: removeRoleMutation, error: removeRoleError } = useCustomMutation( ({ role }) => removeLabelFromRole(role, labelName), [["labels", labelName]] ); @@ -38,23 +37,32 @@ const LabelsRoles = ({ labelName }: LabelsRolesProps) => { ) => { const checked = event.target.checked; if (checked) { - addRoleMutation({ role: name }); + if (!existingRoles?.includes(name)) { + addRoleMutation({ role: name }); + } } else { removeRoleMutation({ role: name }); } }; - if (isLoadingRoles || isLoadingExistingRoles) { + if (isRolesLoading || isExistingRolesLoading) { return ; } + if (rolesError || existingRolesError) { + return
Erreur de chargement des données
; + } + + if (addRoleError || removeRoleError) { + return
Erreur de mutation
; + } + return (
{roles?.map((role) => { return (
- handleRoleChange(role, event)} @@ -67,4 +75,4 @@ const LabelsRoles = ({ labelName }: LabelsRolesProps) => { ); }; -export default LabelsRoles; +export default LabelsRoles; \ No newline at end of file diff --git a/src/admin/modalities/ModalitiesRoot.tsx b/src/admin/modalities/ModalitiesRoot.tsx index 14a4757c..9d183bc8 100644 --- 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"} /> - +
{ {!showNewAetCard && (
); } diff --git a/src/welcome/SignInForm.tsx b/src/welcome/SignInForm.tsx index c106fdf1..acb820ea 100644 --- a/src/welcome/SignInForm.tsx +++ b/src/welcome/SignInForm.tsx @@ -10,9 +10,11 @@ import { signIn } from "../services/auth"; import { useCustomToast } from "../utils/toastify"; import { Colors } from "../utils/enums"; import { SignInResponse } from "../utils/types"; +import PasswordLock from "../icons/PasswordLock"; import { Button, Input, ToggleEye } from "../ui"; -import { PasswordKeyOn, ChevronRight, User } from "./../assets"; +import { ChevronRight, User } from "./../assets"; +import UserId from "../icons/UserId"; export const SignInForm = () => { const navigate = useNavigate(); @@ -64,20 +66,20 @@ export const SignInForm = () => { return (
{/* Background square */} -
- -
+
+ +
-

- {t("titleSignInForm")} +

+ {t("titleSignInForm")}

-

+

Please Log in to your Account

} + svgLeft={} bordered type="email" placeholder="Enter your email" @@ -92,7 +94,7 @@ export const SignInForm = () => {
} + svgLeft={} bordered placeholder="Enter your password" value={password} @@ -110,7 +112,8 @@ export const SignInForm = () => {
navigate("/lost-password")} > Forgot Password? diff --git a/src/welcome/SignUpForm copy.tsx b/src/welcome/SignUpForm copy.tsx index 0402baa9..42cc3737 100644 --- a/src/welcome/SignUpForm copy.tsx +++ b/src/welcome/SignUpForm copy.tsx @@ -49,7 +49,7 @@ export const SignUpForm = () => {
} + svgLeft={} bordered placeholder="Enter your firstname" value={firstname} diff --git a/src/welcome/SignUpForm.tsx b/src/welcome/SignUpForm.tsx index e5b1acf0..f20f29bb 100644 --- a/src/welcome/SignUpForm.tsx +++ b/src/welcome/SignUpForm.tsx @@ -5,6 +5,8 @@ import { Button, Input } from "../ui"; import { Colors } from "../utils/enums"; import { useCustomToast } from "../utils/toastify"; import { ChevronRight, Letter as Mail, User } from "./../assets"; +import UserId from "../icons/UserId"; +import Email from "../icons/Email"; export const SignUpForm = () => { const [lastname, setLastname] = useState(""); @@ -36,19 +38,19 @@ export const SignUpForm = () => { return (
-
-
- -

- Welcome to GaelO Flow -

-

+

+
+ +

+ Welcome to GaelO Flow +

+

Please create your Account

-
+
} + svgLeft={} bordered placeholder="Enter your firstname" value={firstname} @@ -58,7 +60,7 @@ export const SignUpForm = () => { /> } + svgLeft={} bordered placeholder="Enter your lastname" value={lastname} @@ -69,7 +71,7 @@ export const SignUpForm = () => { /> } + svgLeft={} bordered placeholder="Enter your email" value={email} diff --git a/src/welcome/WelcomeRoot.tsx b/src/welcome/WelcomeRoot.tsx index 48806384..5b4572f1 100644 --- a/src/welcome/WelcomeRoot.tsx +++ b/src/welcome/WelcomeRoot.tsx @@ -1,43 +1,54 @@ +import React, { useEffect, useState, useMemo } from "react"; import { Route, Routes, useLocation, useNavigate } from "react-router-dom"; import { SignUpForm } from "./SignUpForm"; import ForgotPasswordForm from "./ForgotPasswordForm"; import ChangePasswordForm from "./ChangePasswordForm"; -import { SignIn as SignInImage, SignUp as SignUpImage, ArrowBack } from "../assets"; +import { SignIn as SignInImage, SignUp as SignUpImage, SignInUpDark as SignUpImageDark, signIndark as SignInImageDark, ArrowBack } from "../assets"; import { SignInForm } from "./SignInForm"; const Welcome = () => { const location = useLocation(); const navigate = useNavigate(); + const [isDark, setIsDark] = useState(localStorage.getItem("theme") === "dark"); - const getImage = () => { - let imageComponent; - switch (location.pathname) { - case "/sign-in": - imageComponent = ; - break; - case "/sign-up": - imageComponent = ; - break; - default: - imageComponent = ; + useEffect(() => { + const handleStorageChange = () => { + setIsDark(localStorage.getItem("theme") === "dark"); + }; + + window.addEventListener("storage", handleStorageChange); + return () => window.removeEventListener("storage", handleStorageChange); + }, []); + + const getImage = useMemo(() => { + if (location.pathname === "/sign-up") { + return isDark ? ( + + ) : ( + + ); } - return
{imageComponent}
; - }; + return isDark ? ( + + ) : ( + + ); + }, [location.pathname, isDark]); const classLink = "text-gray-600 hover:underline hover:text-indigo-800 cursor-pointer"; return ( -
+
Logo - {getImage()} +
{getImage}
-
-
{/* Reduced padding */} +
+
} /> } /> @@ -46,28 +57,42 @@ const Welcome = () => { } /> -
+
+
{location.pathname !== "/sign-up" && location.pathname !== "/legal-mention" && ( - navigate("/sign-up")} className={classLink}> + navigate("/sign-up")} + className={`${classLink} dark:text-white dark:hover:text-indigo-300`} + > Don’t have an account? )} - {location.pathname !== "/" && ( - location.pathname === "/legal-mention" ? ( -
navigate("/")} className="flex items-center gap-2 cursor-pointer"> - - Back -
- ) : ( - navigate("/")} className={classLink}> - Already have an account? + {location.pathname === "/legal-mention" ? ( +
navigate("/")} + className="flex items-center gap-2 cursor-pointer" + > + + + Back - ) +
+ ) : ( + navigate("/")} + className={`${classLink} dark:text-white dark:hover:text-indigo-300`} + > + Already have an account? + )} + {location.pathname !== "/legal-mention" && ( - navigate("/legal-mention")}> + navigate("/legal-mention")} + className={`${classLink} inline-block dark:text-white dark:hover:text-indigo-300`} + > Legal Mention )} diff --git a/tailwind.config.js b/tailwind.config.js index f0d4f9d8..1ad65eda 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,8 +6,12 @@ export default { "node_modules/preline/dist/*.js" ], theme: { - prefix: 'hs-', // Custom prefix for all Tailwind classes + prefix: 'hs-', extend: { + + zIndex: { + 'dropdown': '1000', + }, fontSize: { '10': '10px', }, @@ -81,6 +85,7 @@ export default { }, }, }, + darkMode: 'selector', plugins: [ require('@tailwindcss/forms'), require('tailwind-scrollbar'),