add button css

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) {
-            console.error(e)
+        } catch (error) {
+            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