From 202e5c0c492621b638e54b39bb480898fbde02a1 Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Tue, 26 Sep 2023 17:39:10 +0300
Subject: [PATCH 01/11] make toasts at top with icon, remove green color

---
 packages/playground/src/components/deposit_dialog.vue  | 4 ++--
 packages/playground/src/components/funds_card.vue      | 4 ++--
 packages/playground/src/components/tf_notification.vue | 2 ++
 packages/playground/src/portal/bridge_view.vue         | 4 ++--
 packages/playground/src/portal/transfer_view.vue       | 6 +++++-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index 5c81e2d7de..2db0392b3e 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -108,7 +108,7 @@ onMounted(async () => {
     const DecimalDeposit = new Decimal(receivedDeposit);
     const divisor = new Decimal(10000000);
     createToast(`You have received ${DecimalDeposit.dividedBy(divisor)} TFT`, {
-      position: "bottom-right",
+      position: "top-right",
       hideProgressBar: true,
       toastBackgroundColor: "black",
       timeout: 5000,
@@ -121,7 +121,7 @@ onMounted(async () => {
     if (destroyed) return;
     console.log(e);
     createToast(e as string, {
-      position: "bottom-right",
+      position: "top-right",
       hideProgressBar: true,
       toastBackgroundColor: "red",
       timeout: 5000,
diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index b4c829025b..9e4629da01 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -37,7 +37,7 @@ export default {
           await ProfileManagerController.reloadBalance();
           loadingAddTFT.value = false;
           createToast(`Success!`, {
-            position: "bottom-right",
+            position: "top-right",
             hideProgressBar: true,
             toastBackgroundColor: "#1aa18f",
             timeout: 5000,
@@ -48,7 +48,7 @@ export default {
           loadingAddTFT.value = false;
           console.log("Error: ", e);
           createToast(`Get more TFT failed!`, {
-            position: "bottom-right",
+            position: "top-right",
             hideProgressBar: true,
             toastBackgroundColor: "black",
             timeout: 5000,
diff --git a/packages/playground/src/components/tf_notification.vue b/packages/playground/src/components/tf_notification.vue
index 4f8ebd9a4c..aade3b52b5 100644
--- a/packages/playground/src/components/tf_notification.vue
+++ b/packages/playground/src/components/tf_notification.vue
@@ -33,6 +33,8 @@ onMounted(async () => {
         hideProgressBar: true,
         toastBackgroundColor: "red",
         timeout: 5000,
+        showIcon: true,
+        type: "info",
       });
     }
     await new Promise(resolve => setTimeout(resolve, 15 * 60 * 1000));
diff --git a/packages/playground/src/portal/bridge_view.vue b/packages/playground/src/portal/bridge_view.vue
index 54a43cebd6..d8d2a8511f 100644
--- a/packages/playground/src/portal/bridge_view.vue
+++ b/packages/playground/src/portal/bridge_view.vue
@@ -207,7 +207,7 @@ async function withdrawTFT(targetAddress: string, withdrawAmount: number) {
     loadingWithdraw.value = false;
     await ProfileManagerController.reloadBalance();
     createToast("Transaction Succeeded", {
-      position: "bottom-right",
+      position: "top-right",
       hideProgressBar: true,
       toastBackgroundColor: "black",
       timeout: 5000,
@@ -221,7 +221,7 @@ async function withdrawTFT(targetAddress: string, withdrawAmount: number) {
     amount.value = 0;
     loadingWithdraw.value = false;
     createToast("Withdraw Failed!", {
-      position: "bottom-right",
+      position: "top-right",
       hideProgressBar: true,
       toastBackgroundColor: "red",
       timeout: 5000,
diff --git a/packages/playground/src/portal/transfer_view.vue b/packages/playground/src/portal/transfer_view.vue
index d674c46314..120a45e08e 100644
--- a/packages/playground/src/portal/transfer_view.vue
+++ b/packages/playground/src/portal/transfer_view.vue
@@ -211,8 +211,10 @@ async function transfer(receipientTwin: Twin) {
       createToast("Transaction Complete!", {
         position: "top-right",
         hideProgressBar: true,
-        toastBackgroundColor: "green",
+        toastBackgroundColor: "#1aa18f",
         timeout: 5000,
+        showIcon: true,
+        type: "success",
       });
       profileManagerController.reloadBalance();
       await getFreeBalance();
@@ -232,6 +234,8 @@ function createInvalidTransferToast(message: string) {
     hideProgressBar: true,
     toastBackgroundColor: "red",
     timeout: 5000,
+    showIcon: true,
+    type: "danger",
   });
 }
 async function submitFormTwinID() {

From ef9166573dd21e5477dfd0c7e68bb875f0d5f65a Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Tue, 26 Sep 2023 17:49:27 +0300
Subject: [PATCH 02/11] add meaningful message

---
 packages/playground/src/components/funds_card.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index 9e4629da01..3840ca3c37 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -36,7 +36,7 @@ export default {
           await grid?.balance.getMoreFunds();
           await ProfileManagerController.reloadBalance();
           loadingAddTFT.value = false;
-          createToast(`Success!`, {
+          createToast(` Success! You have received TFTs.!`, {
             position: "top-right",
             hideProgressBar: true,
             toastBackgroundColor: "#1aa18f",

From 6b792fb73fd4509b167cb89dbc83eb62a40871e4 Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Tue, 26 Sep 2023 17:51:10 +0300
Subject: [PATCH 03/11] remove exclamation mark

---
 packages/playground/src/components/funds_card.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index 3840ca3c37..7d13b7a97b 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -36,7 +36,7 @@ export default {
           await grid?.balance.getMoreFunds();
           await ProfileManagerController.reloadBalance();
           loadingAddTFT.value = false;
-          createToast(` Success! You have received TFTs.!`, {
+          createToast(` Success! You have received TFTs.`, {
             position: "top-right",
             hideProgressBar: true,
             toastBackgroundColor: "#1aa18f",

From 76b91723bea1c292cee046df01d743857f4adae8 Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Thu, 28 Sep 2023 14:56:35 +0300
Subject: [PATCH 04/11] remove black color

---
 packages/playground/src/components/deposit_dialog.vue | 2 +-
 packages/playground/src/components/funds_card.vue     | 2 +-
 packages/playground/src/portal/bridge_view.vue        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index 2db0392b3e..9917311816 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -110,7 +110,7 @@ onMounted(async () => {
     createToast(`You have received ${DecimalDeposit.dividedBy(divisor)} TFT`, {
       position: "top-right",
       hideProgressBar: true,
-      toastBackgroundColor: "black",
+      toastBackgroundColor: "#1aa18f",
       timeout: 5000,
       showIcon: true,
       type: "success",
diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index 7d13b7a97b..00365af219 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -50,7 +50,7 @@ export default {
           createToast(`Get more TFT failed!`, {
             position: "top-right",
             hideProgressBar: true,
-            toastBackgroundColor: "black",
+            toastBackgroundColor: "red",
             timeout: 5000,
             type: "danger",
             showIcon: true,
diff --git a/packages/playground/src/portal/bridge_view.vue b/packages/playground/src/portal/bridge_view.vue
index d8d2a8511f..c22b5f7b7c 100644
--- a/packages/playground/src/portal/bridge_view.vue
+++ b/packages/playground/src/portal/bridge_view.vue
@@ -209,7 +209,7 @@ async function withdrawTFT(targetAddress: string, withdrawAmount: number) {
     createToast("Transaction Succeeded", {
       position: "top-right",
       hideProgressBar: true,
-      toastBackgroundColor: "black",
+      toastBackgroundColor: "#1aa18f",
       timeout: 5000,
       showIcon: true,
       type: "success",

From 278b4c1a9d6b8fa6a204cd053924184cd83c045a Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Thu, 28 Sep 2023 14:59:23 +0300
Subject: [PATCH 05/11] update colors

---
 packages/playground/src/components/deposit_dialog.vue  | 2 +-
 packages/playground/src/components/funds_card.vue      | 2 +-
 packages/playground/src/components/tf_notification.vue | 2 +-
 packages/playground/src/portal/bridge_view.vue         | 2 +-
 packages/playground/src/portal/transfer_view.vue       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index 9917311816..ed14e831e6 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -123,7 +123,7 @@ onMounted(async () => {
     createToast(e as string, {
       position: "top-right",
       hideProgressBar: true,
-      toastBackgroundColor: "red",
+      toastBackgroundColor: "#FF5252",
       timeout: 5000,
       showIcon: true,
       type: "danger",
diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index 00365af219..aad5fdff74 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -50,7 +50,7 @@ export default {
           createToast(`Get more TFT failed!`, {
             position: "top-right",
             hideProgressBar: true,
-            toastBackgroundColor: "red",
+            toastBackgroundColor: "#FF5252",
             timeout: 5000,
             type: "danger",
             showIcon: true,
diff --git a/packages/playground/src/components/tf_notification.vue b/packages/playground/src/components/tf_notification.vue
index aade3b52b5..7441db4d30 100644
--- a/packages/playground/src/components/tf_notification.vue
+++ b/packages/playground/src/components/tf_notification.vue
@@ -31,7 +31,7 @@ onMounted(async () => {
       createToast("You have " + contractsCount.value + " contracts in grace period", {
         position: "top-right",
         hideProgressBar: true,
-        toastBackgroundColor: "red",
+        toastBackgroundColor: "#FF5252",
         timeout: 5000,
         showIcon: true,
         type: "info",
diff --git a/packages/playground/src/portal/bridge_view.vue b/packages/playground/src/portal/bridge_view.vue
index c22b5f7b7c..74a0900d08 100644
--- a/packages/playground/src/portal/bridge_view.vue
+++ b/packages/playground/src/portal/bridge_view.vue
@@ -223,7 +223,7 @@ async function withdrawTFT(targetAddress: string, withdrawAmount: number) {
     createToast("Withdraw Failed!", {
       position: "top-right",
       hideProgressBar: true,
-      toastBackgroundColor: "red",
+      toastBackgroundColor: "#FF5252",
       timeout: 5000,
       showIcon: true,
       type: "danger",
diff --git a/packages/playground/src/portal/transfer_view.vue b/packages/playground/src/portal/transfer_view.vue
index 120a45e08e..163bfb0346 100644
--- a/packages/playground/src/portal/transfer_view.vue
+++ b/packages/playground/src/portal/transfer_view.vue
@@ -232,7 +232,7 @@ function createInvalidTransferToast(message: string) {
   createToast(message, {
     position: "top-right",
     hideProgressBar: true,
-    toastBackgroundColor: "red",
+    toastBackgroundColor: "#FF5252",
     timeout: 5000,
     showIcon: true,
     type: "danger",

From a4c6a53e4b2265ad0b0b51d001cd2d60d684be18 Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Thu, 5 Oct 2023 17:44:19 +0300
Subject: [PATCH 06/11] add custom toast

---
 .../src/components/custom_toast.vue           | 28 +++++++++++++++++++
 .../src/components/deposit_dialog.vue         | 20 ++-----------
 .../playground/src/components/funds_card.vue  | 24 +++++-----------
 .../src/components/tf_notification.vue        | 11 ++------
 .../playground/src/portal/bridge_view.vue     | 20 ++-----------
 .../playground/src/portal/transfer_view.vue   | 21 +++-----------
 6 files changed, 47 insertions(+), 77 deletions(-)
 create mode 100644 packages/playground/src/components/custom_toast.vue

diff --git a/packages/playground/src/components/custom_toast.vue b/packages/playground/src/components/custom_toast.vue
new file mode 100644
index 0000000000..45389f670a
--- /dev/null
+++ b/packages/playground/src/components/custom_toast.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import { createToast, type ToastOptions } from "mosha-vue-toastify";
+
+const typeToColor: { [key: string]: string } = {
+  success: "#1aa18f",
+  danger: "#FF5252",
+  info: "#1aa18f",
+};
+
+export function createCustomToast(content: string, type: "danger" | "default" | "info" | "success" | "warning") {
+  const toastOptions: ToastOptions = {
+    hideProgressBar: true,
+    position: "top-right",
+    timeout: 5000,
+    showIcon: true,
+    type,
+    toastBackgroundColor: typeToColor[type],
+  };
+
+  createToast(content, toastOptions);
+}
+</script>
+
+<style>
+.mosha__toast__content-wrapper {
+  margin-bottom: -2px;
+}
+</style>
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index ed14e831e6..04f33d8fe8 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -57,13 +57,13 @@
 
 <script setup lang="ts">
 import { Decimal } from "decimal.js";
-import { createToast } from "mosha-vue-toastify";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import QrcodeGenerator from "../components/qrcode_generator.vue";
 import { useProfileManager } from "../stores";
 import { getGrid } from "../utils/grid";
+import { createCustomToast } from "./custom_toast.vue";
 
 const depositDialog = ref(false);
 const emits = defineEmits(["close"]);
@@ -107,27 +107,13 @@ onMounted(async () => {
     if (destroyed) return;
     const DecimalDeposit = new Decimal(receivedDeposit);
     const divisor = new Decimal(10000000);
-    createToast(`You have received ${DecimalDeposit.dividedBy(divisor)} TFT`, {
-      position: "top-right",
-      hideProgressBar: true,
-      toastBackgroundColor: "#1aa18f",
-      timeout: 5000,
-      showIcon: true,
-      type: "success",
-    });
+    createCustomToast(`You have received ${DecimalDeposit.dividedBy(divisor)} TFT`, "success");
     await ProfileManagerController.reloadBalance();
     closeDialog();
   } catch (e) {
     if (destroyed) return;
     console.log(e);
-    createToast(e as string, {
-      position: "top-right",
-      hideProgressBar: true,
-      toastBackgroundColor: "#FF5252",
-      timeout: 5000,
-      showIcon: true,
-      type: "danger",
-    });
+    createCustomToast(e as string, "danger");
     closeDialog();
   }
 });
diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index aad5fdff74..06f02df0a2 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -13,9 +13,9 @@
 </template>
 
 <script lang="ts">
-import { createToast } from "mosha-vue-toastify";
 import { ref } from "vue";
 
+import { createCustomToast } from "../components/custom_toast.vue";
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useProfileManager } from "../stores";
 import { getGrid } from "../utils/grid";
@@ -36,25 +36,11 @@ export default {
           await grid?.balance.getMoreFunds();
           await ProfileManagerController.reloadBalance();
           loadingAddTFT.value = false;
-          createToast(` Success! You have received TFTs.`, {
-            position: "top-right",
-            hideProgressBar: true,
-            toastBackgroundColor: "#1aa18f",
-            timeout: 5000,
-            type: "success",
-            showIcon: true,
-          });
+          createCustomToast("Success! You have received TFTs.", "success");
         } catch (e) {
           loadingAddTFT.value = false;
           console.log("Error: ", e);
-          createToast(`Get more TFT failed!`, {
-            position: "top-right",
-            hideProgressBar: true,
-            toastBackgroundColor: "#FF5252",
-            timeout: 5000,
-            type: "danger",
-            showIcon: true,
-          });
+          createCustomToast("Get more TFT failed!", "danger");
         }
       }
     };
@@ -75,4 +61,8 @@ export default {
 :root {
   --primary: #1aa18f;
 }
+
+.mosha__toast__content-wrapper {
+  margin-bottom: -2px;
+}
 </style>
diff --git a/packages/playground/src/components/tf_notification.vue b/packages/playground/src/components/tf_notification.vue
index 7441db4d30..859f865a03 100644
--- a/packages/playground/src/components/tf_notification.vue
+++ b/packages/playground/src/components/tf_notification.vue
@@ -6,12 +6,12 @@
 import "mosha-vue-toastify/dist/style.css";
 
 import { ContractStates } from "@threefold/grid_client";
-import { createToast } from "mosha-vue-toastify";
 import { onMounted } from "vue";
 import { ref } from "vue";
 
 import { useProfileManager } from "../stores";
 import { getGrid } from "../utils/grid";
+import { createCustomToast } from "./custom_toast.vue";
 
 const profileManager = useProfileManager();
 const contractsCount = ref(0);
@@ -28,14 +28,7 @@ onMounted(async () => {
     ) {
       contractsCount.value =
         contracts.nameContracts.length + contracts.nodeContracts.length + contracts.rentContracts.length;
-      createToast("You have " + contractsCount.value + " contracts in grace period", {
-        position: "top-right",
-        hideProgressBar: true,
-        toastBackgroundColor: "#FF5252",
-        timeout: 5000,
-        showIcon: true,
-        type: "info",
-      });
+      createCustomToast("You have " + contractsCount.value + " contracts in grace period", "info");
     }
     await new Promise(resolve => setTimeout(resolve, 15 * 60 * 1000));
   }
diff --git a/packages/playground/src/portal/bridge_view.vue b/packages/playground/src/portal/bridge_view.vue
index 74a0900d08..27baa9ba3f 100644
--- a/packages/playground/src/portal/bridge_view.vue
+++ b/packages/playground/src/portal/bridge_view.vue
@@ -92,10 +92,10 @@
 </template>
 
 <script lang="ts" setup>
-import { createToast } from "mosha-vue-toastify";
 import { default as StellarSdk, StrKey } from "stellar-sdk";
 import { onMounted, ref } from "vue";
 
+import { createCustomToast } from "../components/custom_toast.vue";
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useProfileManager } from "../stores";
 import { getGrid, loadBalance } from "../utils/grid";
@@ -206,28 +206,14 @@ async function withdrawTFT(targetAddress: string, withdrawAmount: number) {
     amount.value = 0;
     loadingWithdraw.value = false;
     await ProfileManagerController.reloadBalance();
-    createToast("Transaction Succeeded", {
-      position: "top-right",
-      hideProgressBar: true,
-      toastBackgroundColor: "#1aa18f",
-      timeout: 5000,
-      showIcon: true,
-      type: "success",
-    });
+    createCustomToast("Transaction Succeeded", "success");
   } catch (e) {
     console.log("Error withdrawing, Error: ", e);
     openWithdrawDialog.value = false;
     target.value = "";
     amount.value = 0;
     loadingWithdraw.value = false;
-    createToast("Withdraw Failed!", {
-      position: "top-right",
-      hideProgressBar: true,
-      toastBackgroundColor: "#FF5252",
-      timeout: 5000,
-      showIcon: true,
-      type: "danger",
-    });
+    createCustomToast("Withdraw Failed!", "danger");
   }
 }
 </script>
diff --git a/packages/playground/src/portal/transfer_view.vue b/packages/playground/src/portal/transfer_view.vue
index 163bfb0346..51cb63dcec 100644
--- a/packages/playground/src/portal/transfer_view.vue
+++ b/packages/playground/src/portal/transfer_view.vue
@@ -119,9 +119,10 @@
 <script lang="ts" setup>
 import { Keyring } from "@polkadot/keyring";
 import type { Twin } from "@threefold/tfchain_client";
-import { createToast } from "mosha-vue-toastify";
 import { onMounted, ref } from "vue";
 
+import { createCustomToast } from "@/components/custom_toast.vue";
+
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useProfileManager } from "../stores";
 import { getGrid, loadBalance } from "../utils/grid";
@@ -208,14 +209,7 @@ async function transfer(receipientTwin: Twin) {
   try {
     if (grid) {
       await grid.balance.transfer({ address: receipientTwin.accountId, amount: transferAmount.value });
-      createToast("Transaction Complete!", {
-        position: "top-right",
-        hideProgressBar: true,
-        toastBackgroundColor: "#1aa18f",
-        timeout: 5000,
-        showIcon: true,
-        type: "success",
-      });
+      createCustomToast("Transaction Complete!", "success");
       profileManagerController.reloadBalance();
       await getFreeBalance();
     }
@@ -229,14 +223,7 @@ async function submitFormAddress() {
   loadingAddressTransfer.value = false;
 }
 function createInvalidTransferToast(message: string) {
-  createToast(message, {
-    position: "top-right",
-    hideProgressBar: true,
-    toastBackgroundColor: "#FF5252",
-    timeout: 5000,
-    showIcon: true,
-    type: "danger",
-  });
+  createCustomToast(message, "danger");
 }
 async function submitFormTwinID() {
   const grid = await getGrid(profile.value);

From 05c8e4cc2764190b90ba15cc2c12579209bf64f7 Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Mon, 9 Oct 2023 12:51:05 +0300
Subject: [PATCH 07/11] add pr comments

---
 .../src/components/custom_toast.vue           | 29 +++++++++++++++----
 .../src/components/deposit_dialog.vue         |  6 ++--
 .../playground/src/components/funds_card.vue  | 10 ++-----
 .../src/components/tf_notification.vue        |  4 +--
 .../playground/src/portal/bridge_view.vue     |  6 ++--
 .../playground/src/portal/transfer_view.vue   |  6 ++--
 6 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/packages/playground/src/components/custom_toast.vue b/packages/playground/src/components/custom_toast.vue
index 45389f670a..3723dbffc8 100644
--- a/packages/playground/src/components/custom_toast.vue
+++ b/packages/playground/src/components/custom_toast.vue
@@ -1,17 +1,27 @@
 <script lang="ts">
 import { createToast, type ToastOptions } from "mosha-vue-toastify";
 
-const typeToColor: { [key: string]: string } = {
-  success: "#1aa18f",
-  danger: "#FF5252",
-  info: "#1aa18f",
+export enum ToastType {
+  danger = "danger",
+  default = "default",
+  info = "info",
+  success = "success",
+  warning = "warning",
+}
+
+const typeToColor: { [key in ToastType]: string } = {
+  [ToastType.danger]: "#FF5252",
+  [ToastType.default]: "#313131",
+  [ToastType.info]: "#2196F3",
+  [ToastType.success]: "#1AA18F",
+  [ToastType.warning]: "#FFCC00",
 };
 
-export function createCustomToast(content: string, type: "danger" | "default" | "info" | "success" | "warning") {
+export function createCustomToast(content: string, type: ToastType) {
   const toastOptions: ToastOptions = {
     hideProgressBar: true,
     position: "top-right",
-    timeout: 5000,
+    timeout: 500000,
     showIcon: true,
     type,
     toastBackgroundColor: typeToColor[type],
@@ -25,4 +35,11 @@ export function createCustomToast(content: string, type: "danger" | "default" |
 .mosha__toast__content-wrapper {
   margin-bottom: -2px;
 }
+.mosha__icon {
+  margin-right: 6px !important;
+}
+
+.mosha__toast__content__text {
+  font-size: 14px !important;
+}
 </style>
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
index 04f33d8fe8..7cb2553fa2 100644
--- a/packages/playground/src/components/deposit_dialog.vue
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -63,7 +63,7 @@ import { useProfileManagerController } from "../components/profile_manager_contr
 import QrcodeGenerator from "../components/qrcode_generator.vue";
 import { useProfileManager } from "../stores";
 import { getGrid } from "../utils/grid";
-import { createCustomToast } from "./custom_toast.vue";
+import { createCustomToast, ToastType } from "./custom_toast.vue";
 
 const depositDialog = ref(false);
 const emits = defineEmits(["close"]);
@@ -107,13 +107,13 @@ onMounted(async () => {
     if (destroyed) return;
     const DecimalDeposit = new Decimal(receivedDeposit);
     const divisor = new Decimal(10000000);
-    createCustomToast(`You have received ${DecimalDeposit.dividedBy(divisor)} TFT`, "success");
+    createCustomToast(`You have received ${DecimalDeposit.dividedBy(divisor)} TFT`, ToastType.success);
     await ProfileManagerController.reloadBalance();
     closeDialog();
   } catch (e) {
     if (destroyed) return;
     console.log(e);
-    createCustomToast(e as string, "danger");
+    createCustomToast(e as string, ToastType.danger);
     closeDialog();
   }
 });
diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
index 06f02df0a2..5cb3dee115 100644
--- a/packages/playground/src/components/funds_card.vue
+++ b/packages/playground/src/components/funds_card.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import { ref } from "vue";
 
-import { createCustomToast } from "../components/custom_toast.vue";
+import { createCustomToast, ToastType } from "../components/custom_toast.vue";
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useProfileManager } from "../stores";
 import { getGrid } from "../utils/grid";
@@ -36,11 +36,11 @@ export default {
           await grid?.balance.getMoreFunds();
           await ProfileManagerController.reloadBalance();
           loadingAddTFT.value = false;
-          createCustomToast("Success! You have received TFTs.", "success");
+          createCustomToast("Success! You have received TFTs.", ToastType.success);
         } catch (e) {
           loadingAddTFT.value = false;
           console.log("Error: ", e);
-          createCustomToast("Get more TFT failed!", "danger");
+          createCustomToast("Get more TFT failed!", ToastType.danger);
         }
       }
     };
@@ -61,8 +61,4 @@ export default {
 :root {
   --primary: #1aa18f;
 }
-
-.mosha__toast__content-wrapper {
-  margin-bottom: -2px;
-}
 </style>
diff --git a/packages/playground/src/components/tf_notification.vue b/packages/playground/src/components/tf_notification.vue
index 859f865a03..00b4dd2374 100644
--- a/packages/playground/src/components/tf_notification.vue
+++ b/packages/playground/src/components/tf_notification.vue
@@ -11,7 +11,7 @@ import { ref } from "vue";
 
 import { useProfileManager } from "../stores";
 import { getGrid } from "../utils/grid";
-import { createCustomToast } from "./custom_toast.vue";
+import { createCustomToast, ToastType } from "./custom_toast.vue";
 
 const profileManager = useProfileManager();
 const contractsCount = ref(0);
@@ -28,7 +28,7 @@ onMounted(async () => {
     ) {
       contractsCount.value =
         contracts.nameContracts.length + contracts.nodeContracts.length + contracts.rentContracts.length;
-      createCustomToast("You have " + contractsCount.value + " contracts in grace period", "info");
+      createCustomToast("You have " + contractsCount.value + " contracts in grace period", ToastType.warning);
     }
     await new Promise(resolve => setTimeout(resolve, 15 * 60 * 1000));
   }
diff --git a/packages/playground/src/portal/bridge_view.vue b/packages/playground/src/portal/bridge_view.vue
index 27baa9ba3f..d812131258 100644
--- a/packages/playground/src/portal/bridge_view.vue
+++ b/packages/playground/src/portal/bridge_view.vue
@@ -95,7 +95,7 @@
 import { default as StellarSdk, StrKey } from "stellar-sdk";
 import { onMounted, ref } from "vue";
 
-import { createCustomToast } from "../components/custom_toast.vue";
+import { createCustomToast, ToastType } from "../components/custom_toast.vue";
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useProfileManager } from "../stores";
 import { getGrid, loadBalance } from "../utils/grid";
@@ -206,14 +206,14 @@ async function withdrawTFT(targetAddress: string, withdrawAmount: number) {
     amount.value = 0;
     loadingWithdraw.value = false;
     await ProfileManagerController.reloadBalance();
-    createCustomToast("Transaction Succeeded", "success");
+    createCustomToast("Transaction Succeeded", ToastType.success);
   } catch (e) {
     console.log("Error withdrawing, Error: ", e);
     openWithdrawDialog.value = false;
     target.value = "";
     amount.value = 0;
     loadingWithdraw.value = false;
-    createCustomToast("Withdraw Failed!", "danger");
+    createCustomToast("Withdraw Failed!", ToastType.danger);
   }
 }
 </script>
diff --git a/packages/playground/src/portal/transfer_view.vue b/packages/playground/src/portal/transfer_view.vue
index 51cb63dcec..31918f2fec 100644
--- a/packages/playground/src/portal/transfer_view.vue
+++ b/packages/playground/src/portal/transfer_view.vue
@@ -121,7 +121,7 @@ import { Keyring } from "@polkadot/keyring";
 import type { Twin } from "@threefold/tfchain_client";
 import { onMounted, ref } from "vue";
 
-import { createCustomToast } from "@/components/custom_toast.vue";
+import { createCustomToast, ToastType } from "@/components/custom_toast.vue";
 
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useProfileManager } from "../stores";
@@ -209,7 +209,7 @@ async function transfer(receipientTwin: Twin) {
   try {
     if (grid) {
       await grid.balance.transfer({ address: receipientTwin.accountId, amount: transferAmount.value });
-      createCustomToast("Transaction Complete!", "success");
+      createCustomToast("Transaction Complete!", ToastType.success);
       profileManagerController.reloadBalance();
       await getFreeBalance();
     }
@@ -223,7 +223,7 @@ async function submitFormAddress() {
   loadingAddressTransfer.value = false;
 }
 function createInvalidTransferToast(message: string) {
-  createCustomToast(message, "danger");
+  createCustomToast(message, ToastType.danger);
 }
 async function submitFormTwinID() {
   const grid = await getGrid(profile.value);

From 456026b850cb2ade25adb1091afe84f1dbe23e52 Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Mon, 9 Oct 2023 12:54:27 +0300
Subject: [PATCH 08/11] update timeout

---
 packages/playground/src/components/custom_toast.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/components/custom_toast.vue b/packages/playground/src/components/custom_toast.vue
index 3723dbffc8..2b8abaafe1 100644
--- a/packages/playground/src/components/custom_toast.vue
+++ b/packages/playground/src/components/custom_toast.vue
@@ -21,7 +21,7 @@ export function createCustomToast(content: string, type: ToastType) {
   const toastOptions: ToastOptions = {
     hideProgressBar: true,
     position: "top-right",
-    timeout: 500000,
+    timeout: 5000,
     showIcon: true,
     type,
     toastBackgroundColor: typeToColor[type],

From 96dc45d408c2ec84865a37169970c0bd205c6927 Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Mon, 9 Oct 2023 13:29:03 +0300
Subject: [PATCH 09/11] make colors more simple

---
 .../playground/src/components/custom_toast.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/playground/src/components/custom_toast.vue b/packages/playground/src/components/custom_toast.vue
index 2b8abaafe1..d58829611e 100644
--- a/packages/playground/src/components/custom_toast.vue
+++ b/packages/playground/src/components/custom_toast.vue
@@ -9,22 +9,22 @@ export enum ToastType {
   warning = "warning",
 }
 
-const typeToColor: { [key in ToastType]: string } = {
-  [ToastType.danger]: "#FF5252",
-  [ToastType.default]: "#313131",
-  [ToastType.info]: "#2196F3",
-  [ToastType.success]: "#1AA18F",
-  [ToastType.warning]: "#FFCC00",
-};
-
 export function createCustomToast(content: string, type: ToastType) {
+  const colors = {
+    danger: "#FF5252",
+    default: "#313131",
+    info: "#2196F3",
+    success: "#1AA18F",
+    warning: "#FFCC00",
+  };
+
   const toastOptions: ToastOptions = {
     hideProgressBar: true,
     position: "top-right",
     timeout: 5000,
     showIcon: true,
     type,
-    toastBackgroundColor: typeToColor[type],
+    toastBackgroundColor: colors[type],
   };
 
   createToast(content, toastOptions);

From 6849699f0635e15c4606294dd289ebf8d5a4136a Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Mon, 9 Oct 2023 14:00:52 +0300
Subject: [PATCH 10/11] move colors outside method

---
 .../playground/src/components/custom_toast.vue   | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/playground/src/components/custom_toast.vue b/packages/playground/src/components/custom_toast.vue
index d58829611e..83b2a0380e 100644
--- a/packages/playground/src/components/custom_toast.vue
+++ b/packages/playground/src/components/custom_toast.vue
@@ -9,15 +9,15 @@ export enum ToastType {
   warning = "warning",
 }
 
-export function createCustomToast(content: string, type: ToastType) {
-  const colors = {
-    danger: "#FF5252",
-    default: "#313131",
-    info: "#2196F3",
-    success: "#1AA18F",
-    warning: "#FFCC00",
-  };
+const colors = {
+  danger: "#FF5252",
+  default: "#313131",
+  info: "#2196F3",
+  success: "#1AA18F",
+  warning: "#FFCC00",
+};
 
+export function createCustomToast(content: string, type: ToastType) {
   const toastOptions: ToastOptions = {
     hideProgressBar: true,
     position: "top-right",

From 22451e4ac10626cc356e9f3842739ff97511fa98 Mon Sep 17 00:00:00 2001
From: AlaaElattar <alaamahmoud.1223@gmail.com>
Date: Mon, 9 Oct 2023 16:09:19 +0300
Subject: [PATCH 11/11] update icon position

---
 packages/playground/src/components/custom_toast.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/playground/src/components/custom_toast.vue b/packages/playground/src/components/custom_toast.vue
index 83b2a0380e..15837bf17b 100644
--- a/packages/playground/src/components/custom_toast.vue
+++ b/packages/playground/src/components/custom_toast.vue
@@ -37,6 +37,7 @@ export function createCustomToast(content: string, type: ToastType) {
 }
 .mosha__icon {
   margin-right: 6px !important;
+  margin-top: 2px;
 }
 
 .mosha__toast__content__text {