[~] Dynamic framework icon handling.

src/components/serverCard/serverCard.jsx

@@ -1,18 +1,25 @@
 import React from 'react';
 import styles from './serverCard.module.scss';
 
-import paper_mc from '../../assets/frameworks/paper_mc.png'
+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'
 
-const ServerCard = ({status, version, link, name, onRunClick, onStopClick, onDeleteClick }) => {
+const ServerCard = ({status, version, link, name, framework, onRunClick, onStopClick, onDeleteClick }) => {
 
-  const getStatusColor = () => {
+  const getFrameworkSource = () => {
-    switch (status) {
+    switch (framework) {
-      case true:
+      case "bukkit":
-        return 'green';
+        return bukkit;
+      case "spigot":
+        return spigot;
+      case "paper":
+        return paper;
       default:
-        return 'gray';
+        return vanilla;
     }
-  };
+  }
 
   const handleRun = async () => {
     try {
@@ -43,7 +50,7 @@ const ServerCard = ({status, version, link, name, onRunClick, onStopClick, onDel
       <div className={styles.leftCard}>
         <div className={styles.status}>
           <div className={styles.name}>{name}</div>
-          <img src={paper_mc} alt={`${name} Icon`} className={styles.statusInnerDot}/>
+          <img src={getFrameworkSource()} alt={`${name} Icon`} className={styles.statusInnerDot}/>
           <div className="tooltip"></div>
         </div>
         <div className={styles.buttonContainer}>

src/components/serverCard/serverCard.module.scss

@@ -30,7 +30,6 @@
 .statusInnerDot {
   width: 27px;
   height: 27px;
-  border-radius: 50%;
 }
 
 .name {