Pass toast object rather than index,

styled correctly

src/renderer/components/ft-toast/ft-toast.css

@@ -9,8 +9,10 @@
 .toast {
   display: flex;
   padding: 10px;
+  margin: 5px;
   overflow-y: auto;
-  background-color: var(--primary-input-color);
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
   opacity: 0;
   border-radius: 20px;
   cursor: pointer;

src/renderer/components/ft-toast/ft-toast.js

@@ -19,31 +19,32 @@ export default Vue.extend({
     FtToastEvents.$on('toast.open', this.open)
   },
   methods: {
-    performAction: function (index) {
+    performAction: function (toast) {
-      this.toasts[index].action()
+      toast.action()
-      this.close(index)
+      this.close(toast)
     },
-    close: function (index) {
+    close: function (toast) {
-      clearTimeout(this.toasts[index].timeout);
+      clearTimeout(toast.timeout);
-      this.toasts[index].isOpen = false
+      toast.isOpen = false
       if(this.queue.length !== 0) {
-        const toast = this.queue.shift()
+        const nexToast = this.queue.shift()
-        this.open(toast.message, toast.action)
+        this.open(nexToast.message, nexToast.action)
       }
     },
     open: function (message, action) {
       for(let i = this.toasts.length - 1; i >= 0 ; i--){
-        if (!this.toasts[i].isOpen) {
+        const toast = this.toasts[i]
-          return this.showToast(message, action, i)
+        if (!toast.isOpen) {
+          return this.showToast(message, action, toast)
         }
       }
       this.queue.push({ message: message, action: action })
     },
-    showToast: function(message, action, index) {
+    showToast: function(message, action, toast) {
-      this.toasts[index].message = message
+      toast.message = message
-      this.toasts[index].action = action || (() => {})
+      toast.action = action || (() => {})
-      this.toasts[index].isOpen = true
+      toast.isOpen = true
-      this.toasts[index].timeout = setTimeout(this.close, 2000, index)
+      toast.timeout = setTimeout(this.close, 2000, toast)
     }
   },
   beforeDestroy: function () {

src/renderer/components/ft-toast/ft-toast.vue

@@ -5,7 +5,7 @@
       :key="'toast-' + index"
       class="toast"
       :class="{ closed: !toast.isOpen, open: toast.isOpen }"
-      @click="performAction(index)"
+      @click="performAction(toast)"
     >
       <p class="message">{{ toast.message }}</p>
     </div>