Changed delete, added global styling

src/assets/scss/_variables.scss

@@ -4,7 +4,7 @@ $black: #000;
 $purple: #4741e6;
 $lilac: #7b76ff;
 $light-blue: #00c2ff;
-$red: #ff0000;
+$red: #d50000;
 $gray: #7f7f7f;
 $gray-2: #696969;
 $dark-gray: #454545;

src/assets/scss/login.scss

@@ -84,7 +84,6 @@
 
         &:hover {
           background-color: rgba($lilac, 0.75);
-          cursor: pointer;
         }
       }
     }
@@ -107,7 +106,6 @@ p,
 a,
 li,
 label {
-  font-family: Arial, sans-serif;
   color: $white;
 }
 

src/assets/scss/main.scss

@@ -27,6 +27,19 @@ h6 {
   font-family: GentiumPlus, serif;
 }
 
+p, 
+span, 
+li, 
+a,
+button,
+label {
+  font-family: Arial, sans-serif;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
 ::-webkit-scrollbar {
   display: none;
 }

src/components/screens/Characters.vue

@@ -5,6 +5,11 @@
         <div v-for="character in characters" :key="character.id" class="character" :class="{ active: selected_character == character.id }">
           <input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label :for="character.id">{{ character.name }}</label>
+          <!-- @TODO : Add a confirmation dialog -->
+          <button class="delete" @click="delete_character(character.id)">
+            <img src="/assets/icons/trashcan.svg">
+          </button>
+  
           <div class="sprite-container">
             <img src="/assets/avatar/default/base_right_down.png" />
           </div>
@@ -21,8 +26,6 @@
 
       <div class="buttons-wrapper">
         <button v-if="selected_character" @click="select_character()">Play</button>
-        <!-- @TODO : Add a confirmation dialog -->
-        <button v-if="selected_character" @click="delete_character()">Delete</button>
       </div>
     </div>
   </div>
@@ -73,9 +76,9 @@ function select_character() {
 }
 
 // Delete character logics
-function delete_character() {
-  if (!selected_character.value) return
-  socket.getConnection.emit('character:delete', { character_id: selected_character.value })
+function delete_character(character_id) {
+  if (!character_id) return
+  socket.getConnection.emit('character:delete', { character_id: character_id })
 }
 
 // Create character logics
@@ -131,6 +134,7 @@ function create() {
             background-color: transparent;
             border: none;
             height: 100%;
+            width: 100%;
             padding: 40px 0;
             display: flex;
             flex-direction: column;
@@ -149,9 +153,6 @@ function create() {
               color: $white;
               font-size: 16px;
             }
-            &:hover {
-              cursor: pointer;
-            }
           }
           &::before,
           &::after {
@@ -188,14 +189,27 @@ function create() {
         }
 
         label {
+          color: $white;
+          font-weight: bold;
           position: absolute;
           top: 20px;
           width: 100%;
-          text-align: center;
           transform: translateY(-50%);
-          font-family: Arial, sans-serif;
-          color: $white;
-          font-weight: bold;
+          text-align: center;
+        }
+
+        button.delete {
+          background-color: $red;
+          border: none;
+          width: 30px;
+          height: 30px;
+          padding: 5px;
+          border-radius: 100%;
+          z-index: 1;
+          right: -5px;
+          top: 0;
+          transform: translateY(-50%);
+          position: absolute;
         }
 
         span {
@@ -204,7 +218,6 @@ function create() {
           width: 100%;
           text-align: center;
           transform: translateY(50%);
-          font-family: Arial, sans-serif;
           color: $white;
           z-index: 1;
         }
@@ -239,7 +252,6 @@ function create() {
 
         &:hover {
           background-color: rgba($lilac, 0.75);
-          cursor: pointer;
         }
       }
     }

src/components/utilities/Modal.vue

@@ -126,8 +126,6 @@ onUnmounted(() => {
       }
 
       &:hover {
-        cursor: pointer;
-
         &::after {
           content: '';
           position: absolute;
@@ -164,7 +162,6 @@ onUnmounted(() => {
 
       &:hover {
         background-color: rgba($lilac, 0.75);
-        cursor: pointer;
       }
     }
     .modal-form {
@@ -174,7 +171,6 @@ onUnmounted(() => {
         flex-direction: column;
         margin-bottom: 20px;
         label {
-          font-family: Arial, sans-serif;
           margin-bottom: 10px;
         }
         input {