The css is working again (The responsive will be optimized on a later date)

app/components/Login.tsx

@@ -3,8 +3,8 @@ import Settings from './Settings'; // Import the Settings component
 
 const Login: React.FC = () => {
   // State to handle popup visibility
-  const [showPopup, setShowPopup] = useState(false);
-  const [showSignInPopup, setShowSignInPopup] = useState(false);
+  const [showLoginPopup, setShowLoginPopup] = useState(false);
+  const [showSignUpPopup, setShowSignUpPopup] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [showSettingsPopup, setShowSettingsPopup] = useState(false);
 
@@ -12,26 +12,40 @@ const Login: React.FC = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [accountName, setAccountName] = useState('Pluto'); // Set the account name
+  const [newAccountEmail, setNewAccountEmail] = useState('');
+  const [newAccountPassword, setNewAccountPassword] = useState('');
 
-  // Function to toggle the popup
-  const togglePopup = () => setShowPopup(!showPopup);
+  // Fixed credentials
+  const fixedEmail = 'pluto@imareal.planet';
+  const fixedPassword = 'fuckTheSun1234';
+  const fixedAccount = 'Pluto';
 
-  // Function to toggle the sign-in popup
-  const toggleSignInPopup = () => {
-    setShowSignInPopup(!showSignInPopup);
-    setShowPopup(false); // Hide login popup when opening the sign-in popup
+  // Function to toggle the login popup
+  const toggleLoginPopup = () => setShowLoginPopup(!showLoginPopup);
+
+  // Function to toggle the sign-up popup
+  const toggleSignUpPopup = () => {
+    setShowSignUpPopup(!showSignUpPopup);
+    setShowLoginPopup(false); // Hide login popup when opening the sign-up popup
   };
 
   // Function to handle login
   const handleLogin = () => {
-    if ((email === 'pluto@imareal.planet' || accountName === 'Pluto') && password === 'fuckTheSun1234') {
+    if ((email === fixedEmail || accountName === fixedAccount) && password === fixedPassword) {
       setIsLoggedIn(true); // Successful login
-      setShowSignInPopup(false); // Close the sign-in popup
+      setShowLoginPopup(false); // Close the login popup
     } else {
       alert('Incorrect credentials');
     }
   };
 
+  // Function to handle account creation
+  const handleCreateAccount = () => {
+    console.log('New Account Created:', newAccountEmail, newAccountPassword);
+    alert('Account created successfully! You can now log in.');
+    toggleSignUpPopup(); // Close sign-up popup
+  };
+
   // Function to toggle the settings popup
   const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
 
@@ -39,79 +53,38 @@ const Login: React.FC = () => {
     <div>
       {/* Login or Settings Button */}
       <div className="login-button">
-        <button onClick={isLoggedIn ? toggleSettingsPopup : togglePopup}>
-          {isLoggedIn ? 'Settings' : 'Register'}
+        <button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
+          {isLoggedIn ? 'Settings' : 'Log In'}
         </button>
       </div>
 
-      {/* Conditional rendering of the initial Popup */}
-      {showPopup && (
+      {/* Conditional rendering of the Login Popup */}
+      {showLoginPopup && (
         <div className="popup-overlay">
           <div className="popup-content">
-            <h2>Register</h2>
-
-            {/* Name or Email Input */}
-            <div>
-              <input
-                type="text"
-                placeholder="Name or Email"
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-
-            {/* Password Input (displayed as asterisks) */}
-            <div>
-              <input
-                type="password"
-                placeholder="Password"
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
-
-            {/* Create Account and Sign In buttons */}
-            <div className="popup-footer">
-              <button onClick={() => alert('Create Account clicked')}>
-                Create Account
-              </button>
-              <p>
-                Already have an account? Sign in {' '}
-                <span
-                  style={{ color: 'blue', cursor: 'pointer' }}
-                  onClick={toggleSignInPopup}
-                >
-                  here
-                </span>
-              </p>
-            </div>
+            <h2>Log In</h2>
 
             {/* Close Button */}
-            <button className="close-popup" onClick={togglePopup}>
+            <button className="close-popup" onClick={toggleLoginPopup} aria-label="Close popup">
               Close
             </button>
-          </div>
-        </div>
-      )}
-
-      {/* Conditional rendering of the Sign-In Popup */}
-      {showSignInPopup && (
-        <div className="popup-overlay">
-          <div className="popup-content">
-            <h2>Sign In</h2>
 
             {/* Name or Email Input */}
             <div>
               <input
                 type="text"
                 placeholder="Name or Email"
+                value={email}
                 onChange={(e) => setEmail(e.target.value)}
               />
             </div>
 
-            {/* Password Input (displayed as asterisks) */}
+            {/* Password Input */}
             <div>
               <input
                 type="password"
                 placeholder="Password"
+                value={password}
                 onChange={(e) => setPassword(e.target.value)}
               />
             </div>
@@ -121,11 +94,56 @@ const Login: React.FC = () => {
               <button className="log-into-account" onClick={handleLogin}>Log In</button>
             </div>
 
+            {/* Text for creating an account */}
+            <p>
+              Don't have an account yet? Create one {' '}
+              <span
+                style={{ color: 'blue', cursor: 'pointer' }}
+                onClick={toggleSignUpPopup}
+              >
+                here
+              </span>
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Conditional rendering of the Sign-Up Popup */}
+      {showSignUpPopup && (
+        <div className="popup-overlay">
+          <div className="popup-content">
+            <h2>Create Account</h2>
+
+            {/* New Account Email Input */}
+            <div>
+              <input
+                type="text"
+                placeholder="Email"
+                value={newAccountEmail}
+                onChange={(e) => setNewAccountEmail(e.target.value)}
+              />
+            </div>
+
+            {/* New Account Password Input */}
+            <div>
+              <input
+                type="password"
+                placeholder="Password"
+                value={newAccountPassword}
+                onChange={(e) => setNewAccountPassword(e.target.value)}
+              />
+            </div>
+
+            {/* Create Account Button */}
+            <div>
+              <button className="create-account" onClick={handleCreateAccount}>Create Account</button>
+            </div>
+
             {/* Close Button */}
-            <button className="close-popup" onClick={toggleSignInPopup}>
+            <button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
               Close
             </button>
-          </div>
+          </div>  
         </div>
       )}