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/ConfirmationDialog.js

@@ -38,8 +38,8 @@ const ConfirmationDialog = ({
   const variants = {
     warning: {
       icon: AlertTriangle,
-      iconColor: 'text-[#ff9e77]',
-      confirmButtonClass: 'bg-[#ff9e77] text-white hover:bg-[#e88d66] rounded-full px-6',
+      iconColor: 'text-var(--orange-light)',
+      confirmButtonClass: 'bg-var(--orange-light) text-white hover:bg-var(--orange-sand) rounded-full px-6',
     },
     danger: {
       icon: AlertTriangle,
@@ -48,13 +48,13 @@ const ConfirmationDialog = ({
     },
     info: {
       icon: Info,
-      iconColor: 'text-[#664fa3]',
-      confirmButtonClass: 'bg-[#664fa3] text-white hover:bg-[#553d8a] rounded-full px-6',
+      iconColor: 'text-var(--purple-lavender)',
+      confirmButtonClass: 'bg-var(--purple-lavender) text-white hover:bg-var(--purple-plum) rounded-full px-6',
     },
     success: {
       icon: CheckCircle,
-      iconColor: 'text-[#81B29A]',
-      confirmButtonClass: 'bg-[#81B29A] text-white hover:bg-[#6fa188] rounded-full px-6',
+      iconColor: 'text-var(--green-light)',
+      confirmButtonClass: 'bg-var(--green-light) text-white hover:bg-var(--green-pastel) rounded-full px-6',
     },
   };
 
@@ -63,21 +63,21 @@ const ConfirmationDialog = ({
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent className="bg-white rounded-2xl border border-[#ddd8eb] p-0 overflow-hidden max-w-md">
+      <AlertDialogContent className="bg-background rounded-2xl border border-var(--neutral-800) p-0 overflow-hidden max-w-md">
         <AlertDialogHeader className="p-6 pb-4">
           <div className="flex items-start gap-4">
-            <div className={`p-3 rounded-full bg-[#F8F7FB] ${config.iconColor}`}>
+            <div className={`p-3 rounded-full bg-var(--lavender-500) ${config.iconColor}`}>
               <Icon className="h-6 w-6" />
             </div>
             <div className="flex-1">
               <AlertDialogTitle
-                className="text-xl font-semibold text-[#422268] mb-2"
+                className="text-xl font-semibold text-var(--purple-ink) mb-2"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {title}
               </AlertDialogTitle>
               <AlertDialogDescription
-                className="text-[#664fa3] text-sm leading-relaxed"
+                className="text-var(--purple-lavender) text-sm leading-relaxed"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
                 {description}
@@ -85,9 +85,9 @@ const ConfirmationDialog = ({
             </div>
           </div>
         </AlertDialogHeader>
-        <AlertDialogFooter className="p-6 pt-4 bg-[#F8F7FB] flex-row gap-3 justify-end">
+        <AlertDialogFooter className="p-6 pt-4 bg-var(--lavender-500) flex-row gap-3 justify-end">
           <AlertDialogCancel
-            className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-white rounded-full px-6"
+            className="border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-background rounded-full px-6"
             disabled={loading}
           >
             {cancelText}