refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming

- Updated color classes to use CSS variables for better maintainability and theming.
- Refactored component styles in MembersDirectory.js to enhance visual consistency.
- Adjusted loading states and empty states in NewsletterArchive.js for improved user experience.
- Added new brand colors to tailwind.config.js for future use.

src/components/AdminSidebar.js

@@ -211,10 +211,10 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           className={`
             flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
             ${item.disabled
-              ? 'opacity-50 cursor-not-allowed text-[#664fa3]'
+              ? 'opacity-50 cursor-not-allowed text-var(--purple-lavender)'
               : active
-                ? 'bg-[#ff9e77]/10 text-[#ff9e77]'
-                : 'text-[#422268] hover:bg-[#DDD8EB]/20'
+                ? 'bg-var(--orange-light)/10 text-var(--orange-light)'
+                : 'text-var(--purple-ink) hover:bg-var(--neutral-800)/20'
             }
           `}
         >
@@ -229,7 +229,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             <>
               <span className="flex-1">{item.name}</span>
               {item.disabled && (
-                <Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
+                <Badge className="bg-var(--neutral-800) text-var(--purple-ink) text-xs px-2 py-0.5">
                   Soon
                 </Badge>
               )}
@@ -265,7 +265,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       {/* Sidebar */}
       <aside
         className={`
-          bg-white border-r border-[#ddd8eb] transition-all duration-300 ease-out
+          bg-background border-r border-var(--neutral-800) transition-all duration-300 ease-out
           ${isMobile ? 'fixed inset-y-0 left-0 z-40' : 'relative'}
           ${isOpen ? 'w-64' : 'w-16'}
           ${isMobile && !isOpen ? '-translate-x-full' : 'translate-x-0'}
@@ -273,7 +273,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
         `}
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-[#ddd8eb]">
+        <div className="flex items-center justify-between p-4 border-b border-var(--neutral-800)">
           <Link to="/" className="flex items-center gap-3 group flex-1 min-w-0">
             <img
               src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
@@ -294,7 +294,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           </Link>
           <button
             onClick={onToggle}
-            className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors"
+            className="p-2 rounded-lg hover:bg-var(--neutral-800)/20 transition-colors"
             aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
           >
             {isMobile ? (
@@ -376,11 +376,11 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
         </nav>
 
         {/* User Section */}
-        <div className="border-t border-[#ddd8eb] p-4 space-y-2">
+        <div className="border-t border-var(--neutral-800) p-4 space-y-2">
           {isOpen && user && (
             <div className="px-4 py-3 mb-2 flex justify-between items-center">
               <div className="flex items-center gap-3">
-                <div className="h-10 w-10 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold">
+                <div className="h-10 w-10 rounded-full bg-var(--neutral-800) flex items-center justify-center text-var(--purple-ink) font-semibold">
                   {user.first_name?.[0]}{user.last_name?.[0]}
                 </div>
                 <div className="flex-1 min-w-0">
@@ -427,16 +427,16 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* Storage Usage Widget */}
           <div className="mb-2">
             {isOpen ? (
-              <div className="px-4 py-3 bg-[#F8F7FB] rounded-lg">
+              <div className="px-4 py-3 bg-var(--lavender-500) rounded-lg">
                 <div className="flex items-center justify-between mb-2">
                   <span className="text-sm font-medium text-primary">Storage Usage</span>
                   <span className="text-xs text-muted-foreground">{storagePercentage}%</span>
                 </div>
-                <div className="w-full bg-[#ddd8eb] rounded-full h-2">
+                <div className="w-full bg-var(--neutral-800) rounded-full h-2">
                   <div
                     className={`h-2 rounded-full transition-all ${storagePercentage > 90 ? 'bg-red-500' :
                       storagePercentage > 75 ? 'bg-yellow-500' :
-                        'bg-[#81B29A]'
+                        'bg-var(--green-light)'
                       }`}
                     style={{ width: `${storagePercentage}%` }}
                   />