fix: layout

radityaharya · Apr 26, 2024 · 507a7d3 · 507a7d3
1 parent 9f49425
commit 507a7d3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git 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
@@ -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;
diff --git 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;
 }