From 2cfe80de1187d76c7c0f4e635e0682d409a6ff95 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Tue, 2 Jul 2024 22:28:15 +0200
Subject: [PATCH] Styled chips + small typo fix ;)

---
 src/components/forms/ChipsInput.vue  | 65 +++++++++++++++-------------
 src/components/utilities/GmTools.vue |  2 +-
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index b3cd2b6..d23a2c1 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/utilities/GmTools.vue b/src/components/utilities/GmTools.vue
index 10b73d4..8c6f97c 100644
--- a/src/components/utilities/GmTools.vue
+++ b/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>