app/components/Login.tsx

@@ -11,7 +11,7 @@ const Login: React.FC = () => {
   // Credentials state
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [accountName, setAccountName] = useState(''); // Set the account name
+  const [accountName, setAccountName] = useState('');
   const [newAccountEmail, setNewAccountEmail] = useState('');
   const [newAccountPassword, setNewAccountPassword] = useState('');
   const [newAccountName, setNewAccountName] = useState('');
@@ -27,7 +27,7 @@ const Login: React.FC = () => {
   // Function to toggle the sign-up popup
   const toggleSignUpPopup = () => {
     setShowSignUpPopup(!showSignUpPopup);
-    setShowLoginPopup(false); // Hide login popup when opening the sign-up popup
+    setShowLoginPopup(false);
   };
 
   // Function to handle login
@@ -42,7 +42,8 @@ const Login: React.FC = () => {
 
   const handleLogout = () => {
     setIsLoggedIn(false);
-  }
+    setShowSettingsPopup(false); // Optionally close settings popup on logout
+  };
 
   // Function to handle account creation
   const handleCreateAccount = () => {
@@ -53,12 +54,10 @@ const Login: React.FC = () => {
 
   // Function to toggle the settings popup
   const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
-  const isStartedAsLogOut = 'false'
 
   return (
     <div>
       {/* Login or Settings Button */}
-
       <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
         {isLoggedIn ? 'Settings' : 'Log In'}
       </button>
@@ -129,13 +128,13 @@ const Login: React.FC = () => {
               />
             </div>
 
-             {/* New Account Name Input */}
-             <div>
+            {/* New Account Name Input */}
+            <div>
               <input
                 type="text"
                 placeholder="Name"
                 value={newAccountName}
-                onChange={(e) => setAccountName(e.target.value)}
+                onChange={(e) => setNewAccountName(e.target.value)}
               />
             </div>
 
@@ -158,12 +157,12 @@ const Login: React.FC = () => {
             <button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
               Close
             </button>
-          </div>  
+          </div>
         </div>
       )}
 
       {/* Conditional rendering of the Settings Popup */}
-      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName} />}
+      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName}/>}
     </div>
   );
 };

app/components/Settings.tsx

@@ -19,6 +19,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       return false; // Default to false if item is null or empty
     };
 
+    interface SettingsProps {
+      closeSettings: () => void;
+      accountName: string;
+      handleLogout: () => void; // Add this line to accept handleLogout as a prop
+    }
+
     // Active section
     const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
 
@@ -842,8 +848,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 onChange={(e) => setNewPassword(e.target.value)}
               />
             </div>
-            {/* Logout Button */}
-            
+            <div className="settings-option">
+              <button
+                onClick={() => {
+                  closeSettings(); // Optionally close settings after logout
+                }}
+                className="logout-button"
+              >
+                Logout
+              </button>
+            </div>
           </div>
         );