add SVG

resources/js/components/SVG.tsx

@@ -0,0 +1,36 @@
+import React, {ComponentProps, FC} from "react"
+
+const SVGSkeleton: FC<SVGSkeletonProps> = ({paths, viewBox = "0 0 24 24", className = "", title = null, ...props}) => {
+    return <svg xmlns="http://www.w3.org/2000/svg"
+                viewBox={viewBox}
+                fill="currentColor"
+                className={className}
+                {...props}>
+        {title && <title>{ title }</title>}
+        {paths}
+    </svg>
+}
+
+interface SVGSkeletonProps {
+    paths: string,
+    viewBox?: string,
+    className?: string,
+    title?: string,
+}
+
+export const DraggableSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
+    paths: <path d="M5 15q-.425 0-.712-.288T4 14q0-.425.288-.712T5 13h14q.425 0 .713.288T20 14q0 .425-.288.713T19 15zm0-4q-.425 0-.712-.288T4 10q0-.425.288-.712T5 9h14q.425 0 .713.288T20 10q0 .425-.288.713T19 11z"/>,
+    ...props
+})
+
+export const PlaySVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
+    viewBox: "0 0 448 512",
+    paths: <path
+        d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"/>,
+    ...props
+})
+
+export const StopSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
+    paths: <path d="M8 16h8V8H8zm4 6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"/>,
+    ...props
+})

resources/js/components/Tracker.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react"
 import useTracker from "../hooks/TraskerHook"
 import {Link} from "react-router-dom";
+import {StopSVG} from "./SVG";
 
 const Tracker = () => {
 
@@ -29,11 +30,13 @@ const Tracker = () => {
     return <div>
         {currentTimeTracker
             ? <div className="flex gap-2">
-                <Link to={`/todos/${currentTimeTracker.to_do.id}`}>
+                <Link to={`/todos/${currentTimeTracker.to_do.id}`} className="font-bold">
                     {currentTimeTracker.to_do.name}
                 </Link>
                 <span>{timer}</span>
-                <button onClick={stopCurrentTimeTrack}>Stop</button>
+                <button onClick={stopCurrentTimeTrack} className="flex items-center">
+                    <StopSVG className="w-6" />
+                </button>
             </div>
             : <div>--:--</div>
         }

resources/js/components/toDos/ToDoFinish.tsx

@@ -1,6 +1,7 @@
 import React, {FC, useEffect, useState} from "react"
 import useAxiosTools from "../../hooks/AxiosTools";
 import {toDo} from "../../utilities/types";
+import {PlaySVG} from "../SVG";
 
 const ToDoFinish: FC<ToDoFinishProps>  = ({reload}) => {
 
@@ -35,10 +36,10 @@ const ToDoFinish: FC<ToDoFinishProps>  = ({reload}) => {
     }
 
     return <div>
-        <button className="flex justify-between w-full bg-blue-700 px-2 py-1 rounded cursor-pointer"
+        <button className="flex justify-between items-center w-full bg-blue-700 px-2 py-1 rounded cursor-pointer"
                 onClick={handleShow}>
             <h2 className="inline">Tâches terminées</h2>
-            <span>Show</span>
+            <span><PlaySVG className={`w-4 transition ${showTodos ? 'rotate-90' : 'rotate-180'}`} /></span>
         </button>
 
         {errorLabel()}

resources/js/components/toDos/ToDoIndex.tsx

@@ -5,6 +5,7 @@ import {Link} from "react-router-dom";
 import useTracker from "../../hooks/TraskerHook";
 import {Simulate} from "react-dom/test-utils";
 import load = Simulate.load;
+import {DraggableSVG, PlaySVG} from "../SVG";
 
 const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
 
@@ -50,7 +51,7 @@ const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
         {errorLabel()}
         <ul className="my-5">
             {toDos.map(toDo => <li key={toDo.id} className="flex gap-2">
-                <span>Move</span>
+                <span><DraggableSVG className="w-6" /></span>
                 <input type={"checkbox"}
                        checked={!!toDo.checked}
                        onChange={() =>toggleCheck(toDo)}
@@ -59,9 +60,10 @@ const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
                       className={`${toDo.checked ? 'line-through' : ''} flex-1`}>
                     {toDo.name}
                 </Link>
-                {!toDo.checked && <span className="cursor-pointer"
+                {!toDo.checked && <span className="cursor-pointer flex items-center"
+                                        title="Commencer"
                                         onClick={() => startTrackToDo(toDo)}>
-                    Play
+                    <PlaySVG className="w-4" />
                 </span>}
             </li>)}
         </ul>