Translate css name to kebab-case

front/style/home/personnal_space.css

@@ -3,14 +3,14 @@
     flex-direction: column;
 }
 
-#titlePersonalSpace h2 {
+#title-personal-space h2 {
     text-align: center;
     color: var(--main-contrast-color);
     /* font-family: Helvetica;
     font-weight: bold; */
 }
 
-#bodyPersonalSpace {
+#body-personal-space {
     width: 95%;
     /* background-color: #ccc2b7; */
     border: 3px var(--main-color) solid;
@@ -18,7 +18,7 @@
     align-self: center;
 }
 
-#bodyPersonalSpace table {
+#body-personal-space table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 1em;
@@ -26,7 +26,7 @@
     overflow: hidden;
 }
 
-#bodyPersonalSpace td {
+#body-personal-space td {
     width: 80px !important;
     padding-bottom: 1%;
     padding-top: 1%;

front/style/home/side_menu.css

@@ -1,6 +1,6 @@
 @import url(../theme/dark.css);
 
-#sideMenu {
+#side-menu {
     background-color: var(--third-color);
     display: flex;
     flex-direction: column;
@@ -8,21 +8,21 @@
     overflow: hidden;
 }
 
-#sideMenu h2 {
+#side-menu h2 {
     display: inline-block;
     margin-right: 5%;
 }
 
-#sideMenuContent {
+#side-menu-content {
     width: 90%;
 }
-.titreSideMenu {
+.titre-side-menu {
     border-bottom: var(--main-color) solid 3px;
     width: 100%;
     margin-bottom: 3%;
 }
 
-#sideMenu .title {
+#side-menu .title {
     font-size: 12px;
     font-weight: bold;
     color: var(--main-contrast-color);
@@ -38,7 +38,7 @@
     border-radius: 100%;
 }
 
-.buttonSideMenu {
+.button-side-menu {
     /* border : black solid 1px; */
     border-radius: 0.5cap;
     width: fit-content;
@@ -47,7 +47,7 @@
     overflow: hidden;
 }
 
-.buttonSideMenu:hover {
+.button-side-menu:hover {
     /* background-color: #c9d1e0; */
     cursor: pointer;
 }

front/style/template/header.css

@@ -58,7 +58,7 @@
     width: 100%;
 }
 
-#IQBall {
+#iqball {
     color: var(--accent-color);
     font-weight: bold;
     font-size: 45px;

front/views/Home.tsx

@@ -75,11 +75,11 @@ function SideMenu({
 }) {
     return (
         <div
-            id="sideMenu"
+            id="side-menu"
             style={{
                 width: width + "%",
             }}>
-            <div id="sideMenuContent">
+            <div id="side-menu-content">
                 <Team teams={teams} />
                 <Tactic lastTactics={lastTactics} />
             </div>
@@ -108,7 +108,7 @@ function PersonalSpace({
 
 function TitlePersonalSpace() {
     return (
-        <div id="titlePersonalSpace">
+        <div id="title-personal-space">
             <h2>Espace Personnel</h2>
         </div>
     )
@@ -168,7 +168,7 @@ function BodyPersonalSpace({ allTactics }: { allTactics: Tactic[] }) {
     }
 
     return (
-        <div id="bodyPersonalSpace">
+        <div id="body-personal-space">
             <table>
                 <tbody key="tbody">{data}</tbody>
             </table>
@@ -187,7 +187,7 @@ function Team({ teams }: { teams: Team[] }) {
     ))
     return (
         <div id="teams">
-            <div className="titreSideMenu">
+            <div className="titre-side-menu">
                 <h2 className="title">Mes équipes</h2>
                 <button
                     className="new"
@@ -203,11 +203,11 @@ function Team({ teams }: { teams: Team[] }) {
 function Tactic({ lastTactics }: { lastTactics: Tactic[] }) {
     return (
         <div id="tactic">
-            <div className="titreSideMenu">
+            <div className="titre-side-menu">
                 <h2 className="title">Mes dernières stratégies</h2>
                 <button
                     className="new"
-                    id="createTactic"
+                    id="create-tactic"
                     onClick={() => (location.pathname = "/tactic/new")}>
                     +
                 </button>
@@ -221,12 +221,12 @@ function SetButtonTactic({ tactics }: { tactics: Tactic[] }) {
     const lastTactics = tactics.map((tactic) => (
         <ButtonLastTactic tactic={tactic} />
     ))
-    return <div className="SetButton">{lastTactics}</div>
+    return <div className="set-button">{lastTactics}</div>
 }
 
 function SetButtonTeam({ teams }: { teams: Team[] }) {
     const listTeam = teams.map((teams) => <ButtonTeam team={teams} />)
-    return <div className="SetButton">{listTeam}</div>
+    return <div className="set-button">{listTeam}</div>
 }
 
 function ButtonTeam({ team }: { team: Team }) {
@@ -234,8 +234,8 @@ function ButtonTeam({ team }: { team: Team }) {
     return (
         <div>
             <div
-                id={"ButtonTeam" + team.id}
-                className="buttonSideMenu data"
+                id={"button-team" + team.id}
+                className="button-side-menu data"
                 onClick={() => {
                     location.pathname = "/team/" + team.id
                 }}>
@@ -249,8 +249,8 @@ function ButtonLastTactic({ tactic }: { tactic: Tactic }) {
     const name = troncName(tactic.name, 20)
     return (
         <div
-            id={"Button" + tactic.id}
-            className="buttonSideMenu data"
+            id={"button" + tactic.id}
+            className="button-side-menu data"
             onClick={() => {
                 location.pathname = "/tactic/" + tactic.id + "/edit"
             }}>

front/views/template/Header.tsx

@@ -9,7 +9,7 @@ export function Header({ username }: { username: string }) {
             <div id="header-left"></div>
             <div id="header-center">
                 <h1
-                    id="IQBall"
+                    id="iqball"
                     className="clickable"
                     onClick={() => {
                         location.pathname = "/"