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/index.css

@@ -47,27 +47,114 @@ code {
     --chart-4: 280 44% 29%;
     --chart-5: 268 35% 47%;
     --radius: 0.5rem;
+
+    /* =========================
+     Brand Colors
+     ========================= */
+    --brand-dark-lavender: 267 47% 29%;
+    --brand-purple: 256 35% 47%;
+    --brand-lavender: 262 46% 80%;
+    --brand-light-lavender: 256 32% 88%;
+    --brand-white: 0 0% 100%;
+
+    --brand-dark-orange: 13 100% 42%;
+    --brand-orange: 24 86% 55%;
+    --brand-light-orange: 24 100% 67%;
+
+    --brand-pink: 324 55% 60%;
+    --dusty-pink: 323 39% 52%;
+    --dark-rose: 324 98% 32%;
+
+    /* 
+    ==========================
+      Color Patch 
+    ==========================
+     */
+
+    --blue-linkedin: #0a66c2;
+    --blue-facebook: #1877f2;
+    --blue-twitter: #1da1f2;
+    --purple-ink: #422268;
+    --purple-deep: #48286e;
+    --purple-muted: #533a82;
+    --purple-plum: #553d8a;
+    --purple-soft: #5a4290;
+    --purple-amethyst: #644c9f;
+    --purple-lilac: #664ea2;
+    --purple-lavender: #664fa3;
+    --purple-electric: #865edf;
+    --slate-dark: #3d405b;
+    --slate-muted: #6b708d;
+    --slate-600: #6b7280;
+    --slate-400: #9ca3af;
+    --slate-dark: #3d405b;
+    --slate-muted: #6b708d;
+    --slate-600: #6b7280;
+    --slate-400: #9ca3af;
+    --green-success: #4caf50;
+    --green-sage: #5a8f72;
+    --green-muted: #66927e;
+    --green-soft: #6a9680;
+    --green-eucalyptus: #6a9a83;
+    --green-fern: #6da085;
+    --green-mint: #6fa087;
+    --green-pastel: #6fa188;
+    --green-light: #81b29a;
+    --green-bg: #e8f5e9;
+    --orange-rust: #d16b54;
+    --orange-soft: #e07a5f;
+    --orange-peach: #e88a63;
+    --orange-sand: #e88d66;
+    --orange-apricot: #ff8c5a;
+    --orange-coral: #ff8c64;
+    --orange-light: #ff9e77;
+    --orange-500: #ea580c;
+    --orange-400: #fb923c;
+    --gold-soft: #e8bf7a;
+    --gold-warm: #f2cc8f;
+    --gold-soft: #e8bf7a;
+    --gold-warm: #f2cc8f;
+    --red-instagram: #e4405f;
+    --red-soft: #ffebee;
+    --lavender-100: #e8e0f5;
+    --lavender-200: #eeebf4;
+    --lavender-300: #f1eef9;
+    --lavender-400: #f9f5ff;
+    --lavender-500: #f8f7fb;
+    --lavender-600: #f9f7fc;
+    --lavender-700: #f9f8fb;
+    --lavender-800: #eaedf4;
+    --neutral-50: #fafafa;
+    --neutral-100: #f9fafb;
+    --neutral-200: #fdfcf8;
+    --neutral-300: #eae0d5;
+    --neutral-400: #c4bed8;
+    --neutral-500: #c5b4e3;
+    --neutral-600: #c5bfd9;
+    --neutral-700: #dcd7ea;
+    --neutral-800: #ddd8eb;
+    --neutral-900: #ffffff;
   }
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
+    --background: var(--brand-dark-lavender);
+    --foreground: var(--brand-light-lavender);
+    --card: var(--brand-purple);
+    --card-foreground: var(--brand-light-lavender);
+    --popover: var(--brand-purple);
+    --popover-foreground: var(--brand-light-lavender);
+    --primary: var(--brand-light-lavender);
+    --primary-foreground: var(--brand-dark-lavender);
+    --secondary: var(--brand-purple);
+    --secondary-foreground: var(--brand-light-lavender);
+    --muted: var(--brand-purple);
+    --muted-foreground: var(--brand-light-lavender);
+    --accent: var(--brand-light-lavender);
+    --accent-foreground: var(--brand-light-lavender);
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --destructive-foreground: var(--brand-light-lavender);
+    --border: var(--brand-purple);
+    --input: var(--brand-purple);
+    --ring: var(--brand-light-lavender);
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
@@ -140,3 +227,9 @@ code {
     }
   }
 }
+
+/* 
+=========================
+  End of File
+========================
+*/