merge

src/components/Filter/Filter.jsx

@@ -1,5 +1,5 @@
 import styles from "./Filter.module.css";
-import Button from "../ui/button/button.jsx"
+import Button from "../ui/button/button.tsx"
 
 function Filter({isFilterVisible, filters, setFilters}){
     const setAlphabeticalOrder = (order) => {

src/components/Footer/Footer.jsx

@@ -1,8 +1,8 @@
 import styles from "./Footer.module.css"
 import {Link} from "react-router";
 import {useState} from "react";
-import Modal from "../ui/modal/modal.jsx";
-import Button from "../ui/button/button.jsx";
+import Modal from "../ui/modal/modal.tsx";
+import Button from "../ui/button/button.tsx";
 import scrollToTop from "../../utils/scrollToTop.js";
 
 export default function Footer(){
@@ -26,7 +26,7 @@ export default function Footer(){
                 </div>
 
                 <nav className={styles.footerNav}>
-                    <Link to="/RGPD" className={styles.link} onClick={scrollToTop}>
+                    <Link to="/rgpd" className={styles.link} onClick={scrollToTop}>
                         Fiche RGPD
                     </Link>
                     <span className={styles.separator}></span>

src/components/ToolBar/ToolBar.jsx

@@ -3,7 +3,7 @@ import Filter from "../Filter/Filter.jsx";
 import {useContext, useEffect, useState} from "react";
 import SearchBar from "../SearchBar/SearchBar.jsx";
 import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
-import Button from "../ui/button/button.jsx";
+import Button from "../ui/button/button.tsx";
 import {AuthContext} from "../../contexts/auth/AuthContext.js";
 
 function ToolBar({setFilters, filters, showCreate = true}) {

src/components/createEventBtn/CreateEventBtn.jsx

@@ -1,8 +1,8 @@
 import styles from "./createEventBtn.module.css"
 import { useState, useContext } from "react";
-import Modal from "../ui/modal/modal.jsx";
-import Button from "../ui/button/button.jsx";
-import TextInput from "../ui/input/input.jsx";
+import Modal from "../ui/modal/modal.tsx";
+import Button from "../ui/button/button.tsx";
+import TextInput from "../ui/input/input.tsx";
 import { EventContext } from "../../contexts/events/EventContext.js";
 
 

src/components/ui/button/button.tsx

@@ -1,53 +1,44 @@
-/*import styles from "./button.module.css";
-
-const Button = ({ children, variant = "primary", onClick, className }) => {
-    let btnStyle;
-
-    if (variant === "primary") btnStyle = styles.primary;
-    else if (variant === "danger") btnStyle = styles.danger;
-    else if(variant === "transparent") btnStyle = styles.transparent;
-    else btnStyle = styles.default;
-
-    return <div className={`${styles.btn} ${btnStyle} ${className}`} onClick={onClick}>
-        {children}
-    </div>;
-};
-
-export default Button;
-*/
-
+import { ReactNode, MouseEventHandler } from "react";
 import styles from "./button.module.css";
-import { ReactNode, MouseEvent } from "react";
+
+type ButtonVariant = "primary" | "danger" | "transparent" | "default";
 
 interface ButtonProps {
-  children: ReactNode;
-  variant?: "primary" | "danger" | "transparent" | "default";
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  className?: string;
+    children: ReactNode;
+    variant?: ButtonVariant;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    className?: string;
 }
 
 const Button = ({
-  children,
-  variant = "primary",
-  onClick,
-  className = "",
-}: ButtonProps) => {
-  const variantStyles = {
-    primary: styles.primary,
-    danger: styles.danger,
-    transparent: styles.transparent,
-    default: styles.default,
-  };
-  const btnStyle = variantStyles[variant in variantStyles ? variant : "default"];
+                    children,
+                    variant = "primary",
+                    onClick,
+                    className = "",
+                }: ButtonProps) => {
+    let btnStyle: string;
 
-  return (
-    <div
-      className={`${styles.btn} ${btnStyle} ${className}`}
-      onClick={onClick}
-    >
-      {children}
-    </div>
-  );
+    if (variant === "primary") { // @ts-ignore
+        btnStyle = styles.primary;
+    }
+    else if (variant === "danger") { // @ts-ignore
+        btnStyle = styles.danger;
+    }
+    else if (variant === "transparent") { // @ts-ignore
+        btnStyle = styles.transparent;
+    }
+    else { // @ts-ignore
+        btnStyle = styles.default;
+    }
+
+    return (
+        <div
+            className={`${styles.btn} ${btnStyle} ${className}`}
+            onClick={onClick}
+        >
+            {children}
+        </div>
+    );
 };
 
 export default Button;

src/components/ui/input/input.tsx

@@ -1,107 +1,62 @@
-/*import styles from "./input.module.css";
-import { useState } from "react";
-
-const TextInput = ({ placeholder, onChange, value, borderStyle, password, className, ...props }) => {
-
-    const [showPassword, setShowPassword] = useState(false);
-
-    let inputBorderStyle = styles.square;
-    if (borderStyle === "square") inputBorderStyle = styles.square;
-    if(borderStyle === "rounded") inputBorderStyle = styles.rounded;
-
-    const toggleShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    if(password) return (
-        <div className={styles.passwordContainer}>
-            <TextInput
-                type={showPassword ? "text" : "password"}
-                value={value}
-                placeholder={placeholder}
-                onChange={onChange}
-                className={styles.passwordInput}
-            />
-            <button
-                type="button"
-                onClick={toggleShowPassword}
-                className={styles.passwordBtn}
-            >
-                {showPassword ? '👁️' : '🔒'}
-            </button>
-        </div>
-    );
-
-    return <input className={`${styles.input} ${inputBorderStyle} ${className}`} onChange={onChange} placeholder={placeholder} value={value} {...props} />
-};
-
-export default TextInput;*/
-
-
 import styles from "./input.module.css";
-import { useState, InputHTMLAttributes, ChangeEvent } from "react";
+import { useState, ChangeEvent, InputHTMLAttributes } from "react";
 
 interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  placeholder?: string;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  value: string;
-  borderStyle?: "square" | "rounded";
-  password?: boolean;
-  className?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    borderStyle?: "square" | "rounded";
+    password?: boolean;
+    className?: string;
 }
 
 const TextInput = ({
-  placeholder,
-  onChange,
-  value,
-  borderStyle = "square",
-  password = false,
-  className = "",
-  ...props
-}: TextInputProps) => {
-  const [showPassword, setShowPassword] = useState(false);
-  const borderStyles = {
-    square: styles.square,
-    rounded: styles.rounded,
-  };
+                       placeholder,
+                       onChange,
+                       value,
+                       borderStyle = "square",
+                       password,
+                       className = "",
+                       ...props
+                   }: TextInputProps) => {
+    const [showPassword, setShowPassword] = useState<boolean>(false);
 
-  const inputBorderStyle = borderStyles[borderStyle] || styles.square;
+    let inputBorderStyle = styles.square;
+    if (borderStyle === "rounded") inputBorderStyle = styles.rounded;
 
-  const toggleShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
+    const toggleShowPassword = () => {
+        setShowPassword((prev) => !prev);
+    };
+
+    if (password)
+        return (
+            <div className={styles.passwordContainer}>
+                <TextInput
+                    type={showPassword ? "text" : "password"}
+                    value={value}
+                    placeholder={placeholder}
+                    onChange={onChange}
+                    className={styles.passwordInput}
+                />
+                <button
+                    type="button"
+                    onClick={toggleShowPassword}
+                    className={styles.passwordBtn}
+                >
+                    {showPassword ? "👁️" : "🔒"}
+                </button>
+            </div>
+        );
 
-  if (password) {
     return (
-      <div className={styles.passwordContainer}>
         <input
-          type={showPassword ? "text" : "password"}
-          value={value}
-          placeholder={placeholder}
-          onChange={onChange}
-          className={`${styles.input} ${styles.passwordInput} ${inputBorderStyle} ${className}`}
-          {...props}
+            className={`${styles.input} ${inputBorderStyle} ${className}`}
+            onChange={onChange}
+            placeholder={placeholder}
+            value={value}
+            {...props}
         />
-        <button
-          type="button"
-          onClick={toggleShowPassword}
-          className={styles.passwordBtn}
-        >
-          {showPassword ? "👁️" : "🔒"}
-        </button>
-      </div>
     );
-  }
-
-  return (
-    <input
-      className={`${styles.input} ${inputBorderStyle} ${className}`}
-      onChange={onChange}
-      placeholder={placeholder}
-      value={value}
-      {...props}
-    />
-  );
 };
 
 export default TextInput;

src/components/ui/themeSwitcher/ThemeSwitcher.jsx

@@ -0,0 +1,32 @@
+import Button from "../button/button.tsx";
+import { useState, useEffect } from "react";
+import styles from "./ThemeSwitcher.module.css";
+
+
+export default function ThemeSwitcher() {
+
+    const [theme, setTheme] = useState("");
+
+    useEffect(() => {
+        const t = localStorage.getItem("theme");
+        if(t) setTheme(t);
+        else setTheme("light");
+    }, []);
+
+    const switchTheme = () => {
+
+        let newTheme = theme === "light" ? "dark" : "light";
+
+        if(theme === null || theme === "") newTheme = "dark";
+
+        localStorage.setItem("theme", newTheme);
+        setTheme(newTheme);
+
+        window.dispatchEvent(new Event("theme-changed"));
+    };
+
+    return <Button variant={"default"} onClick={switchTheme} className={styles.themeBtn}>
+            <img src={`/icons/theme/${theme}.svg`} alt={`${theme} icon`} className={styles.themeIcon} />
+            <p>Changer de thème </p>
+    </Button>
+}