clean css

resources/js/components/Card.tsx

@@ -0,0 +1,15 @@
+import React, {FC} from "react";
+import {PropsWithChildren} from "react";
+
+const Card: FC<PropsWithChildren<CardProps>> = ({children, className = ''}) => {
+
+    return <div className={`${className} border m-1 rounded py-1 px-2`}>
+        {children}
+    </div>
+}
+
+export default Card
+
+interface CardProps {
+    className?: string
+}

resources/js/components/Header.tsx

@@ -11,16 +11,19 @@ const Header = () => {
             <Link to="/">Bermite</Link>
         </div>
 
-        {authUser && <nav className="flex gap-2">
-            <Link to="/pluviometrie">Pluviométrie</Link>
-            <Link to="/meteo">Météo</Link>
-        </nav>}
+        {/*{authUser && <nav className="flex gap-2">*/}
+        {/*    <Link to="/pluviometrie">Pluviométrie</Link>*/}
+        {/*    <Link to="/meteo">Météo</Link>*/}
+        {/*</nav>}*/}
 
-        {authUser ? <span className="flex gap-2"><Link to="/profile">{authUser.name}</Link><button onClick={logout}>logout</button></span>
+        {authUser
+            ? <span className="flex gap-2">
+                <Link to="/profile">{authUser.name}</Link>
+            </span>
             : <span className="flex gap-2">
-                            <Link to="/connexion">Connexion</Link>
-                            <Link to="/sinscrire">S'inscrire</Link>
-                        </span>}
+                <Link to="/connexion">Connexion</Link>
+                {/*<Link to="/sinscrire">S'inscrire</Link>*/}
+            </span>}
     </header>
 }
 

resources/js/components/rainfall/AddRainfall.tsx

@@ -1,6 +1,7 @@
 import React, {Dispatch, FC, FormEvent, SetStateAction, useState} from "react"
 import useAxiosTools from "../../hooks/AxiosTools";
 import Field from "../Field";
+import Card from "../Card";
 
 const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
 
@@ -20,22 +21,26 @@ const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
         }
     }
 
-    return <form onSubmit={handleSubmit}>
-        <h2>Ajout d'une mesure</h2>
-        <Field type="date"
-               name="date"
-               placeholder="Email"
-               value={date}
-               onChange={event => setDate(event.target.value)}
-               autoFocus>Date</Field>
-        <Field type="number"
-               name="value"
-               placeholder="10"
-               value={value}
-               onChange={event => setValue(Number(event.target.value))}>Mesure</Field>
+    return <Card className="min-w-[200px] overflow-hidden self-start w-full lg:w-auto">
+        <h2 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1">
+            Ajout d'une mesure
+        </h2>
+        <form onSubmit={handleSubmit} className="p-2 flex flex-col gap-2">
+            <Field type="date"
+                   name="date"
+                   placeholder="Email"
+                   value={date}
+                   onChange={event => setDate(event.target.value)}
+                   autoFocus>Date</Field>
+            <Field type="number"
+                   name="value"
+                   placeholder="10"
+                   value={value}
+                   onChange={event => setValue(Number(event.target.value))}>Mesure</Field>
 
-        <button type="submit" className="mt-3 w-full bg-blue-700 rounded">Valider</button>
-    </form>
+            <button type="submit" className="mt-2 px-2 py-1 w-full text-lg font-bold bg-blue-700 rounded">Valider</button>
+        </form>
+    </Card>
 }
 
 export default AddRainfall

resources/js/components/rainfall/LastFiveMesure.tsx

@@ -2,6 +2,7 @@ import React, {FC, useEffect, useState} from "react"
 import useAxiosTools from "../../hooks/AxiosTools";
 import {rainfall} from "../../types";
 import {AxiosError} from "axios";
+import Card from "../Card";
 
 const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
 
@@ -25,16 +26,18 @@ const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
         }
     }
 
-    return <div>
-        <h1>5 dernières mesures</h1>
+    return <Card className="min-w-[200px] overflow-hidden self-start w-full lg:w-auto">
+        <h1 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1">5 dernières mesures</h1>
         {error && <div>{error}</div>}
-        <ul>
-            {data.map(line => <li key={line.id} className="w-36 flex justify-between">
-                <span>{(new Date(line.date)).toLocaleDateString()}</span>
-                <span>{line.value}</span>
-            </li>)}
-        </ul>
-    </div>
+        <table className="w-full text-center">
+            <tbody>
+                {data.map(line => <tr key={line.id} className="">
+                    <td>{(new Date(line.date)).toLocaleDateString()}</td>
+                    <td className="text-right px-2">{line.value}</td>
+                </tr>)}
+            </tbody>
+        </table>
+    </Card>
 }
 
 export default LastFiveMesure