From 3e253a87cc6643b59f920a4cf35d0f46854c5402 Mon Sep 17 00:00:00 2001
From: Funasitien DreamCloud <funasitien@dreamclouds.fr>
Date: Sat, 31 Aug 2024 12:21:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Toast=20Finished?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/bs-theme.css   | 20 ++++++++++++--------
 src/pages/index.astro | 15 +++++++++++++--
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/public/bs-theme.css b/public/bs-theme.css
index 49a27f3..b5ed201 100644
--- a/public/bs-theme.css
+++ b/public/bs-theme.css
@@ -74,14 +74,10 @@ DOC
   --base-dark: #5a595a;
   --bg-tone: #ced2d6;
 
-  --font-interaction: "Minecraft Ten", system-ui, -apple-system, "Segoe UI",
-    Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --bs-font-monospace: "Minecraft Ten", SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-  --font-sans-serif: "Minecraft Five", system-ui, -apple-system, "Segoe UI",
+  --font-interaction: "Minecraft Five", system-ui, -apple-system, "Segoe UI",
     Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans-serif: var(--bs-font-sans-serif);
   --bs-font-monospace: "Minecraft Ten", SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
   --bs-border-radius: 0;
@@ -144,6 +140,11 @@ body {
   background-color: var(--bg-tone);
 }
 
+.toast-header {
+  font-family: var(--font-interaction);
+  color: var(--font)
+}
+
 .outline {
   outline: 4px solid var(--outline);
   border-bottom: 8px solid var(--base-dark);
@@ -151,7 +152,8 @@ body {
 
 .card,
 .alert,
-.dropdown-menu {
+.dropdown-menu,
+.toast {
   padding: 1rem;
   background-color: var(--base-tone);
   outline: 4px solid var(--outline);
@@ -161,6 +163,8 @@ body {
   color: var(--font);
   --bs-dropdown-border-color: none;
   --bs-dropdown-link-hover-bg: var(--base-light);
+  --bs-toast-border-color: none;
+  --bs-toast-header-bg: var(--base-light);
 }
 
 .modal-content {
@@ -395,4 +399,4 @@ body {
   border-block: 4px solid var(--white-light);
   border-radius: 0;
   color: var(--black-tone);
-}
+}
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f07292f..3a092dd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Bootstrap from "../layouts/Bootstrap.astro";
 import Form from "../components/Form.astro";
+import bootstrap from "bootstrap";
 ---
 
 <Bootstrap title="Index" theme="dark">
@@ -218,7 +219,8 @@ import Form from "../components/Form.astro";
       </div>
     </div>
 
-    <div class="toast-container position-fixed top-0 end-0 p-3">
+    <div
+      class="toast-container position-fixed top-0 end-0 p-3">
       <div
         id="liveToast"
         class="toast"
@@ -294,7 +296,16 @@ import Form from "../components/Form.astro";
     <div class="card-body"><Form /></div>
   </div>
 
-  <script is:inline>
+  <script type="importmap">
+    {
+      "imports": {
+        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js",
+        "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.esm.min.js"
+      }
+    }
+  </script>
+
+  <script type="module">
     const toastTrigger = document.getElementById("liveToastBtn");
     const toastLiveExample = document.getElementById("liveToast");