From 507a7d398adef8133d4b97df3b94d1fbd7131f77 Mon Sep 17 00:00:00 2001
From: Raditya Harya <radityaharya02@gmail.com>
Date: Fri, 26 Apr 2024 19:20:46 +0700
Subject: [PATCH] fix: layout

---
 src/app/auth/[route]/page.tsx                       |  2 +-
 .../animatedBackground/GradientsBackground.tsx      | 13 +++++++++++--
 src/styles/globals.css                              |  8 ++++----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/auth/[route]/page.tsx b/src/app/auth/[route]/page.tsx
index 8dbcd22..a236a38 100644
--- a/src/app/auth/[route]/page.tsx
+++ b/src/app/auth/[route]/page.tsx
@@ -19,7 +19,7 @@ export default function Page({
 
   return (
     <div className="h-[100svh]">
-      <div className="container relative hidden h-full flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+      <div className="container relative grid h-full flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
         {/* <Link
           href={`/auth/${isLogin ? "signup" : "login"}`}
           className={cn(
diff --git a/src/components/animatedBackground/GradientsBackground.tsx b/src/components/animatedBackground/GradientsBackground.tsx
index 903344b..d34bf50 100644
--- a/src/components/animatedBackground/GradientsBackground.tsx
+++ b/src/components/animatedBackground/GradientsBackground.tsx
@@ -21,8 +21,16 @@ export const GradientBackground: React.FC<Props> = (props) => {
   }, [showGradient]);
 
   useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      canvas.style.opacity = "0";
+      setTimeout(() => {
+        canvas.style.transition = "opacity 2s";
+        canvas.style.opacity = "1";
+      }, 0);
+    }
+
     return () => {
-      const canvas = canvasRef.current;
       if (canvas) {
         const context = canvas.getContext("2d");
         if (context) {
@@ -41,4 +49,5 @@ export const GradientBackground: React.FC<Props> = (props) => {
   );
 };
 
-export default GradientBackground;
+
+export default GradientBackground;
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 7fdf024..381e3f7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -112,10 +112,10 @@
 #gradient-canvas {
   width: 100%;
   height: 100%;
-  --gradient-color-1: #020817;
-  --gradient-color-2: #020817;
-  --gradient-color-3: #020817;
-  --gradient-color-4: #2b1549;
+  --gradient-color-1: #09090b;
+  --gradient-color-2: #09090b;
+  --gradient-color-3: #09090b;
+  --gradient-color-4: #19191a;
   background-color: var(--background);
   z-index: -1;
 }