From 6720b16056db5821f6507a1b5fe47822e26c5937 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Wed, 4 Feb 2026 17:48:48 -0600
Subject: [PATCH] fix: styling and search button functionality. fix: member
 footer matches public footer

---
 src/components/MemberFooter.js        | 36 +++++++++++++++-----
 src/pages/members/MembersDirectory.js | 47 +++++++++++++++++++++++----
 2 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/src/components/MemberFooter.js b/src/components/MemberFooter.js
index 5fd1147..70d671e 100644
--- a/src/components/MemberFooter.js
+++ b/src/components/MemberFooter.js
@@ -1,20 +1,22 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lucide-react';
+import { useThemeConfig } from '@/context/ThemeConfigContext';
+import { Button } from './ui/button';
 
 const MemberFooter = () => {
+  const { getLogoUrl } = useThemeConfig();
+  const loafLogo = getLogoUrl();
   return (
-    <footer className="bg-brand-dark-lavender text-white mt-auto">
+    <footer className="bg-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)] text-white mt-auto">
       <div className="max-w-7xl mx-auto px-6 py-12">
-        <div className="grid md:grid-cols-4 gap-8">
+
+        <div className="grid md:grid-cols-5 gap-8">
           {/* Logo & About */}
           <div>
-            <h3 className="text-2xl font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-              LOAF
-            </h3>
-            <p className="text-gray-300 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              Lesbians Over Age Fifty
-            </p>
+            <div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
+              <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
+            </div>
           </div>
 
           {/* Member Resources */}
@@ -100,11 +102,27 @@ const MemberFooter = () => {
               </li>
             </ul>
           </div>
+
+          {/* donate button */}
+          <div className="flex flex-col gap-2 items-center self-start justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
+            <div className="pb-4 w-full flex justify-center lg:justify-start">
+              <Link to="/donate" className="block">
+                <Button className="bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
+                  Donate
+                </Button>
+              </Link>
+            </div>
+            <p className="text-[var(--neutral-800)] text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              LOAF is supported by<br />the Hollyfield Foundation
+            </p>
+          </div>
+
         </div>
+
       </div>
 
       {/* Bottom Bar */}
-      <div className="border-t border-[var(--purple-lavender)]">
+      <div className="bg-gradient-to-r from-[var(--purple-deep)] to-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)]">
         <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-300" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <div className="flex gap-6">
diff --git a/src/pages/members/MembersDirectory.js b/src/pages/members/MembersDirectory.js
index e0c17cb..8ec3ec5 100644
--- a/src/pages/members/MembersDirectory.js
+++ b/src/pages/members/MembersDirectory.js
@@ -108,6 +108,29 @@ const MembersDirectory = () => {
     fetchErrorMessage: 'Failed to load members directory. Please try again.',
     onFetchError: handleFetchError
   });
+  const [searchInput, setSearchInput] = useState(searchQuery);
+
+  const handleSearch = useCallback(() => {
+    const nextQuery = searchInput.trim();
+    setSearchInput(nextQuery);
+    setSearchQuery(nextQuery);
+  }, [searchInput, setSearchQuery]);
+
+  const handleClearSearch = useCallback(() => {
+    setSearchInput('');
+    setSearchQuery('');
+  }, [setSearchQuery]);
+
+  const handleSearchKeyDown = useCallback((event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleSearch();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      handleClearSearch();
+    }
+  }, [handleClearSearch, handleSearch]);
 
   useEffect(() => {
     setCurrentPage(1);
@@ -198,14 +221,26 @@ const MembersDirectory = () => {
               <Input
                 type="text"
                 placeholder="Search by name or bio..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
+                value={searchInput}
+                onChange={(e) => setSearchInput(e.target.value)}
+                onKeyDown={handleSearchKeyDown}
                 className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-brand-purple  focus:ring-brand-purple "
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               />
             </div>
-            <Button size='lg' className='self-center bg-brand-purple hover:bg-brand-purple/90 px-16'>Search</Button>
-            <Button className='text-brand-purple/80 bg-transparent hover:bg-transparent hover:underline shadow-none p-2 self-center'>Clear Search</Button>
+            <Button
+              size='lg'
+              className='self-center bg-brand-purple hover:bg-brand-purple/90 px-16'
+              onClick={handleSearch}
+            >
+              Search
+            </Button>
+            <Button
+              className='text-brand-purple/80 bg-transparent hover:bg-transparent hover:underline shadow-none p-2 self-center'
+              onClick={handleClearSearch}
+            >
+              Clear Search
+            </Button>
           </div>
           {searchQuery && (
             <p className="mt-3 text-sm ml-6 text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif " }}>
@@ -488,8 +523,8 @@ const MembersDirectory = () => {
                   onClick={() => setCurrentPage(pageNumber)}
                   className={
                     isActive
-                      ? "bg-brand-purple  text-white hover:bg-[var(--purple-ink)] rounded-full"
-                      : "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white rounded-full"
+                      ? "bg-brand-purple  text-white  rounded-full hover:bg-brand-purple"
+                      : "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white rounded-full "
                   }
                 >
                   {pageNumber}