minor / add button to footer to get new random messages

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);
 }

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>
         ); 
 }

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 }));