fix background image on leaderboard causing issues with out things

app/components/Footer.tsx

@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer className="footer footer-center mt-auto p-5 text-accent-content shadow-xl bg-accent text-gray-700">
+    <footer className="footer footer-center z-[2] mt-auto p-5 text-accent-content shadow-xl bg-accent text-gray-700">
       <aside>
         <p className="font-bold">solXEN</p>
         <p>Copyright © 2024 - All right reserved</p>

app/components/NavBar.tsx

@@ -11,7 +11,7 @@ export const NavBar = () => {
   const { changeTheme } = React.useContext(ThemeContext);
 
   return (
-    <div className="navbar p-0 bg-base-100 shadow-xl opacity-85 flex justify-between z-[1]">
+    <div className="navbar p-0 bg-base-100 shadow-xl opacity-85 flex justify-between z-[2]">
       <a className="btn btn-link animate-none text-lg" href="/">
         <img src="/solxen-black.png" alt="solXEN Logo" className="h-10" />
       </a>
@@ -30,7 +30,7 @@ export const NavBar = () => {
           </div>
           <ul
             tabIndex={0}
-            className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
+            className="dropdown-content z-20 menu p-2 shadow bg-base-100 rounded-box w-52"
           >
             {tailwindConfig.daisyui.themes.map((theme: string) => (
               <li key={theme}>

app/globals.css

@@ -28,27 +28,6 @@ body {
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
-
-  #background-image-overlay {
-    opacity: 0.3;
-  }
-  [data-theme="dark"],
-  [data-theme="synthwave"],
-  [data-theme="forest"],
-  [data-theme="aqua"],
-  [data-theme="black"],
-  [data-theme="luxury"],
-  [data-theme="dracula"],
-  [data-theme="business"],
-  [data-theme="night"],
-  [data-theme="coffee"],
-  [data-theme="dim"],
-  [data-theme="sunset"],
-  [data-theme="halloween"] {
-    #background-image-overlay {
-      opacity: 0.1;
-    }
-  }
 }
 
 @layer utilities {
@@ -57,20 +36,17 @@ body {
   }
 }
 
-.animate-table-row {
-  opacity: 0;
-  transform: translateY(-20px);
-  transition:
-    opacity 0.4s ease,
-    transform 0.3s ease;
+.fade-in {
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
 }
 
-.animate-table-row.show {
+.fade-in-slow {
   opacity: 1;
-  transform: translateY(0);
+  transition: opacity 1s ease-in-out;
 }
 
-.fade-in {
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
+.fade-out {
+  opacity: 0;
+  transition: opacity 2s ease-in-out;
 }

app/leaderboard/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import { NavBar } from "@/app/components/NavBar";
@@ -15,9 +15,26 @@ import {
   web3,
 } from "@coral-xyz/anchor";
 import { Connection } from "@solana/web3.js";
-import StateStat from "@/app/leaderboard/StateStat";
 import CountDown from "@/app/components/CountDown";
-import { state } from "sucrase/dist/types/parser/traverser/base";
+import { ThemeContext } from "@/app/context/ThemeContext";
+import colors from "daisyui/src/theming/themes";
+import Color from "colorjs.io";
+
+const DARK_THEMES = {
+  dark: true,
+  synthwave: true,
+  forest: true,
+  aqua: true,
+  black: true,
+  luxury: true,
+  dracula: true,
+  business: true,
+  night: true,
+  coffee: true,
+  dim: true,
+  sunset: true,
+  halloween: true,
+};
 
 export interface LeaderboardEntry {
   rank: number;
@@ -97,6 +114,8 @@ function getAccountTypeFromSearchParams(
 }
 
 export default function Leaderboard() {
+  const [bgOverlayColor, setBgOverlayColor] = useState<string>();
+  const { theme } = useContext(ThemeContext);
   const searchParams = useSearchParams();
   const [accountType, setAccountType] = useState(
     getAccountTypeFromSearchParams(searchParams),
@@ -124,6 +143,19 @@ export default function Leaderboard() {
 
   const somethingIsLoading = isLeaderboardLoading || isStatsLoadingStats;
 
+  useEffect(() => {
+    // @ts-ignore
+    const sd = new Color(colors[theme]["base-100"]).to("srgb");
+    // @ts-ignore
+    if (DARK_THEMES[theme]) {
+      sd.darken(0.1);
+      sd.alpha = 0.88;
+    } else {
+      sd.alpha = 0.65;
+    }
+    setBgOverlayColor(sd.toString());
+  }, [theme]);
+
   useEffect(() => {
     setAccountType(getAccountTypeFromSearchParams(searchParams));
 
@@ -210,55 +242,59 @@ export default function Leaderboard() {
     return new Date(new Date().getTime() + stateData.avgAmpSecs * 1000);
   };
 
-  return (
-    <main className="flex min-h-screen flex-col items-center">
-      <div
-        id="background-image-overlay"
-        className="fixed h-full w-full left-0 top-0"
-      >
-        <Image
-          className={`opacity-0 ${!somethingIsLoading ? "fade-in" : ""}`}
-          alt="Background image"
-          src="/background-image.jpg"
-          fill
-          sizes="(min-width: 808px) 50vw, 100vw"
-          style={{
-            objectFit: "cover",
-          }}
-        />
-      </div>
+  const mainStyle = () => {
+    if (!somethingIsLoading) {
+      return {
+        background: `url("background-image.jpg")`,
+        backgroundAttachment: "fixed",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat",
+        boxShadow: `inset 0 0 0 1000px ${bgOverlayColor}`,
+      };
+    }
+  };
 
+  return (
+    <main
+      className="flex min-h-screen flex-col items-center"
+      style={mainStyle()}
+    >
       <NavBar />
 
       <div
-        className={`bg-secondary/60 text-secondary-content w-full grid grid-cols-2 sm:grid-cols-3 gap-2 h-[45px] md:h-[50px] opacity-0 ${!somethingIsLoading && stateData.amp > 0 ? "fade-in" : ""}`}
+        className={`fixed w-full h-full bg-base-100 ${!somethingIsLoading ? "fade-out" : ""}`}
+      />
+
+      <div
+        className={`bg-secondary/50 z-[1] w-full grid grid-cols-2 sm:grid-cols-3 gap-2 h-[45px] md:h-[50px] opacity-0 ${!somethingIsLoading && stateData.amp > 0 ? "fade-in" : ""}`}
       >
         <div className="border-r place-items-center justify-center py-0 my-0 flex">
-          <div className="text-accent-content p-0">
+          <div className="p-0">
             Zero AMP <span className="hidden md:inline">ETA</span>{" "}
             <span className="font-thin">|</span>
           </div>
-          <div className="mx-1 text-accent-content">
+          <div className="mx-1">
             <CountDown endDate={new Date(stateData.zeroAmpEta)} />
           </div>
         </div>
 
         <div className="sm:border-r justify-center place-items-center py-0 flex">
-          <div className="stat-title text-accent-content p-0">
+          <div className="p-0">
             Next AMP <span className="hidden md:inline">ETA</span>{" "}
             <span className="font-thin">|</span>
           </div>
-          <div className="mx-1 text-accent-content">
+          <div className="mx-1">
             <CountDown endDate={new Date(stateData.nextAmpEta)} />
           </div>
         </div>
 
         <div className="place-items-center justify-center py-0 hidden sm:flex">
-          <div className="stat-title text-accent-content p-0">
+          <div className="p-0">
             <span className="hidden md:inline">Average</span> AMP Time{" "}
             <span className="font-thin">|</span>
           </div>
-          <div className="mx-1 text-accent-content">
+          <div className="mx-1">
             <CountDown
               endDate={avgAmpSecsDate()}
               dontRun={true}

package.json

@@ -14,6 +14,7 @@
     "@next/env": "^14.2.3",
     "@solana/web3.js": "^1.91.8",
     "chart.js": "^4.4.2",
+    "colorjs.io": "^0.5.0",
     "flowbite": "^2.3.0",
     "flowbite-react": "^0.9.0",
     "next": "14.2.3",