Styled chips + small typo fix ;)

src/components/forms/ChipsInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chip-container">
     <div v-for="(chip, i) in chips" :key="i" class="chip">
-      {{ chip }}
+      <span>{{ chip }}</span>
       <i class="delete-icon" @click="deleteChip(i)">X</i>
     </div>
     <input
@@ -43,41 +43,46 @@ const backspaceDelete = (event) => {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/assets/scss/main.scss';
+
 .chip-container {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   border-bottom: 1px solid #e0e0e0;
+
+  .chip {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    background-color: $cyan;
+    border-radius: 5px;
+    padding: 5px 10px;
+    margin: 4px;
+
+    .delete-icon {
+      cursor: pointer;
+      color: $white;
+      font-weight: 300;
+      font-family: $default;
+      font-style: normal;
+      &:hover {
+        color: $light-gray;
+      }
+    }
+  }
+
+  input {
+    border: none;
+    outline: none;
+    padding: 4px;
+    margin: 4px;
+    color:white;
+  }
+
+  
 }
 
-.chip {
-  display: flex;
-  align-items: center;
-  background-color: #e0e0e0;
-  border-radius: 16px;
-  padding: 0 8px;
-  margin: 4px;
-}
 
-.chip i {
-  cursor: pointer;
-  font-size: 18px;
-  margin-left: 4px;
-}
-
-input {
-  border: none;
-  outline: none;
-  padding: 4px;
-  margin: 4px;
-  color:white;
-}
-
-.delete-icon {
-  cursor: pointer;
-  color: red;
-  font-weight: bold;
-  font-family: Arial, sans-serif;
-}
 </style>

src/components/utilities/GmTools.vue

@@ -5,7 +5,7 @@
     </template>
     <template #modalBody>
       <div class="content">
-        <button class="btn-cyan w-full" type="button" @click="gmPanelStore.toggle()">Tooggle GM panel</button>
+        <button class="btn-cyan w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button>
         <button class="btn-cyan w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
       </div>
     </template>