From 5ba65a0861cd1a9c3984eabc55ca3fede27b4b95 Mon Sep 17 00:00:00 2001
From: dereklseitz <derekseitz@dsnet.works>
Date: Sun, 28 Sep 2025 15:02:57 -0500
Subject: [PATCH] feat: add animation to LoginPage

---
 src/App.jsx                     |  2 +-
 src/assets/css/App.css          | 13 ++++++
 src/components/UI/Copyright.jsx | 24 ++++++++++-
 src/pages/Login.jsx             | 76 ++++++++++++++++++++++++++++++---
 4 files changed, 107 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c4928bc..63a6855 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -57,7 +57,7 @@ function App() {
           )}
         </IconsContext.Provider>
       </div>
-      <Copyright />
+      <Copyright isLoginPage={location.pathname === '/login'} />
     </div>
   );
 }
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index 49a0137..e1f42f3 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -46,3 +46,16 @@
 .read-the-docs {
   color: #888;
 }
+
+/* Copyright transition styles */
+.copyright-login {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.copyright-normal {
+  position: relative;
+  transform: none;
+}
diff --git a/src/components/UI/Copyright.jsx b/src/components/UI/Copyright.jsx
index 8de31a2..669b1f8 100644
--- a/src/components/UI/Copyright.jsx
+++ b/src/components/UI/Copyright.jsx
@@ -1,12 +1,32 @@
 // Copyright.jsx
-import React from "react";
+import React, { useState, useEffect } from "react";
+
+export default function Copyright({ isLoginPage }) {
+  const [isCentered, setIsCentered] = useState(true);
+
+  useEffect(() => {
+    if (isLoginPage) {
+      // On login page, start centered then transition to bottom
+      const timer = setTimeout(() => {
+        setIsCentered(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    } else {
+      // Not on login page, go to bottom immediately
+      setIsCentered(false);
+    }
+  }, [isLoginPage]);
 
-export default function Copyright() {
   return (
     <div
       style={{
         textAlign: "center",
         marginTop: "1rem",
+        transition: "all 0.8s ease-in-out",
+        position: "fixed",
+        top: isCentered ? "65%" : "90%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
       }}
     >
       <p>
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index f069e25..3f9254f 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,13 +1,79 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import LoginComponent from '../components/LoginComponent';
 import Logo from '../assets/images/campfire_logs_square_logo_bg_match.png';
 
 const LoginPage = React.forwardRef(({ onLogin }, ref) => {
+    const [showLogin, setShowLogin] = useState(false);
+    const [isTransitioning, setIsTransitioning] = useState(true);
+
+    useEffect(() => {
+        // Prevent scrollbar during initial load
+        document.body.style.overflow = 'hidden';
+        
+        // First transition: move logo and copyright to final positions
+        const transitionTimer = setTimeout(() => {
+            setIsTransitioning(false);
+        }, 800); // Match copyright transition timing
+
+        // Second: fade in login component after transition completes
+        const loginTimer = setTimeout(() => {
+            setShowLogin(true);
+        }, 1500); // Give copyright more time to transition
+
+        // Re-enable scrolling after everything is completely done
+        const scrollTimer = setTimeout(() => {
+            document.body.style.overflow = 'auto';
+        }, 2000); // After all transitions complete
+
+        return () => {
+            clearTimeout(transitionTimer);
+            clearTimeout(loginTimer);
+            clearTimeout(scrollTimer);
+            // Cleanup: restore scrolling if component unmounts
+            document.body.style.overflow = 'auto';
+        };
+    }, []);
+
     return (
-        <div ref={ref} style={{ textAlign: 'center', width: '400px', margin: '0 auto' }}>
-            <img src={Logo} alt="Campfire Logs Logo" width="350" height="280" style={{ display: 'block', margin: '0 auto' }} />
-            <hr style={{ backgroundColor: '#edbd7d', height: '2px', border: 'none', width: '400px', margin: '5px auto 25px auto' }}/>            
-            <LoginComponent onLogin={onLogin} />
+        <div 
+            ref={ref} 
+            style={{ 
+                textAlign: 'center', 
+                width: '400px', 
+                margin: '0 auto',
+                transition: 'all 0.8s ease-in-out',
+                transform: isTransitioning ? 'translateY(150px)' : 'translateY(30px)',
+                overflow: 'hidden'
+            }}
+        >
+            <img 
+                src={Logo} 
+                alt="Campfire Logs Logo" 
+                width="350" 
+                height="280" 
+                style={{ 
+                    display: 'block', 
+                    margin: '0 auto',
+                    transition: 'all 0.8s ease-in-out'
+                }} 
+            />
+            <hr style={{ 
+                backgroundColor: '#edbd7d', 
+                height: '2px', 
+                border: 'none', 
+                width: '400px', 
+                margin: '5px auto 25px auto'
+            }}/>            
+            <div style={{ 
+                opacity: showLogin ? 1 : 0, 
+                transition: 'opacity 0.5s ease-in-out',
+                visibility: showLogin ? 'visible' : 'hidden',
+                position: 'relative',
+                width: '100%',
+                marginTop: '20px'
+            }}>
+                <LoginComponent onLogin={onLogin} />
+            </div>
         </div>
     );
 });