Skip to content

Conversation

@BrandDead
Copy link
Owner

Problem

The marketing website had two different sign-in experiences:

  • Modal-based auth (Sign In and Get Started Free buttons) - ❌ Off-center and cut off from viewport
  • Dashboard auth page (app.thelabelai.com/login) - ✅ Properly centered and professional

Solution

Updated ALL authentication buttons to use the dashboard's properly centered login page at app.thelabelai.com/login.

Changes

  • Sign In button → redirects to dashboard login page
  • GET STARTED FREE button → redirects to dashboard login page
  • SIGN UP FREE button (hero section) → redirects to dashboard login page
  • Removed all modal-based authentication (LoginModal and SignupModal)
  • Dashboard login page handles both sign-in and sign-up seamlessly

Benefits

✅ Consistent authentication experience across the platform
✅ Properly centered and responsive design
✅ Professional, polished UI
✅ Simplified codebase (no more modals)
✅ Better user experience

Testing

  • ✅ All auth buttons redirect to app.thelabelai.com/login
  • ✅ Login page is properly centered in viewport
  • ✅ Page handles both sign-in and sign-up flows

- Removed redundant Dashboard button from header
- Updated Sign In button to redirect to app.thelabelai.com/login
- Removed LoginModal usage (now using dashboard's login page)
- Kept only Sign In and GET STARTED FREE buttons in header
- Updated all auth buttons to redirect to app.thelabelai.com/login
- Sign In button → dashboard login page
- GET STARTED FREE button → dashboard login page (handles both sign-in and sign-up)
- SIGN UP FREE button in hero → dashboard login page
- Removed SignupModal and LoginModal usage completely
- Dashboard login page is properly centered and provides better UX
@vercel
Copy link

vercel bot commented Dec 8, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
thelabel-marketing Ready Ready Preview Comment Dec 8, 2025 10:04pm

@@ -1,12 +1,6 @@
import { useState } from 'react'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The LoginModal and SignupModal components are imported in the before version but removed in the after version. However, these component files still exist in the repository and are now unused orphaned code that should be deleted.

View Details
📝 Patch Details
diff --git a/src/components/LoginModal.jsx b/src/components/LoginModal.jsx
deleted file mode 100644
index 108e4d8b..00000000
--- a/src/components/LoginModal.jsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import { useState } from 'react'
-import { motion } from 'framer-motion'
-import { Button } from '../components/ui/button.jsx'
-import { Input } from '../components/ui/input.jsx'
-import { Label } from '../components/ui/label.jsx'
-import { X, Mail } from 'lucide-react'
-import AnimatedLogo from '../components/ui/AnimatedLogo.jsx'
-import AuthCard from '../components/ui/AuthCard.jsx'
-import AnimatedPasswordField from '../components/ui/AnimatedPasswordField.jsx'
-
-const LoginModal = ({ isOpen, onClose, onSwitchToSignup }) => {
-  const [formData, setFormData] = useState({
-    email: '',
-    password: ''
-  })
-  const [isAuthenticating, setIsAuthenticating] = useState(false)
-  const [isAuthenticated, setIsAuthenticated] = useState(false)
-  const [error, setError] = useState('')
-
-  if (!isOpen) return null
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setError('')
-    
-    // Basic validation
-    if (!formData.email || !formData.password) {
-      setError('Please fill in all fields')
-      return
-    }
-
-    setIsAuthenticating(true)
-    
-    try {
-      // Simulate authentication delay
-      await new Promise(resolve => setTimeout(resolve, 1500))
-      
-      // For now, accept any email/password combination for testing
-      // In production, this would call your actual auth API
-      if (formData.email && formData.password) {
-        setIsAuthenticating(false)
-        setIsAuthenticated(true)
-        
-        // Redirect to dashboard after animation completes
-        setTimeout(() => {
-          window.location.href = 'https://app.thelabelai.com/dashboard'
-        }, 2000)
-      } else {
-        throw new Error('Invalid credentials')
-      }
-    } catch (err) {
-      setError('Login failed. Please try again.')
-      setIsAuthenticating(false)
-    }
-  }
-
-  const handleInputChange = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    })
-    // Clear error when user starts typing
-    if (error) setError('')
-  }
-
-  const handlePasswordChange = (password, strength) => {
-    // This will trigger logo animations based on password input
-  }
-
-  const handleAnimationComplete = () => {
-    // Animation completed, can perform cleanup if needed
-  }
-
-  return (
-    <AuthCard
-      isVisible={isOpen}
-      isAuthenticating={isAuthenticating}
-      isAuthenticated={isAuthenticated}
-      onAnimationComplete={handleAnimationComplete}
-    >
-      {/* Close Button */}
-      <motion.button
-        onClick={onClose}
-        className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-20"
-        whileHover={{ scale: 1.1, rotate: 90 }}
-        whileTap={{ scale: 0.9 }}
-        transition={{ duration: 0.2 }}
-      >
-        <X size={24} />
-      </motion.button>
-
-      {/* Header with Animated Logo */}
-      <div className="text-center mb-8">
-        <motion.div
-          initial={{ y: -20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.2 }}
-        >
-          <AnimatedLogo
-            isAuthenticating={isAuthenticating}
-            isAuthenticated={isAuthenticated}
-            passwordLength={formData.password.length}
-            className="text-4xl mb-4"
-          />
-        </motion.div>
-        
-        <motion.h2
-          className="text-3xl font-bold text-white mb-2"
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.4 }}
-        >
-          Welcome Back
-        </motion.h2>
-        
-        <motion.p
-          className="text-gray-300"
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.6 }}
-        >
-          Sign in to access your dashboard
-        </motion.p>
-      </div>
-
-      {/* Error Message */}
-      {error && (
-        <motion.div
-          className="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300 text-sm text-center"
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-        >
-          {error}
-        </motion.div>
-      )}
-
-      {/* Form */}
-      <motion.form
-        onSubmit={handleSubmit}
-        className="space-y-6"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 0.8 }}
-      >
-        {/* Email Field */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.0 }}
-        >
-          <Label htmlFor="email" className="text-white">Email</Label>
-          <div className="relative">
-            <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              placeholder="[email protected]"
-              value={formData.email}
-              onChange={handleInputChange}
-              className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-              required
-            />
-          </div>
-        </motion.div>
-
-        {/* Password Field */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.2 }}
-        >
-          <Label htmlFor="password" className="text-white">Password</Label>
-          <AnimatedPasswordField
-            value={formData.password}
-            onChange={(e) => handleInputChange(e)}
-            placeholder="Enter your password"
-            onPasswordChange={handlePasswordChange}
-          />
-        </motion.div>
-
-        {/* Forgot Password */}
-        <motion.div
-          className="text-right"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.4 }}
-        >
-          <a href="#" className="text-[#29C5F6] hover:text-[#29C5F6]/80 text-sm">
-            Forgot password?
-          </a>
-        </motion.div>
-
-        {/* Submit Button */}
-        <motion.div
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.6 }}
-        >
-          <Button 
-            type="submit"
-            className="w-full bg-[#FF5000] hover:bg-[#FF5000]/80 text-white py-3 text-lg font-semibold"
-            disabled={isAuthenticating}
-          >
-            {isAuthenticating ? 'Authenticating...' : 'Sign In'}
-          </Button>
-        </motion.div>
-      </motion.form>
-
-      {/* Divider */}
-      <motion.div
-        className="my-6 flex items-center"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 1.8 }}
-      >
-        <div className="flex-1 border-t border-white/20"></div>
-        <span className="px-4 text-gray-400 text-sm">or</span>
-        <div className="flex-1 border-t border-white/20"></div>
-      </motion.div>
-
-      {/* Social Login */}
-      <motion.div
-        className="space-y-3"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 2.0 }}
-      >
-        <Button 
-          variant="outline"
-          className="w-full border-white/20 text-white hover:bg-white/10"
-          onClick={() => {
-            // For now, redirect directly to dashboard
-            window.location.href = 'https://app.thelabelai.com/dashboard'
-          }}
-        >
-          Continue with Google
-        </Button>
-        <Button 
-          variant="outline"
-          className="w-full border-white/20 text-white hover:bg-white/10"
-          onClick={() => {
-            // For now, redirect directly to dashboard
-            window.location.href = 'https://app.thelabelai.com/dashboard'
-          }}
-        >
-          Continue with Apple
-        </Button>
-      </motion.div>
-
-      {/* Switch to Signup */}
-      <motion.div
-        className="text-center mt-6"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 2.2 }}
-      >
-        <p className="text-gray-300">
-          Don't have an account?{' '}
-          <button
-            onClick={onSwitchToSignup}
-            className="text-[#29C5F6] hover:text-[#29C5F6]/80 font-semibold"
-          >
-            Sign up free
-          </button>
-        </p>
-      </motion.div>
-    </AuthCard>
-  )
-}
-
-export default LoginModal
-
diff --git a/src/components/SignupModal.jsx b/src/components/SignupModal.jsx
deleted file mode 100644
index 72ae2b03..00000000
--- a/src/components/SignupModal.jsx
+++ /dev/null
@@ -1,331 +0,0 @@
-import { useState } from 'react'
-import { motion } from 'framer-motion'
-import { Button } from '../components/ui/button.jsx'
-import { Input } from '../components/ui/input.jsx'
-import { Label } from '../components/ui/label.jsx'
-import { Checkbox } from '../components/ui/checkbox.jsx'
-import { X, Mail, User, Music } from 'lucide-react'
-import AnimatedLogo from '../components/ui/AnimatedLogo.jsx'
-import AuthCard from '../components/ui/AuthCard.jsx'
-import AnimatedPasswordField from '../components/ui/AnimatedPasswordField.jsx'
-
-const SignupModal = ({ isOpen, onClose, onSwitchToLogin }) => {
-  const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    password: '',
-    artistName: '',
-    agreeToTerms: false,
-    subscribeNewsletter: true
-  })
-  const [isAuthenticating, setIsAuthenticating] = useState(false)
-  const [isAuthenticated, setIsAuthenticated] = useState(false)
-  const [error, setError] = useState('')
-
-  if (!isOpen) return null
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setError('')
-    
-    // Basic validation
-    if (!formData.firstName || !formData.lastName || !formData.email || !formData.password || !formData.artistName) {
-      setError('Please fill in all required fields')
-      return
-    }
-
-    if (!formData.agreeToTerms) {
-      setError('You must agree to the terms and conditions')
-      return
-    }
-
-    setIsAuthenticating(true)
-    
-    try {
-      // Simulate signup delay
-      await new Promise(resolve => setTimeout(resolve, 1500))
-      
-      // For now, accept any valid form data for testing
-      setIsAuthenticating(false)
-      setIsAuthenticated(true)
-      
-      // Redirect to dashboard after animation completes
-      setTimeout(() => {
-        window.location.href = 'https://app.thelabelai.com/dashboard'
-      }, 2000)
-    } catch (err) {
-      setError('Signup failed. Please try again.')
-      setIsAuthenticating(false)
-    }
-  }
-
-  const handleInputChange = (e) => {
-    const { name, value, type, checked } = e.target
-    setFormData({
-      ...formData,
-      [name]: type === 'checkbox' ? checked : value
-    })
-    // Clear error when user starts typing
-    if (error) setError('')
-  }
-
-  const handlePasswordChange = (password, strength) => {
-    // This will trigger logo animations based on password input
-  }
-
-  const handleAnimationComplete = () => {
-    // Animation completed, can perform cleanup if needed
-  }
-
-  return (
-    <AuthCard
-      isVisible={isOpen}
-      isAuthenticating={isAuthenticating}
-      isAuthenticated={isAuthenticated}
-      onAnimationComplete={handleAnimationComplete}
-    >
-      {/* Close Button */}
-      <motion.button
-        onClick={onClose}
-        className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors z-20"
-        whileHover={{ scale: 1.1, rotate: 90 }}
-        whileTap={{ scale: 0.9 }}
-        transition={{ duration: 0.2 }}
-      >
-        <X size={24} />
-      </motion.button>
-
-      {/* Header with Animated Logo */}
-      <div className="text-center mb-8">
-        <motion.div
-          initial={{ y: -20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.2 }}
-        >
-          <AnimatedLogo
-            isAuthenticating={isAuthenticating}
-            isAuthenticated={isAuthenticated}
-            passwordLength={formData.password.length}
-            className="text-4xl mb-4"
-          />
-        </motion.div>
-        
-        <motion.h2
-          className="text-3xl font-bold text-white mb-2"
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.4 }}
-        >
-          Join theLABEL
-        </motion.h2>
-        
-        <motion.p
-          className="text-gray-300"
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.6 }}
-        >
-          Start your journey to musical freedom
-        </motion.p>
-      </div>
-
-      {/* Error Message */}
-      {error && (
-        <motion.div
-          className="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300 text-sm text-center"
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-        >
-          {error}
-        </motion.div>
-      )}
-
-      {/* Form */}
-      <motion.form
-        onSubmit={handleSubmit}
-        className="space-y-6"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 0.8 }}
-      >
-        {/* Name Fields */}
-        <motion.div
-          className="grid grid-cols-2 gap-4"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.0 }}
-        >
-          <div className="space-y-2">
-            <Label htmlFor="firstName" className="text-white">First Name</Label>
-            <div className="relative">
-              <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-              <Input
-                id="firstName"
-                name="firstName"
-                type="text"
-                placeholder="John"
-                value={formData.firstName}
-                onChange={handleInputChange}
-                className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-                required
-              />
-            </div>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="lastName" className="text-white">Last Name</Label>
-            <Input
-              id="lastName"
-              name="lastName"
-              type="text"
-              placeholder="Doe"
-              value={formData.lastName}
-              onChange={handleInputChange}
-              className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-              required
-            />
-          </div>
-        </motion.div>
-
-        {/* Artist Name */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.2 }}
-        >
-          <Label htmlFor="artistName" className="text-white">Artist Name</Label>
-          <div className="relative">
-            <Music className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-            <Input
-              id="artistName"
-              name="artistName"
-              type="text"
-              placeholder="Your Artist Name"
-              value={formData.artistName}
-              onChange={handleInputChange}
-              className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-              required
-            />
-          </div>
-        </motion.div>
-
-        {/* Email Field */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.4 }}
-        >
-          <Label htmlFor="email" className="text-white">Email</Label>
-          <div className="relative">
-            <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              placeholder="[email protected]"
-              value={formData.email}
-              onChange={handleInputChange}
-              className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-gray-400"
-              required
-            />
-          </div>
-        </motion.div>
-
-        {/* Password Field */}
-        <motion.div
-          className="space-y-2"
-          initial={{ x: -20, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.6 }}
-        >
-          <Label htmlFor="password" className="text-white">Password</Label>
-          <AnimatedPasswordField
-            value={formData.password}
-            onChange={(e) => handleInputChange(e)}
-            placeholder="Create a strong password"
-            onPasswordChange={handlePasswordChange}
-          />
-        </motion.div>
-
-        {/* Checkboxes */}
-        <motion.div
-          className="space-y-4"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.6, delay: 1.8 }}
-        >
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="agreeToTerms"
-              name="agreeToTerms"
-              checked={formData.agreeToTerms}
-              onChange={handleInputChange}
-              required
-            />
-            <Label htmlFor="agreeToTerms" className="text-sm text-gray-300">
-              I agree to the{' '}
-              <a href="#" className="text-[#29C5F6] hover:text-[#29C5F6]/80">
-                Terms of Service
-              </a>{' '}
-              and{' '}
-              <a href="#" className="text-[#29C5F6] hover:text-[#29C5F6]/80">
-                Privacy Policy
-              </a>
-            </Label>
-          </div>
-          
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="subscribeNewsletter"
-              name="subscribeNewsletter"
-              checked={formData.subscribeNewsletter}
-              onChange={handleInputChange}
-            />
-            <Label htmlFor="subscribeNewsletter" className="text-sm text-gray-300">
-              Subscribe to our newsletter for updates and tips
-            </Label>
-          </div>
-        </motion.div>
-
-        {/* Submit Button */}
-        <motion.div
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 2.0 }}
-        >
-          <Button 
-            type="submit"
-            className="w-full bg-[#FF5000] hover:bg-[#FF5000]/80 text-white py-3 text-lg font-semibold"
-            disabled={isAuthenticating}
-          >
-            {isAuthenticating ? 'Creating Account...' : 'Create Account'}
-          </Button>
-        </motion.div>
-      </motion.form>
-
-      {/* Switch to Login */}
-      <motion.div
-        className="text-center mt-6"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.6, delay: 2.2 }}
-      >
-        <p className="text-gray-300">
-          Already have an account?{' '}
-          <button
-            onClick={onSwitchToLogin}
-            className="text-[#29C5F6] hover:text-[#29C5F6]/80 font-semibold"
-          >
-            Sign in
-          </button>
-        </p>
-      </motion.div>
-    </AuthCard>
-  )
-}
-
-export default SignupModal
-
diff --git a/src/components/ui/AuthCard.jsx b/src/components/ui/AuthCard.jsx
deleted file mode 100644
index 5ef9505f..00000000
--- a/src/components/ui/AuthCard.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { motion, AnimatePresence } from 'framer-motion'
-import { useState, useEffect } from 'react'
-
-const AuthCard = ({ 
-  children, 
-  isVisible = true, 
-  isAuthenticating = false,
-  isAuthenticated = false,
-  onAnimationComplete = () => {}
-}) => {
-  const [isExiting, setIsExiting] = useState(false)
-
-  useEffect(() => {
-    if (isAuthenticated && !isExiting) {
-      setIsExiting(true)
-    }
-  }, [isAuthenticated, isExiting])
-
-  const cardVariants = {
-    hidden: {
-      opacity: 0,
-      scale: 0.8,
-      y: 50,
-      rotateX: -15
-    },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      y: 0,
-      rotateX: 0,
-      transition: {
-        duration: 0.6,
-        ease: "easeOut",
-        type: "spring",
-        stiffness: 100,
-        damping: 15
-      }
-    },
-    exit: {
-      opacity: 0,
-      scale: 0.8,
-      y: -100,
-      rotateX: 15,
-      transition: {
-        duration: 0.8,
-        ease: "easeIn"
-      }
-    },
-    authenticating: {
-      scale: [1, 1.02, 1],
-      rotateY: [0, 2, -2, 0],
-      transition: {
-        duration: 2,
-        repeat: Infinity,
-        ease: "easeInOut"
-      }
-    }
-  }
-
-  const backdropVariants = {
-    hidden: { opacity: 0 },
-    visible: { 
-      opacity: 1,
-      transition: { duration: 0.3 }
-    },
-    exit: { 
-      opacity: 0,
-      transition: { duration: 0.5 }
-    }
-  }
-
-  return (
-    <AnimatePresence mode="wait" onExitComplete={onAnimationComplete}>
-      {isVisible && (
-        <motion.div
-          className="fixed inset-0 z-50 flex items-center justify-center p-4"
-          variants={backdropVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-        >
-          {/* Backdrop with blur effect */}
-          <motion.div 
-            className="absolute inset-0 bg-black/60 backdrop-blur-md"
-            variants={backdropVariants}
-          />
-          
-          {/* Centered Auth Card */}
-          <motion.div
-            className="relative w-full max-w-md"
-            variants={cardVariants}
-            initial="hidden"
-            animate={isAuthenticating ? "authenticating" : "visible"}
-            exit="exit"
-            onAnimationComplete={() => {
-              if (isExiting) {
-                onAnimationComplete()
-              }
-            }}
-          >
-            {/* Card Container */}
-            <div className="relative glassmorphism rounded-2xl p-8 shadow-2xl">
-              {/* Animated border glow */}
-              <motion.div
-                className="absolute inset-0 rounded-2xl bg-gradient-to-r from-orange-500/20 via-blue-500/20 to-orange-500/20"
-                animate={{
-                  opacity: [0.3, 0.6, 0.3],
-                  scale: [1, 1.02, 1]
-                }}
-                transition={{
-                  duration: 3,
-                  repeat: Infinity,
-                  ease: "easeInOut"
-                }}
-              />
-              
-              {/* Content */}
-              <div className="relative z-10">
-                {children}
-              </div>
-            </div>
-          </motion.div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}
-
-export default AuthCard

Analysis

Orphaned modal components and supporting UI component left after auth refactoring

What fails: Three component files (LoginModal.jsx, SignupModal.jsx, and AuthCard.jsx) remain in the repository as dead code after being removed from App.jsx. These files are not imported or used anywhere in the codebase.

How to reproduce:

# Search for any imports of these components
grep -r "import.*LoginModal\|import.*SignupModal" src --include="*.jsx"
# No results found - components are orphaned

# Verify they're defined but never used
grep -r "LoginModal\|SignupModal" src --include="*.jsx"
# Only appears in their own definition files and nowhere else

What happened vs expected behavior:

  • Commit 5114457 ("Use dashboard auth page for all authentication buttons") removed all usage of LoginModal and SignupModal from App.jsx and replaced modal-based auth with external redirects to app.thelabelai.com/login
  • Commit message explicitly states "Removed SignupModal and LoginModal usage completely"
  • However, the component files themselves were never deleted from the repository
  • AuthCard.jsx (imported only by these two modal files) is also orphaned

Expected: All three orphaned component files should be deleted to complete the refactoring and remove dead code:

  • src/components/LoginModal.jsx (276 lines)
  • src/components/SignupModal.jsx (331 lines)
  • src/components/ui/AuthCard.jsx (129 lines)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants