From 235516196d127f3daa306b248ef27c3ae7744af1 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 20 Oct 2022 15:33:43 -0400
Subject: [PATCH] added toast on copy button click

---
 src/layouts/partials/clipboard-copy.html |  2 +-
 src/layouts/partials/footer.html         | 14 +++++++++
 src/layouts/partials/head.html           |  2 ++
 src/layouts/partials/toast.html          | 40 ++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/partials/toast.html

diff --git a/src/layouts/partials/clipboard-copy.html b/src/layouts/partials/clipboard-copy.html
index 2646f17..eca0f80 100644
--- a/src/layouts/partials/clipboard-copy.html
+++ b/src/layouts/partials/clipboard-copy.html
@@ -4,7 +4,7 @@
 
     <!-- The button used to copy the text -->
 
-    <button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal">copy</button>
+    <button type="button" class="clipboard-copy" id="liveToastBtn" onclick="myFunction()">copy</button>
   </div>
 <hr>
 
diff --git a/src/layouts/partials/footer.html b/src/layouts/partials/footer.html
index c3007b8..837cff8 100644
--- a/src/layouts/partials/footer.html
+++ b/src/layouts/partials/footer.html
@@ -189,3 +189,17 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     .catch(err => { throw err });
 
   </script>
+
+  <script>
+
+    const toastTrigger = document.getElementById('liveToastBtn')
+    const toastLiveExample = document.getElementById('liveToast')
+    if (toastTrigger) {
+      toastTrigger.addEventListener('click', () => {
+        const toast = new bootstrap.Toast(toastLiveExample)
+
+        toast.show()
+      })
+    }
+
+  </script>
diff --git a/src/layouts/partials/head.html b/src/layouts/partials/head.html
index bf344da..7a643db 100644
--- a/src/layouts/partials/head.html
+++ b/src/layouts/partials/head.html
@@ -101,5 +101,7 @@
 
     {{- partial "floating-join-btn.html" . -}}
 
+    {{- partial "toast.html" -}}
+
   </head>
 </head>
diff --git a/src/layouts/partials/toast.html b/src/layouts/partials/toast.html
new file mode 100644
index 0000000..5cdebdd
--- /dev/null
+++ b/src/layouts/partials/toast.html
@@ -0,0 +1,40 @@
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <i class="icon-tea-logo-iconasset-1 me-3 teal"></i>
+      <strong class="me-auto teal">Copied!</strong>
+      <small id="time"></small>
+      <button type="button" class="toast-close" data-bs-dismiss="toast" aria-label="Close">X</button>
+    </div>
+    <div class="toast-body">
+      Copied to clipboard. Now paste that command into your terminal.
+    </div>
+  </div>
+</div>
+
+<style>
+
+  #liveToast{
+    background-color:#1a1a1a !important;
+    color: white;
+    border-radius: 0px;
+    font-family: "sono";
+    border: 2px solid #949494;
+  }
+
+  .toast-header{
+    background-color:#1a1a1a;
+    color: white !important;
+  }
+
+  .toast-container{
+    z-index: 3;
+  }
+
+  .toast-close{
+    background-color: #1a1a1a;
+    color: white;
+    border: none;
+  }
+
+</style>