From 85788cb9ff83af4fd3e11185a02c5d9cdddc1351 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Tue, 5 Sep 2023 16:04:34 -0400
Subject: [PATCH] minor rendering fix

---
 components/Modal/Link/LinkDetails.tsx | 6 +-----
 styles/globals.css                    | 4 ++--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 87ab06f..7ab3d52 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -76,9 +76,6 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
   useEffect(() => {
     const banner = document.getElementById("link-banner");
     const bannerInner = document.getElementById("link-banner-inner");
-    const bannerOut = document.getElementById("link-banner-outside");
-
-    if (theme === "dark") bannerOut?.classList.toggle("banner-dark-mode");
 
     if (colorPalette && banner && bannerInner) {
       banner.style.background = `linear-gradient(to right, ${rgbToHex(
@@ -124,10 +121,9 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
 
   return (
     <div
-      id="link-banner-outside"
       className={`flex flex-col gap-3 sm:w-[35rem] w-80 ${
         isOwnerOrMod ? "" : "mt-12"
-      }`}
+      } ${theme === "dark" ? "banner-dark-mode" : "banner-light-mode"}`}
     >
       {!imageError && (
         <div id="link-banner" className="link-banner h-32 -mx-5 -mt-5 relative">
diff --git a/styles/globals.css b/styles/globals.css
index f4538de..41dcd6e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -166,14 +166,14 @@
 }
 
 /* For light mode */
-.link-banner::after {
+.banner-light-mode .link-banner::after {
   background-image: linear-gradient(
     to bottom,
     rgba(255, 255, 255, 0),
     rgba(255, 255, 255, 1) 90%
   );
 }
-.link-banner::before {
+.banner-light-mode .link-banner::before {
   background-image: linear-gradient(
     to top,
     rgba(255, 255, 255, 0),