[~] New button styles

src/components/serverCard/serverCard.jsx

@@ -5,6 +5,7 @@ import paper from '../../assets/frameworks/paper_mc.png'
 import spigot from '../../assets/frameworks/spigot.png'
 import bukkit from '../../assets/frameworks/bukkit.png'
 import vanilla from '../../assets/frameworks/vanilla.png'
+import delete_button from '../../assets/frameworks/delete.png'
 
 const ServerCard = ({status, version, link, name, framework, onRunClick, onStopClick, onDeleteClick }) => {
 
@@ -50,21 +51,21 @@ const ServerCard = ({status, version, link, name, framework, onRunClick, onStopC
       <div className={styles.leftCard}>
         <div className={styles.status}>
           <div className={styles.name}>{name}</div>
-          <img src={getFrameworkSource()} alt={`${name} Icon`} className={styles.statusInnerDot}/>
+          <img src={getFrameworkSource()} alt={`${name} Icon`} className={styles.frameworkIcon}/>
           <div className="tooltip"></div>
         </div>
         <div className={styles.buttonContainer}>
           {!status && (
-            <button className={styles.runButton} onClick={handleRun}>Démarrer</button>
+            <button className={styles.stoppedButton} onClick={handleRun}>▶ Démarrer</button>
           )}
           {status && (
-            <button className={styles.stopButton} onClick={handleStop}>Arrêter</button>
+            <button className={styles.runningButton} onClick={handleStop}>◼ Arrêter</button>
           )}
         </div>
       </div>
       <div className={styles.version}>Version: {version}</div>
-      <div className={styles.version}>Adresse ip: {"" + ".servii.fr"}</div >
-      <button className={styles.deleteButton} onClick={handleDelete}>Supprimer</button>
+      <div className={styles.version}></div >
+      <button className={styles.runningButton} onClick={handleDelete}><img src={delete_button} className={styles.deleteButton}/></button>
     </a>
   );
 };

src/components/serverCard/serverCard.module.scss

@@ -16,20 +16,40 @@
   align-items: center;
 }
 
-.statusOuterDot {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background-color: gray;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-}
-
-.statusInnerDot {
+.frameworkIcon {
   width: 27px;
   height: 27px;
+  pointer-events: none;
+}
+
+.stoppedButton{
+  background-color: #008d5f;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 0.6rem;
+  outline: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease; /* Smooth transition for color change */
+}
+.runningButton{
+  background-color: #8d213e;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 0.6rem;
+  outline: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease; /* Smooth transition for color change */
+}
+.deleteButton{
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  pointer-events: none;
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE/Edge */
 }
 
 .name {