From 92c1769619effef8236641a2b361e77edef333bd Mon Sep 17 00:00:00 2001
From: James Wyndham <samwyn@xam.com.au>
Date: Wed, 5 Jun 2024 10:34:24 +0800
Subject: [PATCH] feature - added darkmode background

---
 Frontend/components/Utilities/Background.tsx  |  19 +-----------------
 Frontend/public/images/dark-gradient.webp     | Bin 0 -> 2780 bytes
 .../sections/Hero/SquaredBackgroundHero.tsx   |   2 +-
 3 files changed, 2 insertions(+), 19 deletions(-)
 create mode 100644 Frontend/public/images/dark-gradient.webp

diff --git a/Frontend/components/Utilities/Background.tsx b/Frontend/components/Utilities/Background.tsx
index 3692f42..25c6cfe 100644
--- a/Frontend/components/Utilities/Background.tsx
+++ b/Frontend/components/Utilities/Background.tsx
@@ -1,6 +1,4 @@
 "use client";
-
-import colors, { hexToRgb } from "@/utils/colors";
 import { useTheme } from "next-themes";
 import React, { ReactNode, useEffect, useState } from "react";
 import Image from "next/image";
@@ -13,28 +11,13 @@ const Background = ({
   className?: string;
 }) => {
   const { theme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <div
-        className={"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col animation-pulse " + className}
-      ></div>
-    );
-  }
-
-  const backgroundColor = hexToRgb(colors[theme!]["neutral"]);
 
   return (
     <div
       className={"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed  flex flex-col " + className}
     >
       <Image
-        src="/images/gradient.webp"
+        src={theme == "dark" ? "/images/dark-gradient.webp" : "/images/gradient.webp"}
         alt="background"
         layout="fill"
         objectFit="cover"
diff --git a/Frontend/public/images/dark-gradient.webp b/Frontend/public/images/dark-gradient.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4c09c932b2ea2b78e65056fb37c2ce585456835f
GIT binary patch
literal 2780
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

literal 0
HcmV?d00001

diff --git a/Frontend/sections/Hero/SquaredBackgroundHero.tsx b/Frontend/sections/Hero/SquaredBackgroundHero.tsx
index 9394fb5..6ee2ebb 100644
--- a/Frontend/sections/Hero/SquaredBackgroundHero.tsx
+++ b/Frontend/sections/Hero/SquaredBackgroundHero.tsx
@@ -278,7 +278,7 @@ const SquaredBackgroundHero = () => {
                   src="/images/fastpocket-diagram_352x316.webp"
                   alt="Image Description"
                 />
-                <div className="absolute inset-0 -z-[1] bg-gradient-to-tr from-gray-200 via-white/0 to-white/0 size-full rounded-md mt-4 -mb-4 me-4 -ms-4 lg:mt-6 lg:-mb-6 lg:me-6 lg:-ms-6 dark:from-slate-800 dark:via-slate-900/0 dark:to-slate-900/0" />
+                <div className="absolute inset-0 -z-[1] size-full rounded-md mt-4 -mb-4 me-4 -ms-4 lg:mt-6 lg:-mb-6 lg:me-6 lg:-ms-6" />
               </div>
               {/* End Col */}
             </div>