[~] New server type implementation

src/components/serverCard/serverCard.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import styles from './serverCard.module.scss';
 
-const ServerCard = ({ color, status, version, link, name, onRunClick, onStopClick, onDeleteClick ,subdomain }) => {
+import paper_mc from '../../assets/frameworks/paper_mc.png'
+
+const ServerCard = ({ color, status, version, link, name, onRunClick, onStopClick, onDeleteClick }) => {
 
   const getStatusColor = () => {
     switch (status) {
@@ -40,22 +42,24 @@ const ServerCard = ({ color, status, version, link, name, onRunClick, onStopClic
     <a href={link} className={styles.serverCard}>
       <div className={styles.leftCard}>
         <div className={styles.status}>
-          <span className={styles.statusOuterDot}>
-            <span className={styles.statusInnerDot} style={{ backgroundColor: getStatusColor() }}></span>
-          </span>
           <div className={styles.name}>{name}</div>
+          <img src={paper_mc} alt={`${name} Icon`} className={styles.statusInnerDot}/>
+          <div className="tooltip"></div>
         </div>
         <div className={styles.buttonContainer}>
           {status && (
             <button className={styles.runButton} onClick={handleRun}>Démarrer</button>
           )}
           {!status && (
+            <button className={styles.runButton} onClick={handleRun}>Démarrer</button>
+          )}
+          {status && (
             <button className={styles.stopButton} onClick={handleStop}>Arrêter</button>
           )}
         </div>
       </div>
       <div className={styles.version}>Version: {version}</div>
-      <div className={styles.version}>Adresse ip: {subdomain + ".servii.fr"}</div >
+      <div className={styles.version}>Adresse ip: {"" + ".servii.fr"}</div >
       <button className={styles.deleteButton} onClick={handleDelete}>Supprimer</button>
     </a>
   );

src/components/serverCard/serverCard.module.scss

@@ -1,8 +1,8 @@
 .serverCard {
   width: var(--card-width);
   padding: var(--card-padding);
-  border: 0.1rem solid var(--card-border-color);
-  border-radius: 0.5rem;
+  border: 0.2rem solid var(--card-border-color);
+  border-radius: 0.8rem;
   text-decoration: none;
   display: flex;
   flex-direction: row;
@@ -28,13 +28,15 @@
 }
 
 .statusInnerDot {
-  width: 10px;
-  height: 10px;
+  width: 27px;
+  height: 27px;
   border-radius: 50%;
 }
 
 .name {
   font-size: 1.5rem;
+  font-weight: bold;
+  padding-right: 0.5rem;
 }
 
 .version {

src/pages/DashboardPage/DashboardPage.jsx

@@ -84,6 +84,7 @@ const DashboardPage = ({ user }) => {
                 status={server.running}
                 version={server.version}
                 name={server.name}
+                framework={server.framework}
                 onRunClick={() => handleRunServer(server.name)}
                 onStopClick={() => handleStopServer(server.name)}
                 onDeleteClick={() => handleDeleteServer(server.name)}