add button css

resources/css/app.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.btn {
+    @apply text-center text-white px-2 py-1 focus:outline-1 border border-white transition duration-300 ease-in-out shadow hover:shadow-lg rounded cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+.btn-primary {
+    @apply btn bg-blue-700 border-blue-700 hover:bg-blue-800 focus:bg-blue-800;
+}

resources/js/components/rainfall/AddRainfall.tsx

@@ -5,7 +5,7 @@ import Card from "../Card";
 
 const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
 
-    const {axiosPost} = useAxiosTools()
+    const {errorCatch, errorLabel, axiosPost} = useAxiosTools()
     const [date, setDate] = useState((new Date()).toSQLDate())
     const [value, setValue] = useState(0)
 
@@ -16,15 +16,16 @@ const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
             setDate((new Date()).toSQLDate())
             setValue(0)
             reload(new Date())
-        } catch (e) {
+        } catch (error) {
-            console.error(e)
+            errorCatch(error)
         }
     }
 
-    return <Card className="min-w-[200px] overflow-hidden self-start w-full lg:w-auto">
+    return <Card className="min-w-[300px] overflow-hidden self-start w-full md:w-auto">
         <h2 className="text-center bg-blue-500 text-white -mx-2 -mt-1 text-lg font-bold px-2 py-1">
             Ajout d'une mesure
         </h2>
+        {errorLabel()}
         <form onSubmit={handleSubmit} className="p-2 flex flex-col gap-2">
             <Field type="date"
                    name="date"
@@ -38,7 +39,7 @@ const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
                    value={value}
                    onChange={event => setValue(Number(event.target.value))}>Mesure</Field>
 
-            <button type="submit" className="mt-2 px-2 py-1 w-full text-lg font-bold bg-blue-700 rounded">Valider</button>
+            <button type="submit" className="btn-primary mt-2 w-full text-lg font-bold">Valider</button>
         </form>
     </Card>
 }

resources/js/components/rainfall/LastFiveMesure.tsx

@@ -7,7 +7,7 @@ import {Link} from "react-router-dom";
 
 const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
 
-    const {error, setError, axiosGet} = useAxiosTools()
+    const {errorCatch, errorLabel, setError, axiosGet} = useAxiosTools()
     const [data, setData] = useState<rainfall[]>([])
 
     useEffect(() => {
@@ -22,14 +22,14 @@ const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
             if (e instanceof AxiosError) {
                 setError(e.message)
             } else {
-                console.error(e)
+                errorCatch(e)
             }
         }
     }
 
-    return <><Card className="min-w-[200px] overflow-hidden self-start w-full lg:w-auto">
+    return <Card className="min-w-[300px] overflow-hidden self-start w-full md:w-auto">
         <h1 className="text-center bg-blue-500 text-white -mx-2 -mt-1 text-lg font-bold px-2 py-1">5 dernières mesures</h1>
-        {error && <div>{error}</div>}
+        {errorLabel()}
         <table className="w-full text-center">
             <tbody>
                 {data.map(line => <tr key={line.id} className="">
@@ -38,9 +38,8 @@ const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
                 </tr>)}
             </tbody>
         </table>
-    </Card>
         <Link to="/pluviometrie/mesures">Tous les mesures</Link>
-        </>
+    </Card>
 }
 
 export default LastFiveMesure

resources/js/pages/Auth/ForgotPassword.tsx

@@ -32,7 +32,7 @@ const ForgotPassword = () => {
                    value={email}
                    onChange={event => setEmail(event.target.value)}
                    autoFocus>Email</Field>
-            <button type="submit" className="mt-5 bg-blue-700 w-full block text-white px-5 py-2 text-lg rounded">Valider</button>
+            <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
         </form>
     </div>
 }

resources/js/pages/Auth/Login.tsx

@@ -42,7 +42,7 @@ const Login = () => {
                        placeholder="******"
                        value={password}
                        onChange={event => setPassword(event.target.value)}>Mot de passe</Field>
-                <button type="submit" className="mt-5 bg-blue-700 w-full block text-white px-5 py-2 text-lg rounded">Valider</button>
+                <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
                 <Link to="/mot-de-passe-oubliee" className="mt-2 inline-block">Mot de passe oublié ?</Link>
             </form>
         </Card>

resources/js/pages/Auth/Profile.tsx

@@ -7,14 +7,16 @@ const Profile = () => {
     const {authUser, logout} = useAuthUser()
 
     return <PageLayout>
-        <h1 className="text-lg font-bold mb-5">Profile de l'utilisateur</h1>
+        <div className="flex justify-between">
+            <h1 className="text-lg font-bold mb-5">Profile de l'utilisateur</h1>
+            <div>
+                <button onClick={logout} className="btn-primary text-lg font-bold">Se déconnecter</button>
+            </div>
+        </div>
         <div>
             <div>Nom: <strong>{authUser?.name}</strong></div>
             <div>Email: <strong>{authUser?.email}</strong></div>
         </div>
-        <div>
-            <button onClick={logout} className="mt-5 bg-blue-700 text-white px-5 py-2 text-lg rounded">Se déconnecter</button>
-        </div>
         {/*<div>Update name & email</div>*/}
         {/*<div>Change password</div>*/}
         {/*<div>Delete Account</div>*/}

resources/js/pages/Auth/Register.tsx

@@ -47,7 +47,7 @@ const Register = () => {
                        value={password}
                        onChange={event => setPassword(event.target.value)}
                        autoFocus>Mot de passe</Field>
-                <button type="submit" className="mt-5 bg-blue-700 w-full block text-white px-5 py-2 text-lg rounded">Valider</button>
+                <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
             </form>
         </Card>
     </div>

resources/js/pages/Auth/Reset.tsx

@@ -46,7 +46,7 @@ const Reset = () => {
                    placeholder="******"
                    value={samePassword}
                    onChange={event => setSamePassword(event.target.value)}>Confirmation du mot de passe</Field>
-            <button type="submit" className="mt-5 bg-blue-700 w-full block text-white px-5 py-2 text-lg rounded">Valider</button>
+            <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
         </form>
     </div>
 }

resources/js/pages/Rainfall.tsx

@@ -16,24 +16,20 @@ const Rainfall = () => {
         start_date: (new Date((new Date()).setMonth((new Date).getMonth() - 1))).toSQLDate(),
         end_date: (new Date()).toSQLDate(),
     })
-    const {axiosGet} = useAxiosTools()
+    const {errorCatch, errorLabel, axiosGet} = useAxiosTools()
     const {targetRef, dimensions} = useDimension()
 
     useEffect(() => {
         fetchGraphData()
-    }, [loadedAt])
+    }, [loadedAt, graphDetails])
-
-    useEffect(() => {
-        fetchGraphData()
-    }, [graphDetails])
 
     const fetchGraphData = async () => {
         try {
             const params = `start=${graphDetails.start_date}&end=${graphDetails.end_date}`
             const res = await axiosGet(`/api/rainfalls/graph?${params}`)
             setGraphData(res.data)
-        } catch (e) {
+        } catch (error) {
-            console.error(e)
+            errorCatch(error)
         }
     }
 
@@ -43,7 +39,8 @@ const Rainfall = () => {
             <AddRainfall reload={reload} />
         </div>
 
-        <form className="flex mb-2 mx-5 flex gap-2">
+        {errorLabel()}
+        <form className="flex mb-2 mx-5 gap-2">
             <Field name="start_date"
                    type="date"
                    value={graphDetails.start_date}