From 3ea7142b24b8237119529b4a8af017cd6e91a3ab Mon Sep 17 00:00:00 2001
From: codey <codey@code.ee>
Date: Fri, 25 Jul 2025 09:54:22 -0400
Subject: [PATCH] minor / add button to footer to get new random messages

---
 src/assets/styles/global.css |  4 ++--
 src/components/RandomMsg.jsx | 15 ++++++++++++++-
 src/layouts/Nav.astro        |  1 -
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
index 916043c..ab1f46c 100644
--- a/src/assets/styles/global.css
+++ b/src/assets/styles/global.css
@@ -244,9 +244,9 @@ Custom
 }
 
 .d-dark > * {
-  background-color: rgba(35, 35, 35, 0.9) !important;
+  background-color: rgba(35, 35, 35, 0.9);
   color: #ffffff;
 }
 .d-light > * {
-  background-color: rgba(255, 255, 255, 0.9) !important;
+  background-color: rgba(255, 255, 255, 0.9);
 }
\ No newline at end of file
diff --git a/src/components/RandomMsg.jsx b/src/components/RandomMsg.jsx
index 2aa954c..2639cfa 100644
--- a/src/components/RandomMsg.jsx
+++ b/src/components/RandomMsg.jsx
@@ -1,5 +1,7 @@
 import { API_URL } from "../config";
 import { default as $ } from "jquery";
+import ReplayIcon from '@mui/icons-material/Replay';
+
 
 var randomMsg;
 
@@ -18,10 +20,21 @@ const getRandomMsg = () => {
         });
 }
 
+window.getRandomMsg = getRandomMsg; // for global usage
+
 export default function RandomMsg() {
     getRandomMsg();
         return (
-            <div className="random-msg">
+            <div className="random-msg-container">
+                <div className="random-msg">
+                </div>
+                <button id="new-msg"
+                aria-label="New footer message"
+                type="button"
+                className="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-opacity new-msg-button"
+                onClick={() => getRandomMsg()}>
+                    <ReplayIcon size="sm" />
+                </button>                
             </div>
         ); 
 }
diff --git a/src/layouts/Nav.astro b/src/layouts/Nav.astro
index 206eee4..bfe0940 100644
--- a/src/layouts/Nav.astro
+++ b/src/layouts/Nav.astro
@@ -16,7 +16,6 @@ const currentPath = Astro.url.pathname;
 ---
 <script is:inline>
   toggleTheme = () => {
-    console.log("Toggle!")
     const currentTheme = document.documentElement.getAttribute("data-theme");
     const newTheme = currentTheme === "dark" ? "light" : "dark";
     document.dispatchEvent(new CustomEvent("set-theme", { detail: newTheme }));